Add info to topology node

ui/src/components/topology/graph-node-info.js

@@ -32,10 +32,14 @@ const GraphNodeInfo = ({
 
   return (
     <g transform={`translate(${infoPosition.x}, ${infoPosition.y})`}>
-      <DataCentresIcon />
-      <StyledText>{`${dcs} inst.`}</StyledText>
+      <g transform={'translate(0, 2)'}>
         <InstancesIcon />
-      <StyledText>{`${instances} DCs`}</StyledText>
+      </g>
+      <StyledText x={23} y={12}>{`${dcs} inst.`}</StyledText>
+      <g transform={'translate(82, 0)'}>
+        <DataCentresIcon />
+      </g>
+      <StyledText x={96} y={12}>{`${instances} DCs`}</StyledText>
     </g>
   );
 };

ui/src/components/topology/graph-node.js

@@ -2,6 +2,7 @@ const React = require('react');
 const Styled = require('styled-components');
 const PropTypes = require('./prop-types');
 const GraphNodeButton = require('./graph-node-button');
+const GraphNodeInfo = require('./graph-node-info');
 const GraphNodeMetrics = require('./graph-node-metrics');
 const HeartIcon =
   require(
@@ -68,6 +69,10 @@ const GraphNode = ({
   };
 
   const paddingLeft = 18-halfWidth;
+  const infoPosition = {
+    x: paddingLeft,
+    y: 59 - halfHeight,
+  };
   const metricsPosition = {
     x: paddingLeft,
     y: 89 - halfHeight
@@ -114,6 +119,10 @@ const GraphNode = ({
         buttonRect={buttonRect}
         onButtonClick={onButtonClick}
       />
+      <GraphNodeInfo
+        attrs={data.attrs}
+        infoPosition={infoPosition}
+      />
       <GraphNodeMetrics
         metrics={data.metrics}
         metricsPosition={metricsPosition}

ui/src/components/topology/topology-graph.js

@@ -77,10 +77,12 @@ class TopologyGraph extends React.Component {
       .force('collide', d3.forceCollide(nodeRadius))
       .force('center', d3.forceCenter(1024/2, 860/2))
       .on('tick', () => {
+        // console.log('SIMULATION TICK');
         this.forceUpdate();
       })
       .on('end', () => {
         // console.log('SIMULATION END');
+        // this.forceUpdate();
       });
 
     return {