add service colors

Author: DovAmir

.dockerignore

@@ -0,0 +1,3 @@
+.git
+node_modules/caniuse-db/*
+

.idea/uiDesigner.xml

@@ -0,0 +1,9 @@
+
+docker swarm init  --advertise-addr 127.0.0.1:2377
+docker service create rabbitmq:3.6.5
+
+npm run dist && npm start
+
+
+#docker swarm leave --force
+

build.sh

@@ -20,8 +20,8 @@
   "keywords": ["Docker","Swarm","D3","Node Visualization"],
   "author": "Your name here",
   "devDependencies": {
-    "babel-core": "^5.8.22",
-    "babel-loader": "^5.3.2",
+    "babel-core": "^5.8.38",
+    "babel-loader": "^5.4.2",
     "chai": "^3.2.0",
     "copyfiles": "^0.2.1",
     "css-loader": "^0.16.0",

dist/app.js

@@ -1,5 +1,5 @@
+
 docker build -t=datarails/datarailsserver:visualizer .
 docker push datarails/datarailsserver:visualizer
+docker swarm leave --force
 
-
-# npm run dist && npm start

dist/app.js.map

@@ -32,6 +32,16 @@ function nodeOrContainerExists(arr, value) {
   return false;
 }
 
+var stringToColour = function(str) {
+
+  // str to hash
+  for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
+
+  // int/hash to hex
+  for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2));
+
+  return colour;
+}
 
 function physicalStructProvider([initialNodes,initialContainers]){
   let containers = _.map(initialContainers, _.cloneDeep);
@@ -45,10 +55,14 @@ function physicalStructProvider([initialNodes,initialContainers]){
     _.find(root,(cluster) => {
       var node = _.find(cluster.children,{ ID:NodeID });
       if(!node) return;
-       var dt=new Date(cloned.UpdatedAt)
-      let imageTag = cloned.Spec.ContainerSpec.Image + " <br/> " + (cloned.Spec.ContainerSpec.Args?cloned.Spec.ContainerSpec.Args:"" ) +
-          " <br/> updated : "+dt.getDate()+"/"+(dt.getMonth()+1)+" "+ dt.getHours()+":"+dt.getMinutes()+"<br/> ID : "+cloned.Status.ContainerStatus.ContainerID+
-          "<br/> ip : ";
+       var dt=new Date(cloned.UpdatedAt);
+       var color=  stringToColour(cloned.ServiceID);
+      let imageTag ="<span style='color:" + color+"; font-weight: bold;font-size: 12px'>"+ cloned.Spec.ContainerSpec.Image.split(':')[0] +"</span>"+
+          "<br/> tag : "+cloned.Spec.ContainerSpec.Image.split(':')[1]+
+          "<br/>" + (cloned.Spec.ContainerSpec.Args?" cmd : "+cloned.Spec.ContainerSpec.Args:"" ) +
+          "<br/> updated : "+dt.getDate()+"/"+(dt.getMonth()+1)+" "+ dt.getHours()+":"+dt.getMinutes()+
+          "<br/> ID : "+cloned.Status.ContainerStatus.ContainerID+
+          "<br/>";
       cloned.tag = imageTag;
       node.children.push(cloned);
       return true;
@@ -121,7 +135,8 @@ function physicalStructProvider([initialNodes,initialContainers]){
           name = node.Description.Hostname;
           if(name.length>0) {
             currentnode.Description.Hostname = name ;
-            currentnode.name = name+" <br/> "+ object.Spec.Role+" <br/>mem : "+(object.Description.Resources.MemoryBytes/100000000).toFixed(0)+"G";
+            currentnode.name = name+" <br/> "+ object.Spec.Role+
+            " <br/>"+(object.Description.Resources.MemoryBytes/100000000).toFixed(0)+"G free";
           }
           updateNode(currentnode, node.state);
         } 

package.json

@@ -44,7 +44,8 @@ function filterStoppedNodes (objects) {
 	object.state = "down"	
     }
     object.name = object.Description.Hostname;
-    object.name= object.name+" <br/>"+object.Spec.Role+" <br/>"+"mem : "+(object.Description.Resources.MemoryBytes/1000000000).toFixed(0)+"G";
+    object.name= object.name+" <br/>"+object.Spec.Role+
+        " <br/>"+(object.Description.Resources.MemoryBytes/1000000000).toFixed(0)+"G free";
     readyNodes.push(object);
   }
   readyNodes.sort(function (a, b) {

build_push.sh push.sh

@@ -78,7 +78,7 @@
   }
 
   .node-meta{
-    line-height: 2;
+    //line-height: 0;
     font-size: 20pt;
     text-align: center;
     text-indent: -3px;