Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add info to topology node

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/components/topology/graph-node-info.js
View File

@ -32,10 +32,14 @@ const GraphNodeInfo = ({
return ( return (
<g transform={`translate(${infoPosition.x}, ${infoPosition.y})`}> <g transform={`translate(${infoPosition.x}, ${infoPosition.y})`}>
<DataCentresIcon /> <g transform={'translate(0, 2)'}>
<StyledText>{`${dcs} inst.`}</StyledText> <InstancesIcon />
<InstancesIcon /> </g>
<StyledText>{`${instances} DCs`}</StyledText> <StyledText x={23} y={12}>{`${dcs} inst.`}</StyledText>
<g transform={'translate(82, 0)'}>
<DataCentresIcon />
</g>
<StyledText x={96} y={12}>{`${instances} DCs`}</StyledText>
</g> </g>
); );
}; };

9
ui/src/components/topology/graph-node.js
View File

@ -2,6 +2,7 @@ const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const PropTypes = require('./prop-types'); const PropTypes = require('./prop-types');
const GraphNodeButton = require('./graph-node-button'); const GraphNodeButton = require('./graph-node-button');
const GraphNodeInfo = require('./graph-node-info');
const GraphNodeMetrics = require('./graph-node-metrics'); const GraphNodeMetrics = require('./graph-node-metrics');
const HeartIcon = const HeartIcon =
require( require(
@ -68,6 +69,10 @@ const GraphNode = ({
}; };
const paddingLeft = 18-halfWidth; const paddingLeft = 18-halfWidth;
const infoPosition = {
x: paddingLeft,
y: 59 - halfHeight,
};
const metricsPosition = { const metricsPosition = {
x: paddingLeft, x: paddingLeft,
y: 89 - halfHeight y: 89 - halfHeight
@ -114,6 +119,10 @@ const GraphNode = ({
buttonRect={buttonRect} buttonRect={buttonRect}
onButtonClick={onButtonClick} onButtonClick={onButtonClick}
/> />
<GraphNodeInfo
attrs={data.attrs}
infoPosition={infoPosition}
/>
<GraphNodeMetrics <GraphNodeMetrics
metrics={data.metrics} metrics={data.metrics}
metricsPosition={metricsPosition} metricsPosition={metricsPosition}

2
ui/src/components/topology/topology-graph.js
View File

@ -77,10 +77,12 @@ class TopologyGraph extends React.Component {
.force('collide', d3.forceCollide(nodeRadius)) .force('collide', d3.forceCollide(nodeRadius))
.force('center', d3.forceCenter(1024/2, 860/2)) .force('center', d3.forceCenter(1024/2, 860/2))
.on('tick', () => { .on('tick', () => {
// console.log('SIMULATION TICK');
this.forceUpdate(); this.forceUpdate();
}) })
.on('end', () => { .on('end', () => {
// console.log('SIMULATION END'); // console.log('SIMULATION END');
// this.forceUpdate();
}); });
return { return {