feat(alerting): adds alert history page

pkg/api/api.go

@@ -239,8 +239,8 @@ func Register(r *macaron.Macaron) {
 		r.Get("/metrics/test", GetTestMetrics)
 
 		r.Group("/alerts", func() {
-			r.Get("/state/:alertId", wrap(GetAlertState))
-			r.Put("/state/:alertId", bind(m.UpdateAlertStateCommand{}), wrap(PutAlertState))
+			r.Get("/events/:alertId", wrap(GetAlertState))
+			r.Put("/events/:alertId", bind(m.UpdateAlertStateCommand{}), wrap(PutAlertState))
 			r.Get("/changes", wrap(GetAlertChanges))
 			r.Get("/", wrap(GetAlerts))
 			r.Get("/:id", ValidateOrgAlert, wrap(GetAlert))

pkg/services/sqlstore/alert_state.go

@@ -50,7 +50,7 @@ func SetNewAlertState(cmd *m.UpdateAlertStateCommand) error {
 func GetAlertStateLogByAlertId(cmd *m.GetAlertsStateLogCommand) error {
 	alertLogs := make([]m.AlertStateLog, 0)
 
-	if err := x.Where("alert_id = ?", cmd.AlertId).Find(&alertLogs); err != nil {
+	if err := x.Where("alert_id = ?", cmd.AlertId).Desc("created").Find(&alertLogs); err != nil {
 		return err
 	}
 

public/app/core/routes/routes.ts

@@ -204,6 +204,12 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controllerAs: 'ctrl',
     resolve: loadAlertsBundle,
   })
+  .when('/alerts/events/:alertId', {
+    templateUrl: 'public/app/features/alerts/partials/alert_log.html',
+    controller: 'AlertLogCtrl',
+    controllerAs: 'ctrl',
+    resolve: loadAlertsBundle,
+  })
   .otherwise({
     templateUrl: 'public/app/partials/error.html',
     controller: 'ErrorCtrl'

public/app/features/alerts/alert_log_ctrl.ts

@@ -0,0 +1,33 @@
+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import _ from 'lodash';
+import coreModule from '../../core/core_module';
+import config from 'app/core/config';
+
+export class AlertLogCtrl {
+
+  alertLogs: any;
+  alert: any;
+  alertId: any;
+
+  /** @ngInject */
+  constructor(private $route, private backendSrv) {
+    if ($route.current.params.alertId) {
+      this.alertId = $route.current.params.alertId;
+      this.loadAlertLogs();
+    }
+  }
+
+  loadAlertLogs() {
+    this.backendSrv.get('/api/alerts/events/' + this.alertId).then(result => {
+      this.alertLogs = result;
+    });
+
+    this.backendSrv.get('/api/alerts/' + this.alertId).then(result => {
+      this.alert = result;
+    });
+  }
+}
+
+coreModule.controller('AlertLogCtrl', AlertLogCtrl);

public/app/features/alerts/alerts_ctrl.ts

@@ -8,15 +8,14 @@ import config from 'app/core/config';
 export class AlertPageCtrl {
 
   alerts: any;
+
   /** @ngInject */
-  constructor(private $scope, private backendSrv) {
-    console.log('ctor!');
+  constructor(private backendSrv) {
     this.loadAlerts();
   }
 
   loadAlerts() {
     this.backendSrv.get('/api/alerts').then(result => {
-      console.log(result);
       this.alerts = result;
     });
   }

public/app/features/alerts/all.ts

@@ -1,2 +1,3 @@
 import './alerts_ctrl';
+import './alert_log_ctrl';
 

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

@@ -0,0 +1,29 @@
+<navbar icon="fa fa-fw fa-list" title="Alerts" title-url="alerts">
+</navbar>
+
+<div class="page-container" >
+  <div class="page-header">
+    <h1>Alert history for {{ctrl.alert.title}}</h1>
+  </div>
+
+  <table class="filter-table">
+    <thead>
+      <th style="width: 68px"></th>
+      <th><strong>Time</strong></th>
+      <th>Description</th>
+    </thead>
+    <tr ng-repeat="alertLog in ctrl.alertLogs">
+      <td>
+        {{alertLog.newState}}
+      </td>
+      <td>
+        {{alertLog.created}}
+      </td>
+      <td>
+        {{alertLog.info}}
+      </td>
+    </tr>
+  </table>
+</div>
+
+

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

@@ -18,7 +18,9 @@
 				{{alert.title}}
       </td>
       <td>
-				{{alert.state}}
+				<a href="/alerts/events/{{alert.id}}" class="btn btn-inverse btn-small">
+          {{alert.state}}
+        </a>
       </td>
       <td class="text-center">
 				<a href="/dashboard/{{alert.dashboardUri}}" class="btn btn-inverse btn-small">