Add consul node

This commit is contained in:
JUDIT GRESKOVITS 2017-02-21 15:45:44 +00:00 committed by Judit Greskovits
parent 33e899b923
commit 444e39599d
8 changed files with 140 additions and 44 deletions

View File

@ -16,10 +16,11 @@ const StyledButton = styled.rect`
`; `;
const StyledButtonCircle = styled.circle` const StyledButtonCircle = styled.circle`
fill: white; fill: ${props => props.connected ? '#ffffff' : '#464646'};
`; `;
const GraphNodeButton = ({ const GraphNodeButton = ({
connected,
buttonRect, buttonRect,
onButtonClick onButtonClick
}) => { }) => {
@ -34,6 +35,7 @@ const GraphNodeButton = ({
cy={buttonCircleY + (buttonCircleRadius*2 + buttonCircleSpacing)*index} cy={buttonCircleY + (buttonCircleRadius*2 + buttonCircleSpacing)*index}
key={index} key={index}
r={2} r={2}
connected={connected}
/> />
)); ));
@ -56,6 +58,7 @@ GraphNodeButton.propTypes = {
width: React.PropTypes.number, width: React.PropTypes.number,
height: React.PropTypes.number height: React.PropTypes.number
}).isRequired, }).isRequired,
connected: React.PropTypes.bool,
onButtonClick: React.PropTypes.func.isRequired onButtonClick: React.PropTypes.func.isRequired
}; };

View File

@ -20,12 +20,21 @@ const {
} = composers; } = composers;
const StyledText = styled.text` const StyledText = styled.text`
fill: white; fill: ${props => props.connected ? '#ffffff' : '#464646'};
font-size: 12px; font-size: 12px;
opacity: 0.8; 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 = ({ const GraphNodeInfo = ({
connected,
attrs, attrs,
infoPosition infoPosition
}) => { }) => {
@ -38,13 +47,25 @@ const GraphNodeInfo = ({
return ( return (
<g transform={`translate(${infoPosition.x}, ${infoPosition.y})`}> <g transform={`translate(${infoPosition.x}, ${infoPosition.y})`}>
<g transform={'translate(0, 2)'}> <g transform={'translate(0, 2)'}>
<InstancesIcon /> <StyledInstancesIcon connected={connected} />
</g> </g>
<StyledText x={23} y={12}>{`${dcs} inst.`}</StyledText> <StyledText
x={23}
y={12}
connected={connected}
>
{`${dcs} inst.`}
</StyledText>
<g transform={'translate(82, 0)'}> <g transform={'translate(82, 0)'}>
<DataCentresIcon /> <StyledDataCentresIcon connected={connected} />
</g> </g>
<StyledText x={96} y={12}>{`${instances} DCs`}</StyledText> <StyledText
x={96}
y={12}
connected={connected}
>
{`${instances} DCs`}
</StyledText>
</g> </g>
); );
}; };
@ -55,6 +76,7 @@ GraphNodeInfo.propTypes = {
instances: React.PropTypes.number, instances: React.PropTypes.number,
healthy: React.PropTypes.bool healthy: React.PropTypes.bool
}), }),
connected: React.PropTypes.bool,
infoPosition: React.PropTypes.shape({ infoPosition: React.PropTypes.shape({
x: React.PropTypes.number, x: React.PropTypes.number,
y: React.PropTypes.number y: React.PropTypes.number

View File

@ -11,12 +11,13 @@ const {
} = composers; } = composers;
const StyledText = styled.text` const StyledText = styled.text`
fill: white; fill: ${props => props.connected ? '#ffffff' : '#464646'};
font-size: 12px; font-size: 12px;
opacity: 0.8; opacity: 0.8;
`; `;
const GraphNodeMetrics = ({ const GraphNodeMetrics = ({
connected,
metrics, metrics,
metricsPosition metricsPosition
}) => { }) => {
@ -27,6 +28,7 @@ const GraphNodeMetrics = ({
key={index} key={index}
x={0} x={0}
y={12 + metricSpacing*index} y={12 + metricSpacing*index}
connected={connected}
> >
{`${metric.name}: ${metric.stat}`} {`${metric.name}: ${metric.stat}`}
</StyledText> </StyledText>
@ -40,6 +42,7 @@ const GraphNodeMetrics = ({
}; };
GraphNodeMetrics.propTypes = { GraphNodeMetrics.propTypes = {
connected: React.PropTypes.bool,
metrics: React.PropTypes.arrayOf(React.PropTypes.shape({ metrics: React.PropTypes.arrayOf(React.PropTypes.shape({
name: React.PropTypes.string, name: React.PropTypes.string,
stat: React.PropTypes.string stat: React.PropTypes.string

View File

@ -19,27 +19,27 @@ const {
} = composers; } = composers;
const StyledRect = styled.rect` const StyledRect = styled.rect`
stroke: #343434; stroke: ${props => props.connected ? '#343434' : '#d8d8d8'};
fill: #464646; fill: ${props => props.connected ? '#464646' : '#ffffff'};
stroke-width: 1.5; stroke-width: 1.5;
rx: 4; rx: 4;
ry: 4; ry: 4;
`; `;
const StyledShadowRect = styled.rect` const StyledShadowRect = styled.rect`
fill: #464646; fill: ${props => props.connected ? '#464646' : '#d8d8d8'};
opacity: 0.33; opacity: 0.33;
rx: 4; rx: 4;
ry: 4; ry: 4;
`; `;
const StyledLine = styled.line` const StyledLine = styled.line`
stroke: #343434; stroke: ${props => props.connected ? '#343434' : '#d8d8d8'};
stroke-width: 1.5; stroke-width: 1.5;
`; `;
const StyledText = styled.text` const StyledText = styled.text`
fill: white; fill: ${props => props.connected ? '#ffffff' : '#464646'};
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
`; `;
@ -49,6 +49,7 @@ const HeartCircle = styled.circle`
`; `;
const GraphNode = ({ const GraphNode = ({
connected,
data, data,
size, size,
onDragStart onDragStart
@ -61,12 +62,12 @@ const GraphNode = ({
const halfWidth = width/2; const halfWidth = width/2;
const halfHeight = height/2; const halfHeight = height/2;
const lineY = 48 - halfHeight; const lineY = 48;
const lineX = 140 - halfWidth; const lineX = 140;
const buttonRect = { const buttonRect = {
x: lineX, x: lineX,
y: -halfHeight, y: 0,
width: width - 140, width: 40,
height: 48 height: 48
}; };
@ -74,14 +75,14 @@ const GraphNode = ({
// console.log('Rect clicked!!!'); // console.log('Rect clicked!!!');
}; };
const paddingLeft = 18-halfWidth; const paddingLeft = 18;
const infoPosition = { const infoPosition = {
x: paddingLeft, x: paddingLeft,
y: 59 - halfHeight y: 59
}; };
const metricsPosition = { const metricsPosition = {
x: paddingLeft, x: paddingLeft,
y: 89 - halfHeight y: 89
}; };
// const titleBbBox = {x:100, y: 30 - halfHeight}; // const titleBbBox = {x:100, y: 30 - halfHeight};
@ -90,36 +91,66 @@ const GraphNode = ({
onDragStart(evt, data.id); onDragStart(evt, data.id);
}; };
return ( const position = connected ? {
<g transform={`translate(${data.x}, ${data.y})`}> x: data.x-halfWidth,
<StyledShadowRect y: data.y-halfHeight
x={-halfWidth} } : {
y={3-halfHeight} x: data.x,
width={width} y: data.y
height={height} };
/>
const nodeRect = connected ? (
<StyledRect <StyledRect
x={-halfWidth} x={0}
y={-halfHeight} y={0}
width={width} width={width}
height={height} height={height}
onMouseDown={onStart} onMouseDown={onStart}
onTouchStart={onStart} onTouchStart={onStart}
connected={connected}
/> />
) : (
<StyledRect
x={0}
y={0}
width={width}
height={height}
connected={connected}
/>
);
return (
<g transform={`translate(${position.x}, ${position.y})`}>
<StyledShadowRect
x={0}
y={3}
width={width}
height={height}
connected={connected}
/>
{nodeRect}
<StyledLine <StyledLine
x1={-halfWidth} x1={0}
y1={lineY} y1={lineY}
x2={halfWidth} x2={width}
y2={lineY} y2={lineY}
connected={connected}
/> />
<StyledLine <StyledLine
x1={lineX} x1={lineX}
y1={-halfHeight} y1={0}
x2={lineX} x2={lineX}
y2={lineY} y2={lineY}
connected={connected}
/> />
<StyledText x={paddingLeft} y={30 - halfHeight}>{data.id}</StyledText> <StyledText
<g transform={`translate(${25}, ${15 - halfHeight})`}> x={paddingLeft}
y={30}
connected={connected}
>
{data.id}
</StyledText>
<g transform={`translate(${115}, ${15})`}>
<HeartCircle <HeartCircle
cx={9} cx={9}
cy={9} cy={9}
@ -130,20 +161,24 @@ const GraphNode = ({
<GraphNodeButton <GraphNodeButton
buttonRect={buttonRect} buttonRect={buttonRect}
onButtonClick={onButtonClick} onButtonClick={onButtonClick}
connected={connected}
/> />
<GraphNodeInfo <GraphNodeInfo
attrs={data.attrs} attrs={data.attrs}
infoPosition={infoPosition} infoPosition={infoPosition}
connected={connected}
/> />
<GraphNodeMetrics <GraphNodeMetrics
metrics={data.metrics} metrics={data.metrics}
metricsPosition={metricsPosition} metricsPosition={metricsPosition}
connected={connected}
/> />
</g> </g>
); );
}; };
GraphNode.propTypes = { GraphNode.propTypes = {
connected: React.PropTypes.bool,
data: React.PropTypes.object.isRequired, data: React.PropTypes.object.isRequired,
onDragStart: React.PropTypes.func, onDragStart: React.PropTypes.func,
size: PropTypes.Size size: PropTypes.Size

View File

@ -4,8 +4,8 @@
<title>icon: data center</title> <title>icon: data center</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Project:-topology-of-services" transform="translate(-575.000000, -487.000000)" fill="#FFFFFF"> <g id="Project:-topology-of-services" transform="translate(-575.000000, -487.000000)">
<g id="services-copy" transform="translate(213.000000, 426.000000)"> <g id="services-copy" transform="translate(213.000000, 426.000000)">
<g id="service:-nginx" transform="translate(263.000000, 0.000000)"> <g id="service:-nginx" transform="translate(263.000000, 0.000000)">
<g id="metric"> <g id="metric">

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -4,8 +4,8 @@
<title>icon: instances</title> <title>icon: instances</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Project:-topology-of-services" transform="translate(-494.000000, -489.000000)" fill="#FFFFFF"> <g id="Project:-topology-of-services" transform="translate(-494.000000, -489.000000)">
<g id="services-copy" transform="translate(213.000000, 426.000000)"> <g id="services-copy" transform="translate(213.000000, 426.000000)">
<g id="service:-nginx" transform="translate(263.000000, 0.000000)"> <g id="service:-nginx" transform="translate(263.000000, 0.000000)">
<g id="metric"> <g id="metric">

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,5 +1,6 @@
const React = require('react'); const React = require('react');
const StoryHelper = require('./story-helper'); const StoryHelper = require('./story-helper');
const GraphNode = require('./graph-node');
const { const {
storiesOf storiesOf
@ -8,4 +9,35 @@ const {
storiesOf('Topology', module) storiesOf('Topology', module)
.add('5 services', () => ( .add('5 services', () => (
<StoryHelper /> <StoryHelper />
))
.add('Consul', () => (
<svg width={180} height={159}>
<GraphNode
data={{
id: 'Consul',
attrs: {
dcs: 1,
healthy: true,
instances: 1
},
metrics: [{
name: 'CPU',
stat: '50%'
}, {
name: 'Network',
stat: '5.9KB/sec'
}, {
name: 'Network',
stat: '5.9KB/sec'
}],
x: 0,
y: 0
}}
size={{
width: 180,
height: 156
}}
connected={false}
/>
</svg>
)); ));

View File

@ -230,6 +230,7 @@ class TopologyGraph extends React.Component {
index={index} index={index}
size={nodeSize} size={nodeSize}
onDragStart={onDragStart} onDragStart={onDragStart}
connected
/> />
)); ));