Add consul node

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

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 (
     <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

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

ui/src/components/topology/graph-node.js

@@ -19,27 +19,27 @@ const {
 } = composers;
 
 const StyledRect = styled.rect`
-  stroke: #343434;
+  stroke: ${props => props.connected ? '#343434' : '#d8d8d8'};
-  fill: #464646;
+  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 lineY = 48;
-  const lineX = 140 - halfWidth;
+  const lineX = 140;
   const buttonRect = {
     x: lineX,
-    y: -halfHeight,
+    y: 0,
-    width: width - 140,
+    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 ? (
+    <StyledRect
+      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(${data.x}, ${data.y})`}>
+    <g transform={`translate(${position.x}, ${position.y})`}>
       <StyledShadowRect
-        x={-halfWidth}
+        x={0}
-        y={3-halfHeight}
+        y={3}
         width={width}
         height={height}
+        connected={connected}
       />
-      <StyledRect
+      {nodeRect}
-        x={-halfWidth}
-        y={-halfHeight}
-        width={width}
-        height={height}
-        onMouseDown={onStart}
-        onTouchStart={onStart}
-      />
       <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>
+      <StyledText
-      <g transform={`translate(${25}, ${15 - halfHeight})`}>
+        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

ui/src/components/topology/icon-data-centers.svg

@@ -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="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="service:-nginx" transform="translate(263.000000, 0.000000)">
                     <g id="metric">
@@ -17,4 +17,4 @@
             </g>
         </g>
     </g>
-</svg>
+</svg>

ui/src/components/topology/icon-instances.svg

@@ -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="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="service:-nginx" transform="translate(263.000000, 0.000000)">
                     <g id="metric">
@@ -17,4 +17,4 @@
             </g>
         </g>
     </g>
-</svg>
+</svg>

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', () => (
-    <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>
+));

ui/src/components/topology/topology-graph.js

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