From e151f029b7af4727bea923cb608faf87f7c014e5 Mon Sep 17 00:00:00 2001 From: Fabian Reinartz Date: Wed, 21 Oct 2015 16:34:38 +0200 Subject: [PATCH] Add initial UI for recursive routing tree --- ui/app/css/main.css | 5 + ui/app/js/app.js | 221 ++++++++++++++++++++++++++++++------ ui/app/partials/alert.html | 33 ++++++ ui/app/partials/alerts.html | 6 +- ui/app/partials/route.html | 22 ++++ 5 files changed, 250 insertions(+), 37 deletions(-) create mode 100644 ui/app/partials/alert.html create mode 100644 ui/app/partials/route.html diff --git a/ui/app/css/main.css b/ui/app/css/main.css index 3435aa8e..91a2ee63 100644 --- a/ui/app/css/main.css +++ b/ui/app/css/main.css @@ -106,6 +106,11 @@ header #logo { } +.route { + border: 1px dotted #c0c0c0; + background: #fff; +} + /**/ input[type="datetime-local"] { diff --git a/ui/app/js/app.js b/ui/app/js/app.js index 7f8fff76..bfef4975 100644 --- a/ui/app/js/app.js +++ b/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' + }); } -); +); \ No newline at end of file diff --git a/ui/app/partials/alert.html b/ui/app/partials/alert.html new file mode 100644 index 00000000..886d9987 --- /dev/null +++ b/ui/app/partials/alert.html @@ -0,0 +1,33 @@ +
+
+
+ {{ a.startsAt | date:'yyyy-MM-dd' }}, {{ a.startsAt | date:'HH:mm' }} + – + + {{ a.endsAt | date:'yyyy-MM-dd' }}, {{ a.endsAt | date:'HH:mm' }} + + + now + +
+ + {{ name }} = '{{ value }}' + +
+
+
+ + + + + + + +
{{ name }}{{ val }}
+
+ +
+ +
+
+
\ No newline at end of file diff --git a/ui/app/partials/alerts.html b/ui/app/partials/alerts.html index 533a3f7d..15e24112 100644 --- a/ui/app/partials/alerts.html +++ b/ui/app/partials/alerts.html @@ -1,4 +1,4 @@ -
+ + + \ No newline at end of file diff --git a/ui/app/partials/route.html b/ui/app/partials/route.html new file mode 100644 index 00000000..aafc7c89 --- /dev/null +++ b/ui/app/partials/route.html @@ -0,0 +1,22 @@ +
+
+ {{ route.RouteOpts.GroupBy }} +
+
+ {{ route.Matchers }} +
+
+
+
+ {{ group.Labels }} +
+
+ +
+
+
+ +
+ +
+
\ No newline at end of file