Change some function references to ES6 style.

Convert some var to let.

Lock in container image title color, add a thing border with varied color.

Tested on Docker for Mac

Author: alexellis

src/data-provider.js

@@ -12,16 +12,16 @@ import {
   getWebSocket
 } from './utils/request';
 
-var STARTED = 0;
+let STARTED = 0;
 
-let SINGLETON,
-    CURRENT_SERVICES_URIS;
+let SINGLETON;
+let CURRENT_SERVICES_URIS;
 
 let PHYSICAL_STRUCT;
 
-function tutumEventHandler(e) {
+let tutumEventHandler = (e) => {
   console.log(e);
-}
+};
 
 let nodeOrContainerExists = (arr, value) => {
 
@@ -40,16 +40,18 @@ let strToHash = (str) => {
   return hash;
 };
 
-let stringToColour = (str) => {
-  let hash = strToHash(str);
-
-  // int/hash to hex
-  let colour = "#";
+let hashToHexColor = (hash) => {
+  let color = "#";
   for (var i = 0; i < 3; ) {
-    colour += ("00" + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2);
+    color += ("00" + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2);
   }
+  return color;
+}
 
-  return colour;
+let stringToColor = (str) => {
+  let hash = strToHash(str);
+  let color = hashToHexColor(hash);
+  return color;
 };
 
 let physicalStructProvider = ([initialNodes, initialContainers]) => {
@@ -65,23 +67,25 @@ let physicalStructProvider = ([initialNodes, initialContainers]) => {
       var node = _.find(cluster.children,{ ID:NodeID });
       if(!node) return;
        var dt = new Date(cloned.UpdatedAt);
-       var color=  stringToColour(cloned.ServiceID);
+       var color =  stringToColor(cloned.ServiceID);
        let tagName = cloned.Spec.ContainerSpec.Image.split(':')[1];
-       if(!tagName) {
-          tagName = "latest";
-       }
-
-       let imageTag ="<span style='color:" + color+"; font-weight: bold;font-size: 12px'>"+ cloned.Spec.ContainerSpec.Image.split(':')[0] +"</span>"+
-          "<br/> tag : "+ tagName +
-          "<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/>";
+       let dateStamp = dt.getDate()+"/"+(dt.getMonth()+1)+" "+ dt.getHours()+":"+dt.getMinutes();
+
+       let imageTag ="<div style='height: 100%; padding: 5px 5px 5px 5px; border: 1px solid "+color+"'>"+
+           "<span style='color: white; font-weight: bold;font-size: 12px'>"+ cloned.Spec.ContainerSpec.Image.split(':')[0] +"</span>"+
+           "<br/> tag : " + (tagName ? tagName : "latest") +
+           "<br/>" + (cloned.Spec.ContainerSpec.Args?" cmd : "+cloned.Spec.ContainerSpec.Args:"" ) +
+           "<br/> updated : " + dateStamp +
+           "<br/> ID : "+cloned.Status.ContainerStatus.ContainerID+
+           "<br/>"+
+          "</div>";
+
       cloned.tag = imageTag;
       node.children.push(cloned);
       return true;
     });
   },
+
   updateContainer = (container) => {
     let {uuid, node} = container;
     let [nodeUuid] = uuidRegExp.exec(node);
@@ -96,6 +100,7 @@ let physicalStructProvider = ([initialNodes, initialContainers]) => {
       return true;
     });
   }, 
+  
   data = () => {
     let clone = _.cloneDeep(root);
     _.remove(clone,({uuid,children}) => {
@@ -104,19 +109,23 @@ let physicalStructProvider = ([initialNodes, initialContainers]) => {
 
     return {root: clone};
   },
+  
   addNodeCluster = (nodeCluster) => {
     var cloned = Object.assign({},nodeCluster);
     cloned.children = [];
     console.log(cloned);
     root.push(cloned);
   },
+  
   removeNodeCluster = (nodeCluster) => {
     _.remove(root,{ uuid: nodeCluster.uuid });
   },
+  
   updateNodeCluster = (nodeCluster) => {
     var currentCluster = _.findWhere(root,{ uuid: nodeCluster.uuid });
     Object.assign(currentCluster,nodeCluster);
   },
+  
   addNode = (node) => {
     let cloned = Object.assign({},node);
     cloned.children = [];
@@ -206,15 +215,12 @@ let physicalStructProvider = ([initialNodes, initialContainers]) => {
   };
 }
 
-
-
 class DataProvider extends EventEmitter {
-  constructor(){
+  constructor() {
     super()
-    
   }
 
-  start(){
+  start() {
     STARTED = 1;
     //console.log(STARTED);
     var clusterInit = Promise.all([
@@ -226,16 +232,18 @@ class DataProvider extends EventEmitter {
       return resources;
     });
 
-      Promise.all([ clusterInit ])
+    Promise.all([ clusterInit ])
       .then(([resources]) => {
-      PHYSICAL_STRUCT = physicalStructProvider(resources);
-      this.emit('infrastructure-data',PHYSICAL_STRUCT.data());
-      this.emit('start-reload');
+        PHYSICAL_STRUCT = physicalStructProvider(resources);
+        this.emit('infrastructure-data',PHYSICAL_STRUCT.data());
+        this.emit('start-reload');
        });
   }
+
   reload() {
-    if(STARTED ==0) return;
+    if(STARTED == 0) return;
     STARTED++;
+
    // console.log(STARTED);
     var clusterInit = Promise.all([
       getAllNodes(),
@@ -246,13 +254,12 @@ class DataProvider extends EventEmitter {
       return resources;
     });
 
-      Promise.all([ clusterInit ])
-      .then(([resources]) => {
+    Promise.all([ clusterInit ])
+    .then(([resources]) => {
       PHYSICAL_STRUCT.updateData(resources);
-      this.emit('infrastructure-data',PHYSICAL_STRUCT.data());
+      this.emit('infrastructure-data', PHYSICAL_STRUCT.data());
     });
   }
-  
 }
 
 export default SINGLETON = new DataProvider();

src/main.js

@@ -8,8 +8,6 @@ require('normalize.css');
 require('animate.css/animate.css');
 require('./main.less');
 
-
-
 function parseQuery(qstr) {
   var query = {};
   var a = qstr.substr(1).split('&');
@@ -19,35 +17,28 @@ function parseQuery(qstr) {
   }
   return query;
 }
-let query = parseQuery(window.location.search);
 
+let query = parseQuery(window.location.search);
+let tabPhysical = document.getElementById('tab-physical');
+let physical = document.getElementById('vis-physical');
 
-var tabPhysical = document.getElementById('tab-physical');
-
-var physical = document.getElementById('vis-physical');
-
-/*
-if(!query.tab || query.tab === 'tab1'){
-  document.body.className = 'tab1';
-  addClass(physical,'hidden');
-} else {
-  document.body.className = 'tab2';
-  removeClass(tabPhysical,'hidden');
-}
-*/
 tabPhysical.addEventListener('click',() => {
   removeClass(physical, 'hidden');
   removeClass(tabPhysical, 'hidden');
 
   document.body.className = 'tab2';
 });
 
+/* Enable polling */
 function reload(){
   provider.reload();
-  setTimeout(reload,MS);
+  setTimeout(reload, MS);
 }
-console.log(MS);
-provider.on('infrastructure-data',physicalVisualization.render);
+
+console.log("Polling refresh: " + MS);
+
+provider.on('infrastructure-data', physicalVisualization.render);
 provider.start();
 reload();
+
 //TODO: Emit Event that requeries data, removes old data recreates visualizations

src/vis-physical/index.js

@@ -13,12 +13,14 @@ var vis = d3.select('#app')
   .attr('id','vis-physical');
 
 var wrapper = vis.append('div')
-  .classed('wrapper',true)
+  .classed('wrapper', true);
+
 function removeVis() {
   cluster = wrapper.selectAll('.node-cluster')
   cluster.remove();
 }
-function  render ({root}) {
+
+function render ({root}) {
   var cluster, node, container, clusterEnter, nodeEnter;
   cluster = wrapper.selectAll('.node-cluster').data(root);
 
@@ -61,7 +63,8 @@ function  render ({root}) {
 
   cluster
     .select('.node-cluster-meta')
-    .html(({name,state='',node_type='',region=''}) => {
+    .html(({name,state = '', node_type = '', region = ''}) => {
+
       // This is a HORRIBLE hack
       // but I don't wanna fetch nodeTypes from the API as from now
       var displayType = node_type.split('/')[4] || ''; // horrible
@@ -88,18 +91,9 @@ function  render ({root}) {
   container.on('mouseenter',null);
   container.on('mouseleave',null);
 
-  //container.on('mouseenter',function(){
-  //  d3.select(this).html((d) => d.name);
-  //});
-
-  //container.on('mouseleave',function(){
-  //  d3.select(this).html('');
-  //});
-
   cluster.exit().remove();
   container.exit().remove();
   node.exit().remove();
-
 }
 
-export default {render}
+export default { render }