<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>