mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Add info to topology node
This commit is contained in:
parent
45bd31363f
commit
43569aeb43
@ -32,10 +32,14 @@ const GraphNodeInfo = ({
|
||||
|
||||
return (
|
||||
<g transform={`translate(${infoPosition.x}, ${infoPosition.y})`}>
|
||||
<DataCentresIcon />
|
||||
<StyledText>{`${dcs} inst.`}</StyledText>
|
||||
<InstancesIcon />
|
||||
<StyledText>{`${instances} DCs`}</StyledText>
|
||||
<g transform={'translate(0, 2)'}>
|
||||
<InstancesIcon />
|
||||
</g>
|
||||
<StyledText x={23} y={12}>{`${dcs} inst.`}</StyledText>
|
||||
<g transform={'translate(82, 0)'}>
|
||||
<DataCentresIcon />
|
||||
</g>
|
||||
<StyledText x={96} y={12}>{`${instances} DCs`}</StyledText>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
@ -2,6 +2,7 @@ const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const PropTypes = require('./prop-types');
|
||||
const GraphNodeButton = require('./graph-node-button');
|
||||
const GraphNodeInfo = require('./graph-node-info');
|
||||
const GraphNodeMetrics = require('./graph-node-metrics');
|
||||
const HeartIcon =
|
||||
require(
|
||||
@ -68,6 +69,10 @@ const GraphNode = ({
|
||||
};
|
||||
|
||||
const paddingLeft = 18-halfWidth;
|
||||
const infoPosition = {
|
||||
x: paddingLeft,
|
||||
y: 59 - halfHeight,
|
||||
};
|
||||
const metricsPosition = {
|
||||
x: paddingLeft,
|
||||
y: 89 - halfHeight
|
||||
@ -114,6 +119,10 @@ const GraphNode = ({
|
||||
buttonRect={buttonRect}
|
||||
onButtonClick={onButtonClick}
|
||||
/>
|
||||
<GraphNodeInfo
|
||||
attrs={data.attrs}
|
||||
infoPosition={infoPosition}
|
||||
/>
|
||||
<GraphNodeMetrics
|
||||
metrics={data.metrics}
|
||||
metricsPosition={metricsPosition}
|
||||
|
@ -77,10 +77,12 @@ class TopologyGraph extends React.Component {
|
||||
.force('collide', d3.forceCollide(nodeRadius))
|
||||
.force('center', d3.forceCenter(1024/2, 860/2))
|
||||
.on('tick', () => {
|
||||
// console.log('SIMULATION TICK');
|
||||
this.forceUpdate();
|
||||
})
|
||||
.on('end', () => {
|
||||
// console.log('SIMULATION END');
|
||||
// this.forceUpdate();
|
||||
});
|
||||
|
||||
return {
|
||||
|
Loading…
Reference in New Issue
Block a user