From 0ae8c62f606f45166037d7a88f17d1e5c5c0e649 Mon Sep 17 00:00:00 2001 From: Vincent Fournier Date: Tue, 19 May 2015 14:47:48 -0400 Subject: [PATCH] Improve service page and directives Change-Id: Ie400740374f0222f20c00610c78a4e5d40c6004f --- app/components/host/host.html | 12 ++--- app/components/host/host.js | 26 +++++++++-- app/components/host/host_cpu/host_cpu.html | 9 ++-- app/components/host/host_cpu/host_cpu.js | 18 ++------ app/components/host/host_load/host_load.html | 9 ++-- app/components/host/host_load/host_load.js | 18 ++------ app/components/host/host_main/host_main.html | 10 ++--- app/components/host/host_main/host_main.js | 2 +- .../host_services_list.html | 20 +++++++-- .../host_services_list/host_services_list.js | 12 +---- app/components/service/service.js | 3 +- .../table/state_icon/state_icon.html | 3 ++ app/components/table/state_icon/state_icon.js | 44 +++++++++++++++++++ app/index.html | 1 + 14 files changed, 116 insertions(+), 71 deletions(-) create mode 100644 app/components/table/state_icon/state_icon.html create mode 100644 app/components/table/state_icon/state_icon.js diff --git a/app/components/host/host.html b/app/components/host/host.html index 88de630..3565a57 100644 --- a/app/components/host/host.html +++ b/app/components/host/host.html @@ -1,15 +1,17 @@
-

{{hostName}}

- - +

{{host.config.host_name}}

+ -

Cpu

- +

Services

+

Load

+

Cpu

+ +

Info

diff --git a/app/components/host/host.js b/app/components/host/host.js index ad6b61e..8aadd43 100644 --- a/app/components/host/host.js +++ b/app/components/host/host.js @@ -14,11 +14,31 @@ angular.module('bansho.host', ['bansho.live', objectIdentifier = {}; objectIdentifier.host_name = hostConfig.hostName; - $scope.hostName = hostConfig.hostName; - $scope.data = {}; - backendClient.getHost(objectType, objectIdentifier).then(function (data) { + $scope.host = data; $scope.data = data; + + backendClient.getServicesByHost($scope.hostName).success(function (data) { + var i, + service; + + $scope.host.services = data; + + for (i = 0; i < $scope.host.services.length;) { + service = $scope.host.services[i]; + if (service.service_description === "cpu") { + $scope.host.cpuService = service; + $scope.host.services.splice(i, 1); + console.log(i) + } else if (service.service_description === "load") { + $scope.host.loadService = service; + $scope.host.services.splice(i, 1); + console.log(i) + } else { + ++i; + } + } + }); }); }]) diff --git a/app/components/host/host_cpu/host_cpu.html b/app/components/host/host_cpu/host_cpu.html index 3a11eed..76ba93e 100644 --- a/app/components/host/host_cpu/host_cpu.html +++ b/app/components/host/host_cpu/host_cpu.html @@ -1,7 +1,4 @@ -
-
    -
  • {{cpuData.state}}
    • -
  • {{cpuData.description}}
    • -
  • {{cpuData.plugin_output}}
    • -
+
+

State: {{host.cpuService.state}}

+

Plugin output: {{host.cpuService.plugin_output}}

diff --git a/app/components/host/host_cpu/host_cpu.js b/app/components/host/host_cpu/host_cpu.js index e311b1e..74c268c 100644 --- a/app/components/host/host_cpu/host_cpu.js +++ b/app/components/host/host_cpu/host_cpu.js @@ -1,24 +1,12 @@ 'use strict'; angular.module('bansho.host.cpu', ['bansho.live']) - - .controller('HostCpuCtrl', ['$scope', 'backendClient', function ($scope, backendClient) { - var hostName = $scope.hostName, - service = 'cpu', - fields = ['state', 'description', 'plugin_output'], - filters = {}, - apiName = 'services', - additionnalFields = {'host_name': hostName, 'description': service}; - - backendClient.getObjects(fields, filters, apiName, additionnalFields) - .success(function (data) { - $scope.cpuData = data[0]; - }); - }]) - .directive('banshoHostCpu', function () { return { restrict: 'E', + compile: function (scope, element, attrs) { + scope.host = attrs.host; + }, templateUrl: 'components/host/host_cpu/host_cpu.html' }; }); diff --git a/app/components/host/host_load/host_load.html b/app/components/host/host_load/host_load.html index 8430147..0caad66 100644 --- a/app/components/host/host_load/host_load.html +++ b/app/components/host/host_load/host_load.html @@ -1,7 +1,4 @@ -
-
    -
  • {{loadData.state}}
    • -
  • {{loadData.description}}
    • -
  • {{loadData.plugin_output}}
    • -
+
+

State: {{host.loadService.state}}

+

Plugin output: {{host.loadService.plugin_output}}

diff --git a/app/components/host/host_load/host_load.js b/app/components/host/host_load/host_load.js index a3ec46a..38dc507 100644 --- a/app/components/host/host_load/host_load.js +++ b/app/components/host/host_load/host_load.js @@ -1,24 +1,12 @@ 'use strict'; angular.module('bansho.host.load', []) - - .controller('HostLoadCtrl', ['$scope', 'backendClient', function ($scope, backendClient) { - var hostName = $scope.hostName, - service = 'load', - fields = ['state', 'description', 'plugin_output'], - filters = {}, - apiName = 'services', - additionnalFields = {'host_name': hostName, 'description': service}; - - backendClient.getObjects(fields, filters, apiName, additionnalFields) - .success(function (data) { - $scope.loadData = data[0]; - }); - }]) - .directive('banshoHostLoad', function () { return { restrict: 'E', + compile: function (scope, element, attrs) { + scope.host = attrs.host; + }, templateUrl: 'components/host/host_load/host_load.html' }; }); diff --git a/app/components/host/host_main/host_main.html b/app/components/host/host_main/host_main.html index c781f2c..0de7e00 100644 --- a/app/components/host/host_main/host_main.html +++ b/app/components/host/host_main/host_main.html @@ -1,7 +1,7 @@
-
    -
  • {{data.live.state}}
    • -
  • {{data.config.alias}}
    • -
  • {{data.live.plugin_output}}
    • -
+

+ Current state: {{host.live.state}} +

+

Alias: No alias

+

Live plugin output: {{host.live.plugin_output}}

diff --git a/app/components/host/host_main/host_main.js b/app/components/host/host_main/host_main.js index 29fdb7f..0a8d514 100644 --- a/app/components/host/host_main/host_main.js +++ b/app/components/host/host_main/host_main.js @@ -10,7 +10,7 @@ angular.module('bansho.host.main', []) return { restrict: 'E', compile: function (scope, element, attrs) { - scope.hostName = attrs.hostName; + scope.host = attrs.host; }, templateUrl: 'components/host/host_main/host_main.html' }; diff --git a/app/components/host/host_services_list/host_services_list.html b/app/components/host/host_services_list/host_services_list.html index d6ba601..2329962 100644 --- a/app/components/host/host_services_list/host_services_list.html +++ b/app/components/host/host_services_list/host_services_list.html @@ -1,6 +1,18 @@
-

Services

-
-

{{service.service_description}} - state: {{service.state}} - acknowledge: {{service.acknowledged}} -

+ + + + + + + + + + + + + + + +
Service descriptionAcknowledgedState
{{service.service_description}}{{service.acknowledged}}{{service.state}}
diff --git a/app/components/host/host_services_list/host_services_list.js b/app/components/host/host_services_list/host_services_list.js index a7a2e5c..aba26f6 100644 --- a/app/components/host/host_services_list/host_services_list.js +++ b/app/components/host/host_services_list/host_services_list.js @@ -1,20 +1,12 @@ 'use strict'; angular.module('bansho.host.services_list', []) - - .controller('HostServicesListCtrl', ['$scope', 'backendClient', function ($scope, backendClient) { - backendClient.getServicesByHost($scope.hostName).success(function (data) { - $scope.services = data; - }); - }]) - .directive('banshoHostServicesList', function () { return { restrict: 'E', compile: function (scope, element, attrs) { - scope.hostName = attrs.hostName; + scope.host = attrs.host; }, - templateUrl: 'components/host/host_services_list/host_services_list.html', - controller: 'HostServicesListCtrl' + templateUrl: 'components/host/host_services_list/host_services_list.html' }; }); diff --git a/app/components/service/service.js b/app/components/service/service.js index a148313..98b2941 100644 --- a/app/components/service/service.js +++ b/app/components/service/service.js @@ -3,7 +3,8 @@ angular.module('bansho.service', ['bansho.live', 'bansho.service.main', 'bansho.service.info', - 'bansho.service.metrics']) + 'bansho.service.metrics', + 'bansho.table.state_icon']) .value('serviceConfig', {}) diff --git a/app/components/table/state_icon/state_icon.html b/app/components/table/state_icon/state_icon.html new file mode 100644 index 0000000..84529f7 --- /dev/null +++ b/app/components/table/state_icon/state_icon.html @@ -0,0 +1,3 @@ + + + diff --git a/app/components/table/state_icon/state_icon.js b/app/components/table/state_icon/state_icon.js new file mode 100644 index 0000000..9ddee6c --- /dev/null +++ b/app/components/table/state_icon/state_icon.js @@ -0,0 +1,44 @@ +'use strict'; + +angular.module('bansho.table.state_icon', []) + .directive('banshoHostStateIcon', function () { + return { + restrict: 'E', + scope: { + state: '=state' + }, + templateUrl: 'components/table/state_icon/state_icon.html', + controller: ['$scope', function ($scope) { + if ($scope.state === 'UP') { + $scope.stateClass = 'state--ok'; + } else if ($scope.state === 'WARNING') { + $scope.stateClass = 'state--warning'; + } else if ($scope.state === '') { + $scope.stateClass = ''; + } else { + $scope.stateClass = 'state--error'; + } + }] + } + }) + + .directive('banshoServiceStateIcon', function () { + return { + restrict: 'E', + scope: { + state: '=state' + }, + templateUrl: 'components/table/state_icon/state_icon.html', + controller: ['$scope', function ($scope) { + if ($scope.state === 'OK') { + $scope.stateClass = 'state--ok'; + } else if ($scope.state === 'WARNING') { + $scope.state = 'state--warning'; + } else if ($scope.state === '') { + $scope.stateClass = ''; + } else { + $scope.stateClass = 'state--error'; + } + }] + } + }); diff --git a/app/index.html b/app/index.html index 9c1e231..98911a7 100644 --- a/app/index.html +++ b/app/index.html @@ -47,6 +47,7 @@ +