Improve service page and directives
Change-Id: Ie400740374f0222f20c00610c78a4e5d40c6004f
This commit is contained in:
Vincent Fournier
parent
1ad30f7358
commit
0ae8c62f60
|
|
@ -1,15 +1,17 @@
|
|||
<article ng-controller="HostCtrl">
|
||||
<section class="main__content tabpanel" ng-if="data.live && data.config">
|
||||
<h1>{{hostName}}</h1>
|
||||
<bansho-host-main hostName="{{hostName}}"></bansho-host-main>
|
||||
<bansho-host-services-list hostName="{{hostName}}"></bansho-host-services-list>
|
||||
<h1>{{host.config.host_name}}</h1>
|
||||
<bansho-host-main></bansho-host-main>
|
||||
|
||||
<h2>Cpu</h2>
|
||||
<bansho-host-cpu></bansho-host-cpu>
|
||||
<h2>Services</h2>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}])
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<div ng-controller="HostCpuCtrl">
|
||||
<ul>
|
||||
<li>{{cpuData.state}}</li>
|
||||
<li>{{cpuData.description}}</li>
|
||||
<li>{{cpuData.plugin_output}}</li>
|
||||
</ul>
|
||||
<div>
|
||||
<p>State: <bansho-service-state-icon state="host.cpuService.state"></bansho-service-state-icon> {{host.cpuService.state}}</p>
|
||||
<p>Plugin output: {{host.cpuService.plugin_output}}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<div ng-controller="HostLoadCtrl">
|
||||
<ul>
|
||||
<li>{{loadData.state}}</li>
|
||||
<li>{{loadData.description}}</li>
|
||||
<li>{{loadData.plugin_output}}</li>
|
||||
</ul>
|
||||
<div>
|
||||
<p>State: <bansho-service-state-icon state="host.loadService.state"></bansho-service-state-icon> {{host.loadService.state}}</p>
|
||||
<p>Plugin output: {{host.loadService.plugin_output}}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div ng-controller="HostMainCtrl">
|
||||
<ul>
|
||||
<li>{{data.live.state}}</li>
|
||||
<li>{{data.config.alias}}</li>
|
||||
<li>{{data.live.plugin_output}}</li>
|
||||
</ul>
|
||||
<p>
|
||||
Current state: <bansho-host-state-icon state="host.live.state"></bansho-host-state-icon> {{host.live.state}}
|
||||
</p>
|
||||
<p>Alias: <span ng-show="!host.config.alias">No alias</span></p>
|
||||
<p>Live plugin output: {{host.live.plugin_output}}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
<div ng-hide="services.length === 0">
|
||||
<h2>Services</h2>
|
||||
<div ng-repeat="service in services">
|
||||
<p>{{service.service_description}} - state: {{service.state}} - acknowledge: {{service.acknowledged}}</td>
|
||||
</div>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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', {})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<span class="data-table__host {{stateClass}}">
|
||||
<a class="data-table__data"></a>
|
||||
</span>
|
||||
|
|
@ -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';
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue