Switch routing tree to flat alerting groups

ui/app/css/main.css

@@ -38,6 +38,10 @@ header #logo {
 	padding: 2.5em;
 }
 
+.alert-group {
+	margin-bottom: 24px;
+}
+
 #silence-create {
 	background: #fff;
 	width: 100%;
@@ -47,6 +51,10 @@ header #logo {
 .silence .labels, .alert-item .labels {
 	cursor: pointer;
 }
+.silence .labels, .alert-item .labels {
+	width: 75%;
+}
+
 
 .silence .delete-button, .alert-item .silence-button {
 	opacity: 0.2;

ui/app/js/app.js

@@ -143,15 +143,12 @@ angular.module('am.services').factory('Alert',
   }
 );
 
-angular.module('am.services').factory('Route',
+angular.module('am.services').factory('AlertGroups',
   function($resource) {
     return $resource('', {}, {
       'query': {
         method: 'GET',
-        url: '/api/v1/routes',
-        params: {
-          'pruneEmpty': 'true'
-        }
+        url: '/api/v1/alerts/groups'
       }
     });
   }
@@ -220,14 +217,13 @@ angular.module('am.controllers').controller('AlertCtrl',
 );
 
 angular.module('am.controllers').controller('AlertsCtrl',
-  function($scope, Route) {
-    $scope.route = null;
-    $scope.order = "startsAt";
+  function($scope, AlertGroups) {
+    $scope.groups = null;
 
     $scope.refresh = function() {
-      Route.query({},
+      AlertGroups.query({},
         function(data) {
-          $scope.route = data.data;
+          $scope.groups = data.data;
         },
         function(data) {
           $scope.error = data.data;

ui/app/partials/alerts.html

@@ -1 +1,21 @@
-<route route="route"></route>
+<div id="alert-groups" ng-controller="AlertsCtrl">
+	<div ng-repeat="group in groups">
+		<div class="alert-group" ng-show"group.alerts">
+			<div class="route-header group">
+				<div class="route-matchers left">
+					<span ng-repeat="m in group.matchers" class="lbl lbl-outline">
+						{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
+					</span>
+				</div>
+			</div>
+			<div class="alert-group-header group">
+				<span ng-repeat="(ln, lv) in group.labels" class="lbl lbl-outline">
+					{{ ln }} = '{{ lv }}'
+				</span>
+			</div>
+			<div ng-repeat="a in group.alerts">
+				<alert class="list-item" a="a"></alert>
+			</div>
+		</div>
+	</div>
+</div>