Drawing rack
diff --git a/views/ngXosViews/diagnostic/env/default.js b/views/ngXosViews/diagnostic/env/default.js
index f76b607..f7ba7e7 100644
--- a/views/ngXosViews/diagnostic/env/default.js
+++ b/views/ngXosViews/diagnostic/env/default.js
@@ -8,6 +8,6 @@
module.exports = {
host: 'http://clnode078.clemson.cloudlab.us:9999/',
- xoscsrftoken: 'Lbrkulk7c9fQOloSjhQEqLdDDFRNHsuL',
- xossessionid: '7j0w1m7t4qcyu472voe32jz6ck9dnq14'
+ xoscsrftoken: 'GZ6rjD63x2mkx6BpNjHVSpMg3YvxV4HL',
+ xossessionid: 'sz214m5mr3xyc983l1oi9no369ixs73h'
};
diff --git a/views/ngXosViews/diagnostic/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
index 634b6ed..595ad27 100644
--- a/views/ngXosViews/diagnostic/src/css/serviceTopology.css
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -38,6 +38,12 @@
stroke-width: 1px;
}
+logic-topology .node.rack rect{
+ fill: #fff;
+ stroke: steelblue;
+ stroke-width: 1px;
+}
+
/* LEGEND */
.legend {
diff --git a/views/ngXosViews/diagnostic/src/js/config.js b/views/ngXosViews/diagnostic/src/js/config.js
index f4ce775..a693317 100644
--- a/views/ngXosViews/diagnostic/src/js/config.js
+++ b/views/ngXosViews/diagnostic/src/js/config.js
@@ -6,13 +6,6 @@
widthMargin: 20,
heightMargin: 30,
duration: 750,
- // elWidths: { // this is the fixed width for elements
- // devices: 20,
- // subscribers: 20,
- // router: 20,
- // network: 104,
- // rack: 105
- // },
elWidths: [20, 104, 105, 104, 20, 150],
circle: {
radius: 10,
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index a05fcff..4e00423 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -79,10 +79,7 @@
// Normalize for fixed-depth.
nodes.forEach((d) => {
// position the child node horizontally
- // const step = ((svgWidth - (serviceTopologyConfig.widthMargin * 2)) / 7);
- // d.y = (6 - d.depth) * step;
d.y = this.computeElementPosition(svgWidth)[d.depth];
- console.log(d.id, d.y);
});
let links = layout.links(nodes);
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 67156d5..dba2325 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -9,7 +9,7 @@
var instanceId = 0;
angular.module('xos.serviceTopology')
- .service('NodeDrawer', function(d3, serviceTopologyConfig, Node){
+ .service('NodeDrawer', function(d3, serviceTopologyConfig, Node, RackHelper){
this.addNetworks = (nodes) => {
nodes.append('path')
.attr({
@@ -31,23 +31,35 @@
Node.queryWithInstances().$promise
.then((computeNodes) => {
- this.drawComputeNodes(nodes, computeNodes);
+ let [w, h] = RackHelper.getRackSize(computeNodes);
+
+ let rack = nodes
+ .append('g').
+ attr({
+ transform: d => `translate(${- (w / 2)}, ${- (h / 2)})`
+ });
+
+ rack
+ .append('rect')
+ .attr({
+ width: w,
+ height: h
+ });
+
+ nodes.append('text')
+ .attr({
+ 'text-anchor': 'middle',
+ y: - (h / 2) - 10
+ })
+ .text(d => d.name);
+
+ this.drawComputeNodes(rack, computeNodes);
});
-
- // NOTE should we draw the rack?
- nodes.append('rect')
- .attr(serviceTopologyConfig.rack);
-
- nodes.append('text')
- .attr({
- 'text-anchor': 'middle',
- y: serviceTopologyConfig.rack.y - 10
- })
- .text(d => d.name);
};
this.drawComputeNodes = (container, nodes) => {
- console.log('drawComputeNodes');
+
+
let elements = container.selectAll('.compute-nodes')
.data(nodes, d => {
if(!angular.isString(d.d3Id)){
@@ -58,11 +70,23 @@
var nodeContainer = elements.enter().append('g')
.attr({
- class: 'compute-node'
+ class: 'compute-node',
+ transform: (d) => `translate(${RackHelper.getComputeNodePosition(nodes, d.d3Id.replace('compute-node-', '') - 1)})`
});
nodeContainer.append('rect')
- .attr(serviceTopologyConfig.computeNode);
+ .attr({
+ width: d => RackHelper.getComputeNodeSize(d.instances)[0],
+ height: d => RackHelper.getComputeNodeSize(d.instances)[1],
+ });
+
+ nodeContainer.append('text')
+ .attr({
+ 'text-anchor': 'start',
+ y: 15, //FIXME
+ x: 10 //FIXME
+ })
+ .text(d => d.humanReadableName.split('.')[0]);
// if there are Compute Nodes
if(nodeContainer.length > 0){
@@ -74,19 +98,29 @@
};
this.drawInstances = (container, instances) => {
-
- // TODO position instances... How??
let elements = container.selectAll('.instances')
.data(instances, d => angular.isString(d.d3Id) ? d.d3Id : d.d3Id = `instance-${++instanceId}`)
var instanceContainer = elements.enter().append('g')
.attr({
- class: 'instance'
+ class: 'instance',
+ transform: d => `translate(${RackHelper.getInstancePosition(d.d3Id.replace('instance-', '') - 1)})`
});
instanceContainer.append('rect')
- .attr(serviceTopologyConfig.instance);
+ .attr({
+ width: serviceTopologyConfig.instance.width,
+ height: serviceTopologyConfig.instance.height
+ });
+
+ instanceContainer.append('text')
+ .attr({
+ 'text-anchor': 'start',
+ y: 13, //FIXME
+ x: 5 //FIXME
+ })
+ .text(d => d.humanReadableName.split('.')[0]);
};
this.addPhisical = (nodes) => {
diff --git a/views/ngXosViews/diagnostic/src/js/rackHelper.js b/views/ngXosViews/diagnostic/src/js/rackHelper.js
index c25b934..345bd80 100644
--- a/views/ngXosViews/diagnostic/src/js/rackHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/rackHelper.js
@@ -19,6 +19,7 @@
const labelSpace = this.getComputeNodeLabelSize();
const height = (serviceTopologyConfig.instance.height * rows) + (serviceTopologyConfig.instance.margin * (rows + 1)) + labelSpace;
+
return [width, height];
});
@@ -65,6 +66,9 @@
*/
this.getComputeNodePosition = (nodes, position) => {
+
+ console.log(position);
+
const x = serviceTopologyConfig.computeNode.margin;
let previousElEight = lodash.reduce(nodes.slice(0, position), (val, node) => {
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index 8c3e317..02ed7d5 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -39,7 +39,6 @@
node.instances = list[i];
return node;
});
- console.log(res.data);
deferred.resolve(res.data);
})