Add initial UI for recursive routing tree

ui/app/css/main.css

@@ -106,6 +106,11 @@ header #logo {
 
 }
 
+.route {
+	border: 1px dotted #c0c0c0;
+	background: #fff;
+}
+
 
 /**/
 input[type="datetime-local"]  {

ui/app/js/app.js

@@ -1,53 +1,180 @@
 'use strict';
 
+angular.module('am.directives', []);
+
+angular.module('am.directives').directive('route',
+  function(RecursionHelper) {
+    return {
+      restrict: 'E',
+      scope: {
+        route: '='
+      },
+      templateUrl: '/app/partials/route.html',
+      compile: function(element) {
+        // Use the compile function from the RecursionHelper,
+        // And return the linking function(s) which it returns
+        return RecursionHelper.compile(element);
+      }
+    };
+  }
+);
+
+angular.module('am.directives').directive('alert',
+  function() {
+    return {
+      restrict: 'E',
+      scope: {
+        a: '='
+      },
+      templateUrl: '/app/partials/alert.html'
+    };
+  }
+);
+
 angular.module('am.services', ['ngResource']);
 
+angular.module('am.services').factory('RecursionHelper',
+  function($compile) {
+    return {
+      /**
+       * Manually compiles the element, fixing the recursion loop.
+       * @param element
+       * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
+       * @returns An object containing the linking functions.
+       */
+      compile: function(element, link) {
+        // Normalize the link parameter
+        if (angular.isFunction(link)) {
+          link = {
+            post: link
+          };
+        }
+
+        // Break the recursion loop by removing the contents
+        var contents = element.contents().remove();
+        var compiledContents;
+        return {
+          pre: (link && link.pre) ? link.pre : null,
+          /**
+           * Compiles and re-adds the contents
+           */
+          post: function(scope, element) {
+            // Compile the contents
+            if (!compiledContents) {
+              compiledContents = $compile(contents);
+            }
+            // Re-add the compiled contents to the element
+            compiledContents(scope, function(clone) {
+              element.append(clone);
+            });
+
+            // Call the post-linking function, if any
+            if (link && link.post) {
+              link.post.apply(null, arguments);
+            }
+          }
+        };
+      }
+    };
+  }
+);
+
 angular.module('am.services').factory('Silence',
-  function($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'},
-      'delete': {method: 'DELETE', url: '/api/v1/silence/:id'}
+  function($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'
+      },
+      'delete': {
+        method: 'DELETE',
+        url: '/api/v1/silence/:id'
+      }
     });
   }
 );
 
 angular.module('am.services').factory('Alert',
-  function($resource){
+  function($resource) {
     return $resource('', {}, {
-      'query':  {method: 'GET', url: '/api/v1/alerts'}
+      'query': {
+        method: 'GET',
+        url: '/api/v1/alerts'
+      }
     });
   }
 );
 
+angular.module('am.services').factory('Route',
+  function($resource) {
+    return $resource('', {}, {
+      'query': {
+        method: 'GET',
+        url: '/api/v1/routes',
+        params: {
+          'pruneEmpty': 'true'
+        }
+      }
+    });
+  }
+);
+
+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',
   function($scope, $location) {
-    $scope.items = [
-      {name: 'Silences', url:'/silences'},
-      {name: 'Alerts', url:'/alerts'},
-      {name: 'Status', url:'/status'}
-    ];
+    $scope.items = [{
+      name: 'Silences',
+      url: '/silences'
+    }, {
+      name: 'Alerts',
+      url: '/alerts'
+    }, {
+      name: 'Status',
+      url: '/status'
+    }];
 
     $scope.selected = function(item) {
       return item.url == $location.path()
-    }    
+    }
   }
 );
 
 angular.module('am.controllers').controller('AlertsCtrl',
-  function($scope, Alert) {
-    $scope.alerts = [];
+  function($scope, Route) {
+    $scope.route = null;
     $scope.order = "startsAt";
 
     $scope.refresh = function() {
-      Alert.query({},
+      Route.query({},
         function(data) {
-          $scope.alerts = data.data || [];
-          console.log($scope.alerts)
+          console.log(data);
+          $scope.route = data.data;
+          console.log($scope.route)
         },
         function(data) {
 
@@ -59,6 +186,27 @@ angular.module('am.controllers').controller('AlertsCtrl',
   }
 );
 
+// 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 || [];
+//           console.log($scope.alerts)
+//         },
+//         function(data) {
+
+//         }
+//       );
+//     }
+
+//     $scope.refresh();
+//   }
+// );
+
 angular.module('am.controllers').controller('SilencesCtrl',
   function($scope, Silence) {
     $scope.silences = [];
@@ -76,7 +224,9 @@ angular.module('am.controllers').controller('SilencesCtrl',
     }
 
     $scope.delete = function(sil) {
-      Silence.delete({id: sil.id})
+      Silence.delete({
+        id: sil.id
+      })
       $scope.refresh()
     }
 
@@ -108,7 +258,7 @@ angular.module('am.controllers').controller('SilenceCreateCtrl',
     }
     $scope.reset = function() {
       var now = new Date(),
-          end = new Date();
+        end = new Date();
 
       now.setMilliseconds(0);
       end.setMilliseconds(0);
@@ -134,22 +284,23 @@ angular.module('am', [
   'ngRoute',
 
   'am.controllers',
-  'am.services'
+  'am.services',
+  'am.directives'
 ]);
 
 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'
-      }).
-      otherwise({
-        redirectTo: '/silences'
-      });
+    when('/alerts', {
+      templateUrl: '/app/partials/alerts.html',
+      controller: 'AlertsCtrl'
+    }).
+    when('/silences', {
+      templateUrl: '/app/partials/silences.html',
+      controller: 'SilencesCtrl'
+    }).
+    otherwise({
+      redirectTo: '/silences'
+    });
   }
-);
+);

ui/app/partials/alert.html

@@ -0,0 +1,33 @@
+<div class="alert">
+	<div class="container-left">
+		<div class="active-interval">
+			<span class="date">{{ a.startsAt | date:'yyyy-MM-dd' }},</span> <span class="time">{{ a.startsAt | date:'HH:mm' }}</span>
+			–
+			<span ng-hide="a.endsAt == '0001-01-01T00:00:00Z'">
+				<span class="date">{{ a.endsAt | date:'yyyy-MM-dd' }},</span> <span class="time">{{ a.endsAt | date:'HH:mm' }}</span>
+			</span>
+			<span ng-show="a.endsAt == '0001-01-01T00:00:00Z'">
+				<span class="time">now</span>
+			</span>
+		</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">
+		<div class="left">
+			<table class="table-flat">
+				<tbody>
+					<tr ng-repeat="(name, val) in a.annotations | orderBy:name">
+						<td style="padding-right: 3em"><em>{{ name }}</em></td>
+						<td style="whitespace: pre-wrap;">{{ val }}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+
+		<div class="right">
+			<button type="secondary" ng-click="silence(a)" small>Silence</button>
+		</div>
+	</div>
+</div>

ui/app/partials/alerts.html

@@ -1,4 +1,4 @@
-<div id="alert-query" class="forms">
+<!-- <div id="alert-query" class="forms">
 	<row>
 		<column cols="5">
 			<input type="search" placeholder="search" ng-model="query">
@@ -50,4 +50,6 @@
 		</div>
 	</div>
 
-</div>
+</div> -->
+
+<route route="route"></route>

ui/app/partials/route.html

@@ -0,0 +1,22 @@
+<div class="route">
+	<div class="route-opts">
+		{{ route.RouteOpts.GroupBy }}
+	</div>
+	<div class="route-matchers">
+		{{ route.Matchers }}
+	</div>
+	<div ng-show="route.Groups" class="alert-groups">
+		<div class="alert-group" ng-repeat="group in route.Groups">
+			<div class="group-instance">
+				{{ group.Labels }}
+			</div>
+			<div ng-repeat="a in group.Alerts">
+			 	<alert class="list-item" a="a"></alert>
+			</div>
+		</div>
+	</div>
+
+	<div class="route" ng-repeat="r in route.Routes">
+		<route route="r"></route>
+	</div>
+</div>