Asymmetrik/mean2-starter

<section>

    <h3 class="page-header">
        Cache Entries
        <small>Administer Cache Entries</small>
    </h3>

    <!-- Alert Notifications -->
    <alert *ngFor="let alert of alertService.getAlerts(); let i = index" [type]="alert.type" (close)="alertService.clear(i)" dismissible="true" >{{alert.msg}}</alert>

    <!-- Search Input -->
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <input placeholder="Search key and value..." type="text" class="form-control input-sm" [(ngModel)]="search" (keyup.enter)="applySearch()">
                <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="button" (click)="applySearch()">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>

    <pageable-table [items]="cacheEntries"
        [pagingOptions]="pagingOpts"
        [sortOptions]="sortOpts"
        (onPageChange)="goToPage($event)"
        (onSortChange)="setSort($event)">

        <template asy-template="table-header">
            <th>Key</th>
            <th>Value</th>
            <th>Timestamp</th>
            <th>&nbsp;</th>
        </template>

        <template asy-template="table-row" let-cacheEntry>
            <td>{{cacheEntry.entry.key}}</td>
            <td class="hide-overflow" style="max-width: 300px;">{{cacheEntry.entry.value | json}}</td>
            <td><span [attr.title]="cacheEntry.entry.ts | utcDate">{{cacheEntry.entry.ts | agoDate:false}}</span></td>
            <td style="width: 120px;">
                <div class="pull-right">
                    <button title="View Entry" type="button" class="btn btn-default btn-sm" (click)="viewCacheEntry(cacheEntry)"><span class="fa fa-eye"></span></button>
                    <button title="Refresh Entry" type="button" class="btn btn-default btn-sm" [disabled]="cacheEntry.isRefreshing" (click)="refreshCacheEntry(cacheEntry)"><span class="fa fa-refresh"></span></button>
                    <button title="Delete Entry" type="button" class="btn btn-danger btn-sm" (click)="confirmDeleteEntry(cacheEntry)"><span class="fa fa-trash-o"></span></button>
                </div>
            </td>
        </template>

        <template asy-template="empty-table">
            <h3>
                <small>No Cache Entries matched your search</small>
            </h3>
        </template>

    </pageable-table>

</section>