<div class="ui-g-12 ui-md-6"> <div class="card ui-g"> <h3>Metric Alert</h3> <div class="ui-g-12 ui-xl-8 ui-xl-offset-4 ui-g-nopad"> <div class="ui-g-3"> <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>All : 13 </div> <div class="ui-g-3"> <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Down : 3 </div> <div class="ui-g-3"> <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn : 5 </div> <div class="ui-g-3"> <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error : 5 </div> </div> <div class="ui-g-12 form-group"> <p-dataList [value]="metricAlerts" [paginator]="true" [rows]="5"> <ng-template let-alert pTemplate="alert"> <div [ngStyle]="{'padding':'5px', 'border-style':'solid', 'border-width':'0 0 1px 0', 'border-color': bgMap.get(alert.status)}" class="clearfix"> <div class="ui-g-3">{{alert.created}}</div> <div class="ui-g-7"> <i class="fa ui-icon-stop ui-status-icon ui-status-{{bgMap.get(alert.status)}}"></i>{{alert.msg}} </div> <div class="ui-g-2" [ngStyle]="{'font-color': bgMap.get(alert.status)}">{{alert.status}}</div> </div> </ng-template> </p-dataList> </div> </div> </div> <div class="ui-g-12 ui-md-6"> <div class="card ui-g"> <div class="ui-g-12"> <h3>System Alert</h3> <p-dataList [value]="systemAlerts" [paginator]="true" [rows]="5"> <ng-template let-alert pTemplate="alert"> <div style="border-bottom: 1px solid #bdbdbd; padding: 7px" class="clearfix"> <div class="ui-g-3">{{alert.created}}</div> <div class="ui-g-7"> {{alert.msg}} </div> <div class="ui-g-2">{{alert.status}}</div> </div> </ng-template> </p-dataList> </div> </div> </div>