feat(ui-toolkit, cp-frontend): Ensure correct update of topology view

packages/cp-frontend/src/components/services/list-item.js

@@ -96,8 +96,6 @@ const ServiceListItem = ({
         </CardDescription>
         <CardOptions onClick={handleCardOptionsClick} />
       </StyledCardHeader>;
-      console.log('*** service = ', service);
-      console.log('*** service.instanceStatuses = ', service.instanceStatuses);
   const view = children
     ? <CardGroupView>
         {children}

packages/cp-frontend/src/containers/services/list.js

@@ -92,12 +92,12 @@ class ServiceList extends Component {
 
     const handleScaleClick = (evt, service) => {
       toggleServicesQuickActions({ show: false });
-      push(`${url}/${service.slug}/delete`);
+      push(`${url}/${service.slug}/scale`);
     };
 
     const handleDeleteClick = (evt, service) => {
       toggleServicesQuickActions({ show: false });
-      push(`${url}/${service.slug}/scale`);
+      push(`${url}/${service.slug}/delete`);
     };
 
     const handleQuickActionsBlur = o => {

packages/cp-frontend/src/containers/services/menu.js

@@ -72,8 +72,8 @@ const ServicesMenu = ({ location, history: { push } }) => {
           <FormGroup name="service-view" value={toggleValue}>
             <StyledLegend>View</StyledLegend>
             <ToggleList>
-              <Toggle value="topology" onChange={handleToggle}>Topology</Toggle>
               <Toggle value="list" onChange={handleToggle}>List</Toggle>
+              <Toggle value="topology" onChange={handleToggle}>Topology</Toggle>
             </ToggleList>
           </FormGroup>
         </Col>

packages/cp-frontend/src/containers/services/topology.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
-import ServicesQuery from '@graphql/ServicesTopology.gql';
+import ServicesQuery from '@graphql/Services.gql';
 import ServicesRestartMutation from '@graphql/ServicesRestartMutation.gql';
 import ServicesStopMutation from '@graphql/ServicesStopMutation.gql';
 import ServicesStartMutation from '@graphql/ServicesStartMutation.gql';
 import unitcalc from 'unitcalc';
 
-import { processServices } from '@root/state/selectors';
+import { processServicesForTopology } from '@root/state/selectors';
 import { toggleServicesQuickActions } from '@root/state/actions';
 
 import { LayoutContainer } from '@components/layout';
@@ -75,18 +75,18 @@ const ServicesTopology = ({
 
   const handleScaleClick = (evt, service) => {
     toggleServicesQuickActions({ show: false });
-    push(`${url}/${service.slug}/delete`);
+    push(`${url}/${service.slug}/scale`);
   };
 
   const handleDeleteClick = (evt, service) => {
     toggleServicesQuickActions({ show: false });
-    push(`${url}/${service.slug}/scale`);
+    push(`${url}/${service.slug}/delete`);
   };
 
   const handleNodeTitleClick = (evt, { service }) => {
     push(`${url.split('/').slice(0, 3).join('/')}/services/${service.slug}`);
   };
-  console.log('ServicesTopology services = ', services);
+
   return (
     <StyledBackground>
       <StyledContainer>
@@ -133,7 +133,7 @@ const ServicesGql = graphql(ServicesQuery, {
   },
   props: ({ data: { deploymentGroup, loading, error } }) => ({
     services: deploymentGroup
-      ? processServices(deploymentGroup.services, null)
+      ? processServicesForTopology(deploymentGroup.services)
       : null,
     loading,
     error

packages/cp-frontend/src/graphql/Services.gql

@@ -7,6 +7,7 @@ query Services($deploymentGroupSlug: String!){
     services {
       ...ServiceInfo
       parent
+      connections
       instances {
         id
         status

packages/cp-frontend/src/graphql/ServicesTopology.gql

@@ -1,17 +0,0 @@
-#import "./DeploymentGroupInfo.gql"
-#import "./ServiceInfo.gql"
-
-query Instances($deploymentGroupSlug: String!){
-  deploymentGroup(slug: $deploymentGroupSlug) {
-    ...DeploymentGroupInfo
-    services {
-      ...ServiceInfo
-      parent
-      connections
-      instances {
-        id
-        status
-      }
-    }
-  }
-}

packages/cp-frontend/src/state/selectors.js

@@ -59,16 +59,25 @@ const instancesByServiceId = serviceId =>
 const findService = (services, uuid) =>
   services.reduce((service, s) => (s.uuid === uuid ? s : service), null);
 
+const activeInstanceStatuses = [
+  'PROVISIONING',
+  'READY',
+  'ACTIVE',
+  'RUNNING',
+  'STOPPING',
+  'INCOMPLETE'
+];
+
 const getInstanceStatuses = (service) => {
 
   const instanceStatuses = service.instances.reduce((statuses, instance) => {
-    if (instance.status !== 'RUNNING') {
+    // if (instance.status !== 'RUNNING') {
       if (statuses[instance.status]) {
         statuses[instance.status]++;
       } else {
         statuses[instance.status] = 1;
       }
-    }
+    // }
     return statuses;
   }, {});
 
@@ -78,15 +87,29 @@ const getInstanceStatuses = (service) => {
   }));
 }
 
-const getService = (service, index, datacenter) => ({
+const getInstancesActive = (instanceStatuses) => {
-  index,
+  return instanceStatuses.reduce((active, instanceStatus) =>
-  ...service,
+    activeInstanceStatuses.indexOf(instanceStatus.status) === -1 ?
-  datacenter,
+      active : true, false);
-  instanceStatuses: getInstanceStatuses(service),
+}
-  isConsul: service.slug === 'consul'
+
-});
+const getService = (service, index) => {
+
+  const statuses = getInstanceStatuses(service);
+  const instancesActive = getInstancesActive(statuses);
+  const instanceStatuses =  statuses.length === 1 && statuses[0].status === 'RUNNING' ?
+    [] : statuses;
+  return ({
+      index,
+      ...service,
+      instanceStatuses,
+      instancesActive,
+      isConsul: service.slug === 'consul'
+    });
+};
+
+const processServices = (services) => {
 
-const processServices = (services, datacenter) => {
   return forceArray(services).reduce((ss, s, i) => {
     if (s.parent) {
       const parents = ss.filter(parentS => parentS.id === s.parent);
@@ -100,15 +123,17 @@ const processServices = (services, datacenter) => {
       if (!parent.children) {
         parent.children = [];
       }
-      parent.children.push(getService(s, i, datacenter));
+      const child = getService(s, i);
+      parent.instancesActive = parent.instancesActive ? true : child.instancesActive;
+      parent.children.push(child);
     } else {
       const serviceIndex = ss.findIndex(existingS => existingS.id === s.id);
       if (serviceIndex === -1) {
-        ss.push(getService(s, i, datacenter));
+        ss.push(getService(s, i));
       } else {
         ss.splice(serviceIndex, 1, {
           ...ss[serviceIndex],
-          ...getService(s, i, datacenter)
+          ...getService(s, i)
         });
       }
     }
@@ -116,9 +141,24 @@ const processServices = (services, datacenter) => {
   }, []);
 };
 
+const processServicesForTopology = (services) => {
+
+  const processedServices = processServices(services);
+
+  const connectedServices = processedServices.reduce((connections, service) =>
+      service.connections && service.connections.length ?
+        connections.concat(service.connections).concat(service.id) : connections, []);
+
+  return processedServices.map(service => ({
+      ...service,
+      connected: connectedServices.indexOf(service.id) !== -1
+    }));
+}
+
 export {
   deploymentGroupBySlug as deploymentGroupBySlugSelector,
   serviceBySlug as serviceBySlugSelector,
   processServices,
+  processServicesForTopology,
   instancesByServiceId
 };

packages/cp-gql-mock-server/src/resolvers.js

@@ -194,14 +194,24 @@ const updateInstancesStatus = (is, status) => {
     instance.status = status;
   });
 
-  return Promise.resolve(instances);
+  return null;
 };
 
 const updateServiceStatus = (serviceId, status) => {
-  return getServices({ id: serviceId })
+  return Promise.all([getServices({ id: serviceId }), getServices({ parentId: serviceId })])
-    .then(services => services.shift().instances())
+    .then(services => services.reduce((services, service) =>
-    .then(instances => updateInstancesStatus(instances, status))
+      services.concat(service), []))
-    .then(instances => getServices({ id: serviceId }));
+    .then(services => Promise.all(
+      services.reduce((instances, service) =>
+        service.instances ? instances.concat(service.instances()) : instances, [])))
+    .then(instances => updateInstancesStatus(instances.reduce((is, i) =>
+      is.concat(i), []), status))
+    .then(() => Promise.all([
+      getServices({ id: serviceId }),
+      getServices({ parentId: serviceId })
+    ]))
+    .then(services => services.reduce((services, service) =>
+        services.concat(service), []));
 };
 
 const deleteServices = options => {

packages/ui-toolkit/package.json

@@ -31,6 +31,10 @@
     "camel-case": "^3.0.0",
     "d3": "^4.9.1",
     "disable-scroll": "^0.3.0",
+    "lodash.difference": "^4.5.0",
+    "lodash.differenceby": "^4.8.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.isequalwith": "^4.4.0",
     "lodash.isstring": "^4.0.1",
     "normalized-styled-components": "^1.0.8",
     "polished": "^1.1.3",

packages/ui-toolkit/src/topology/functions.js

@@ -1,6 +1,7 @@
 import Constants from './constants';
 
 const getAngleFromPoints = (source, target) => {
+
   const lineAngle = Math.atan2(target.y - source.y, target.x - source.x);
   const lineAngleDeg = lineAngle * 180 / Math.PI;
   const zeroToThreeSixty = lineAngleDeg < 0 ? 360 + lineAngleDeg : lineAngleDeg;

packages/ui-toolkit/src/topology/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Svg } from 'normalized-styled-components';
 import PropTypes from 'prop-types';
+import difference from 'lodash.difference';
+import differenceBy from 'lodash.differenceby';
 
 import Baseline from '../baseline';
 import Constants from './constants';
@@ -20,7 +22,7 @@ const StyledSvg = Svg.extend`
  */
 class Topology extends React.Component {
   componentWillMount() {
-    this.create();
+    this.create(this.props);
   }
 
   componentDidMount() {
@@ -33,15 +35,116 @@ class Topology extends React.Component {
   }
 
   shouldComponentUpdate() {
-    return true;
+    return false;
+  }
+
+  getChangedConnections(services, nextServices) {
+    return nextServices.reduce((changed, nextService) => {
+      if(changed.added || changed.removed) {
+        return changed;
+      }
+      const service = services.filter(service => service.id === nextService.id).shift();
+      const connectionsAdded = difference(nextService.connections, service.connections).length;
+      // there's a new connection, we need to redraw
+      if(connectionsAdded) {
+        return ({ added: true });
+      }
+      const connectionsRemoved = difference(service.connections, nextService.connections).length;
+      // we'll need to remove the offending connections from links
+      if(connectionsRemoved) {
+        return ({ removed: true});
+      }
+      return changed;
+    }, {});
+  }
+
+  getNextLinks(nextServices) {
+    const links = this.state.links;
+    return links.reduce((nextLinks, link) => {
+      const sourceExists = nextServices.filter(nextService =>
+        nextService.id === link.source.id);
+      if(sourceExists.length) {
+        const source = sourceExists.shift();
+        const targetExists = nextServices.filter(nextService =>
+          nextService.id === link.target.id).length;
+        const connectionExists = source.connections.filter(connection =>
+          connection === link.target.id).length;
+        if(targetExists && connectionExists) {
+          nextLinks.push(link);
+        }
+      }
+      return nextLinks;
+    }, []);
+  }
+
+  getNextNodes(nextServices) {
+    const nodes = this.state.nodes;
+    return nodes.reduce((nextNodes, node) => {
+      const keep = nextServices.filter(nextService => nextService.id === node.id).length;
+      if(keep) {
+        nextNodes.push(node);
+      }
+      return nextNodes;
+    }, []);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // if we remove a node, it should just be removed from the simulation nodes and links
+    // if we add a node, then we should recreate the damn thing
+    // on other updates, we should update the services on the state and that's it
+    // we should forceUpdate once the state has been updated
+    const nextServices = nextProps.services.sort();
+    const { services, nodes } = this.state;
+    if(nextServices.length > services.length) {
+      // new service added, we need to redraw
+      this.create(nextProps);
+    }
+    else if(nextServices.length <= services.length) {
+
+      const servicesRemoved = differenceBy(services, nextServices, 'id');
+      const servicesChanged = differenceBy(nextServices, services, 'id');
+      if(servicesChanged.length ||
+        servicesRemoved.length !== services.length - nextServices.length) {
+          this.create(nextProps);
+      }
+      else {
+        // check whether there are new connections. if so, we need to redraw
+        // if we just dropped one, we need to remove it from links
+        // comparison to yield 3 possible outcomes; no change, added, dropped
+        const changedConnections = this.getChangedConnections(services, nextServices);
+        // if connections are added, we'll need to redraw
+        if(changedConnections.added) {
+          this.create(nextProps);
+        }
+        else if(servicesRemoved.length || changedConnections.removed) {
+          const nextNodes = servicesRemoved.length
+            ? this.getNextNodes(nextServices)
+            : nodes;
+          const nextLinks = this.getNextLinks(nextServices);
+          this.setState({
+            services: nextServices,
+            links: nextLinks,
+            nodes: nextNodes,
+          }, () => this.forceUpdate());
+        }
+        else {
+          // we've got the same services, no links changed, so we just need to set them to the state
+          this.setState({ services: nextServices }, () => this.forceUpdate());
+        }
+      }
+    }
   }
 
   handleResize(evt) {
-    this.create();
+    this.create(this.props);
+    // resize should just rejig the positions
   }
 
-  create() {
+  create(props) {
-    const services = this.getServicesWithoutConsul();
+    // other updates should also just update the services rather than recreate the simulation
+    const services = props.services.sort();
+    const connectedServices = services.filter(service => service.connected);
+    const notConnectedServices = services.filter(service => !service.connected && !service.isConsul);
     const svgSize = this.getSvgSize();
 
     const { nodes, links, simulation } = createSimulation(services, svgSize);
@@ -49,17 +152,13 @@ class Topology extends React.Component {
     this.setState({
       nodes,
       links,
-      simulation
+      simulation,
+      services
+    }, () => {
+      this.forceUpdate();
     });
   }
 
-  getServicesWithoutConsul() {
-    return this.props.services.reduce((acc, service, index) => {
-      if (!service.isConsul) acc.push(service);
-      return acc;
-    }, []);
-  }
-
   getSvgSize() {
     if (document.getElementById('topology-svg')) {
       return document.getElementById('topology-svg').getBoundingClientRect();
@@ -136,9 +235,9 @@ class Topology extends React.Component {
   }
 
   render() {
-    const { onQuickActionsClick, onNodeTitleClick, services } = this.props;
+    const { onQuickActionsClick, onNodeTitleClick } = this.props;
 
-    const { nodes, links } = this.state;
+    const { nodes, links, services } = this.state;
 
     const nodesData = services.map((service, index) => {
       const nodePosition = service.isConsul
@@ -156,12 +255,15 @@ class Topology extends React.Component {
 
     // TODO links will need to know whether a service has children
     // if it does, the height of it will be different
-    const linksData = links
+    const t = links
       .map((link, index) => ({
         source: this.findNodeData(nodesData, link.source.id),
         target: this.findNodeData(nodesData, link.target.id)
-      }))
+      }));
-      .map((linkData, index) => calculateLineLayout(linkData, index));
+    const linksData = t
+      .map((linkData, index) => {
+        return calculateLineLayout(linkData, index)
+      });
 
     const onDragStart = (evt, nodeId) => {
       // It's this node's position that we'll need to update
@@ -204,7 +306,7 @@ class Topology extends React.Component {
 
         this.setState({
           nodes: dragNodes
-        });
+        }, () => this.forceUpdate());
 
         this.setDragInfo(true, this.dragInfo.nodeId, {
           x,
@@ -225,7 +327,6 @@ class Topology extends React.Component {
         onDragStart={onDragStart}
         onNodeTitleClick={onNodeTitleClick}
         onQuickActions={onQuickActionsClick}
-        connected={!n.isConsul}
       />;
 
     const renderedLink = (l, index) =>

packages/ui-toolkit/src/topology/node/button.js

@@ -4,7 +4,7 @@ import Baseline from '../../baseline';
 import Constants from '../constants';
 import { GraphLine, GraphButtonRect, GraphButtonCircle } from './shapes';
 
-const NodeButton = ({ connected, onButtonClick, index }) => {
+const NodeButton = ({ onButtonClick, index, isConsul, instancesActive }) => {
   const { x, y, width, height } = Constants.buttonRect;
 
   const buttonCircleRadius = 2;
@@ -20,13 +20,15 @@ const NodeButton = ({ connected, onButtonClick, index }) => {
       }
       key={index}
       r={2}
-      connected={connected}
+      consul={isConsul}
+      active={instancesActive}
     />
   );
 
   return (
     <g transform={`translate(${x}, ${y})`}>
-      <GraphLine x1={0} y1={0} x2={0} y2={height} connected={connected} />
+      <GraphLine x1={0} y1={0} x2={0} y2={height}
+        consul={isConsul} active={instancesActive} />
       {buttonCircles}
       <GraphButtonRect
         height={height}
@@ -41,9 +43,10 @@ const NodeButton = ({ connected, onButtonClick, index }) => {
 };
 
 NodeButton.propTypes = {
-  connected: PropTypes.bool,
   index: PropTypes.number.isRequired,
-  onButtonClick: PropTypes.func.isRequired
+  onButtonClick: PropTypes.func.isRequired,
+  isConsul: PropTypes.bool,
+  instancesActive: PropTypes.bool
 };
 
 export default Baseline(NodeButton);

packages/ui-toolkit/src/topology/node/content.js

@@ -6,7 +6,7 @@ import { GraphLine, GraphSubtitle, GraphText } from './shapes';
 import GraphNodeInfo from './info';
 import GraphNodeMetrics from './metrics';
 
-const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => {
+const GraphNodeContent = ({ child = false, data, index = 0 }) => {
   let { x, y, width, height } = Constants.contentRect;
   if(child) height = Constants.childContentSize.height;
 
@@ -29,7 +29,11 @@ const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => {
     : Constants.metricsPosition; */
 
   const nodeSubtitle = child
-    ? <GraphSubtitle {...Constants.subtitlePosition} connected={connected}>
+    ? <GraphSubtitle
+      {...Constants.subtitlePosition}
+      consul={data.isConsul}
+      active={data.instancesActive}
+    >
         {data.name}
       </GraphSubtitle>
     : null;
@@ -50,13 +54,15 @@ const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => {
       instances={data.instances}
       instanceStatuses={data.instanceStatuses}
       healthy
-      connected={connected}
       pos={nodeInfoPos}
+      isConsul={data.isConsul}
+      instancesActive={data.instancesActive}
     />;
 
   return (
     <g transform={`translate(${x}, ${contentY})`}>
-      <GraphLine x1={0} y1={0} x2={width} y2={0} connected={connected} />
+      <GraphLine x1={0} y1={0} x2={width} y2={0}
+        consul={data.isConsul} active={data.instancesActive} />
       {nodeSubtitle}
       {nodeInfo}
       {/* <GraphNodeMetrics
@@ -70,7 +76,6 @@ const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => {
 
 GraphNodeContent.propTypes = {
   child: PropTypes.bool,
-  connected: PropTypes.bool,
   data: PropTypes.object.isRequired,
   index: PropTypes.number
 };

packages/ui-toolkit/src/topology/node/index.js

@@ -8,7 +8,6 @@ import { GraphNodeRect, GraphShadowRect } from './shapes';
 import Baseline from '../../baseline';
 
 const GraphNode = ({
-  connected,
   data,
   index,
   onDragStart,
@@ -19,7 +18,7 @@ const GraphNode = ({
 
   let x = data.x;
   let y = data.y;
-  if (connected) {
+  if (data.connected) {
     x = data.x + left;
     y = data.y + top;
   }
@@ -30,7 +29,7 @@ const GraphNode = ({
       y: data.y + Constants.buttonRect.y + Constants.buttonRect.height
     };
 
-    if (connected) {
+    if (data.connected) {
       tooltipPosition.x += left;
       tooltipPosition.y += top;
     }
@@ -53,7 +52,7 @@ const GraphNode = ({
     onDragStart(evt, data.id);
   };
 
-  const nodeRectEvents = connected
+  const nodeRectEvents = data.connected
     ? {
         onMouseDown: onStart,
         onTouchStart: onStart
@@ -65,39 +64,44 @@ const GraphNode = ({
         <GraphNodeContent
           key={i}
           child
-          connected={connected}
           data={d}
           index={i}
         />
       )
-    : <GraphNodeContent connected={connected} data={data} />;
+    : <GraphNodeContent data={data} />;
+
+  const nodeShadow = data.instancesActive ?
+    <GraphShadowRect
+      x={0}
+      y={3}
+      width={width}
+      height={height}
+      consul={data.isConsul}
+      active={data.instancesActive}
+    /> : null;
 
   return (
     <g transform={`translate(${x}, ${y})`}>
-      <GraphShadowRect
+      { nodeShadow }
-        x={0}
-        y={3}
-        width={width}
-        height={height}
-        connected={connected}
-      />
       <GraphNodeRect
         x={0}
         y={0}
         width={width}
         height={height}
-        connected={connected}
+        consul={data.isConsul}
+        active={data.instancesActive}
+        connected={data.connected}
         {...nodeRectEvents}
       />
       <GraphNodeTitle
-        connected={connected}
         data={data}
         onNodeTitleClick={onTitleClick}
       />
       <GraphNodeButton
-        connected={connected}
         index={index}
         onButtonClick={onButtonClick}
+        isConsul={data.isConsul}
+        instancesActive={data.instancesActive}
       />
       {nodeContent}
     </g>
@@ -105,7 +109,6 @@ const GraphNode = ({
 };
 
 GraphNode.propTypes = {
-  connected: PropTypes.bool,
   data: PropTypes.object.isRequired,
   index: PropTypes.number.isRequired,
   onDragStart: PropTypes.func,

packages/ui-toolkit/src/topology/node/info.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import is from 'styled-is';
+import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';
 import Baseline from '../../baseline';
 import DataCentresIcon from './icon-data-centers.svg';
@@ -10,26 +10,34 @@ import { GraphText, GraphHealthyCircle } from './shapes';
 import HeartIcon from './icon-heart.svg';
 
 const StyledInstancesIcon = styled(InstancesIcon)`
-  fill: ${props => props.theme.secondary};
+  fill: ${props => props.theme.white};
 
-  ${is('connected')`
+  ${is('consul')`
-    fill: ${props => props.theme.white};
+    fill: ${props => props.theme.secondary};
+  `};
+
+  ${isNot('active')`
+    fill: ${props => props.theme.secondary};
   `};
 `;
 
 const StyledDataCentresIcon = styled(DataCentresIcon)`
-  fill: ${props => props.theme.secondary};
+  fill: ${props => props.theme.white};
 
-  ${is('connected')`
+  ${is('consul')`
-    fill: ${props => props.theme.white};
+    fill: ${props => props.theme.secondary};
+  `};
+
+  ${isNot('active')`
+    fill: ${props => props.theme.secondary};
   `};
 `;
 
-const GraphNodeInfo = ({ connected, datacenter, instances, instanceStatuses, healthy, pos }) => {
+const GraphNodeInfo = ({ datacenter, instances, instanceStatuses, healthy, pos, isConsul, instancesActive }) => {
   const { x, y } = pos;
 
   const statuses = instanceStatuses.map((instanceStatus, index) =>
-    <GraphText key={index} connected={connected}>
+    <GraphText key={index} consul={isConsul} active={instancesActive}>
       {`${instanceStatus.count}
         ${instanceStatus.status.toLowerCase()}`}
     </GraphText>
@@ -42,9 +50,9 @@ const GraphNodeInfo = ({ connected, datacenter, instances, instanceStatuses, hea
         <HeartIcon />
       </g>
       <g transform={'translate(30, 4.5)'}>
-        <StyledInstancesIcon connected={connected} />
+        <StyledInstancesIcon consul={isConsul} active={instancesActive} />
       </g>
-      <GraphText x={54} y={14} connected={connected}>
+      <GraphText x={54} y={14} consul={isConsul} active={instancesActive}>
         {`${instances.length} inst.`}
       </GraphText>
       <g transform={'translate(54, 36)'}>
@@ -61,12 +69,13 @@ const GraphNodeInfo = ({ connected, datacenter, instances, instanceStatuses, hea
 };
 
 GraphNodeInfo.propTypes = {
-  connected: PropTypes.bool,
   datacenter: PropTypes.string,
   healthy: PropTypes.bool,
   instances: PropTypes.array,
   instanceStatuses: PropTypes.array,
-  pos: Point.isRequired
+  pos: Point.isRequired,
+  isConsul: PropTypes.bool,
+  instancesActive: PropTypes.bool
 };
 
 export default Baseline(GraphNodeInfo);

packages/ui-toolkit/src/topology/node/shapes.js

@@ -1,38 +1,50 @@
 import styled from 'styled-components';
-import is from 'styled-is';
+import is, {isNot} from 'styled-is';
 import typography from '../../typography';
 
 export const GraphLine = styled.line`
-  stroke: ${props => props.theme.grey};
+  stroke: ${props => props.theme.secondaryActive};
   stroke-width: 1.5;
 
-  ${is('connected')`
+  ${is('consul')`
-    stroke: ${props => props.theme.secondaryActive};
+    stroke: ${props => props.theme.grey};
+  `};
+
+  ${isNot('active')`
+    stroke: ${props => props.theme.grey};
   `};
 `;
 
 export const GraphNodeRect = styled.rect`
-  stroke: ${props => props.theme.grey};
+  stroke: ${props => props.theme.secondaryActive};
-  fill: ${props => props.theme.white};
+  fill: ${props => props.theme.secondary};
   stroke-width: 1.5;
   rx: 4;
   ry: 4;
 
-  ${is('connected')`
+  ${is('consul')`
-    stroke: ${props => props.theme.secondaryActive};
+    stroke: ${props => props.theme.grey};
-    fill: ${props => props.theme.secondary};
+    fill: ${props => props.theme.white};
+  `};
+
+  ${isNot('active')`
+    stroke: ${props => props.theme.grey};
+    fill: ${props => props.theme.whiteActive};
+  `};
+
+  ${is('connected')`
+    cursor: move;
   `};
-  cursor: move;
 `;
 
 export const GraphShadowRect = styled.rect`
-  fill: ${props => props.theme.grey};
+  fill: ${props => props.theme.secondary};
   opacity: 0.33;
   rx: 4;
   ry: 4;
 
-  ${is('connected')`
+  ${is('consul')`
-    fill: ${props => props.theme.secondary};
+    fill: ${props => props.theme.grey};
   `};
 `;
 
@@ -40,13 +52,18 @@ export const GraphTitle = styled.text`
   ${typography.fontFamily};
   ${typography.normal};
 
-  fill: ${props => props.theme.secondary};
+  fill: ${props => props.theme.white};
   font-size: 16px;
   font-weight: 600;
 
-  ${is('connected')`
+  ${is('consul')`
-    fill: ${props => props.theme.white};
+    fill: ${props => props.theme.secondary};
   `};
+
+  ${isNot('active')`
+    fill: ${props => props.theme.secondary};
+  `};
+
   cursor: pointer;
 `;
 
@@ -54,25 +71,33 @@ export const GraphSubtitle = styled.text`
   ${typography.fontFamily};
   ${typography.normal};
 
-  fill: ${props => props.theme.secondary};
+  fill: ${props => props.theme.white};
   font-size: 12px;
   font-weight: 600;
 
-  ${is('connected')`
+  ${is('consul')`
-    fill: ${props => props.theme.white};
+    fill: ${props => props.theme.secondary};
+  `};
+
+  ${isNot('active')`
+    fill: ${props => props.theme.secondary};
   `};
 `;
 
 export const GraphText = styled.text`
   ${typography.fontFamily};
   ${typography.normal};
+  fill: ${props => props.theme.white};
 
-  fill: ${props => props.theme.secondary};
   font-size: 12px;
   opacity: 0.8;
 
-  ${is('connected')`
+  ${is('consul')`
-    fill: ${props => props.theme.white};
+    fill: ${props => props.theme.secondary};
+  `};
+
+  ${isNot('active')`
+    fill: ${props => props.theme.secondary};
   `};
 `;
 
@@ -86,10 +111,14 @@ export const GraphButtonRect = styled.rect`
 `;
 
 export const GraphButtonCircle = styled.circle`
-  fill: ${props => props.theme.secondary};
+  fill: ${props => props.theme.white};
 
-  ${is('connected')`
+  ${is('consul')`
-    fill: ${props => props.theme.white};
+    fill: ${props => props.theme.secondary};
+  `};
+
+  ${isNot('active')`
+    fill: ${props => props.theme.secondary};
   `};
 `;
 

packages/ui-toolkit/src/topology/node/title.js

@@ -5,14 +5,15 @@ import Constants from '../constants';
 import { GraphTitle, GraphHealthyCircle } from './shapes';
 import HeartIcon from './icon-heart.svg';
 
-const GraphNodeTitle = ({ connected, data, onNodeTitleClick }) =>
+const GraphNodeTitle = ({ data, onNodeTitleClick }) =>
   <g>
     <GraphTitle
       x={Constants.paddingLeft}
       y={30}
-      connected={connected}
       onClick={onNodeTitleClick}
       onKeyDown={onNodeTitleClick}
+      consul={data.isConsul}
+      active={data.instancesActive}
     >
       {data.name}
     </GraphTitle>
@@ -23,7 +24,6 @@ const GraphNodeTitle = ({ connected, data, onNodeTitleClick }) =>
   </g>;
 
 GraphNodeTitle.propTypes = {
-  connected: PropTypes.bool,
   data: PropTypes.object.isRequired,
   onNodeTitleClick: PropTypes.func
 };

yarn.lock

@@ -220,8 +220,8 @@ anymatch@^1.3.0:
     micromatch "^2.1.5"
 
 apollo-client@^1.4.0:
-  version "1.6.1"
+  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-1.6.1.tgz#1b82e02ae5082c5e43b09daffdeced5a56e7128f"
+  resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-1.7.0.tgz#3d6fdf6ead0a07d3e02d32d9191f26cbcfb6e4f6"
   dependencies:
     graphql "^0.10.0"
     graphql-anywhere "^3.0.1"
@@ -386,9 +386,9 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-query@^0.5.0:
+aria-query@^0.7.0:
-  version "0.5.0"
+  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.5.0.tgz#85e3152cd8cc5bab18dbed61cd9c4fce54fa79c3"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
   dependencies:
     ast-types-flow "0.0.7"
 
@@ -497,10 +497,6 @@ ast-types@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.0.tgz#c8721c8747ae4d5b29b929e99c5317b4e8745623"
 
-ast-types@0.9.6:
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
-
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -895,10 +891,10 @@ babel-plugin-istanbul@^4.1.4:
     test-exclude "^4.1.1"
 
 babel-plugin-styled-components@^1.1.4:
-  version "1.1.6"
+  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.1.6.tgz#72ffdc1be310f0521af3b574bffedd730405cda9"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.1.7.tgz#a92c239779cc80e7838b645c12865c61c4ca71ce"
   dependencies:
-    stylis "^3.0.19"
+    stylis "^3.2.1"
 
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
@@ -1208,7 +1204,7 @@ babel-polyfill@^6.23.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-preset-env@1.5.2, babel-preset-env@^1.5.2:
+babel-preset-env@1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.5.2.tgz#cd4ae90a6e94b709f97374b33e5f8b983556adef"
   dependencies:
@@ -1243,6 +1239,41 @@ babel-preset-env@1.5.2, babel-preset-env@^1.5.2:
     invariant "^2.2.2"
     semver "^5.3.0"
 
+babel-preset-env@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.0.tgz#2de1c782a780a0a5d605d199c957596da43c44e4"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^2.1.2"
+    invariant "^2.2.2"
+    semver "^5.3.0"
+
 babel-preset-flow@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
@@ -1731,12 +1762,12 @@ camelcase@^4.0.0, camelcase@^4.1.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
 caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000696"
+  version "1.0.30000697"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000696.tgz#e71f5c61e1f96c7a3af4e791ac5db55e11737604"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000697.tgz#20ce6a9ceeef4ef4a15dc8e80f2e8fb9049e8d77"
 
 caniuse-lite@^1.0.30000684:
-  version "1.0.30000696"
+  version "1.0.30000697"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000696.tgz#30f2695d2a01a0dfd779a26ab83f4d134b3da5cc"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000697.tgz#125fb00604b63fbb188db96a667ce2922dcd6cdd"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -1984,12 +2015,12 @@ code@4.1.x, code@^4.1.0:
     hoek "4.x.x"
 
 codemirror@^5.18.2:
-  version "5.27.2"
+  version "5.27.4"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.27.2.tgz#a292d42f079d5b98c68c3146fab99844f3d8776c"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.27.4.tgz#0e817c839bfea9959dd16cd48ae14acc0e43c3b6"
 
 coleman-liau@^1.0.0:
-  version "1.0.0"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/coleman-liau/-/coleman-liau-1.0.0.tgz#de1f39901e164f49eff2a6ec88f3a9dbbb6686c1"
+  resolved "https://registry.yarnpkg.com/coleman-liau/-/coleman-liau-1.0.1.tgz#43c89d57e74fc29ab3e463d110e7d5defd9cc019"
 
 collapse-white-space@^1.0.2:
   version "1.0.3"
@@ -2046,10 +2077,8 @@ command-join@^2.0.0:
   resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"
 
 commander@2, commander@^2.7.1, commander@^2.8.1, commander@^2.9.0:
-  version "2.10.0"
+  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.10.0.tgz#e1f5d3245de246d1a5ca04702fa1ad1bd7e405fe"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-  dependencies:
-    graceful-readlink ">= 1.0.0"
 
 common-path-prefix@^1.0.0:
   version "1.0.0"
@@ -2774,8 +2803,8 @@ d@1:
     es5-ext "^0.10.9"
 
 dale-chall-formula@^1.0.0:
-  version "1.0.0"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/dale-chall-formula/-/dale-chall-formula-1.0.0.tgz#a00df0a1c161ce4bd9a30422e41e953103a4ecc9"
+  resolved "https://registry.yarnpkg.com/dale-chall-formula/-/dale-chall-formula-1.0.1.tgz#de3a82d485c7ab7b64c2c9c046f7f3cb75e177fd"
 
 dale-chall@^1.0.0:
   version "1.0.0"
@@ -3107,8 +3136,8 @@ elliptic@^6.0.0:
     minimalistic-crypto-utils "^1.0.0"
 
 emoji-regex@^6.1.0:
-  version "6.4.2"
+  version "6.4.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.2.tgz#a30b6fee353d406d96cfb9fa765bdc82897eff6e"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.3.tgz#6ac2ac58d4b78def5e39b33fcbf395688af3076c"
 
 emojis-list@^2.0.0:
   version "2.1.0"
@@ -3144,8 +3173,8 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
     once "^1.4.0"
 
 enhanced-resolve@^3.0.0:
-  version "3.1.0"
+  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.1.0.tgz#9f4b626f577245edcf4b2ad83d86e17f4f421dec"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz#950964ecc7f0332a42321b673b38dc8ff15535b3"
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.4.0"
@@ -3267,8 +3296,8 @@ eslint-config-hapi@10.x.x:
   resolved "https://registry.yarnpkg.com/eslint-config-hapi/-/eslint-config-hapi-10.0.0.tgz#9980affd76103ebc1fec92b45638345db19348f5"
 
 eslint-config-prettier@^2.2.0:
-  version "2.2.0"
+  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.2.0.tgz#ca47663852789a75c10feba673e802cc1eff085f"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.3.0.tgz#b75b1eabea0c8b97b34403647ee25db349b9d8a0"
   dependencies:
     get-stdin "^5.0.1"
 
@@ -3286,13 +3315,12 @@ eslint-config-xo@^0.18.0:
   version "0.18.2"
   resolved "https://registry.yarnpkg.com/eslint-config-xo/-/eslint-config-xo-0.18.2.tgz#0a157120875619929e735ffd6b185c41e8a187af"
 
-eslint-import-resolver-node@^0.2.0:
+eslint-import-resolver-node@^0.3.1:
-  version "0.2.3"
+  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.2.3.tgz#5add8106e8c928db2cba232bcd9efa846e3da16c"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz#4422574cde66a9a7b099938ee4d508a199e0e3cc"
   dependencies:
-    debug "^2.2.0"
+    debug "^2.6.8"
-    object-assign "^4.0.1"
+    resolve "^1.2.0"
-    resolve "^1.1.6"
 
 eslint-module-utils@^2.0.0:
   version "2.1.1"
@@ -3317,14 +3345,14 @@ eslint-plugin-hapi@4.x.x:
     no-arrowception "1.x.x"
 
 eslint-plugin-import@^2.3.0:
-  version "2.6.0"
+  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.6.0.tgz#2a4bbad36a078e052a3c830ce3dfbd6b8a12c6e5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.6.1.tgz#f580be62bb809421d46e338372764afcc9f59bf6"
   dependencies:
     builtin-modules "^1.1.1"
     contains-path "^0.1.0"
     debug "^2.6.8"
     doctrine "1.5.0"
-    eslint-import-resolver-node "^0.2.0"
+    eslint-import-resolver-node "^0.3.1"
     eslint-module-utils "^2.0.0"
     has "^1.0.1"
     lodash.cond "^4.3.0"
@@ -3332,10 +3360,10 @@ eslint-plugin-import@^2.3.0:
     read-pkg-up "^2.0.0"
 
 eslint-plugin-jsx-a11y@^5.0.3:
-  version "5.1.0"
+  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.0.tgz#4a829634344e7a90391a9fb0fbd19810737d79c5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.1.1.tgz#5c96bb5186ca14e94db1095ff59b3e2bd94069b1"
   dependencies:
-    aria-query "^0.5.0"
+    aria-query "^0.7.0"
     array-includes "^3.0.3"
     ast-types-flow "0.0.7"
     axobject-query "^0.1.0"
@@ -3463,7 +3491,7 @@ esprima@^2.6.0, esprima@~2.7.1:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
-esprima@^3.1.1, esprima@~3.1.0:
+esprima@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
 
@@ -3807,8 +3835,8 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
 flesch@^1.0.0:
-  version "1.0.0"
+  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/flesch/-/flesch-1.0.0.tgz#96bfaee5e208264ff63c4447c4f124b5d4361cd5"
+  resolved "https://registry.yarnpkg.com/flesch/-/flesch-1.0.1.tgz#75253fdcb0786c2da13e87c10c8dd0eb468f7236"
 
 fn-name@^2.0.0:
   version "2.0.1"
@@ -4178,8 +4206,8 @@ got@^6.7.1:
     url-parse-lax "^1.0.0"
 
 got@^7.0.0:
-  version "7.0.0"
+  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/got/-/got-7.0.0.tgz#82d439f6763cdb1c8821b7a3aae2784c88c3b8d3"
+  resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
   dependencies:
     decompress-response "^3.2.0"
     duplexer3 "^0.1.4"
@@ -4189,20 +4217,17 @@ got@^7.0.0:
     is-stream "^1.0.0"
     isurl "^1.0.0-alpha5"
     lowercase-keys "^1.0.0"
-    p-cancelable "^0.2.0"
+    p-cancelable "^0.3.0"
     p-timeout "^1.1.1"
     safe-buffer "^5.0.1"
     timed-out "^4.0.0"
     url-parse-lax "^1.0.0"
+    url-to-options "^1.0.1"
 
 graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
-"graceful-readlink@>= 1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
-
 graphql-anywhere@^3.0.0, graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
@@ -4317,15 +4342,15 @@ has-own-prop@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-own-prop/-/has-own-prop-1.0.0.tgz#7b5e04505ee55896ba32e5018098b481a2f8a0e5"
 
-has-symbol-support-x@^1.2.0:
+has-symbol-support-x@^1.3.0:
-  version "1.2.0"
+  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.2.0.tgz#e624ead5190c35b34e4e299344dff6437db02ce2"
+  resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.3.0.tgz#588bd6927eaa0e296afae24160659167fc2be4f8"
 
 has-to-string-tag-x@^1.2.0:
-  version "1.2.0"
+  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.2.0.tgz#c536dc4dbbebe1be9d28f624fd320f793129fd53"
+  resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.3.0.tgz#78e3d98c3c0ec9413e970eb8d766249a1e13058f"
   dependencies:
-    has-symbol-support-x "^1.2.0"
+    has-symbol-support-x "^1.3.0"
 
 has-unicode@^2.0.0:
   version "2.0.1"
@@ -4348,8 +4373,8 @@ hash-base@^2.0.0:
     inherits "^2.0.1"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.2"
+  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.2.tgz#bf5c887825cfe40b9efde7bf11bd2db26e6bf01b"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
   dependencies:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.0"
@@ -4633,8 +4658,8 @@ iron@4.x.x:
     hoek "4.x.x"
 
 irregular-plurals@^1.0.0:
-  version "1.2.0"
+  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-1.2.0.tgz#38f299834ba8c00c30be9c554e137269752ff3ac"
+  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-1.3.0.tgz#7af06931bdf74be33dcf585a13e06fccc16caecf"
 
 is-absolute@^0.1.7:
   version "0.1.7"
@@ -4945,8 +4970,8 @@ isobject@^2.0.0:
     isarray "1.0.0"
 
 isobject@^3.0.0:
-  version "3.0.0"
+  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.0.tgz#39565217f3661789e8a0a0c080d5f7e6bc46e1a0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
 
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
@@ -5011,8 +5036,8 @@ istanbul-reports@^1.1.1:
     handlebars "^4.0.3"
 
 isurl@^1.0.0-alpha5:
-  version "1.0.0-alpha6"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0-alpha6.tgz#9df0b8477866aa425d046be8fbb429e64b5b8915"
+  resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
   dependencies:
     has-to-string-tag-x "^1.2.0"
     is-object "^1.0.1"
@@ -5714,6 +5739,10 @@ lodash.isequal@^4.1.1, lodash.isequal@^4.4.0, lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
+lodash.isequalwith@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
+
 lodash.isfinite@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
@@ -6568,9 +6597,9 @@ output-file-sync@^1.1.0:
     mkdirp "^0.5.1"
     object-assign "^4.1.0"
 
-p-cancelable@^0.2.0:
+p-cancelable@^0.3.0:
-  version "0.2.0"
+  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.2.0.tgz#3152f4f30be7606b60ebfe8bb93b3fdf69085e46"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
 
 p-finally@^1.0.0:
   version "1.0.0"
@@ -6587,8 +6616,10 @@ p-locate@^2.0.0:
     p-limit "^1.1.0"
 
 p-timeout@^1.1.1:
-  version "1.1.1"
+  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-1.1.1.tgz#d28e9fdf96e328886fbff078f886ad158c53bf6d"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-1.2.0.tgz#9820f99434c5817868b4f34809ee5291660d5b6c"
+  dependencies:
+    p-finally "^1.0.0"
 
 package-hash@^1.2.0:
   version "1.2.0"
@@ -7001,8 +7032,8 @@ pretty-ms@^2.0.0:
     plur "^1.0.0"
 
 primer-support@*:
-  version "4.0.5"
+  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/primer-support/-/primer-support-4.0.5.tgz#f2177c8eda81ba658a7fc39525016f5c245684d3"
+  resolved "https://registry.yarnpkg.com/primer-support/-/primer-support-4.0.6.tgz#80f3bf1ceb63fda1cf2fdbcea09b632c812e1d54"
 
 primer-utilities@^3.0.0:
   version "3.5.0"
@@ -7419,15 +7450,15 @@ read@1.0.7:
     mute-stream "~0.0.4"
 
 "readable-stream@>= 1.0.2", readable-stream@^2, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.6:
-  version "2.3.2"
+  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.2.tgz#5a04df05e4f57fe3f0dc68fdd11dc5c97c7e6f4d"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
     isarray "~1.0.0"
     process-nextick-args "~1.0.6"
-    safe-buffer "~5.1.0"
+    safe-buffer "~5.1.1"
-    string_decoder "~1.0.0"
+    string_decoder "~1.0.3"
     util-deprecate "~1.0.1"
 
 "readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0.26-4:
@@ -7491,7 +7522,7 @@ readline2@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     mute-stream "0.0.5"
 
-recast@0.11.12:
+recast@0.11.12, recast@^0.11.5:
   version "0.11.12"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.12.tgz#a79e4d3f82d5d72a82ee177aeaa791e793bbe5d6"
   dependencies:
@@ -7500,15 +7531,6 @@ recast@0.11.12:
     private "~0.1.5"
     source-map "~0.5.0"
 
-recast@^0.11.5:
-  version "0.11.23"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
-  dependencies:
-    ast-types "0.9.6"
-    esprima "~3.1.0"
-    private "~0.1.5"
-    source-map "~0.5.0"
-
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -7549,8 +7571,8 @@ reduce-reducers@^0.1.0:
   resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.1.2.tgz#fa1b4718bc5292a71ddd1e5d839c9bea9770f14b"
 
 redux-actions@^2.0.3:
-  version "2.0.3"
+  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-2.0.3.tgz#1550aba9def179166ccd234d07672104a736d889"
+  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-2.2.1.tgz#d64186b25649a13c05478547d7cd7537b892410d"
   dependencies:
     invariant "^2.2.1"
     lodash "^4.13.1"
@@ -7820,7 +7842,7 @@ resolve-url@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.1.6, resolve@^1.1.7:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
   dependencies:
@@ -8045,7 +8067,7 @@ rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.1.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
@@ -8319,8 +8341,8 @@ spdx-license-ids@^1.0.2:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
 
 specificity@^0.3.0:
-  version "0.3.0"
+  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.3.0.tgz#332472d4e5eb5af20821171933998a6bc3b1ce6f"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.3.1.tgz#f1b068424ce317ae07478d95de3c21cf85e8d567"
 
 split-ca@^1.0.0:
   version "1.0.1"
@@ -8491,7 +8513,7 @@ string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
-string_decoder@~1.0.0:
+string_decoder@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
   dependencies:
@@ -8581,8 +8603,8 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
 styled-components@^2.1.0:
-  version "2.1.0"
+  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.0.tgz#425805fca7efa5880aad2171f986bfd8a2f0808f"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.1.tgz#7e9b5bc319ee3963b47aebb74f4658119ea9d484"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
@@ -8591,7 +8613,7 @@ styled-components@^2.1.0:
     is-function "^1.0.1"
     is-plain-object "^2.0.1"
     prop-types "^15.5.4"
-    stylis "^3.0.19"
+    stylis "^3.2.1"
     supports-color "^3.2.3"
 
 styled-is@^1.0.11:
@@ -8700,9 +8722,9 @@ stylelint@^7.0.0, stylelint@^7.0.3, stylelint@^7.11.1:
     svg-tags "^1.0.0"
     table "^4.0.1"
 
-stylis@^3.0.19:
+stylis@^3.2.1:
-  version "3.1.9"
+  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.1.9.tgz#638370451f980437f57c59e58d2e296be29fafb7"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.2.tgz#9be4b4e18d9969a7cee9d4439e24437e5bb7a764"
 
 subtext@4.x.x:
   version "4.4.1"
@@ -9121,8 +9143,8 @@ triton-watch@^1.1.0:
     triton "5.2.x"
 
 triton@5.2.x, triton@^5.2.0:
-  version "5.2.0"
+  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/triton/-/triton-5.2.0.tgz#16ce8cb155c37785b6818e403f5cf83934921d41"
+  resolved "https://registry.yarnpkg.com/triton/-/triton-5.2.1.tgz#5e950ca68a5aaf18d766f02bc87c5da2663c71cb"
   dependencies:
     assert-plus "0.2.0"
     backoff "2.4.1"
@@ -9353,6 +9375,10 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
+url-to-options@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"