1
0
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:
JUDIT GRESKOVITS 2017-07-20 14:41:19 +01:00 committed by Judit Greskovits
parent dd1124a608
commit 2f4e9d4a57
5 changed files with 50 additions and 54 deletions

View File

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

View File

@ -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 };

View File

@ -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,

View File

@ -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>
);
};

View File

@ -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 ?