Skip to content

Change some function references to ES6 style. #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ManoMarks merged 1 commit into from
Aug 27, 2016
Merged

Change some function references to ES6 style. #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
  • Loading branch information
@alexellis
alexellis committed Aug 27, 2016
commit 65e0e03c96c62605d144c5a29f000c22b2c4aa41
81 changes: 44 additions & 37 deletions src/data-provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {

Expand All @@ -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]) => {
Expand All @@ -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);
Expand All @@ -96,6 +100,7 @@ let physicalStructProvider = ([initialNodes, initialContainers]) => {
return true;
});
},

data = () => {
let clone = _.cloneDeep(root);
_.remove(clone,({uuid,children}) => {
Expand All @@ -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 = [];
Expand Down Expand Up @@ -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([
Expand 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(),
Expand All @@ -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();
29 changes: 10 additions & 19 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('&');
Expand All @@ -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
20 changes: 7 additions & 13 deletions src/vis-physical/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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
Expand All @@ -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 }