feat(swarmvisualizer): add labels display under node info (#2886)

* feat(swarmvisualizer): add labels display under node info

* feat(swarmvisualizer): fix css

* add toggle to display node labels

* feat(swarmvisualizer): rename filters section + fix display when label has no value

* feat(swarmvisualizer): retrieve state from local storage for node labels display toggle

app/docker/views/swarm/visualizer/swarmVisualizerController.js

@@ -5,6 +5,7 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
   $scope.state = {
     ShowInformationPanel: true,
     DisplayOnlyRunningTasks: false,
+    DisplayNodeLabels: false,
     refreshRate: '5'
   };
 
@@ -22,6 +23,11 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
       LocalStorage.storeSwarmVisualizerSettings('display_only_running_tasks', value);
   };
 
+  $scope.changeDisplayNodeLabels = function() {
+    var value = $scope.state.DisplayNodeLabels;
+    LocalStorage.storeSwarmVisualizerSettings('display_node_labels', value);
+};
+
   $scope.changeUpdateRepeater = function() {
     stopRepeater();
     setUpdateRepeater();
@@ -110,6 +116,10 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
     if (displayOnlyRunningTasks !== undefined && displayOnlyRunningTasks !== null)
         $scope.state.DisplayOnlyRunningTasks = displayOnlyRunningTasks;
 
+    var displayNodeLabels = LocalStorage.getSwarmVisualizerSettings('display_node_labels');
+    if (displayNodeLabels !== undefined && displayNodeLabels !== null)
+        $scope.state.DisplayNodeLabels = displayNodeLabels;
+
     var refreshRate = LocalStorage.getSwarmVisualizerSettings('refresh_rate');
     if (refreshRate !== undefined && refreshRate !== null)
         $scope.state.refreshRate = refreshRate;

app/docker/views/swarm/visualizer/swarmvisualizer.html

@@ -37,7 +37,7 @@
         </table>
         <form class="form-horizontal">
           <div class="col-sm-12 form-section-title">
-            Filters
+            Options
           </div>
           <div class="form-group">
             <div class="col-sm-12">
@@ -48,6 +48,14 @@
                 <input type="checkbox" ng-model="state.DisplayOnlyRunningTasks" ng-change="changeDisplayOnlyRunningTasks()"><i></i>
               </label>
             </div>
+            <div class="col-sm-12">
+              <label class="control-label text-left">
+                Display node labels
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="state.DisplayNodeLabels" ng-change="changeDisplayNodeLabels()"><i></i>
+              </label>
+            </div>
           </div>
         </form>
         <form class="form-horizontal">
@@ -95,6 +103,17 @@
               <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 class="node_labels" ng-if="node.Labels.length > 0 && state.DisplayNodeLabels">
+                <div>Labels</div>
+                <div class="node_label" ng-repeat="label in node.Labels">
+                  <span class="label_key">
+                    {{ label.key }}
+                  </span>
+                  <span class="label_value" ng-if="label.value">
+                    = {{ label.value }}
+                  </span>
+                </div>
+              </div>
             </div>
             <div class="tasks">
               <div class="task task_{{ task.Status.State | visualizerTask }}" style="border: 2px solid {{ task.ServiceId | visualizerTaskBorderColor }}" ng-repeat="task in node.Tasks | orderBy: 'ServiceName' | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">

assets/css/app.css

@@ -718,6 +718,17 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
   font-size: 16px;
 }
 
+.visualizer_container .node .node_info .node_labels {
+  border-top: 1px solid #777;
+  padding-top: 10px;
+  margin-top: 10px;
+}
+
+.visualizer_container .node .node_info .node_label {
+  font-style: italic;
+  color: #787878;
+}
+
 .visualizer_container .node .tasks {
   display: flex;
   flex-direction: column;