From ecfbc2edca2cda98497014f1f86392983f16b0b7 Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Thu, 28 Apr 2016 11:42:03 +0200
Subject: [PATCH] feat(alerting): adds alert history page

---
 pkg/api/api.go                                |  4 +--
 pkg/services/sqlstore/alert_state.go          |  2 +-
 public/app/core/routes/routes.ts              |  6 ++++
 public/app/features/alerts/alert_log_ctrl.ts  | 33 +++++++++++++++++++
 public/app/features/alerts/alerts_ctrl.ts     |  5 ++-
 public/app/features/alerts/all.ts             |  1 +
 .../features/alerts/partials/alert_log.html   | 29 ++++++++++++++++
 .../features/alerts/partials/alerts_page.html |  4 ++-
 8 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 public/app/features/alerts/alert_log_ctrl.ts
 create mode 100644 public/app/features/alerts/partials/alert_log.html

diff --git a/pkg/api/api.go b/pkg/api/api.go
index b519cd92303..f6e321b1b21 100644
--- a/pkg/api/api.go
+++ b/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))
diff --git a/pkg/services/sqlstore/alert_state.go b/pkg/services/sqlstore/alert_state.go
index 54a67c4aa71..86544d04fd5 100644
--- a/pkg/services/sqlstore/alert_state.go
+++ b/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
 	}
 
diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts
index 899310c9c2b..a5c66860ebe 100644
--- a/public/app/core/routes/routes.ts
+++ b/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'
diff --git a/public/app/features/alerts/alert_log_ctrl.ts b/public/app/features/alerts/alert_log_ctrl.ts
new file mode 100644
index 00000000000..191f6337e99
--- /dev/null
+++ b/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);
diff --git a/public/app/features/alerts/alerts_ctrl.ts b/public/app/features/alerts/alerts_ctrl.ts
index 9a6ba927f01..404017c4954 100644
--- a/public/app/features/alerts/alerts_ctrl.ts
+++ b/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;
     });
   }
diff --git a/public/app/features/alerts/all.ts b/public/app/features/alerts/all.ts
index ef94f49e82f..9ac8dcafb9b 100644
--- a/public/app/features/alerts/all.ts
+++ b/public/app/features/alerts/all.ts
@@ -1,2 +1,3 @@
 import './alerts_ctrl';
+import './alert_log_ctrl';
 
diff --git a/public/app/features/alerts/partials/alert_log.html b/public/app/features/alerts/partials/alert_log.html
new file mode 100644
index 00000000000..3fb4a805854
--- /dev/null
+++ b/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>
+
+
diff --git a/public/app/features/alerts/partials/alerts_page.html b/public/app/features/alerts/partials/alerts_page.html
index 2f0323a45e7..baf4c1b9221 100644
--- a/public/app/features/alerts/partials/alerts_page.html
+++ b/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">