feat(swarm-visualizer): add the swarm-visualizer view (#1190)

app/components/swarmVisualizer/swarmVisualizer.html

@@ -0,0 +1,83 @@
+<rd-header>
+  <rd-header-title title="Swarm visualizer">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="swarm.visualizer" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="swarm">Swarm</a> &gt; <a ui-sref="swarm.visualizer">Cluster visualizer</a>
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-object-group" title="Cluster information">
+        <div class="pull-right">
+          <button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = true;" ng-if="!state.ShowInformationPanel">Show</button>
+          <button type="button" class="btn btn-sm btn-primary" ng-click="state.ShowInformationPanel = false;" ng-if="state.ShowInformationPanel">Hide</button>
+        </div>
+      </rd-widget-header>
+      <rd-widget-body ng-if="state.ShowInformationPanel">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Nodes</td>
+              <td>{{ nodes.length }}</td>
+            </tr>
+            <tr>
+              <td>Services</td>
+              <td>{{ services.length }}</td>
+            </tr>
+            <tr>
+              <td>Tasks</td>
+              <td>{{ tasks.length }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <form class="form-horizontal">
+          <div class="col-sm-12 form-section-title">
+            Filters
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label class="control-label text-left">
+                Only display running tasks
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="state.DisplayOnlyRunningTasks"><i></i>
+              </label>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row" ng-if="visualizerData">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-object-group" title="Cluster visualizer"></rd-widget-header>
+      <rd-widget-body>
+        <div class="visualizer_container">
+          <div class="node" ng-repeat="node in visualizerData.nodes track by $index">
+            <div class="node_info">
+              <div><b>{{ node.Hostname }}</b></div>
+              <div>{{ node.Role }}</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' } }">
+                <div class="service_name">{{ task.ServiceName }}</div>
+                <div>Image: {{ task.Spec.ContainerSpec.Image | hideshasum }}</div>
+                <div>Status: {{ task.Status.State }}</div>
+                <div>Update: {{ task.Updated | getisodate }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/swarmVisualizer/swarmVisualizerController.js

@@ -0,0 +1,74 @@
+angular.module('swarmVisualizer', [])
+.controller('SwarmVisualizerController', ['$q', '$scope', '$document', 'NodeService', 'ServiceService', 'TaskService', 'Notifications',
+function ($q, $scope, $document, NodeService, ServiceService, TaskService, Notifications) {
+
+  $scope.state = {
+    ShowInformationPanel: true,
+    DisplayOnlyRunningTasks: false
+  };
+
+  function assignServiceName(services, tasks) {
+    for (var i = 0; i < services.length; i++) {
+      var service = services[i];
+
+      for (var j = 0; j < tasks.length; j++) {
+        var task = tasks[j];
+
+        if (task.ServiceId === service.Id) {
+          task.ServiceName = service.Name;
+        }
+      }
+    }
+  }
+
+  function assignTasksToNode(nodes, tasks) {
+    for (var i = 0; i < nodes.length; i++) {
+      var node = nodes[i];
+      node.Tasks = [];
+
+      for (var j = 0; j < tasks.length; j++) {
+        var task = tasks[j];
+
+        if (task.NodeId === node.Id) {
+          node.Tasks.push(task);
+        }
+      }
+    }
+  }
+
+  function prepareVisualizerData(nodes, services, tasks) {
+    var visualizerData = {};
+
+    assignServiceName(services, tasks);
+    assignTasksToNode(nodes, tasks);
+
+    visualizerData.nodes = nodes;
+    $scope.visualizerData = visualizerData;
+  }
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    $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) {
+      Notifications.error('Failure', err, 'Unable to initialize cluster visualizer');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);