diff --git a/packages/ui-toolkit/src/topology/constants.js b/packages/ui-toolkit/src/topology/constants.js
index 7d04a7aa..c3a05b76 100644
--- a/packages/ui-toolkit/src/topology/constants.js
+++ b/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,
diff --git a/packages/ui-toolkit/src/topology/functions.js b/packages/ui-toolkit/src/topology/functions.js
index 1b3cd195..77857052 100644
--- a/packages/ui-toolkit/src/topology/functions.js
+++ b/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 };
diff --git a/packages/ui-toolkit/src/topology/index.js b/packages/ui-toolkit/src/topology/index.js
index 0b95a3bf..2c972f0c 100644
--- a/packages/ui-toolkit/src/topology/index.js
+++ b/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,
diff --git a/packages/ui-toolkit/src/topology/node/content.js b/packages/ui-toolkit/src/topology/node/content.js
index 219c67ea..95b64d2d 100644
--- a/packages/ui-toolkit/src/topology/node/content.js
+++ b/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
? {
: null;
- /* const nodeInfo = !child || index
- ?
- : null; */
-
const nodeInfo =
{
/>;
return (
-
+
{nodeSubtitle}
{nodeInfo}
- {/* */}
);
};
diff --git a/packages/ui-toolkit/src/topology/node/index.js b/packages/ui-toolkit/src/topology/node/index.js
index a4686dda..7a1b4e1d 100644
--- a/packages/ui-toolkit/src/topology/node/index.js
+++ b/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(
- )
+ );
+ acc.y += getContentRect(d, true).height;
+ return acc;
+ }, {y: Constants.contentRect.y, children: []}).children
: ;
const nodeShadow = data.instancesActive ?