Calculating rack details
diff --git a/views/ngXosViews/diagnostic/src/index.html b/views/ngXosViews/diagnostic/src/index.html
index afe559c..c3f0623 100644
--- a/views/ngXosViews/diagnostic/src/index.html
+++ b/views/ngXosViews/diagnostic/src/index.html
@@ -36,6 +36,7 @@
<script src="/.tmp/serviceTopologyHelper.js"></script>
<script src="/.tmp/serviceTopology.js"></script>
<script src="/.tmp/rest_services.js"></script>
+<script src="/.tmp/rackHelper.js"></script>
<script src="/.tmp/nodeDrawer.js"></script>
<script src="/.tmp/logicTopologyHelper.js"></script>
<script src="/.tmp/logicTopology.js"></script>
diff --git a/views/ngXosViews/diagnostic/src/js/config.js b/views/ngXosViews/diagnostic/src/js/config.js
index 99112b1..db1d832 100644
--- a/views/ngXosViews/diagnostic/src/js/config.js
+++ b/views/ngXosViews/diagnostic/src/js/config.js
@@ -6,6 +6,14 @@
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, 20],
circle: {
radius: 10,
r: 10,
@@ -18,7 +26,7 @@
y: -10
},
rack: {
- width: 60,
+ width: 105,
height: 50,
x: -30,
y: -25
@@ -26,12 +34,15 @@
computeNode: {
width: 50,
height: 20,
+ margin: 5,
+ labelHeight: 10,
x: -25,
y: -10
},
instance: {
width: 40,
height: 16,
+ margin: 5,
x: -20,
y: -8
}
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index b689b89..afe61a8 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -16,8 +16,21 @@
var svg;
+
+ const handleSvg = (el) => {
+
+ svg = d3.select(el)
+ .append('svg')
+ .style('width', `${el.clientWidth}px`)
+ .style('height', `${el.clientHeight}px`);
+ }
+
$scope.$watch(() => this.subscribers, (subscribers) => {
if(subscribers){
+
+ // TODO
+ // build here the full data structure
+
LogicTopologyHelper.addSubscribers(svg, angular.copy(subscribers));
}
});
@@ -28,14 +41,6 @@
}
});
- const handleSvg = (el) => {
-
- svg = d3.select(el)
- .append('svg')
- .style('width', `${el.clientWidth}px`)
- .style('height', `${el.clientHeight}px`);
- }
-
handleSvg($element[0]);
LogicTopologyHelper.drawTree(svg);
}
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index d33de36..411da49 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -31,6 +31,45 @@
};
/**
+ * Calculate the horizontal position for each element.
+ * subsrcribers, devices and routers have the same fixed width 20
+ * network have a fixed width 104
+ * rack have a fixed width 105
+ * build and array of 6 elements representing the position of each element in the svg
+ * to equally space them
+ */
+
+ this.computeElementPosition = (svgWidth) => {
+
+ let xPos = [];
+
+ let totalElWidth = lodash.reduce(serviceTopologyConfig.elWidths, (el, val) => val + el, 0);
+
+ let remainingSpace = svgWidth - totalElWidth - serviceTopologyConfig.widthMargin;
+
+ let step = remainingSpace / (serviceTopologyConfig.elWidths.length - 1);
+
+ lodash.forEach(serviceTopologyConfig.elWidths, (el, i) => {
+
+ // get half of the previous elements width
+ let previousElWidth = 0;
+ if(i !== 0){
+ previousElWidth = lodash.reduce(serviceTopologyConfig.elWidths.slice(0, i), (el, val) => val + el, 0) / 2;
+ }
+
+ let elPos =
+ serviceTopologyConfig.widthMargin // right margin
+ + (step * i) // space between elements
+ + (el / 2) // this el width
+ + previousElWidth; // previous elements width
+
+ xPos.push(svgWidth - elPos);
+ })
+
+ return xPos
+ };
+
+ /**
* from a nested data structure,
* create nodes and links for a D3 Tree Layout
*/
@@ -38,10 +77,12 @@
let nodes = layout.nodes(data);
// Normalize for fixed-depth.
- nodes.forEach(function(d) {
+ nodes.forEach((d) => {
// position the child node horizontally
- const step = ((svgWidth - (serviceTopologyConfig.widthMargin * 2)) / 7);
- d.y = (6 - d.depth) * step;
+ // 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/rackHelper.js b/views/ngXosViews/diagnostic/src/js/rackHelper.js
new file mode 100644
index 0000000..037ecdd
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/js/rackHelper.js
@@ -0,0 +1,85 @@
+(function () {
+ angular.module('xos.serviceTopology')
+ .service('RackHelper', function(serviceTopologyConfig, lodash){
+
+ this.getComputeNodeLabelSize = () => {
+ return serviceTopologyConfig.computeNode.labelHeight + (serviceTopologyConfig.instance.margin * 2)
+ }
+
+ /**
+ * Given a list of instance should get the Compute Node size.
+ * They are placed in rows of 2 with 5px margin on each side.
+ */
+
+ this.getComputeNodeSize = lodash.memoize((instances) => {
+ const width = (serviceTopologyConfig.instance.margin * 3) + (serviceTopologyConfig.instance.width *2);
+
+ const rows = Math.round(instances.length / 2);
+
+ const labelSpace = this.getComputeNodeLabelSize();
+
+ const height = (serviceTopologyConfig.instance.height * rows) + (serviceTopologyConfig.instance.margin * (rows + 1)) + labelSpace;
+ return [width, height];
+ });
+
+ /**
+ * Give a list on Compute Node should calculate the Rack Size.
+ * Compute nodes are placed in a single column with 5px margin on each side.
+ */
+ this.getRackSize = (nodes) => {
+
+ let width = 0;
+ let height = serviceTopologyConfig.computeNode.margin;
+
+ lodash.forEach(nodes, (node) => {
+ let [instanceWidth, instanceHeight] = this.getComputeNodeSize(node.instances);
+
+ width = instanceWidth + (serviceTopologyConfig.computeNode.margin * 2);
+ height += (instanceHeight + serviceTopologyConfig.computeNode.margin);
+ });
+
+ return [width, height];
+ };
+
+ /**
+ * Given an instance index, return the coordinates
+ */
+
+ this.getInstancePosition = (position) => {
+ const row = Math.floor(position / 2);
+ const column = (position % 2) ? 1 : 0;
+
+ // add ComputeNode label size
+ const labelSpace = this.getComputeNodeLabelSize();
+
+ // x = margin + (width * column) + ( maring * column)
+ const x = serviceTopologyConfig.instance.margin + (serviceTopologyConfig.instance.width * column) + (serviceTopologyConfig.instance.margin * column);
+
+ // y = label + margin + (height * row) + ( maring * row)
+ const y = labelSpace + serviceTopologyConfig.instance.margin + (serviceTopologyConfig.instance.height * row) + (serviceTopologyConfig.instance.margin * row);
+ return [x, y];
+ };
+
+ /**
+ * Given an Compute Node index, return the coordinates
+ */
+
+ this.getComputeNodePosition = (nodes, position) => {
+ const x = serviceTopologyConfig.computeNode.margin;
+
+ let previousElEight = lodash.reduce(nodes.slice(0, position), (val, node) => {
+ return val + this.getComputeNodeSize(node.instances)[1]
+ }, 0);
+
+ console.log('previousElEight ' + previousElEight);
+ const y =
+ serviceTopologyConfig.computeNode.margin
+ + (serviceTopologyConfig.computeNode.margin * position)
+ + previousElEight;
+
+
+ return [x, y];
+ };
+
+ });
+})();
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index 87db711..8c3e317 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -39,7 +39,7 @@
node.instances = list[i];
return node;
});
-
+ console.log(res.data);
deferred.resolve(res.data);
})