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 ?