From 444e39599d8a4aa7a388cc43552350c8ede94b17 Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Tue, 21 Feb 2017 15:45:44 +0000 Subject: [PATCH] Add consul node --- .../components/topology/graph-node-button.js | 5 +- ui/src/components/topology/graph-node-info.js | 32 ++++++- .../components/topology/graph-node-metrics.js | 5 +- ui/src/components/topology/graph-node.js | 91 +++++++++++++------ .../components/topology/icon-data-centers.svg | 6 +- ui/src/components/topology/icon-instances.svg | 6 +- ui/src/components/topology/story.js | 38 +++++++- ui/src/components/topology/topology-graph.js | 1 + 8 files changed, 140 insertions(+), 44 deletions(-) diff --git a/ui/src/components/topology/graph-node-button.js b/ui/src/components/topology/graph-node-button.js index d8856a31..9720ae2d 100644 --- a/ui/src/components/topology/graph-node-button.js +++ b/ui/src/components/topology/graph-node-button.js @@ -16,10 +16,11 @@ const StyledButton = styled.rect` `; const StyledButtonCircle = styled.circle` - fill: white; + fill: ${props => props.connected ? '#ffffff' : '#464646'}; `; const GraphNodeButton = ({ + connected, buttonRect, onButtonClick }) => { @@ -34,6 +35,7 @@ const GraphNodeButton = ({ cy={buttonCircleY + (buttonCircleRadius*2 + buttonCircleSpacing)*index} key={index} r={2} + connected={connected} /> )); @@ -56,6 +58,7 @@ GraphNodeButton.propTypes = { width: React.PropTypes.number, height: React.PropTypes.number }).isRequired, + connected: React.PropTypes.bool, onButtonClick: React.PropTypes.func.isRequired }; diff --git a/ui/src/components/topology/graph-node-info.js b/ui/src/components/topology/graph-node-info.js index fb9adecf..c27a33de 100644 --- a/ui/src/components/topology/graph-node-info.js +++ b/ui/src/components/topology/graph-node-info.js @@ -20,12 +20,21 @@ const { } = composers; const StyledText = styled.text` - fill: white; + fill: ${props => props.connected ? '#ffffff' : '#464646'}; font-size: 12px; opacity: 0.8; `; +const StyledInstancesIcon = styled(InstancesIcon)` + fill: ${props => props.connected ? '#ffffff' : '#464646'}; +`; + +const StyledDataCentresIcon = styled(DataCentresIcon)` + fill: ${props => props.connected ? '#ffffff' : '#464646'}; +`; + const GraphNodeInfo = ({ + connected, attrs, infoPosition }) => { @@ -38,13 +47,25 @@ const GraphNodeInfo = ({ return ( - + - {`${dcs} inst.`} + + {`${dcs} inst.`} + - + - {`${instances} DCs`} + + {`${instances} DCs`} + ); }; @@ -55,6 +76,7 @@ GraphNodeInfo.propTypes = { instances: React.PropTypes.number, healthy: React.PropTypes.bool }), + connected: React.PropTypes.bool, infoPosition: React.PropTypes.shape({ x: React.PropTypes.number, y: React.PropTypes.number diff --git a/ui/src/components/topology/graph-node-metrics.js b/ui/src/components/topology/graph-node-metrics.js index 777649b0..e747f44b 100644 --- a/ui/src/components/topology/graph-node-metrics.js +++ b/ui/src/components/topology/graph-node-metrics.js @@ -11,12 +11,13 @@ const { } = composers; const StyledText = styled.text` - fill: white; + fill: ${props => props.connected ? '#ffffff' : '#464646'}; font-size: 12px; opacity: 0.8; `; const GraphNodeMetrics = ({ + connected, metrics, metricsPosition }) => { @@ -27,6 +28,7 @@ const GraphNodeMetrics = ({ key={index} x={0} y={12 + metricSpacing*index} + connected={connected} > {`${metric.name}: ${metric.stat}`} @@ -40,6 +42,7 @@ const GraphNodeMetrics = ({ }; GraphNodeMetrics.propTypes = { + connected: React.PropTypes.bool, metrics: React.PropTypes.arrayOf(React.PropTypes.shape({ name: React.PropTypes.string, stat: React.PropTypes.string diff --git a/ui/src/components/topology/graph-node.js b/ui/src/components/topology/graph-node.js index d979fb53..eaeb435c 100644 --- a/ui/src/components/topology/graph-node.js +++ b/ui/src/components/topology/graph-node.js @@ -19,27 +19,27 @@ const { } = composers; const StyledRect = styled.rect` - stroke: #343434; - fill: #464646; + stroke: ${props => props.connected ? '#343434' : '#d8d8d8'}; + fill: ${props => props.connected ? '#464646' : '#ffffff'}; stroke-width: 1.5; rx: 4; ry: 4; `; const StyledShadowRect = styled.rect` - fill: #464646; + fill: ${props => props.connected ? '#464646' : '#d8d8d8'}; opacity: 0.33; rx: 4; ry: 4; `; const StyledLine = styled.line` - stroke: #343434; + stroke: ${props => props.connected ? '#343434' : '#d8d8d8'}; stroke-width: 1.5; `; const StyledText = styled.text` - fill: white; + fill: ${props => props.connected ? '#ffffff' : '#464646'}; font-size: 16px; font-weight: 600; `; @@ -49,6 +49,7 @@ const HeartCircle = styled.circle` `; const GraphNode = ({ + connected, data, size, onDragStart @@ -61,12 +62,12 @@ const GraphNode = ({ const halfWidth = width/2; const halfHeight = height/2; - const lineY = 48 - halfHeight; - const lineX = 140 - halfWidth; + const lineY = 48; + const lineX = 140; const buttonRect = { x: lineX, - y: -halfHeight, - width: width - 140, + y: 0, + width: 40, height: 48 }; @@ -74,14 +75,14 @@ const GraphNode = ({ // console.log('Rect clicked!!!'); }; - const paddingLeft = 18-halfWidth; + const paddingLeft = 18; const infoPosition = { x: paddingLeft, - y: 59 - halfHeight + y: 59 }; const metricsPosition = { x: paddingLeft, - y: 89 - halfHeight + y: 89 }; // const titleBbBox = {x:100, y: 30 - halfHeight}; @@ -90,36 +91,66 @@ const GraphNode = ({ onDragStart(evt, data.id); }; + const position = connected ? { + x: data.x-halfWidth, + y: data.y-halfHeight + } : { + x: data.x, + y: data.y + }; + + const nodeRect = connected ? ( + + ) : ( + + ); + return ( - + - + {nodeRect} - {data.id} - + + {data.id} + + ); }; GraphNode.propTypes = { + connected: React.PropTypes.bool, data: React.PropTypes.object.isRequired, onDragStart: React.PropTypes.func, size: PropTypes.Size diff --git a/ui/src/components/topology/icon-data-centers.svg b/ui/src/components/topology/icon-data-centers.svg index 4df77b7a..01a21562 100644 --- a/ui/src/components/topology/icon-data-centers.svg +++ b/ui/src/components/topology/icon-data-centers.svg @@ -4,8 +4,8 @@ icon: data center Created with Sketch. - - + + @@ -17,4 +17,4 @@ - \ No newline at end of file + diff --git a/ui/src/components/topology/icon-instances.svg b/ui/src/components/topology/icon-instances.svg index ec89bb7e..6289d82e 100644 --- a/ui/src/components/topology/icon-instances.svg +++ b/ui/src/components/topology/icon-instances.svg @@ -4,8 +4,8 @@ icon: instances Created with Sketch. - - + + @@ -17,4 +17,4 @@ - \ No newline at end of file + diff --git a/ui/src/components/topology/story.js b/ui/src/components/topology/story.js index 0632f09f..bd2d8ba0 100644 --- a/ui/src/components/topology/story.js +++ b/ui/src/components/topology/story.js @@ -1,11 +1,43 @@ const React = require('react'); const StoryHelper = require('./story-helper'); +const GraphNode = require('./graph-node'); const { storiesOf } = require('@kadira/storybook'); storiesOf('Topology', module) - .add('5 services', () => ( - - )); +.add('5 services', () => ( + +)) +.add('Consul', () => ( + + + +)); diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js index b1da4cf9..dacfe9ca 100644 --- a/ui/src/components/topology/topology-graph.js +++ b/ui/src/components/topology/topology-graph.js @@ -230,6 +230,7 @@ class TopologyGraph extends React.Component { index={index} size={nodeSize} onDragStart={onDragStart} + connected /> ));