github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(swarm-visualizer): add auto-refresh to the cluster visualizer (#1561)

pull/1576/head
Miguel A. C 2018-01-12 16:10:02 +01:00 committed by Anthony Lapenna
parent a515b96a46
commit 340ec841fe
2 changed files with 69 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/swarmVisualizer/swarmVisualizer.html
View File

@ -50,6 +50,25 @@
</div>
</div>
</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>
</div>
@ -75,6 +94,7 @@
<div>{{ node.Role }}</div>
<div>CPU: {{ node.CPUs / 1000000000 }}</div>
<div>Memory: {{ node.Memory|humansize: 2 }}</div>
<div><span class="label label-{{ node.Status | nodestatusbadge }}">{{ node.Status }}</span></div>
</div>
<div class="tasks">
<div class="task task_{{ task.Status.State | visualizerTask }}" ng-repeat="task in node.Tasks | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">

52
app/components/swarmVisualizer/swarmVisualizerController.js
View File

@ -1,12 +1,57 @@
angular.module('swarmVisualizer', [])
.controller('SwarmVisualizerController', ['$q', '$scope', '$document', 'NodeService', 'ServiceService', 'TaskService', 'Notifications',
function ($q, $scope, $document, NodeService, ServiceService, TaskService, Notifications) {
.controller('SwarmVisualizerController', ['$q', '$scope', '$document', '$interval', 'NodeService', 'ServiceService', 'TaskService', 'Notifications',
function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskService, Notifications) {
$scope.state = {
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) {
for (var i = 0; i < services.length; i++) {
var service = services[i];
@ -60,6 +105,7 @@ function ($q, $scope, $document, NodeService, ServiceService, TaskService, Notif
var tasks = data.tasks;
$scope.tasks = tasks;
prepareVisualizerData(nodes, services, tasks);
setUpdateRepeater();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to initialize cluster visualizer');