feat(webui): Add dashboard filter.
- Convert Object properties to and array for backends and frondends for each providers. - Remove unused parameters. - Add filter.
This commit is contained in:
parent
6ba17847ab
commit
a8cbe7ef5e
8 changed files with 53 additions and 19 deletions
|
@ -10,5 +10,38 @@ angular
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function Providers($resource) {
|
function Providers($resource) {
|
||||||
return $resource('../api/providers');
|
const resourceProvider = $resource('../api/providers');
|
||||||
|
return {
|
||||||
|
get: function () {
|
||||||
|
const rawProviders = resourceProvider.get();
|
||||||
|
|
||||||
|
for (let providerName in rawProviders) {
|
||||||
|
if (rawProviders.hasOwnProperty(providerName)) {
|
||||||
|
|
||||||
|
// BackEnds mapping
|
||||||
|
let bckends = rawProviders[providerName].backends;
|
||||||
|
|
||||||
|
rawProviders[providerName].backends = Object.keys(bckends)
|
||||||
|
.map(key => {
|
||||||
|
const goodBackend = bckends[key];
|
||||||
|
goodBackend.backendId = key;
|
||||||
|
return goodBackend;
|
||||||
|
});
|
||||||
|
|
||||||
|
// FrontEnds mapping
|
||||||
|
let frtends = rawProviders[providerName].frontends;
|
||||||
|
|
||||||
|
rawProviders[providerName].frontends = Object.keys(frtends)
|
||||||
|
.map(key => {
|
||||||
|
const goodFrontend = frtends[key];
|
||||||
|
goodFrontend.frontendId = key;
|
||||||
|
return goodFrontend;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return rawProviders;
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
|
@ -8,8 +8,7 @@ function backendMonitor() {
|
||||||
controllerAs: 'backendCtrl',
|
controllerAs: 'backendCtrl',
|
||||||
bindToController: true,
|
bindToController: true,
|
||||||
scope: {
|
scope: {
|
||||||
backend: '=',
|
backend: '='
|
||||||
backendId: '='
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="panel panel-success">
|
<div class="panel panel-success">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<strong><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> {{backendCtrl.backendId}}</strong>
|
<strong><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> {{backendCtrl.backend.backendId}}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table class="panel-table__servers table table-striped table-hover">
|
<table class="panel-table__servers table table-striped table-hover">
|
||||||
|
|
|
@ -8,8 +8,7 @@ function frontendMonitor() {
|
||||||
controllerAs: 'frontendCtrl',
|
controllerAs: 'frontendCtrl',
|
||||||
bindToController: true,
|
bindToController: true,
|
||||||
scope: {
|
scope: {
|
||||||
frontend: '=',
|
frontend: '='
|
||||||
frontendId: '='
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="panel panel-warning">
|
<div class="panel panel-warning">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<strong><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> {{frontendCtrl.frontendId}}</strong>
|
<strong><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> {{frontendCtrl.frontend.frontendId}}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<table class="panel-table__routes table table-striped table-hover">
|
<table class="panel-table__routes table table-striped table-hover">
|
||||||
|
|
|
@ -2,17 +2,18 @@
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function ProvidersController($scope, $interval, $log, Providers) {
|
function ProvidersController($scope, $interval, $log, Providers) {
|
||||||
var vm = this;
|
const vm = this;
|
||||||
|
|
||||||
vm.providers = Providers.get();
|
vm.providers = Providers.get();
|
||||||
|
|
||||||
var intervalId = $interval(function () {
|
const intervalId = $interval(function () {
|
||||||
Providers.get(function (providers) {
|
Providers.get(function (providers) {
|
||||||
vm.providers = providers;
|
vm.providers = providers;
|
||||||
}, function (error) {
|
}, function (error) {
|
||||||
vm.providers = {};
|
vm.providers = {};
|
||||||
$log.error(error);
|
$log.error(error);
|
||||||
});
|
});
|
||||||
|
|
||||||
}, 2000);
|
}, 2000);
|
||||||
|
|
||||||
$scope.$on('$destroy', function () {
|
$scope.$on('$destroy', function () {
|
||||||
|
|
|
@ -1,16 +1,18 @@
|
||||||
<div>
|
<div>
|
||||||
|
<div><input type="text" data-ng-model="providersCtrl.providerFilter" placeholder="Filter" class="form-control"></div>
|
||||||
|
<br>
|
||||||
<uib-tabset>
|
<uib-tabset>
|
||||||
<uib-tab data-ng-repeat="(providerId, provider) in providersCtrl.providers" heading="{{providerId}}">
|
<uib-tab data-ng-repeat="(providerId, provider) in providersCtrl.providers" heading="{{providerId}}">
|
||||||
|
|
||||||
<div class="row tabset-row__providers">
|
<div class="row tabset-row__providers">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div data-ng-repeat="(frontendId, frontend) in provider.frontends">
|
<div data-ng-repeat="frontend in provider.frontends | filter: providersCtrl.providerFilter ">
|
||||||
<frontend-monitor data-provider-id="providerId" data-frontend-id="frontendId" data-frontend="frontend"></frontend-monitor>
|
<frontend-monitor data-provider-id="providerId" data-frontend="frontend"></frontend-monitor>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div data-ng-repeat="(backendId, backend) in provider.backends">
|
<div data-ng-repeat="backend in provider.backends | filter: providersCtrl.providerFilter">
|
||||||
<backend-monitor data-provider-id="providerId" data-backend-id="backendId" data-backend="backend"></backend-monitor>
|
<backend-monitor data-provider-id="providerId" data-backend="backend"></backend-monitor>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function VersionController($scope, $interval, $log, Version) {
|
function VersionController($scope, Version) {
|
||||||
Version.get(function (version) {
|
Version.get(function (version) {
|
||||||
$scope.version = version;
|
$scope.version = version;
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue