commit ad5b228fe64ffcfd58035d0ecc7a27ba3e8a44e5
author Matteo Scandolo <teo@onlab.us> Tue Feb 16 11:50:51 2016 -0800
committer Matteo Scandolo <teo@onlab.us> Tue Feb 16 11:50:51 2016 -0800
tree c3a34081512bb73c6fbed4296c82a8dce87bde16
parent b986a2edce1edf5071be261df2d2af9dd06e5931

Drawing rack

views/ngXosViews/diagnostic/src/js/nodeDrawer.js

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) => {