refactor(swarm-visualizer): move task border logic to a filter (#1686)

app/docker/filters/filters.js

@@ -4,6 +4,22 @@ function includeString(text, values) {
   });
 }
 
+function strToHash(str) {
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash;
+}
+
+function hashToHexColor(hash) {
+  var color = '#';
+  for (var i = 0; i < 3;) {
+    color += ('00' + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2);
+  }
+  return color;
+}
+
 angular.module('portainer.docker')
 .filter('visualizerTask', function () {
   'use strict';
@@ -19,6 +35,14 @@ angular.module('portainer.docker')
     return 'running';
   };
 })
+.filter('visualizerTaskBorderColor', function () {
+  'use strict';
+  return function (str) {
+    var hash = strToHash(str);
+    var color = hashToHexColor(hash);
+    return color;
+  };
+})
 .filter('taskstatusbadge', function () {
   'use strict';
   return function (text) {

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

@@ -19,28 +19,6 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
     $('#refreshRateChange').fadeOut(1500);
   };
 
-  function strToHash(str) {
-    var hash = 0;
-    for (var i = 0; i < str.length; i++) {
-      hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return hash;
-  }
-
-  function hashToHexColor(hash) {
-    var color = '#';
-    for (var i = 0; i < 3;) {
-      color += ('00' + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2);
-    }
-    return color;
-  }
-
-  function stringToColor(str) {
-    var hash = strToHash(str);
-    var color = hashToHexColor(hash);
-    return color;
-  }
-
   function stopRepeater() {
     var repeater = $scope.repeater;
     if (angular.isDefined(repeater)) {
@@ -83,7 +61,6 @@ function ($q, $scope, $document, $interval, NodeService, ServiceService, TaskSer
 
         if (task.ServiceId === service.Id) {
           task.ServiceName = service.Name;
-          task.ServiceColor = stringToColor(task.ServiceId);
         }
       }
     }

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

@@ -97,7 +97,7 @@
               <div><span class="label label-{{ node.Status | nodestatusbadge }}">{{ node.Status }}</span></div>
             </div>
             <div class="tasks">
-              <div class="task task_{{ task.Status.State | visualizerTask }}" style="border: 2px solid {{task.ServiceColor}}" ng-repeat="task in node.Tasks | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">
+              <div class="task task_{{ task.Status.State | visualizerTask }}" style="border: 2px solid {{ task.ServiceId | visualizerTaskBorderColor }}" 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>