master

.dockerignore

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

Dockerfile

@@ -18,8 +18,8 @@ RUN npm run dist
 # Default host is localhost. This is for same-origin policies.
 ENV HOST "localhost"
 
-# Number of milliseconds between polling requests. Default is 200.
-ENV MS 200
+# Number of milliseconds between polling requests. Default is 1000.
+ENV MS 1000
 
 #Default port to expose.
 ENV PORT 8080

README.md

@@ -1,3 +1,17 @@
+*** note ***
+
+I did some improvements to the original https://github.com/ManoMarks/docker-swarm-visualizer
+
+It adds node and container data to make this visualizer a better swarm monitoring tool.
+
+Here is a sample image of nodes with data:
+
+![Sample image of  nodes with data](./nodes.png)
+
+
+
+see installation instructions from https://github.com/ManoMarks/docker-swarm-visualizer below :
+
 # Docker Swarm Visualizer
 
 Demo container that displays Docker services on a Docker Swarm a diagram.

build.sh

@@ -0,0 +1,10 @@
+
+
+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
+
+

package.json

@@ -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",

push.sh

@@ -0,0 +1,5 @@
+
+docker build -t=turaaa/swarmvisualizer:latest .
+docker push turaaa/swarmvisualizer:latest
+#docker swarm leave --force
+

server.js

@@ -8,12 +8,14 @@ var http = require('http');
 var WS = require('ws');
 
 var WebSocketServer = WS.Server;
-var host = process.env.HOST;
-var port;
+var host =  process.env.HOST ||"localhost";
+process.env.HOST=host
+var port =process.env.PORT || 8080;
+process.env.PORT=port;
 var indexData;
 var app = express();
-var ms = process.env.MS;
-
+var ms = process.env.MS || 1000;
+process.env.MS=ms
 
 app.use(express.static('dist'));
 

src/data-provider.js

@@ -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,7 +55,14 @@ function physicalStructProvider([initialNodes,initialContainers]){
     _.find(root,(cluster) => {
       var node = _.find(cluster.children,{ ID:NodeID });
       if(!node) return;
-      let imageTag = cloned.Spec.ContainerSpec.Image.split(':')[1];
+       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;
@@ -110,14 +127,16 @@ function physicalStructProvider([initialNodes,initialContainers]){
     for (let node of nodes) {
       if(!nodeOrContainerExists(currentnodelist,node.ID)) {
         updateNode(node,'ready');
+
         addNode(node);
     } else {
       for (let currentnode of currentnodelist) {
         if (node.ID == currentnode.ID) {
           name = node.Description.Hostname;
           if(name.length>0) {
-            currentnode.Description.Hostname = name;
-            currentnode.name = name;
+            currentnode.Description.Hostname = name ;
+            currentnode.name = name+" <br/> "+ currentnode.Spec.Role+
+            " <br/>"+(currentnode.Description.Resources.MemoryBytes/1000000000).toFixed(0)+"G free";
           }
           updateNode(currentnode, node.state);
         } 
@@ -184,7 +203,7 @@ class DataProvider extends EventEmitter {
 
   start(){
     STARTED = 1;
-    console.log(STARTED);
+    //console.log(STARTED);
     var clusterInit = Promise.all([
       getAllNodes(),
       getAllTasks()
@@ -204,7 +223,7 @@ class DataProvider extends EventEmitter {
   reload() {
     if(STARTED ==0) return;
     STARTED++;
-    console.log(STARTED);
+   // console.log(STARTED);
     var clusterInit = Promise.all([
       getAllNodes(),
       getAllTasks()

src/utils/request.js

@@ -44,6 +44,8 @@ function filterStoppedNodes (objects) {
 	object.state = "down"	
     }
     object.name = object.Description.Hostname;
+    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) {

src/vis-physical/index.js

@@ -83,18 +83,18 @@ function  render ({root}) {
 
   container
     .classed('foreign', (d) => !d.state)
-    .attr('tag',(d) => _.kebabCase(d.tag))
+    .attr('tag',(d) => _.kebabCase(d.tag)).html((d) => d.tag)
 
   container.on('mouseenter',null);
   container.on('mouseleave',null);
 
-  container.on('mouseenter',function(){
-    d3.select(this).html((d) => d.name);
-  });
+  //container.on('mouseenter',function(){
+  //  d3.select(this).html((d) => d.name);
+  //});
 
-  container.on('mouseleave',function(){
-    d3.select(this).html('');
-  });
+  //container.on('mouseleave',function(){
+  //  d3.select(this).html('');
+  //});
 
   cluster.exit().remove();
   container.exit().remove();

src/vis-physical/styles.less

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