Add info to topology node

This commit is contained in:
JUDIT GRESKOVITS 2017-02-09 20:54:57 +00:00
parent 45bd31363f
commit 43569aeb43
3 changed files with 19 additions and 4 deletions

View File

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

View File

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

View File

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