feat(dashboard): new Dashboard
- show providers (auto refresh: 2s) - show health (auto refresh: 3s) - more colors - add font - remove jumbotron - javascript minified version
This commit is contained in:
Fernandez Ludovic
parent
da3d119a43
commit
ac57dda074
24 changed files with 420 additions and 0 deletions
26
static/app/sections/health/health.controller.js
Normal file
26
static/app/sections/health/health.controller.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('traefik.section.health')
|
||||
.controller('HealthController', ['$scope', '$interval', '$log', 'Health', function ($scope, $interval, $log, Health) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.health = Health.get();
|
||||
|
||||
var intervalId = $interval(function () {
|
||||
Health.get(function (health) {
|
||||
vm.health = health;
|
||||
}, function (error) {
|
||||
vm.health = {};
|
||||
$log.error(error);
|
||||
});
|
||||
}, 3000);
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
$interval.cancel(intervalId);
|
||||
});
|
||||
|
||||
}]);
|
||||
|
||||
})();
|
||||
46
static/app/sections/health/health.html
Normal file
46
static/app/sections/health/health.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<div>
|
||||
<h1 class="text-danger">
|
||||
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Health
|
||||
</h1>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span>Average response time sec :</span><span class="badge">{{healthCtrl.health.average_response_time_sec}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Average response time :</span><span class="badge">{{healthCtrl.health.average_response_time}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Total response time sec :</span><span class="badge">{{healthCtrl.health.total_response_time_sec}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Total response time :</span><span class="badge">{{healthCtrl.health.total_response_time}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Total count :</span><span class="badge">{{healthCtrl.health.total_count}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>PID :</span><span class="badge">{{healthCtrl.health.pid}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Uptime :</span><span class="badge">{{healthCtrl.health.uptime}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Uptime sec :</span><span class="badge">{{healthCtrl.health.uptime_sec}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Time :</span><span class="badge">{{healthCtrl.health.time}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Unixtime :</span><span class="badge">{{healthCtrl.health.unixtime}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Status code count :</span><span class="badge">{{healthCtrl.health.status_code_count}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Total status code count :</span><span class="badge">{{healthCtrl.health.total_status_code_count}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span>Count :</span><span class="badge">{{healthCtrl.health.count}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
16
static/app/sections/health/health.module.js
Normal file
16
static/app/sections/health/health.module.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('traefik.section.health', ['traefik.core.health'])
|
||||
.config(['$stateProvider', function ($stateProvider) {
|
||||
|
||||
$stateProvider.state('health', {
|
||||
url: '/health',
|
||||
templateUrl: 'app/sections/health/health.html',
|
||||
controller: 'HealthController',
|
||||
controllerAs: 'healthCtrl'
|
||||
});
|
||||
|
||||
}]);
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section.providers.backend-monitor')
|
||||
.controller('BackendMonitorController', function () {
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section.providers.backend-monitor')
|
||||
.directive('backendMonitor', function () {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
templateUrl: 'app/sections/providers/backend-monitor/backend-monitor.html',
|
||||
controller: 'BackendMonitorController',
|
||||
controllerAs: 'backendCtrl',
|
||||
bindToController: true,
|
||||
scope: {
|
||||
backend: '=',
|
||||
backendId: '=',
|
||||
providerId: '='
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
<strong><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> {{backendCtrl.backendId}}</strong> [{{backendCtrl.providerId}}]
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<table class="panel-table__servers table table-striped table-hover">
|
||||
<tr>
|
||||
<td><em>Server</em></td>
|
||||
<td><em>URL</em></td>
|
||||
<td><em>Weight</em></td>
|
||||
</tr>
|
||||
<tr data-ng-repeat="(serverId, server) in backendCtrl.backend.Servers">
|
||||
<td>{{serverId}}</td>
|
||||
<td><code><a data-ng-href="{{server.url}}">{{server.URL}}</a></code></td>
|
||||
<td>{{server.Weight}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="panel-footer" data-ng-show="backendCtrl.backend.LoadBalancer || backendCtrl.backend.CircuitBreaker">
|
||||
<span data-ng-show="backendCtrl.backend.LoadBalancer" class="label label-success">Load Balancer: {{backendCtrl.backend.LoadBalancer.Method}}</span>
|
||||
<span data-ng-show="backendCtrl.backend.CircuitBreaker" class="label label-success">Circuit Breaker: {{backendCtrl.backend.CircuitBreaker.Expression}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section.providers.backend-monitor', []);
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section.providers.frontend-monitor')
|
||||
.controller('FrontendMonitorController', function () {
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section.providers.frontend-monitor')
|
||||
.directive('frontendMonitor', function () {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
templateUrl: 'app/sections/providers/frontend-monitor/frontend-monitor.html',
|
||||
controller: 'FrontendMonitorController',
|
||||
controllerAs: 'frontendCtrl',
|
||||
bindToController: true,
|
||||
scope: {
|
||||
frontend: '=',
|
||||
frontendId: '=',
|
||||
providerId: '='
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="panel panel-warning">
|
||||
<div class="panel-heading">
|
||||
<strong><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> {{frontendCtrl.frontendId}}</strong> [{{frontendCtrl.providerId}}]
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<table class="panel-table__routes table table-striped table-hover">
|
||||
<tr>
|
||||
<td><em>Route</em></td>
|
||||
<td><em>Rule</em></td>
|
||||
<td><em>Value</em></td>
|
||||
</tr>
|
||||
<tr data-ng-repeat="(routeId, route) in frontendCtrl.frontend.Routes">
|
||||
<td>{{routeId}}</td>
|
||||
<td>{{route.Rule}}</td>
|
||||
<td><code>{{route.Value}}</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div data-bg-show="frontendCtrl.frontend.Backend" class="panel-footer">
|
||||
<span class="label label-warning" role="button" data-toggle="collapse" href="#{{frontendCtrl.frontend.Backend}}" aria-expanded="false">{{frontendCtrl.frontend.Backend}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('traefik.section.providers.frontend-monitor', []);
|
||||
|
||||
})();
|
||||
27
static/app/sections/providers/providers.controller.js
Normal file
27
static/app/sections/providers/providers.controller.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section.providers')
|
||||
.controller('ProvidersController', ['$scope', '$interval', '$log', 'Providers', function ($scope, $interval, $log, Providers) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.providers = Providers.get();
|
||||
|
||||
var intervalId = $interval(function () {
|
||||
Providers.get(function (providers) {
|
||||
vm.providers = providers;
|
||||
}, function (error) {
|
||||
vm.providers = {};
|
||||
$log.error(error);
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
$interval.cancel(intervalId);
|
||||
});
|
||||
|
||||
}]);
|
||||
|
||||
})();
|
||||
14
static/app/sections/providers/providers.html
Normal file
14
static/app/sections/providers/providers.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!--{{providersCtrl.providers}}-->
|
||||
<div class="row" data-ng-repeat="(providerId, provider) in providersCtrl.providers">
|
||||
<div class="col-md-6">
|
||||
<div data-ng-repeat="(frontendId, frontend) in provider.Frontends">
|
||||
<frontend-monitor data-provider-id="providerId" data-frontend-id="frontendId" data-frontend="frontend"></frontend-monitor>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div data-ng-repeat="(backendId, backend) in provider.Backends">
|
||||
<backend-monitor data-provider-id="providerId" data-backend-id="backendId" data-backend="backend"></backend-monitor>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
21
static/app/sections/providers/providers.module.js
Normal file
21
static/app/sections/providers/providers.module.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section.providers', [
|
||||
'traefik.core.provider',
|
||||
'traefik.section.providers.backend-monitor',
|
||||
'traefik.section.providers.frontend-monitor'
|
||||
])
|
||||
.config(['$stateProvider', function ($stateProvider) {
|
||||
|
||||
$stateProvider.state('provider', {
|
||||
url: '/',
|
||||
templateUrl: 'app/sections/providers/providers.html',
|
||||
controller: 'ProvidersController',
|
||||
controllerAs: 'providersCtrl'
|
||||
});
|
||||
|
||||
}]);
|
||||
|
||||
})();
|
||||
12
static/app/sections/sections.config.js
Normal file
12
static/app/sections/sections.config.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section')
|
||||
.config(['$urlRouterProvider', function ($urlRouterProvider) {
|
||||
|
||||
$urlRouterProvider.otherwise('/');
|
||||
|
||||
}]);
|
||||
|
||||
})();
|
||||
11
static/app/sections/sections.module.js
Normal file
11
static/app/sections/sections.module.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('traefik.section', [
|
||||
'ui.router',
|
||||
'traefik.section.providers',
|
||||
'traefik.section.health'
|
||||
]);
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue