Add listing and creation of silences

ui/app/js/app.js

@@ -4,10 +4,11 @@ angular.module('am.services', ['ngResource']);
 
 angular.module('am.services').factory('Silence',
   function($resource){
-    return $resource('', {}, {
+    return $resource('', {id: '@id'}, {
+      'query':  {method: 'GET', url: '/api/v1/silences'},
+      'create': {method: 'POST', url: '/api/v1/silences'},
       'get':    {method: 'GET', url: '/api/v1/silence/:id'},
       'save':   {method: 'POST', url: '/api/v1/silence/:id'},
-      'query':  {method: 'GET', url: '/api/v1/silences'},
       'delete': {method: 'DELETE', url: '/api/v1/silence/:id'}
     });
   }
@@ -18,13 +19,48 @@ angular.module('am.controllers', []);
 angular.module('am.controllers').controller('SilencesCtrl',
   function($scope, Silence) {
     $scope.silences = [];
+    $scope.order = "startsAt";
 
-    Silence.query(
-      {},
-      function(data) {
-        $scope.silences = data.data || [];
-      }
-    );
+    $scope.refresh = function() {
+      Silence.query({},
+        function(data) {
+          console.log(data);
+          $scope.silences = data.data || [];
+        }
+      );
+    }
+
+    $scope.delete = function(sil) {
+      Silence.delete({id: sil.id})
+      $scope.refresh()
+    }
+
+    $scope.refresh();
+  }
+);
+
+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);
+      $scope.$parent.refresh();
+    }
   }
 );
 

ui/app/partials/silences.html

@@ -1,7 +1,32 @@
-<div ng-show="silences.length == 0">No silences configured</div>
+<div id="silence-create" ng-controller="SilenceCreateCtrl">
+	<form>
+		Start: <input ng-model="silence.startsAt" type="datetime-local">
+		End: <input ng-model="silence.endsAt" type="datetime-local">
 
-<ul class="silences">
-	<li ng-repeat="sil in silences">
-		{{ sil.id }}
-	</li>
-</ul>
+		<input ng-model="silence.matchers[0].name">
+		<input ng-model="silence.matchers[0].value">
+		<input type="checkbox" ng-model="silence.matchers[0].isRegex">
+
+		<button ng-click="create()">Create</button>
+	</form>
+</div>
+
+<div id="silences-query">
+	<input type="text" ng-model="query">
+	<select ng-model="order">
+		<option value="startsAt">Start</option>
+		<option value="endsAt">End</option>
+	</select>
+</div>
+
+<div ng-show="silences.length == 0">No silences configured</div>
+<div ng-hide="silences.length == 0" id="silences-list">
+	<div ng-repeat="sil in silences | filter:query | orderBy:order">
+		{{ sil.startsAt }} – {{ sil.endsAt }}
+		created: {{ sil.createdAt }}
+		<div ng-repeat="m in sil.matchers | orderBy:name">
+			{{ m.name }} = {{ m.value }} <span ng-show="m.isRegex">[re]</span>
+		</div>
+		<button ng-click="delete(sil)">Delete</button>
+	</div>
+</div>