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

app/components/swarmVisualizer/swarmVisualizer.html

@@ -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' } }">

app/components/swarmVisualizer/swarmVisualizerController.js

@@ -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');