mirror of https://github.com/portainer/portainer
feat(swarm-visualizer): add auto-refresh to the cluster visualizer (#1561)
parent
a515b96a46
commit
340ec841fe
|
@ -50,6 +50,25 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="col-sm-12 form-section-title">
|
||||||
|
Refresh
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="refreshRate" class="col-sm-1 margin-sm-top control-label text-left">
|
||||||
|
Rate
|
||||||
|
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="display: none;"></i>
|
||||||
|
</label>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control">
|
||||||
|
<option value="5">5s</option>
|
||||||
|
<option value="10">10s</option>
|
||||||
|
<option value="30">30s</option>
|
||||||
|
<option value="60">60s</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</rd-widget-body>
|
</rd-widget-body>
|
||||||
</rd-widget>
|
</rd-widget>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,6 +94,7 @@
|
||||||
<div>{{ node.Role }}</div>
|
<div>{{ node.Role }}</div>
|
||||||
<div>CPU: {{ node.CPUs / 1000000000 }}</div>
|
<div>CPU: {{ node.CPUs / 1000000000 }}</div>
|
||||||
<div>Memory: {{ node.Memory|humansize: 2 }}</div>
|
<div>Memory: {{ node.Memory|humansize: 2 }}</div>
|
||||||
|
<div><span class="label label-{{ node.Status | nodestatusbadge }}">{{ node.Status }}</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tasks">
|
<div class="tasks">
|
||||||
<div class="task task_{{ task.Status.State | visualizerTask }}" ng-repeat="task in node.Tasks | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">
|
<div class="task task_{{ task.Status.State | visualizerTask }}" ng-repeat="task in node.Tasks | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">
|
||||||
|
|
|
@ -1,12 +1,57 @@
|
||||||
angular.module('swarmVisualizer', [])
|
angular.module('swarmVisualizer', [])
|
||||||
.controller('SwarmVisualizerController', ['$q', '$scope', '$document', 'NodeService', 'ServiceService', 'TaskService', 'Notifications',
|
.controller('SwarmVisualizerController', ['$q', '$scope', '$document', '$interval', 'NodeService', 'ServiceService', 'TaskService', 'Notifications',
|
||||||
function ($q, $scope, $document, NodeService, ServiceService, TaskService, Notifications) {
|
function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskService, Notifications) {
|
||||||
|
|
||||||
$scope.state = {
|
$scope.state = {
|
||||||
ShowInformationPanel: true,
|
ShowInformationPanel: true,
|
||||||
DisplayOnlyRunningTasks: false
|
DisplayOnlyRunningTasks: false,
|
||||||
|
refreshRate: '5'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$scope.$on('$destroy', function() {
|
||||||
|
stopRepeater();
|
||||||
|
});
|
||||||
|
|
||||||
|
$scope.changeUpdateRepeater = function() {
|
||||||
|
stopRepeater();
|
||||||
|
setUpdateRepeater();
|
||||||
|
$('#refreshRateChange').show();
|
||||||
|
$('#refreshRateChange').fadeOut(1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
function stopRepeater() {
|
||||||
|
var repeater = $scope.repeater;
|
||||||
|
if (angular.isDefined(repeater)) {
|
||||||
|
$interval.cancel(repeater);
|
||||||
|
repeater = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setUpdateRepeater() {
|
||||||
|
var refreshRate = $scope.state.refreshRate;
|
||||||
|
$scope.repeater = $interval(function() {
|
||||||
|
$q.all({
|
||||||
|
nodes: NodeService.nodes(),
|
||||||
|
services: ServiceService.services(),
|
||||||
|
tasks: TaskService.tasks()
|
||||||
|
})
|
||||||
|
.then(function success(data) {
|
||||||
|
var nodes = data.nodes;
|
||||||
|
$scope.nodes = nodes;
|
||||||
|
var services = data.services;
|
||||||
|
$scope.services = services;
|
||||||
|
var tasks = data.tasks;
|
||||||
|
$scope.tasks = tasks;
|
||||||
|
prepareVisualizerData(nodes, services, tasks);
|
||||||
|
})
|
||||||
|
.catch(function error(err) {
|
||||||
|
stopRepeater();
|
||||||
|
Notifications.error('Failure', err, 'Unable to retrieve cluster information');
|
||||||
|
});
|
||||||
|
}, refreshRate * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function assignServiceName(services, tasks) {
|
function assignServiceName(services, tasks) {
|
||||||
for (var i = 0; i < services.length; i++) {
|
for (var i = 0; i < services.length; i++) {
|
||||||
var service = services[i];
|
var service = services[i];
|
||||||
|
@ -60,6 +105,7 @@ function ($q, $scope, $document, NodeService, ServiceService, TaskService, Notif
|
||||||
var tasks = data.tasks;
|
var tasks = data.tasks;
|
||||||
$scope.tasks = tasks;
|
$scope.tasks = tasks;
|
||||||
prepareVisualizerData(nodes, services, tasks);
|
prepareVisualizerData(nodes, services, tasks);
|
||||||
|
setUpdateRepeater();
|
||||||
})
|
})
|
||||||
.catch(function error(err) {
|
.catch(function error(err) {
|
||||||
Notifications.error('Failure', err, 'Unable to initialize cluster visualizer');
|
Notifications.error('Failure', err, 'Unable to initialize cluster visualizer');
|
||||||
|
|
Loading…
Reference in New Issue