feat(alerting): add gf icons for alerts page

public/app/features/alerts/alert_log_ctrl.ts

@@ -23,11 +23,10 @@ export class AlertLogCtrl {
 
   loadAlertLogs() {
     this.backendSrv.get('/api/alerts/events/' + this.alertId).then(result => {
-      this.alertLogs = result;
-
-      _.each(this.alertLogs, log => {
+      this.alertLogs = _.map(result, log => {
         log.iconCss = alertDef.getCssForState(log.newState);
         log.humanTime = moment(log.created).format("YYYY-MM-DD HH:mm:ss");
+        return log;
       });
     });
 

public/app/features/alerts/alerts_ctrl.ts

@@ -4,6 +4,7 @@ import angular from 'angular';
 import _ from 'lodash';
 import coreModule from '../../core/core_module';
 import config from 'app/core/config';
+import alertDef from './alert_def';
 
 export class AlertPageCtrl {
 
@@ -16,7 +17,10 @@ export class AlertPageCtrl {
 
   loadAlerts() {
     this.backendSrv.get('/api/alerts').then(result => {
-      this.alerts = result;
+      this.alerts = _.map(result, alert => {
+        alert.iconCss = alertDef.getCssForState(alert.state);
+        return alert;
+      });
     });
   }
 }

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

@@ -9,8 +9,8 @@
   <table class="filter-table">
     <thead>
       <th><strong>Name</strong></th>
-      <th style="width: 68px"></th>
-      <th style="width: 68px"></th>
+      <th style="width: 68px">State</th>
+      <th style="width: 122px"></th>
       <th style="width: 28px"></th>
     </thead>
     <tr ng-repeat="alert in ctrl.alerts">
@@ -18,8 +18,8 @@
 				{{alert.title}}
       </td>
       <td>
-				<a href="/alerts/events/{{alert.id}}" class="btn btn-inverse btn-small">
-          {{alert.state}}
+				<a href="/alerts/events/{{alert.id}}">
+          <i class="icon-gf {{alert.iconCss}}"></i>
         </a>
       </td>
       <td class="text-center">