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`
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
};

View File

@ -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 (
<g transform={`translate(${infoPosition.x}, ${infoPosition.y})`}>
<g transform={'translate(0, 2)'}>
<InstancesIcon />
<StyledInstancesIcon connected={connected} />
</g>
<StyledText x={23} y={12}>{`${dcs} inst.`}</StyledText>
<StyledText
x={23}
y={12}
connected={connected}
>
{`${dcs} inst.`}
</StyledText>
<g transform={'translate(82, 0)'}>
<DataCentresIcon />
<StyledDataCentresIcon connected={connected} />
</g>
<StyledText x={96} y={12}>{`${instances} DCs`}</StyledText>
<StyledText
x={96}
y={12}
connected={connected}
>
{`${instances} DCs`}
</StyledText>
</g>
);
};
@ -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

View File

@ -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}`}
</StyledText>
@ -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

View File

@ -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);
};
return (
<g transform={`translate(${data.x}, ${data.y})`}>
<StyledShadowRect
x={-halfWidth}
y={3-halfHeight}
width={width}
height={height}
/>
const position = connected ? {
x: data.x-halfWidth,
y: data.y-halfHeight
} : {
x: data.x,
y: data.y
};
const nodeRect = connected ? (
<StyledRect
x={-halfWidth}
y={-halfHeight}
x={0}
y={0}
width={width}
height={height}
onMouseDown={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
x1={-halfWidth}
x1={0}
y1={lineY}
x2={halfWidth}
x2={width}
y2={lineY}
connected={connected}
/>
<StyledLine
x1={lineX}
y1={-halfHeight}
y1={0}
x2={lineX}
y2={lineY}
connected={connected}
/>
<StyledText x={paddingLeft} y={30 - halfHeight}>{data.id}</StyledText>
<g transform={`translate(${25}, ${15 - halfHeight})`}>
<StyledText
x={paddingLeft}
y={30}
connected={connected}
>
{data.id}
</StyledText>
<g transform={`translate(${115}, ${15})`}>
<HeartCircle
cx={9}
cy={9}
@ -130,20 +161,24 @@ const GraphNode = ({
<GraphNodeButton
buttonRect={buttonRect}
onButtonClick={onButtonClick}
connected={connected}
/>
<GraphNodeInfo
attrs={data.attrs}
infoPosition={infoPosition}
connected={connected}
/>
<GraphNodeMetrics
metrics={data.metrics}
metricsPosition={metricsPosition}
connected={connected}
/>
</g>
);
};
GraphNode.propTypes = {
connected: React.PropTypes.bool,
data: React.PropTypes.object.isRequired,
onDragStart: React.PropTypes.func,
size: PropTypes.Size

View File

@ -4,8 +4,8 @@
<title>icon: data center</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Project:-topology-of-services" transform="translate(-575.000000, -487.000000)" fill="#FFFFFF">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Project:-topology-of-services" transform="translate(-575.000000, -487.000000)">
<g id="services-copy" transform="translate(213.000000, 426.000000)">
<g id="service:-nginx" transform="translate(263.000000, 0.000000)">
<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>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Project:-topology-of-services" transform="translate(-494.000000, -489.000000)" fill="#FFFFFF">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Project:-topology-of-services" transform="translate(-494.000000, -489.000000)">
<g id="services-copy" transform="translate(213.000000, 426.000000)">
<g id="service:-nginx" transform="translate(263.000000, 0.000000)">
<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 StoryHelper = require('./story-helper');
const GraphNode = require('./graph-node');
const {
storiesOf
@ -8,4 +9,35 @@ const {
storiesOf('Topology', module)
.add('5 services', () => (
<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}
size={nodeSize}
onDragStart={onDragStart}
connected
/>
));