feat(alerting): add gf icons for alert state page

public/app/features/alerts/alert_def.ts

@@ -0,0 +1,19 @@
+///<reference path="../../headers/common.d.ts" />
+
+//import _ from 'lodash';
+
+var alertStateToCssMap = {
+  "OK": "icon-gf-online",
+  "WARN": "icon-gf-warn",
+  "CRITICAL": "icon-gf-critical",
+  "ACKNOWLEDGED": "icon-gf-alert-disabled"
+
+};
+
+function getCssForState(alertState) {
+  return alertStateToCssMap[alertState];
+}
+
+export default {
+  getCssForState
+};

public/app/features/alerts/alert_log_ctrl.ts

@@ -4,6 +4,8 @@ import angular from 'angular';
 import _ from 'lodash';
 import coreModule from '../../core/core_module';
 import config from 'app/core/config';
+import alertDef from './alert_def';
+import moment from 'moment';
 
 export class AlertLogCtrl {
 
@@ -22,6 +24,11 @@ export class AlertLogCtrl {
   loadAlertLogs() {
     this.backendSrv.get('/api/alerts/events/' + this.alertId).then(result => {
       this.alertLogs = result;
+
+      _.each(this.alertLogs, log => {
+        log.iconCss = alertDef.getCssForState(log.newState);
+        log.humanTime = moment(log.created).format("YYYY-MM-DD HH:mm:ss");
+      });
     });
 
     this.backendSrv.get('/api/alerts/' + this.alertId).then(result => {

public/app/features/alerts/partials/alert_log.html

@@ -9,15 +9,15 @@
   <table class="filter-table">
     <thead>
       <th style="width: 68px">Status</th>
-      <th><strong>Time</strong></th>
+      <th style="width: 160px">Time</th>
       <th>Description</th>
     </thead>
     <tr ng-repeat="alertLog in ctrl.alertLogs">
       <td>
-        {{alertLog.newState}}
+        <i class="icon-gf {{alertLog.iconCss}}"></i>
       </td>
       <td>
-        {{alertLog.created}}
+        {{alertLog.humanTime}}
       </td>
       <td>
         {{alertLog.info}}