mirror of
https://github.com/yldio/copilot.git
synced 2024-11-14 15:20:06 +02:00
feat(ui-toolkit): Calculate subservices node sizes dynamically
This commit is contained in:
parent
dd1124a608
commit
2f4e9d4a57
@ -16,7 +16,7 @@ const Sizes = {
|
||||
},
|
||||
childContentSize: {
|
||||
width: Lengths.nodeWidth,
|
||||
height: 64
|
||||
height: 60
|
||||
},
|
||||
nodeSize: {
|
||||
width: Lengths.nodeWidth,
|
||||
|
@ -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 };
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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 ?
|
||||
|
Loading…
Reference in New Issue
Block a user