Add alert view to UI

ui/app/js/app.js

@@ -14,6 +14,14 @@ angular.module('am.services').factory('Silence',
   }
 );
 
+angular.module('am.services').factory('Alert',
+  function($resource){
+    return $resource('', {}, {
+      'query':  {method: 'GET', url: '/api/v1/alerts'}
+    });
+  }
+);
+
 angular.module('am.controllers', []);
 
 angular.module('am.controllers').controller('NavCtrl',
@@ -30,6 +38,26 @@ angular.module('am.controllers').controller('NavCtrl',
   }
 );
 
+angular.module('am.controllers').controller('AlertsCtrl',
+  function($scope, Alert) {
+    $scope.alerts = [];
+    $scope.order = "startsAt";
+
+    $scope.refresh = function() {
+      Alert.query({},
+        function(data) {
+          $scope.alerts = data.data || [];
+        },
+        function(data) {
+
+        }
+      );
+    }
+
+    $scope.refresh();
+  }
+);
+
 angular.module('am.controllers').controller('SilencesCtrl',
   function($scope, Silence) {
     $scope.silences = [];
@@ -57,21 +85,6 @@ angular.module('am.controllers').controller('SilencesCtrl',
 
 angular.module('am.controllers').controller('SilenceCreateCtrl',
   function($scope, Silence) {
-    var now = new Date(),
-        end = new Date();
-
-    now.setMilliseconds(0);
-    end.setMilliseconds(0);
-    now.setSeconds(0);
-    end.setSeconds(0);
-
-    end.setHours(end.getHours() + 2)
-
-    $scope.silence = {
-      startsAt: now,
-      endsAt: end,
-      matchers: [{}]
-    }
 
     $scope.create = function() {
       Silence.create($scope.silence,
@@ -92,7 +105,27 @@ angular.module('am.controllers').controller('SilenceCreateCtrl',
     $scope.delMatcher = function(i) {
       $scope.silence.matchers.splice(i, 1);
     }
+    $scope.reset = function() {
+      var now = new Date(),
+          end = new Date();
 
+      now.setMilliseconds(0);
+      end.setMilliseconds(0);
+      now.setSeconds(0);
+      end.setSeconds(0);
+
+      end.setHours(end.getHours() + 2)
+
+      $scope.silence = {
+        startsAt: now,
+        endsAt: end,
+        matchers: [{}],
+        comment: "",
+        createdBy: ""
+      }
+    }
+
+    $scope.reset();
   }
 );
 
@@ -106,6 +139,10 @@ angular.module('am', [
 angular.module('am').config(
   function($routeProvider) {
     $routeProvider.
+      when('/alerts', {
+        templateUrl: '/app/partials/alerts.html',
+        controller: 'AlertsCtrl'
+      }).
       when('/silences', {
         templateUrl: '/app/partials/silences.html',
         controller: 'SilencesCtrl'

ui/app/partials/alerts.html

@@ -0,0 +1,38 @@
+<div id="alert-query" class="forms">
+	<row>
+		<column cols="5">
+			<input type="search" placeholder="search" ng-model="query">
+		</column>
+		<column cols="2">
+			<select class="select" ng-model="order">
+				<option value="startsAt">start</option>
+				<option value="endsAt">end</option>
+			</select>
+		</column>
+	</row>
+</div>
+
+<div ng-show="alerts.length == 0">No alerts found</div>
+
+<div ng-hide="alerts.length == 0" id="alerts-list">
+
+	<div class="list-item group" ng-repeat="a in alerts | filter:query | orderBy:order">
+		<div class="container-left">
+			<div class="silence-interval">{{ a.startsAt | date:'medium' }} – {{ a.endsAt | date:'medium' }}</div>
+			<span class="label-matcher label label-white" outline ng-repeat="(name, value) in a.labels | orderBy:name">
+				{{ name }} = '{{ value }}'
+			</span>
+		</div>
+		<div class="container-right group">
+			<table>
+				<tbody>
+					<tr ng-repeat="(name, val) in a.annotations | orderBy:name">
+						<td>{{ name }}</td>
+						<td>{{ val }}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+
+</div>