client/app/components/dashboard/alerts/alerts.html
<md-card>
<md-card-content>
<md-card>
<md-toolbar class="md-warn">
<div class="md-toolbar-tools">
<h2 class="md-flex">System Alerts</h2>
</div>
</md-toolbar>
<md-content md-theme="docs-dark" layout-padding layout="row" layout-sm="column">
<md-input-container >
<label>Filter</label>
<input ng-model="alertsCtrl.displayControl.filter">
</md-input-container>
<md-switch class="md-warn" ng-model="alertsCtrl.displayControl.displayFrozen" aria-label="Freeze Switch">
<label class="light-text">
{{alertsCtrl.displayControl.displayFrozen?'Unfreeze Display':'Freeze Display'}}
</label>
</md-switch>
</md-content>
<md-content id="events-viewer" md-theme="docs-dark" layout-padding layout="column">
<md-list style="max-height: 300px">
<md-list-item layout="row" layout-wrap layout-align="start center"
ng-repeat="alert in alertsCtrl.alerts | filter:{description: alertsCtrl.displayControl.filter}">
<span ng-class-odd="'light-text-odd'" ng-class-even="'light-text-even'">
<md-icon md-svg-icon="assets/img/icons/ic_error_24px.svg" style="color:red"
ng-show="alert.type==='error'"></md-icon>
<md-icon md-svg-icon="assets/img/icons/ic_warning_24px.svg" style="color:darkorange"
ng-show="alert.type==='warning'"></md-icon>
<md-icon md-svg-icon="assets/img/icons/ic_info_24px.svg" style="color:#003cb3;"
ng-show="alert.type==='info'"></md-icon>
<strong>{{alert.ts}}</strong> {{alert.description}}
</span>
</md-list-item>
</md-list>
</md-content>
</md-card-content>
</md-card>