Improve service page and directives

Change-Id: Ie400740374f0222f20c00610c78a4e5d40c6004f

app/components/host/host.html

@@ -1,15 +1,17 @@
 <article ng-controller="HostCtrl">
   <section class="main__content tabpanel" ng-if="data.live && data.config">
-     <h1>{{hostName}}</h1>
+     <h1>{{host.config.host_name}}</h1>
-     <bansho-host-main hostName="{{hostName}}"></bansho-host-main>
+     <bansho-host-main></bansho-host-main>
-     <bansho-host-services-list hostName="{{hostName}}"></bansho-host-services-list>
 
-     <h2>Cpu</h2>
+     <h2>Services</h2>
-     <bansho-host-cpu></bansho-host-cpu>
+     <bansho-host-services-list></bansho-host-services-list>
 
      <h2>Load</h2>
      <bansho-host-load></bansho-host-load>
 
+     <h2>Cpu</h2>
+     <bansho-host-cpu></bansho-host-cpu>
+
      <h2>Info</h2>
      <bansho-host-info></bansho-host-info>
     </section>

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;
+                    }
+                }
+            });
         });
     }])
 

app/components/host/host_cpu/host_cpu.html

@@ -1,7 +1,4 @@
-<div ng-controller="HostCpuCtrl">
+<div>
-  <ul>
+    <p>State: <bansho-service-state-icon state="host.cpuService.state"></bansho-service-state-icon> {{host.cpuService.state}}</p>
-    <li>{{cpuData.state}}</li>
+    <p>Plugin output: {{host.cpuService.plugin_output}}</p>
-    <li>{{cpuData.description}}</li>
-    <li>{{cpuData.plugin_output}}</li>
-  </ul>
 </div>

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'
         };
     });

app/components/host/host_load/host_load.html

@@ -1,7 +1,4 @@
-<div ng-controller="HostLoadCtrl">
+<div>
-  <ul>
+ <p>State: <bansho-service-state-icon state="host.loadService.state"></bansho-service-state-icon> {{host.loadService.state}}</p>
-    <li>{{loadData.state}}</li>
+ <p>Plugin output: {{host.loadService.plugin_output}}</p>
-    <li>{{loadData.description}}</li>
-    <li>{{loadData.plugin_output}}</li>
-  </ul>
 </div>

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'
         };
     });

app/components/host/host_main/host_main.html

@@ -1,7 +1,7 @@
 <div ng-controller="HostMainCtrl">
-  <ul>
+  <p>
-    <li>{{data.live.state}}</li>
+    Current state: <bansho-host-state-icon state="host.live.state"></bansho-host-state-icon> {{host.live.state}}
-    <li>{{data.config.alias}}</li>
+  </p>
-    <li>{{data.live.plugin_output}}</li>
+  <p>Alias: <span ng-show="!host.config.alias">No alias</span></p>
-  </ul>
+  <p>Live plugin output: {{host.live.plugin_output}}</p>
 </div>

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'
         };

app/components/host/host_services_list/host_services_list.html

@@ -1,6 +1,18 @@
 <div ng-hide="services.length === 0">
-  <h2>Services</h2>
+  <table class="data-table">
-  <div ng-repeat="service in services">
+    <thead>
-      <p>{{service.service_description}} - state: {{service.state}} - acknowledge: {{service.acknowledged}}</td>
+      <tr>
-  </div>
+        <th>Service description</th>
+        <th>Acknowledged</th>
+        <th>State</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="service in host.services">
+         <td>{{service.service_description}}</td>
+         <td>{{service.acknowledged}}</td>
+         <td><bansho-service-state-icon state="service.state"></bansho-service-state-icon>{{service.state}}</td>
+     </tr>
+    </tbody>
+  </table>
 </div>

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',
+            templateUrl: 'components/host/host_services_list/host_services_list.html'
-            controller: 'HostServicesListCtrl'
         };
     });

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', {})
 

app/components/table/state_icon/state_icon.html

@@ -0,0 +1,3 @@
+<span class="data-table__host {{stateClass}}">
+  <a class="data-table__data"></a>
+</span>

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';
+                }
+            }]
+        }
+    });

app/index.html

@@ -47,6 +47,7 @@
     <script src="components/table/cell_service_check/cell_service_check.js"></script>
     <script src="components/table/cell_host_address/cell_host_address.js"></script>
     <script src="components/table/cell_host_status/cell_host_status.js"></script>
+    <script src="components/table/state_icon/state_icon.js"></script>
     <script src="components/host/host.js"></script>
     <script src="components/host/host_cpu/host_cpu.js"></script>
     <script src="components/host/host_info/host_info.js"></script>