feat(ui-toolkit): Calculate subservices node sizes dynamically

packages/ui-toolkit/src/topology/constants.js

@@ -16,7 +16,7 @@ const Sizes = {
   },
   childContentSize: {
     width: Lengths.nodeWidth,
-    height: 64
+    height: 60
   },
   nodeSize: {
     width: Lengths.nodeWidth,

packages/ui-toolkit/src/topology/functions.js

@@ -104,22 +104,40 @@ const getStatusesLength = (data) =>
     ? 1
     : data.instanceStatuses.length;
 
+const getStatusesHeight = (data) => {
+
+  const statuses = data.children
+    ? data.children.reduce((statuses, child) =>
+      statuses + getStatusesLength(child), 0)
+    : getStatusesLength(data);
+
+  return statuses
+    ? Constants.statusHeight*statuses + 6
+    : 0;
+}
+
+const getContentRect = (data, isChild=false) => {
+  const contentSize = isChild
+    ? Constants.childContentSize
+    : Constants.contentSize;
+
+    const { width, height } = contentSize;
+    const contentHeight = height + getStatusesHeight(data);
+
+    return ({
+      ...Constants.contentPosition,
+      width: contentSize.width,
+      height: contentHeight
+    });
+}
+
 const getNodeRect = (data) => {
   const nodeSize = data.children
     ? Constants.nodeSizeWithChildren
     : Constants.nodeSize;
 
-  const statuses = data.children
-    ? data.children.reduce((statuses, child) => {
-      return statuses + getStatusesLength(child), 0
-    })
-    : getStatusesLength(data);
-
   const { width, height } = nodeSize;
-
-  const nodeHeight = statuses
-    ? height + Constants.statusHeight*statuses + 6
-    : height;
+  const nodeHeight = height + getStatusesHeight(data);
 
   return ({
     left: -width / 2,
@@ -131,4 +149,4 @@ const getNodeRect = (data) => {
   })
 };
 
-export { getNodeRect, calculateLineLayout };
+export { getContentRect, getNodeRect, calculateLineLayout };

packages/ui-toolkit/src/topology/index.js

@@ -198,12 +198,12 @@ class Topology extends React.Component {
     };
   }
 
-  constrainNodePosition(x, y, children = false) {
+  constrainNodePosition(x, y, nodeRect, children = false) {
     const svgSize = this.getSvgSize();
 
-    const nodeRect = children
+    /* const nodeRect = children
       ? Constants.nodeRectWithChildren
-      : Constants.nodeRect;
+      : Constants.nodeRect; */
 
     if (x < nodeRect.right + 2) {
       x = nodeRect.right + 2;
@@ -230,9 +230,9 @@ class Topology extends React.Component {
     );
   }
 
-  getConstrainedNodePosition(nodeId, children = false) {
+  getConstrainedNodePosition(nodeId, nodeRect, children = false) {
     const node = this.findNode(nodeId);
-    return this.constrainNodePosition(node.x, node.y, children);
+    return this.constrainNodePosition(node.x, node.y, nodeRect, children);
   }
 
   getNotConnectedNodePosition(nodeId) {
@@ -258,11 +258,11 @@ class Topology extends React.Component {
     const { nodes, links, services } = this.state;
 
     const nodesData = services.map((service, index) => {
-      const nodePosition = service.connected
-        ? this.getConstrainedNodePosition(service.id, service.children)
-        : this.getNotConnectedNodePosition(service.id);
 
       const nodeRect = getNodeRect(service);
+      const nodePosition = service.connected
+        ? this.getConstrainedNodePosition(service.id, nodeRect, service.children)
+        : this.getNotConnectedNodePosition(service.id);
 
       return {
         ...service,

packages/ui-toolkit/src/topology/node/content.js

@@ -4,30 +4,17 @@ import Baseline from '../../baseline';
 import Constants from '../constants';
 import { GraphLine, GraphSubtitle, GraphText } from './shapes';
 import GraphNodeInfo from './info';
-import GraphNodeMetrics from './metrics';
 
-const GraphNodeContent = ({ child = false, data, index = 0 }) => {
-  let { x, y, width, height } = Constants.contentRect;
-  if(child) height = Constants.childContentSize.height;
-
-  const contentY = y + height * index;
-
-  // const offset = index ? 18 : -6;
+const GraphNodeContent = ({ child = false, data, y = Constants.contentRect.y, index = 0 }) => {
+  const { x, width, height } = Constants.contentRect;
 
   const nodeInfoPos = child
     ? {
         x: Constants.infoPosition.x,
-        y: Constants.infoPosition.y + 21 // offset
+        y: Constants.infoPosition.y + 21
       }
     : Constants.infoPosition;
 
-  /* const nodeMetricsPos = child
-    ? {
-        x: Constants.metricsPosition.x,
-        y: Constants.metricsPosition.y + offset
-      }
-    : Constants.metricsPosition; */
-
   const nodeSubtitle = child
     ? <GraphSubtitle
       {...Constants.subtitlePosition}
@@ -38,16 +25,6 @@ const GraphNodeContent = ({ child = false, data, index = 0 }) => {
       </GraphSubtitle>
     : null;
 
-  /* const nodeInfo = !child || index
-    ? <GraphNodeInfo
-        datacenter={data.datacenter}
-        instances={data.instances}
-        healthy
-        connected={connected}
-        pos={nodeInfoPos}
-      />
-     : null; */
-
   const nodeInfo =
     <GraphNodeInfo
       data={data}
@@ -55,16 +32,11 @@ const GraphNodeContent = ({ child = false, data, index = 0 }) => {
     />;
 
   return (
-    <g transform={`translate(${x}, ${contentY})`}>
+    <g transform={`translate(${x}, ${y})`}>
       <GraphLine x1={0} y1={0} x2={width} y2={0}
         consul={data.isConsul} active={data.instancesActive} />
       {nodeSubtitle}
       {nodeInfo}
-      {/* <GraphNodeMetrics
-        metrics={data.metrics}
-        connected={connected}
-        pos={nodeMetricsPos}
-      /> */}
     </g>
   );
 };

packages/ui-toolkit/src/topology/node/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Constants from '../constants';
+import { getContentRect } from '../functions';
 import GraphNodeTitle from './title';
 import GraphNodeButton from './button';
 import GraphNodeContent from './content';
@@ -60,14 +61,19 @@ const GraphNode = ({
     : {};
 
   const nodeContent = data.children
-    ? data.children.map((d, i) =>
+    ? data.children.reduce((acc, d, i) => {
+      acc.children.push(
         <GraphNodeContent
           key={i}
           child
           data={d}
           index={i}
+          y={acc.y}
         />
-      )
+      );
+      acc.y += getContentRect(d, true).height;
+      return acc;
+    }, {y: Constants.contentRect.y, children: []}).children
     : <GraphNodeContent data={data} />;
 
   const nodeShadow = data.instancesActive ?