ui: handle silence edit modes

This change makes actions around silences in different stages more
clear. Changes that are not allowed to be in-place are handled by
creating a new silence and deleting/expiring the old one behind the
scenes.

ui/app/css/main.css

@@ -93,7 +93,7 @@ a.gen-link button {
 	opacity: 1.0;
 }
 
-.active-silences, .elapsed-silences {
+.active-silences, .pending-silences, .elapsed-silences {
 	margin-bottom: 12px;
 }
 

ui/app/js/app.js

@@ -278,11 +278,16 @@ angular.module('am.controllers').controller('SilencesCtrl',
       Silence.query({},
         function(data) {
           $scope.silences = data.data || [];
+	  var now = new Date;
 
           angular.forEach($scope.silences, function(value) {
             value.endsAt = new Date(value.endsAt);
             value.startsAt = new Date(value.startsAt);
-            value.createdAt = new Date(value.createdAt);
+            value.updatedAt = new Date(value.updatedAt);
+
+	    value.elapsed = value.endsAt < now;
+	    value.pending = value.startsAt > now;
+	    value.active = value.startsAt <= now && value.endsAt > now;
           });
         },
         function(data) {
@@ -298,22 +303,6 @@ angular.module('am.controllers').controller('SilencesCtrl',
       $scope.refresh();
     });
 
-    $scope.elapsed = function() {
-      return function(sil) {
-        return sil.endsAt < new Date;
-      };
-    };
-    $scope.pending = function() {
-      return function(sil) {
-        return sil.startsAt > new Date;
-      };
-    };
-    $scope.active = function() {
-      return function(sil) {
-        return sil.startsAt <= new Date;
-      };
-    };
-
     $scope.refresh();
   }
 );
@@ -342,10 +331,10 @@ angular.module('am.controllers').controller('SilenceCreateCtrl',
 
       $scope.silence = angular.copy(origSilence);
 
-      if (!origSilence.startsAt) {
+      if (!origSilence.startsAt || origSilence.elapsed) {
         $scope.silence.startsAt = now;
       }
-      if (!origSilence.endsAt) {
+      if (!origSilence.endsAt || origSilence.elapsed) {
         $scope.silence.endsAt = end;
       }
     };
@@ -361,10 +350,34 @@ angular.module('am.controllers').controller('SilenceCreateCtrl',
     };
 
     $scope.create = function() {
+      var now = new Date;
+      // Go through conditions that go against immutability of historic silences.
+      var createNew = !angular.equals(origSilence.matchers, $scope.silence.matchers);
+      console.log(origSilence, $scope.silence);
+      createNew = createNew || $scope.silence.elapsed;
+      createNew = createNew || ($scope.silence.active && (origSilence.startsAt == $scope.silence.startsAt || origSilence.endsAt == $scope.silence.endsAt));
+
+      if (createNew) {
+        $scope.silence.id = undefined;
+      }
+
       Silence.create($scope.silence,
         function(data) {
-          $scope.$emit('silence-created');
-          $scope.reset();
+	  // If the modifications require creating a new silence,
+	  // we expire/delete the old one.
+          if (createNew && origSilence.id && !$scope.silence.elapsed) {
+	    Silence.delete({id: origSilence.id},
+	      function(data) {
+		// Only trigger reload after after old silence was deleted.
+                $scope.$emit('silence-created');
+	      },
+	      function(data) {
+	        console.warn("deleting silence failed", data);
+                $scope.$emit('silence-created');
+	      });
+          } else {
+	    $scope.$emit('silence-created');
+	  }
         },
         function(data) {
           $scope.error = data.data.error;

ui/app/partials/silence.html

@@ -12,9 +12,12 @@
 		</div>
 
 		<div class="right">
-			<button type="black" disabled small>Until {{ sil.endsAt | amCalendar }}</button>
-			<button class="delete-button" type="black" ng-click="delete(sil.id)" small upper>Delete</button>
-			<button class="edit-button" type="black" ng-click="toggleSilenceForm()" small upper>Edit</button>
+			<button ng-show="sil.pending" type="black" disabled small>Starts {{ sil.endsAt | amCalendar }}</button>
+			<button ng-show="sil.active" type="black" disabled small>Ends {{ sil.endsAt | amCalendar }}</button>
+			<button ng-show="sil.pending" class="delete-button" type="black" ng-click="delete(sil.id)" small upper>Delete</button>
+			<button ng-show="sil.active" class="delete-button" type="black" ng-click="delete(sil.id)" small upper>Expire</button>
+			<button ng-show="!sil.elapsed" class="edit-button" type="black" ng-click="toggleSilenceForm()" small upper>Edit</button>
+			<button ng-show="sil.elapsed" class="edit-button" type="black" ng-click="toggleSilenceForm()" small upper>Recreate</button>
 		</div>
 	</div>
 
@@ -44,4 +47,4 @@
 			</tbody>
 		</table>
 	</div>
-</div>
+</div>

ui/app/partials/silences.html

@@ -29,21 +29,21 @@
 
 	<div class="active-silences">
 		<h4 class="thin">Active</h4>
-		<div class="list-item group" ng-repeat="sil in silences | filter:query | filter:active() | orderBy:order">
+		<div class="list-item group" ng-repeat="sil in silences | filter:query | filter:{active:true} | orderBy:order">
 			<silence sil="sil"></silence>
 		</div>
 	</div>
 
 	<div class="pending-silences">
 		<h4 class="thin">Pending</h4>
-		<div class="list-item group" ng-repeat="sil in silences | filter:query | filter:pending() | orderBy:order">
+		<div class="list-item group" ng-repeat="sil in silences | filter:query | filter:{pending:true} | orderBy:order">
 			<silence sil="sil"></silence>
 		</div>
 	</div>
 
 	<div class="elapsed-silences">
 		<h4 class="thin">Elapsed</h4>
-		<div class="list-item group" ng-repeat="sil in silences | filter:query | filter:elapsed() | orderBy:order">
+		<div class="list-item group" ng-repeat="sil in silences | filter:query | filter:{elapsed:true} | orderBy:order">
 			<silence sil="sil"></silence>
 		</div>
 	</div>