Migration, menus, topology, inline svg

2017-05-16 14:46:04 +01:00 · 2017-05-16 14:46:04 +01:00 · 7cad8228ee
parent 7e2bfce707
commit 7cad8228ee
46 changed files with 1020 additions and 404 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -4,6 +4,8 @@
  "private": true,
  "dependencies": {
    "apollo": "^0.2.2",
+    "babel-plugin-inline-react-svg": "^0.4.0",
+    "constant-case": "^2.0.0",
    "graphql-tag": "^2.0.0",
    "loadash": "^0.0.1",
    "prop-types": "^15.5.9",
@ -15,6 +17,7 @@
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
+    "redux-actions": "^2.0.3",
    "redux-form": "^6.7.0",
    "reselect": "^3.0.1",
    "rewire": "^2.5.2",
--- a/frontend/scripts/config-overrides.dev.js
+++ b/frontend/scripts/config-overrides.dev.js
@ -14,6 +14,28 @@ module.exports = function(config) {
  // Add support for loading .graphql files
  config.module.loaders[0].exclude.push(/\.(graphql|gql)$/);

+  const loaders = config.module.loaders.reduce((loaders, loader) => {
+    if(loader.loader === 'babel') {
+      loaders.push({
+        test: loader.test,
+        include: loader.include,
+        loader: loader.loader,
+        query: {
+          babelrc: false,
+          presets: [require.resolve('babel-preset-react-app')],
+          plugins: ["inline-react-svg"],
+          cacheDirectory: true
+        }
+      })
+    }
+    else {
+      loaders.push(loader);
+    }
+    return loaders;
+  }, []);
+
+  config.module.loaders = loaders;
+
  config.module.loaders.push({
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@ -1,14 +1,13 @@
 import React, { Component } from 'react';
 import { ApolloProvider } from 'react-apollo';
-import { client, store } from './state/store';
-import Router from './router';
+import { client, store } from '@state/store';
+import Router from '@root/router';

 class App extends Component {
  render() {
    return (
      <ApolloProvider client={client} store={store} >
        <div>
-          <h2>Apollo Redux Spike</h2>
          {Router}
        </div>
      </ApolloProvider>
--- a/frontend/src/assets/triton_logo.png
+++ b/frontend/src/assets/triton_logo.png
--- a/frontend/src/assets/triton_logo_dark.png
+++ b/frontend/src/assets/triton_logo_dark.png
--- a/frontend/src/components/deployment-groups/empty.js
+++ b/frontend/src/components/deployment-groups/empty.js
@ -0,0 +1,12 @@
+import React from 'react';
+
+import Column from '@ui/components/column';
+import Row from '@ui/components/row';
+
+export default () => (
+  <Row>
+    <Column xs={12}>
+      <p>you don't have any deployment groups</p>
+    </Column>
+  </Row>
+);
--- a/frontend/src/components/deployment-groups/index.js
+++ b/frontend/src/components/deployment-groups/index.js
@ -0,0 +1 @@
+export { default as EmptyDeployementGroups } from './empty';
--- a/frontend/src/components/layout/container.js
+++ b/frontend/src/components/layout/container.js
@ -1,4 +1,3 @@
-import React, { Component } from 'react';
 import styled from 'styled-components';
 import Container from '@ui/components/container';
 import { breakpoints } from '@ui/shared/constants';
--- a/frontend/src/components/messaging/error.js
+++ b/frontend/src/components/messaging/error.js
@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { P } from '@ui/components/base-elements';
+
+const ErrorMessage = ({
+  message = 'Ooops, there\'s been an error!!!'
+}) => {
+  
+  return (
+    <P>{message}</P>
+  )
+};
+
+ErrorMessage.propTypes = {
+  message: PropTypes.string
+}
+
+export default ErrorMessage;
--- a/frontend/src/components/messaging/index.js
+++ b/frontend/src/components/messaging/index.js
@ -0,0 +1,2 @@
+export { default as Loader } from './loader';
+export { default as ErrorMessage } from './error';
--- a/frontend/src/components/messaging/loader.js
+++ b/frontend/src/components/messaging/loader.js
@ -0,0 +1,9 @@
+import React from 'react';
+import { P } from '@ui/components/base-elements';
+
+export default () => {
+  
+  return (
+    <P>Loading...</P>
+  );
+};
--- a/frontend/src/components/navigation/breadcrumb.js
+++ b/frontend/src/components/navigation/breadcrumb.js
@ -6,11 +6,6 @@ import { Link } from 'react-router-dom';
 import { remcalc, unitcalc } from '@ui/shared/functions';
 import { colors } from '@ui/shared/constants';

-import {
-  deploymentGroupByIdSelector,
-  serviceByIdSelector
-} from '@root/state/selectors';
-
 import Container from '@ui/components/container';
 import Row from '@ui/components/row';
 import Column from '@ui/components/column';
@ -53,7 +48,7 @@ function getBreadcrumbLinks(links) {
      }
      else {
        breadcrumb.push(
-          <span key={links.length}>
+          <span key={breadcrumb.length}>
            {link.name}
          </span>
        );
--- a/frontend/src/components/navigation/header.js
+++ b/frontend/src/components/navigation/header.js
@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { remcalc, unitcalc } from '@ui/shared/functions';
+import { colors } from '@ui/shared/constants';
+
+import Logo from '@assets/triton_logo.png';
+import Row from '@ui/components/row';
+import Column from '@ui/components/column';
+
+const StyledHeader = styled.div`
+  background-color: ${colors.base.primaryDarkBrand};
+  padding: ${unitcalc(2.5)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(3)};
+`;
+
+const StyledLogo = styled.img`
+  width: ${remcalc(87)};
+  height: ${remcalc(25)};
+`;
+
+export default () => (
+  <StyledHeader>
+    <Row>
+      <Column lg={12} xs={12}>
+        <Link to='/'>
+          <StyledLogo src={Logo} />
+        </Link>
+      </Column>
+    </Row>
+  </StyledHeader>
+);
--- a/frontend/src/components/navigation/index.js
+++ b/frontend/src/components/navigation/index.js
@ -1,2 +1,3 @@
 export { default as Breadcrumb } from './breadcrumb';
 export { default as Menu } from './menu';
+export { default as Header } from './header';
--- a/frontend/src/components/navigation/menu.js
+++ b/frontend/src/components/navigation/menu.js
@ -1,13 +1,15 @@
-import React from 'react';
-// import { FormattedMessage } from 'react-intl';
-import styled from 'styled-components';
+// TODO need to sort out navlinks
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';

-import Li from '@ui/components/horizontal-list/li';
-import NavLink from '@ui/components/nav-link';
 import { breakpoints } from '@ui/shared/constants';
 import { remcalc } from '@ui/shared/functions';
-import Ul from '@ui/components/horizontal-list/ul';
+
 import { LayoutContainer } from '@components/layout';
+import { Ul, Li } from '@ui/components/horizontal-list';

 const StyledHorizontalList = styled(Ul)`
  padding: 0;
@ -31,17 +33,15 @@ const Menu = ({
    return (
      <StyledHorizontalListItem key={link.name}>
        <NavLink activeClassName='active' to={link.pathname}>
-          {/* <FormattedMessage id={link.name} /> */}
          { link.name }
        </NavLink>
      </StyledHorizontalListItem>
    );
  });

-  // TODO this could be any kind of nav, not just 'project-'...
  return (
    <LayoutContainer>
-      <StyledHorizontalList name='project-nav'>
+      <StyledHorizontalList>
        {navLinks}
      </StyledHorizontalList>
    </LayoutContainer>
@ -49,10 +49,10 @@ const Menu = ({
 };

 Menu.propTypes = {
-  links: React.PropTypes.arrayOf(
-    React.PropTypes.shape({
-      name: React.PropTypes.string,
-      pathname: React.PropTypes.string
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      pathname: PropTypes.string
    }))
 };

--- a/frontend/src/components/services/empty.js
+++ b/frontend/src/components/services/empty.js
@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { LayoutContainer } from '@components/layout';
+
+import Button from '@ui/components/button';
+import Column from '@ui/components/column';
+import Row from '@ui/components/row';
+import { P, H2, H3 } from '@ui/components/base-elements';
+import { remcalc } from '@ui/shared/functions';
+
+const StyledBox = styled.div`
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  border: solid 1px #d8d8d8;
+  padding: ${remcalc('6 18 24')};
+
+  & + & {
+    margin-top: ${remcalc(24)};
+  }
+`;
+
+export default () => (
+  <LayoutContainer>
+    <Row>
+      <Column>
+        <H2>Services</H2>
+        <Row>
+          <Column>
+            <StyledBox>
+              <Row>
+                <Column md={10}>
+                  <H3>Import your services</H3>
+                  <P>You can import your services from a Git repository hosting service. Learn more.</P>
+                  <Button secondary>from GitHub</Button>
+                  <Button secondary>from GitLab</Button>
+                  <Button secondary>from BitBucket</Button>
+                </Column>
+              </Row>
+            </StyledBox>
+
+            <StyledBox>
+              <Row>
+                <Column md={9}>
+                  <H3>Alternatively, you can upload or edit manifest file.</H3>
+                  <P>Manifest is a file describing your services. It is similar to Docker Compose file. You can upload a file from you local machine or edit it manually. Learn more.</P>
+                  <Button secondary>Upload manifest</Button>
+                  <Button secondary>Edit manifest</Button>
+                </Column>
+              </Row>
+            </StyledBox>
+          </Column>
+        </Row>
+      </Column>
+    </Row>
+  </LayoutContainer>
+);
--- a/frontend/src/components/services/index.js
+++ b/frontend/src/components/services/index.js
@ -0,0 +1 @@
+export { default as EmptyServices } from './empty';
--- a/frontend/src/containers/deployment-groups/list.js
+++ b/frontend/src/containers/deployment-groups/list.js
@ -1,46 +1,101 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { graphql } from 'react-apollo';
 import { Link } from 'react-router-dom';
 import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql';

-class DeploymentGroupList extends Component {
+import { LayoutContainer } from '@components/layout';
+import { Loader, ErrorMessage } from '@components/messaging';
+import { EmptyDeployementGroups } from '@components/deployment-groups';
+import Button from '@ui/components/button';
+import Column from '@ui/components/column';
+import Row from '@ui/components/row';

-  render() {
+const DeploymentGroupList = ({
+  location,
+  deploymentGroups,
+  loading,
+  error
+}) => {

-    const {
-      location,
-      deploymentGroups,
-      loading,
-      error
-    } = this.props;
+  if(loading) {
+    return (
+      <LayoutContainer>
+        <Loader />
+      </LayoutContainer>
+    )
+  }
+  else if(error) {
+    return (
+      <LayoutContainer>
+        <ErrorMessage
+          message='Oops, and error occured while loading your deployment groups.'
+        />
+      </LayoutContainer>
+    )
+  }

-    const deploymentGroupList =
-      loading ? <p>Loading...</p> :
-      error ? <p>Error!!!</p> :
-      deploymentGroups.map((deploymentGroup, index) => {
+  let emptyDeployementGroups = null;
+  let deploymentGroupList = null;
+
+  if(deploymentGroups.length) {
+
+    const list = deploymentGroups.map(
+      (deploymentGroup, index) => {
        return (
          <p key={index}>
            <Link
-              to={`${location.pathname}/${deploymentGroup.id}/services`}
+              to={`${location.pathname}/${deploymentGroup.pathName}/services`}
            >
              {deploymentGroup.name}
            </Link>
-          </p>)});
+          </p>
+      )});

-    return (
-      <div>
-        <div>
-          <h2>Deployment Group List</h2>
-        </div>
-        { deploymentGroupList }
-      </div>
-    );
+    deploymentGroupList = (
+      <Row>
+        <Column>
+          <ul>
+            {list}
+          </ul>
+        </Column>
+      </Row>
+    )
  }
+  else {
+    emptyDeployementGroups = (
+      <EmptyDeployementGroups />
+    )
+  }
+
+  return (
+    <LayoutContainer>
+      { emptyDeployementGroups }
+      <Row>
+        <Column xs={12}>
+          <Button to={`/deployment-groups/~create`}>
+            Create new
+          </Button>
+        </Column>
+      </Row>
+      { deploymentGroupList }
+    </LayoutContainer>
+  );
 }

+DeploymentGroupList.propTypes = {
+  deploymentGroups: PropTypes.arrayOf(
+    PropTypes.shape({
+      uuid: PropTypes.string,
+      id: PropTypes.string,
+      name: PropTypes.string
+    })
+  )
+};
+
 const DeploymentGroupListWithData = graphql(DeploymentGroupsQuery, {
  props: ({ data: { deploymentGroups, loading, error }}) => ({
-    deploymentGroups,
+    deploymentGroups: deploymentGroups,
    loading,
    error
  })
--- a/frontend/src/containers/navigation/breadcrumb.js
+++ b/frontend/src/containers/navigation/breadcrumb.js
@ -1,6 +1,5 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 import { Breadcrumb as BreadcrumbComponent } from '@components/navigation';

 const Breadcrumb = ({
@ -11,7 +10,10 @@ const Breadcrumb = ({

  const path = location.pathname.split('/');

-  const links = [];
+  const links = [{
+    name: 'Dashboard',
+    pathname: '/'
+  }];

  if(deploymentGroup) {
    links.push({
@ -36,23 +38,23 @@ const ConnectedBreadcrumb = connect(
  (state, ownProps) => {

    const params = ownProps.match.params;
-    const deploymentGroupId = params.deploymentGroup;
-    const serviceId = params.service;
+    const deploymentGroupPathName = params.deploymentGroup;
+    const servicePathName = params.service;
    const apolloData = state.apollo.data;
    const keys = Object.keys(apolloData);

    let deploymentGroup, service;
    if(keys.length) {
      // These should be selectors
-      if(deploymentGroupId) {
+      if(deploymentGroupPathName) {
        deploymentGroup = keys.reduce((dg, k) =>
          apolloData[k].__typename === 'DeploymentGroup' &&
-            apolloData[k].id === deploymentGroupId ?
+            apolloData[k].pathName === deploymentGroupPathName ?
              apolloData[k] : dg, {});
-        if(serviceId) {
+        if(servicePathName) {
          service = keys.reduce((s, k) =>
            apolloData[k].__typename === 'Service' &&
-              apolloData[k].id === serviceId ?
+              apolloData[k].pathName === servicePathName ?
                apolloData[k] : s, {});
        }
      }
--- a/frontend/src/containers/navigation/menu.js
+++ b/frontend/src/containers/navigation/menu.js
@ -1,28 +1,15 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Menu as MenuComponent } from '@components/navigation';

-class Menu extends Component {
+const Menu = ({
+  sections,
+  matchUrl
+}) => {

-  render() {
-
-    const {
-      sections,
-      matchUrl
-    } = this.props;
-
-    const menu = sections ?
-      sections.map((s, i) =>
-        <Link key={i} to={`${matchUrl}/${s.id}`}> {s.name} </Link>) : null;
-
-    return (
-      <div>
-        <div>
-          <h4>{menu}</h4>
-        </div>
-      </div>
-    );
-  }
+  return (
+    <MenuComponent links={sections} />
+  );
 }

 const ConnectedMenu = connect(
@ -30,32 +17,14 @@ const ConnectedMenu = connect(

    const params = ownProps.match.params;
    const matchUrl = ownProps.match.url;
-    const deploymentGroupId = params.deploymentGroup;
-    const serviceId = params.service;
+    const deploymentGroupPathName = params.deploymentGroup;
+    const servicePathName = params.service;

-    let sections;
-    // To come from Redux store
-    if(deploymentGroupId && serviceId) {
-      sections = [{
-        name: 'Metrics',
-        id: 'metrics'
-      }, {
-        name: 'Single Metrics',
-        id: 'single-metrics'
-      }, {
-        name: 'Instances',
-        id: 'instances'
-      }]
-    }
-    else if(deploymentGroupId) {
-      sections = [{
-        name: 'Services',
-        id: 'services'
-      }, {
-        name: 'Instances',
-        id: 'instances'
-      }]
-    }
+    const sections = servicePathName ?
+      state.ui.sections.services :
+      deploymentGroupPathName ?
+      state.ui.sections.deploymentGroups :
+      null;

    return {
      sections,
--- a/frontend/src/containers/services/index.js
+++ b/frontend/src/containers/services/index.js
@ -1 +1,3 @@
 export { default as ServiceList } from './list';
+export { default as ServicesTopology } from './topology';
+export { default as ServicesMenu } from './menu';
--- a/frontend/src/containers/services/list.js
+++ b/frontend/src/containers/services/list.js
@ -41,7 +41,7 @@ const ServiceListWithData = graphql(ServicesQuery, {
  options(props) {
    return {
      variables: {
-        deploymentGroupId: props.match.params.deploymentGroup
+        deploymentGroupPathName: props.match.params.deploymentGroup
      }
    }
  },
--- a/frontend/src/containers/services/menu.js
+++ b/frontend/src/containers/services/menu.js
@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+
+import { LayoutContainer } from '@components/layout';
+import { EmptyServices } from '@components/services';
+
+import { unitcalc, remcalc } from '@ui/shared/functions';
+import Row from '@ui/components/row';
+import Column from '@ui/components/column';
+import { FormGroup, Input, Toggle, ToggleList, Legend } from '@ui/components/form';
+import { H2 } from '@ui/components/base-elements';
+import Button from '@ui/components/button';
+
+import {
+  servicesForTopologySelector
+} from '@state/selectors';
+
+const StyledLegend = styled(Legend)`
+  float: left;
+  padding-top: ${unitcalc(2)};
+  margin-right: ${unitcalc(1.5)};
+`;
+
+const PaddedRow = styled(Row)`
+  margin-bottom: ${remcalc(18)}
+`;
+
+const StyledForm = styled(FormGroup)`
+  width: 60%;
+  float: left;
+  margin: 0;
+`;
+
+const StyledButton = styled(Button)`
+  margin-left: ${remcalc(48)};
+`;
+
+const StyledFilter = styled(Input)`
+  margin: 0;
+`;
+
+const handleAddService = () => console.log('Adding a service...');
+
+const ServicesMenu = ({
+  location,
+  history: {
+    push
+  }
+}) => {
+
+  /*if(!services || !services.length) {
+    return (
+      <EmptyServices />
+    );
+  }*/
+
+  const toggleValue = location.pathname.split('-').pop();
+
+  const handleToggle = (evt) => {
+
+    const value = evt.target.value;
+    if(value !== toggleValue) {
+      const index = location.pathname.lastIndexOf('-');
+      const path = `${location.pathname.slice(0, index)}-${value}`;
+      push(path);
+    }
+  };
+
+  return (
+    <LayoutContainer>
+      <H2>Services</H2>
+      <PaddedRow>
+        <Column xs={5}>
+          <FormGroup name='service-view' value={toggleValue}>
+            <StyledLegend>View</StyledLegend>
+            <ToggleList>
+              <Toggle value='topology' onChange={handleToggle}>Topology</Toggle>
+              <Toggle value='list' onChange={handleToggle}>List</Toggle>
+            </ToggleList>
+          </FormGroup>
+        </Column>
+        <Column xs={5}>
+          <StyledForm name='topology-filter'>
+            <StyledFilter
+              placeholder='Filter'
+            />
+          </StyledForm>
+        </Column>
+        <Column xs={2}>
+          <Button
+            secondary
+            onClick={handleAddService}
+          >
+            Add a service
+          </Button>
+        </Column>
+      </PaddedRow>
+    </LayoutContainer>
+  );
+};
+
+ServicesMenu.propTypes = {
+  location: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
+};
+
+export default ServicesMenu;
--- a/frontend/src/containers/services/topology.js
+++ b/frontend/src/containers/services/topology.js
@ -0,0 +1,134 @@
+import React from 'react';
+import { compose, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+import PortalQuery from '@graphql/Portal.gql';
+import ServicesQuery from '@graphql/ServicesTopology.gql';
+
+import { LayoutContainer } from '@components/layout';
+import { Loader, ErrorMessage } from '@components/messaging';
+
+import { colors } from '@ui/shared/constants';
+import { unitcalc } from '@ui/shared/functions';
+import { TopologyGraph } from '@ui/components/topology';
+/*import ServicesTooltip from '@components/services/tooltip';
+
+import { toggleTooltip } from '@state/actions';*/
+
+const StyledBackground = styled.div`
+  background-color: ${colors.base.whiteActive};
+`;
+
+const StyledContainer = styled.div`
+  position: relative;
+  padding: ${unitcalc(4)};
+`;
+
+const ServicesTopology = ({
+  push,
+  services,
+  datacenter,
+  loading,
+  error
+}) => {
+
+  console.log('push = ', push);
+  console.log('services = ', services);
+  console.log('datacenter = ', datacenter);
+  console.log('loading = ', loading);
+  console.log('error = ', error);
+
+  if(loading) {
+    return (
+      <LayoutContainer>
+        <Loader />
+      </LayoutContainer>
+    )
+  }
+  else if(error) {
+    return (
+      <LayoutContainer>
+        <ErrorMessage
+          message='Oops, and error occured while loading your services.'
+        />
+      </LayoutContainer>
+    )
+  }
+
+  const findService = (ss, uuid) =>
+    ss.reduce((s, service) => service.uuid === uuid ?
+      service : s, null);
+
+  const getService = (s, i) => ({
+    index: i,
+    ...s,
+    metrics: s.currentMetrics.map((m) => ({
+        name: m.name,
+        value: `${m.value}${m.measurement}`
+      })),
+    instances: s.instances.length,
+    datacenter: datacenter
+  });
+
+  // Selector???
+  const ss = services.reduce((ss, s, i) => {
+    // check whether it exits in thing, if so, add as child
+    // if not, create and add as child
+
+    if(s.parent) {
+      let parent = findService(ss, s.parent);
+      if(!parent) {
+        parent = { uuid: s.parent };
+        ss.push(parent);
+      }
+      if(!parent.children) {
+        parent.children = [];
+      }
+      parent.children.push(getService(s, i));
+    }
+    if(!s.parent) {
+      ss.push(getService(s, i));
+    }
+    return ss;
+  }, []);
+
+  return (
+    <StyledBackground>
+      <StyledContainer>
+        <TopologyGraph
+          services={ss}
+        />
+      </StyledContainer>
+    </StyledBackground>
+  );
+}
+
+const PortalGql = graphql(PortalQuery, {
+  props: ({ data: { portal, loading, error }}) => ({
+    datacenter: portal ? portal.datacenter.id : null,
+    loading,
+    error
+  })
+})
+
+const ServicesGql = graphql(ServicesQuery, {
+  options(props) {
+    return {
+      variables: {
+        deploymentGroupPathName: props.match.params.deploymentGroup
+      }
+    }
+  },
+  props: ({ data: { deploymentGroup, loading, error }}) => ({
+    services: deploymentGroup ? deploymentGroup.services : null,
+    loading,
+    error
+  })
+});
+
+const ServicesTopologyWithData = compose(
+  PortalGql,
+  ServicesGql
+)(ServicesTopology);
+
+export default ServicesTopologyWithData;
--- a/frontend/src/graphql/DeploymentGroupInfo.gql
+++ b/frontend/src/graphql/DeploymentGroupInfo.gql
@ -1,5 +1,5 @@
 fragment DeploymentGroupInfo on DeploymentGroup {
  uuid
  name
-  id
+  pathName
 }
--- a/frontend/src/graphql/DeploymentGroups.gql
+++ b/frontend/src/graphql/DeploymentGroups.gql
@ -1,11 +1,7 @@
+#import "./DeploymentGroupInfo.gql"
+
 query DeploymentGroups {
  deploymentGroups {
    ...DeploymentGroupInfo
  }
 }
-
-fragment DeploymentGroupInfo on DeploymentGroup {
-  uuid
-  name
-  id
-}
--- a/frontend/src/graphql/Instances.gql
+++ b/frontend/src/graphql/Instances.gql
@ -1,12 +1,11 @@
-query Instances($deploymentGroupId: String!){
-  deploymentGroup(id: $deploymentGroupId) {
-    uuid
-    id
-    name
+#import "./DeploymentGroupInfo.gql"
+#import "./ServiceInfo.gql"
+
+query Instances($deploymentGroupPathName: String!) {
+  deploymentGroup(pathName: $deploymentGroupPathName) {
+    ...DeploymentGroupInfo
    services {
-      uuid
-      id
-      name
+      ...ServiceInfo
      instances {
        uuid
        name
--- a/frontend/src/graphql/Portal.gql
+++ b/frontend/src/graphql/Portal.gql
@ -0,0 +1,9 @@
+query Portal {
+  portal {
+    username
+    host
+    datacenter {
+      id
+    }
+  }
+}
--- a/frontend/src/graphql/ServiceInfo.gql
+++ b/frontend/src/graphql/ServiceInfo.gql
@ -0,0 +1,5 @@
+fragment ServiceInfo on Service {
+  uuid
+  name
+  pathName
+}
--- a/frontend/src/graphql/Services.gql
+++ b/frontend/src/graphql/Services.gql
@ -1,12 +1,11 @@
 #import "./DeploymentGroupInfo.gql"
+#import "./ServiceInfo.gql"

-query Services($deploymentGroupId: String!){
-  deploymentGroup(id: $deploymentGroupId) {
+query Services($deploymentGroupPathName: String!){
+  deploymentGroup(pathName: $deploymentGroupPathName) {
    ...DeploymentGroupInfo
    services {
-      uuid
-      name
-      id
+      ...ServiceInfo
    }
  }
 }
--- a/frontend/src/graphql/ServicesTopology.gql
+++ b/frontend/src/graphql/ServicesTopology.gql
@ -0,0 +1,21 @@
+#import "./DeploymentGroupInfo.gql"
+#import "./ServiceInfo.gql"
+
+query Instances($deploymentGroupPathName: String!){
+  deploymentGroup(pathName: $deploymentGroupPathName) {
+    ...DeploymentGroupInfo
+    services {
+      ...ServiceInfo
+      parent
+      connections
+      currentMetrics {
+        name
+        value
+        measurement
+      }
+      instances {
+        uuid
+      }
+    }
+  }
+}
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@ -6,12 +6,12 @@ import {
  Switch
 } from 'react-router-dom';

-import { LayoutContainer } from '@components/layout';
+import { Header } from '@components/navigation';

 import { Breadcrumb, Menu } from '@containers/navigation';

 import { DeploymentGroupList } from '@containers/deployment-groups';
-import { ServiceList } from '@containers/services';
+import { ServiceList, ServicesTopology, ServicesMenu } from '@containers/services';
 import { InstanceList } from '@containers/instances';

 import { ServiceMetrics, SingleMetrics } from '@containers/service';
@ -21,16 +21,19 @@ const rootRedirect = (p) => (
 );

 const deploymentGroupRedirect = (p) => (
-  <Redirect to={`${p.location.pathname}/services`} />
+  <Redirect to={`/deployment-groups/${p.match.params.deploymentGroup}/services-list`} />
 );

 const Router = (
  <BrowserRouter>
-    <LayoutContainer>
+    <div>
+
+      <Route path='/' component={Header} />

      <Switch>
        <Route path='/deployment-groups/:deploymentGroup/services/:service' component={Breadcrumb} />
        <Route path='/deployment-groups/:deploymentGroup' component={Breadcrumb} />
+        <Route path='/deployment-groups' component={Breadcrumb} />
      </Switch>
      <Switch>
        <Route path='/deployment-groups/:deploymentGroup/services/:service' component={Menu} />
@ -41,13 +44,19 @@ const Router = (
      <Route path='/deployment-groups' exact component={DeploymentGroupList} />

      <Route path='/deployment-groups/:deploymentGroup' exact component={deploymentGroupRedirect} />
-      <Route path='/deployment-groups/:deploymentGroup/services' exact component={ServiceList} />
+      <Route path='/deployment-groups/:deploymentGroup/services' exact component={deploymentGroupRedirect} />
+
+      <Route path={`/deployment-groups/:deploymentGroup/services-list`} exact component={ServicesMenu} />
+      <Route path='/deployment-groups/:deploymentGroup/services-list' exact component={ServiceList} />
+
+      <Route path={`/deployment-groups/:deploymentGroup/services-topology`} exact component={ServicesMenu} />
+      <Route path={`/deployment-groups/:deploymentGroup/services-topology`} exact component={ServicesTopology} />

      <Route path='/deployment-groups/:deploymentGroup/services/:service/instances' exact component={InstanceList} />
      <Route path='/deployment-groups/:deploymentGroup/services/:service/metrics' exact component={ServiceMetrics} />
      <Route path='/deployment-groups/:deploymentGroup/services/:service/single-metrics' exact component={SingleMetrics} />

-    </LayoutContainer>
+    </div>
  </BrowserRouter>
 );

--- a/frontend/src/state/actions.js
+++ b/frontend/src/state/actions.js
@ -0,0 +1,9 @@
+import constantCase from 'constant-case';
+import { createAction } from 'redux-actions';
+
+const APP = constantCase(process.env['APP_NAME']);
+
+/******************************* UI *******************************/
+
+export const addMemberToProject =
+  createAction(`${APP}/PROJECT_ADD_MEMBER`);
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@ -2,19 +2,19 @@ import { createSelector } from 'reselect';

 const apollo = (state) => state.apollo;

-const deploymentGroupById = (deploymentGroupId) => createSelector(
+const deploymentGroupById = (deploymentGroupPathName) => createSelector(
  [apollo],
  (apollo) => apollo ? Object.keys(apollo).reduce((dg, k) =>
    apollo[k].__typename === 'DeploymentGroup' &&
-      apollo[k].id === deploymentGroupId ?
+      apollo[k].pathName === deploymentGroupPathName ?
        apollo[k] : dg, {}) : null
 );

-const servicesById = (serviceId) => createSelector(
+const servicesById = (servicePathName) => createSelector(
  [apollo],
  (apollo) => apollo ? Object.keys(apollo).reduce((s, k) =>
    apollo[k].__typename === 'Service' &&
-      apollo[k].id === serviceId ?
+      apollo[k].pathName === servicePathName ?
        apollo[k] : s, {}) : null
 );

--- a/frontend/src/state/state.js
+++ b/frontend/src/state/state.js
@ -0,0 +1,52 @@
+const state = {
+  ui: {
+    sections: {
+      deploymentGroups: [{
+        pathname: "feed",
+        name: "Feed"
+      }, {
+        pathname: "services",
+        name: "Services"
+      }, {
+        pathname: "instances",
+        name: "Instances"
+      }, {
+        pathname: "rollback",
+        name: "Rollback"
+      }, {
+        pathname: "manifest",
+        name: "Manifest"
+      }, {
+        pathname: "settings",
+        name: "Settings"
+      }],
+      services: [{
+        pathname: "summary",
+        name: "Summary"
+      }, {
+        pathname: "instances",
+        name: "Insatnces"
+      }, {
+        pathname: "metrics",
+        name: "Metrics"
+      }, {
+        pathname: "networks",
+        name: "Networks"
+      }, {
+        pathname: "tags-metadata",
+        name: "Tags / metadata"
+      }, {
+        pathname: "activity-feed",
+        name: "Activity feed"
+      }, {
+        pathname: "manifest",
+        name: "Manifest"
+      }, {
+        pathname: "firewall",
+        name: "Firewall"
+      }]
+    }
+  }
+}
+
+export default state;
--- a/frontend/src/state/store.js
+++ b/frontend/src/state/store.js
@ -1,9 +1,13 @@
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import { ApolloClient, createNetworkInterface } from 'react-apollo';
+import state from './state';
+// import uiReducer from './reducers/ui';
+
+console.log('state = ', state);

 export const client = new ApolloClient({
  dataIdFromObject: o => {
-    const id = o.id ? o.id : o.uuid ? o.uuid : o.timestamp ? o.timestamp : 'apollo-cache-key-not-defined';
+    const id = o.pathName ? o.pathName : o.id ? o.id : o.uuid ? o.uuid : o.timestamp ? o.timestamp : o.name ? o.name : 'apollo-cache-key-not-defined';
    return `${o.__typename}:${id}`;
  },
  networkInterface: createNetworkInterface({
@ -13,8 +17,9 @@ export const client = new ApolloClient({

 export const store = createStore(
  combineReducers({
-    // todos: todoReducer,
-    // users: userReducer,
+    ui: (s) => {
+      return s ? s : state.ui
+    },
    apollo: client.reducer(),
  }),
  {}, // initial state
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -490,6 +490,17 @@ babel-plugin-check-es2015-constants@^6.3.13:
  dependencies:
    babel-runtime "^6.22.0"

+babel-plugin-inline-react-svg@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-0.4.0.tgz#940f77be66324f2c75a0fb64f287f459c40602a7"
+  dependencies:
+    babel-template "^6.15.0"
+    babel-traverse "^6.15.0"
+    babylon "^6.10.0"
+    lodash.isplainobject "^4.0.6"
+    resolve-from "^2.0.0"
+    svgo "^0.7.0"
+
 babel-plugin-istanbul@^3.0.0:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-3.1.2.tgz#11d5abde18425ec24b5d648c7e0b5d25cd354a22"
@ -886,7 +897,7 @@ babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
    core-js "^2.4.0"
    regenerator-runtime "^0.10.0"

-babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.24.1:
+babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.24.1.tgz#04ae514f1f93b3a2537f2a0f60a5a45fb8308333"
  dependencies:
@ -919,7 +930,7 @@ babel-types@^6.15.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.22
    lodash "^4.2.0"
    to-fast-properties "^1.0.1"

-babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0:
+babylon@^6.10.0, babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0:
  version "6.17.1"
  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.1.tgz#17f14fddf361b695981fe679385e4f1c01ebd86f"

@ -1333,6 +1344,13 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"

+constant-case@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
+  dependencies:
+    snake-case "^2.1.0"
+    upper-case "^1.1.1"
+
 constants-browserify@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@ -3344,7 +3362,7 @@ loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.
    json5 "^0.5.0"
    object-assign "^4.0.1"

-lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1:
+lodash-es@^4.17.3, lodash-es@^4.17.4, lodash-es@^4.2.0, lodash-es@^4.2.1:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"

@ -3429,6 +3447,10 @@ lodash.isobject@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"

+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+
 lodash.keys@^3.0.0:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@ -3453,7 +3475,7 @@ lodash.uniq@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

@ -4631,6 +4653,19 @@ reduce-function-call@^1.0.1:
  dependencies:
    balanced-match "^0.4.2"

+reduce-reducers@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.1.2.tgz#fa1b4718bc5292a71ddd1e5d839c9bea9770f14b"
+
+redux-actions@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-2.0.3.tgz#1550aba9def179166ccd234d07672104a736d889"
+  dependencies:
+    invariant "^2.2.1"
+    lodash "^4.13.1"
+    lodash-es "^4.17.4"
+    reduce-reducers "^0.1.0"
+
 redux-form@^6.7.0:
  version "6.7.0"
  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.7.0.tgz#9fb0769e76f14febf1dd7686e02c4ab2d6f953aa"
@ -4792,6 +4827,10 @@ resolve-from@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"

+resolve-from@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-2.0.0.tgz#9480ab20e94ffa1d9e80a804c7ea147611966b57"
+
 resolve-pathname@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944"
@ -4965,6 +5004,12 @@ slice-ansi@0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"

+snake-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
+  dependencies:
+    no-case "^2.2.0"
+
 sntp@1.x.x:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
--- a/spikes/graphql/graphql-server/src/resolvers.js
+++ b/spikes/graphql/graphql-server/src/resolvers.js
@ -2,12 +2,18 @@ import { find, filter } from 'lodash';
 import data from './mock-data';
 import { normalMetricData, leakMetricData } from './mock-data/metrics';

-const portal = { username: 'juditgreskovits', host: 'dockerhost'};
-const deploymentGroups = data.projects.data;
-const services = data.services.data;
+const datacenters = data.datacenters.data;
+const portal = { username: 'juditgreskovits', host: 'dockerhost', datacenter: datacenters[0]};
+const deploymentGroups = data.projects.data.map(p => {
+  p.pathName = p.id;
+  return p;
+});
+const services = data.services.data.map(s => {
+  s.pathName = s.id;
+  return s;
+});
 const instances = data.instances.data;
 const metricTypes = data.metrics.data.types;
-const datacenters = data.datacenters.data;

 const count = 10;
 let index = 0;
@ -25,21 +31,21 @@ const resolveFunctions = {
    deploymentGroups() {
      return deploymentGroups;
    },
-    deploymentGroup(_, { uuid, id }) {
+    deploymentGroup(_, { uuid, pathName }) {
      if(uuid) {
        return find(deploymentGroups, { uuid: uuid });
      }
-      if(id) {
-        return find(deploymentGroups, { id: id });
+      if(pathName) {
+        return find(deploymentGroups, { pathName: pathName });
      }
      return null;
    },
-    services(_, { deploymentGroupUuid=null, deploymentGroupId=null }) {
+    services(_, { deploymentGroupUuid=null, deploymentGroupPathName=null }) {
      if(deploymentGroupUuid) {
        return filter(services, { project: deploymentGroupUuid });
      }
-      if(deploymentGroupId) {
-        const deploymentGroup = find(deploymentGroups, { id: deploymentGroupId });
+      if(deploymentGroupPathName) {
+        const deploymentGroup = find(deploymentGroups, { pathName: deploymentGroupPathName });
        if(deploymentGroup) {
          return filter(services, { project: deploymentGroup.uuid });
        }
@ -47,21 +53,21 @@ const resolveFunctions = {
      }
      return services;
    },
-    service(_, { uuid, id }) {
+    service(_, { uuid, pathName }) {
      if(uuid) {
        return find(services, { uuid: uuid });
      }
-      if(id) {
-        return find(services, { id: id });
+      if(pathName) {
+        return find(services, { pathName: pathName });
      }
      return null;
    },
-    instances(_, { serviceUuid=null, serviceId=null }) {
+    instances(_, { serviceUuid=null, servicePathName=null }) {
      if(serviceUuid) {
        return filter(instances, { service: serviceUuid });
      }
      if(serviceId) {
-        const service = find(services, { id: serviceId });
+        const service = find(services, { pathName: servicePathName });
        if(service) {
          return filter(instances, { service: service.uuid });
        }
@ -87,19 +93,40 @@ const resolveFunctions = {
      };
    }
  },
+  Portal: {
+    deploymentGroups(portal) {
+      return deploymentGroups;
+    }
+  },
  DeploymentGroup: {
    services(deploymentGroup) {
-      return filter(services, { project: deploymentGroup.uuid })
+      return filter(services, { project: deploymentGroup.uuid });
    },
  },
  Service: {
    instances(service) {
-      return filter(instances, { service: service.uuid })
+      return filter(instances, { service: service.uuid });
    },
    metrics(service) {
      return service.metrics ?
        service.metrics.map((metric) =>
-          find(metricTypes, { uuid: metric.type })) : []
+          find(metricTypes, { uuid: metric.type })) : [];
+    },
+    currentMetrics(service) {
+      // tmp
+      return [{
+        "name": "CPU",
+        "value": 50,
+        "measurement": "%",
+      }, {
+        "name": "Memory",
+        "value": 20,
+        "measurement": "%",
+      }, {
+        "name": "Network",
+        "value": 2.9,
+        "measurement": "Kb/sec",
+      }];
    },
  },
  Instance: {
@ -111,7 +138,7 @@ const resolveFunctions = {
          name: 'metric-type-name'
        },
        data: normalMetricData.node_memory_rss_bytes
-      }])
+      }]);
    }
  }
 };
--- a/spikes/graphql/graphql-server/src/schema.js
+++ b/spikes/graphql/graphql-server/src/schema.js
@ -12,20 +12,15 @@ type Portal {
  deploymentGroups: [DeploymentGroup]!
 }

-type Version {
-  created: Date!
-  version: String! # version uuid
-}
-
 type DeploymentGroup {
  uuid: String!
  name: String!
-  id: String!
+  pathName:  String!
  datacenter: Datacenter!
  services: [Service]!
  state: DeploymentState
-  version: Version!
-  history: [Version]!
+  version: Manifest!
+  history: [Manifest]!
 }

 type DeploymentState {
@ -34,23 +29,32 @@ type DeploymentState {

 type Manifest {
  uuid: String!
-  deploymentGoup: String!
+  created: Date!
  created: Date!
  type: String!
  format: String!
  raw: String!
 }

+type CurrentMetric {
+  name: String!
+  value: Float!
+  measurement: String!
+}
+
 # immutable
 type Service {
  uuid: String!
  hash: String!
  deploymentGoup: String!
-  version: Version!
+  version: Manifest!
  name: String!
-  id: String!
+  pathName:  String!
  instances: [Instance]!
  metrics: [MetricType]!
+  currentMetrics: [CurrentMetric]!
+  connections: [String!] # list of serviceUuids
+  parent: String # parent service uuid
  package: Package! # we don't have this in current mock data
 }

@ -71,7 +75,7 @@ type Package {
  type: String!
  memory: Int!
  disk: Int!
-  vCPUs: Int! # This should be a number / double, not an int
+  vCPUs: Float! # This should be a number / double, not an int
 }

 type Instance {
@ -102,10 +106,10 @@ type Datacenter {
 type Query {
  portal: Portal
  deploymentGroups: [DeploymentGroup]
-  deploymentGroup(uuid: String, id: String): DeploymentGroup
-  services(deploymentGroupUuid: String, deploymentGroupId: String): [Service]
-  service(uuid: String, id: String): Service
-  instances(serviceUuid: String, serviceId: String): [Instance]
+  deploymentGroup(uuid: String, pathName: String): DeploymentGroup
+  services(deploymentGroupUuid: String, deploymentGroupPathName: String): [Service]
+  service(uuid: String, pathName: String): Service
+  instances(serviceUuid: String, servicePathName: String): [Instance]
  instance(uuid: String, id: String): Instance
  metricTypes: [MetricType]
  metricData(instanceUuid: String!, metricType: String!, from: Date!, to: Date!): [InstanceMetric]!
--- a/ui/package.json
+++ b/ui/package.json
@ -37,8 +37,8 @@
    "react-broadcast": "^0.1.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
-    "react-router": "4.0.0-beta.6",
-    "react-router-dom": "4.0.0-beta.6",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.1",
    "react-select": "^1.0.0-rc.3",
    "reduce-css-calc": "^1.3.0",
    "redux-form": "^6.5.0",
--- a/ui/src/components/form/toggle/index.js
+++ b/ui/src/components/form/toggle/index.js
@ -92,6 +92,7 @@ const Toggle = BaseInput(({
  ...props
 }) => {
  const render = (value) => {
+
    const id = rndId();
    return (
      <StyledLi>
--- a/ui/src/components/topology/graph-node/content.js
+++ b/ui/src/components/topology/graph-node/content.js
@ -44,7 +44,7 @@ const GraphNodeContent = ({

  const nodeInfo = !child || index ? (
    <GraphNodeInfo
-      datacentres={data.datacentres}
+      datacenter={data.datacenter}
      instances={data.instances}
      healthy
      connected={connected}
--- a/ui/src/components/topology/graph-node/info.js
+++ b/ui/src/components/topology/graph-node/info.js
@ -17,7 +17,7 @@ const StyledDataCentresIcon = styled(DataCentresIcon)`

 const GraphNodeInfo = ({
  connected,
-  datacentres,
+  datacenter,
  instances,
  healthy,
  pos
@ -48,7 +48,7 @@ const GraphNodeInfo = ({
        y={12}
        connected={connected}
      >
-        {`${datacentres} DCs`}
+        {datacenter}
      </GraphText>
    </g>
  );
@ -56,7 +56,7 @@ const GraphNodeInfo = ({

 GraphNodeInfo.propTypes = {
  connected: React.PropTypes.bool,
-  datacentres: React.PropTypes.number,
+  datacenter: React.PropTypes.string,
  healthy: React.PropTypes.bool,
  instances: React.PropTypes.number,
  pos: PropTypes.Point.isRequired
--- a/ui/src/components/topology/wp-data.js
+++ b/ui/src/components/topology/wp-data.js
@ -19,7 +19,7 @@ module.exports = [{
    "be227788-74f1-4e5b-a85f-b5c71cbae8d8"
  ],
  "healthy": true,
-  "datacentres": 1
+  "datacenter": 1
 }, {
  "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
  "id": "wordpress",
@ -42,7 +42,7 @@ module.exports = [{
    "4ee4103e-1a52-4099-a48e-01588f597c70"
  ],
  "healthy": true,
-  "datacentres": 2
+  "datacenter": 2
 }, {
  "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
  "id": "nfs",
@ -60,7 +60,7 @@ module.exports = [{
    "value": "2.9Kb/sec"
  }],
  "healthy": true,
-  "datacentres": 2
+  "datacenter": 2
 }, {
  "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
  "id": "memcached",
@ -78,7 +78,7 @@ module.exports = [{
    "value": "2.9Kb/sec"
  }],
  "healthy": true,
-  "datacentres": 2
+  "datacenter": 2
 }, {
  "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
  "id": "percona",
@ -96,7 +96,7 @@ module.exports = [{
    "value": "2.9Kb/sec"
  }],
  "healthy": true,
-  "datacentres": 1
+  "datacenter": 1
 }, {
  "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
  "id": "consul",
@ -114,5 +114,5 @@ module.exports = [{
    "value": "2.9Kb/sec"
  }],
  "healthy": true,
-  "datacentres": 2
+  "datacenter": 2
 }];
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@ -25,7 +25,8 @@ const primary = {
  primaryDesaturatedActive: '#2D3884',
  primaryDark: '#2D3884',
  primaryDarkHover: '#34429D',
-  primaryDarkActive: '#2D3884'
+  primaryDarkActive: '#2D3884',
+  primaryDarkBrand: '#1E313B'
 };

 const secondary = {
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@ -1,5 +1,7 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
+
+
 "@ava/babel-preset-stage-4@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@ava/babel-preset-stage-4/-/babel-preset-stage-4-1.0.0.tgz#a613b5e152f529305422546b072d47facfb26291"
@ -129,6 +131,13 @@
    webpack-dev-middleware "^1.6.0"
    webpack-hot-middleware "^2.13.2"

+JSONStream@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-0.8.4.tgz#91657dfe6ff857483066132b4618b62e8f4887bd"
+  dependencies:
+    jsonparse "0.0.5"
+    through ">=2.2.7 <3"
+
 abab@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@ -156,6 +165,10 @@ acorn-jsx@^3.0.0:
  dependencies:
    acorn "^3.0.4"

+acorn@4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
+
 acorn@^3.0.0, acorn@^3.0.4:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@ -164,10 +177,6 @@ acorn@^4.0.4:
  version "4.0.11"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"

-acorn@4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
-
 airbnb-js-shims@^1.0.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/airbnb-js-shims/-/airbnb-js-shims-1.1.1.tgz#27224f0030f244e6570442ed1020772c1434aec2"
@ -794,6 +803,14 @@ babel-plugin-transform-async-to-generator@^6.16.0, babel-plugin-transform-async-
    babel-plugin-syntax-async-functions "^6.8.0"
    babel-runtime "^6.22.0"

+babel-plugin-transform-class-properties@6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.16.0.tgz#969bca24d34e401d214f36b8af5c1346859bc904"
+  dependencies:
+    babel-helper-function-name "^6.8.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.9.1"
+
 babel-plugin-transform-class-properties@^6.23.0:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.23.0.tgz#187b747ee404399013563c993db038f34754ac3b"
@ -803,14 +820,6 @@ babel-plugin-transform-class-properties@^6.23.0:
    babel-runtime "^6.22.0"
    babel-template "^6.23.0"

-babel-plugin-transform-class-properties@6.16.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.16.0.tgz#969bca24d34e401d214f36b8af5c1346859bc904"
-  dependencies:
-    babel-helper-function-name "^6.8.0"
-    babel-plugin-syntax-class-properties "^6.8.0"
-    babel-runtime "^6.9.1"
-
 babel-plugin-transform-es2015-arrow-functions@^6.22.0, babel-plugin-transform-es2015-arrow-functions@^6.3.13:
  version "6.22.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@ -854,18 +863,18 @@ babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transfor
    babel-runtime "^6.22.0"
    babel-template "^6.22.0"

-babel-plugin-transform-es2015-destructuring@^6.19.0, babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.6.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
-  dependencies:
-    babel-runtime "^6.22.0"
-
 babel-plugin-transform-es2015-destructuring@6.16.0:
  version "6.16.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.16.0.tgz#050fe0866f5d53b36062ee10cdf5bfe64f929627"
  dependencies:
    babel-runtime "^6.9.0"

+babel-plugin-transform-es2015-destructuring@^6.19.0, babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.6.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2015-duplicate-keys@^6.6.0:
  version "6.22.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.22.0.tgz#672397031c21610d72dd2bbb0ba9fb6277e1c36b"
@ -933,17 +942,6 @@ babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es201
    babel-helper-replace-supers "^6.22.0"
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-parameters@^6.21.0, babel-plugin-transform-es2015-parameters@^6.22.0, babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.6.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.23.0.tgz#3a2aabb70c8af945d5ce386f1a4250625a83ae3b"
-  dependencies:
-    babel-helper-call-delegate "^6.22.0"
-    babel-helper-get-function-arity "^6.22.0"
-    babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
-
 babel-plugin-transform-es2015-parameters@6.17.0:
  version "6.17.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.17.0.tgz#e06d30cef897f46adb4734707bbe128a0d427d58"
@ -955,6 +953,17 @@ babel-plugin-transform-es2015-parameters@6.17.0:
    babel-traverse "^6.16.0"
    babel-types "^6.16.0"

+babel-plugin-transform-es2015-parameters@^6.21.0, babel-plugin-transform-es2015-parameters@^6.22.0, babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.6.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.23.0.tgz#3a2aabb70c8af945d5ce386f1a4250625a83ae3b"
+  dependencies:
+    babel-helper-call-delegate "^6.22.0"
+    babel-helper-get-function-arity "^6.22.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.23.0"
+    babel-traverse "^6.23.0"
+    babel-types "^6.23.0"
+
 babel-plugin-transform-es2015-shorthand-properties@^6.22.0, babel-plugin-transform-es2015-shorthand-properties@^6.3.13:
  version "6.22.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.22.0.tgz#8ba776e0affaa60bff21e921403b8a652a2ff723"
@ -1011,13 +1020,6 @@ babel-plugin-transform-flow-strip-types@^6.22.0, babel-plugin-transform-flow-str
    babel-plugin-syntax-flow "^6.18.0"
    babel-runtime "^6.22.0"

-babel-plugin-transform-object-rest-spread@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.22.0"
-
 babel-plugin-transform-object-rest-spread@6.16.0:
  version "6.16.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.16.0.tgz#db441d56fffc1999052fdebe2e2f25ebd28e36a9"
@ -1025,10 +1027,11 @@ babel-plugin-transform-object-rest-spread@6.16.0:
    babel-plugin-syntax-object-rest-spread "^6.8.0"
    babel-runtime "^6.0.0"

-babel-plugin-transform-react-constant-elements@^6.23.0:
+babel-plugin-transform-object-rest-spread@^6.23.0:
  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.23.0.tgz#2f119bf4d2cdd45eb9baaae574053c604f6147dd"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
    babel-runtime "^6.22.0"

 babel-plugin-transform-react-constant-elements@6.9.1:
@ -1037,19 +1040,18 @@ babel-plugin-transform-react-constant-elements@6.9.1:
  dependencies:
    babel-runtime "^6.9.1"

+babel-plugin-transform-react-constant-elements@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-constant-elements/-/babel-plugin-transform-react-constant-elements-6.23.0.tgz#2f119bf4d2cdd45eb9baaae574053c604f6147dd"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-react-display-name@^6.23.0, babel-plugin-transform-react-display-name@^6.3.13:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.23.0.tgz#4398910c358441dc4cef18787264d0412ed36b37"
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-react-jsx-self@^6.11.0, babel-plugin-transform-react-jsx-self@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
-  dependencies:
-    babel-plugin-syntax-jsx "^6.8.0"
-    babel-runtime "^6.22.0"
-
 babel-plugin-transform-react-jsx-self@6.11.0:
  version "6.11.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.11.0.tgz#605c9450c1429f97a930f7e1dfe3f0d9d0dbd0f4"
@ -1057,9 +1059,9 @@ babel-plugin-transform-react-jsx-self@6.11.0:
    babel-plugin-syntax-jsx "^6.8.0"
    babel-runtime "^6.9.0"

-babel-plugin-transform-react-jsx-source@^6.22.0, babel-plugin-transform-react-jsx-source@^6.3.13:
+babel-plugin-transform-react-jsx-self@^6.11.0, babel-plugin-transform-react-jsx-self@^6.22.0:
  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
  dependencies:
    babel-plugin-syntax-jsx "^6.8.0"
    babel-runtime "^6.22.0"
@ -1071,6 +1073,13 @@ babel-plugin-transform-react-jsx-source@6.9.0:
    babel-plugin-syntax-jsx "^6.8.0"
    babel-runtime "^6.9.0"

+babel-plugin-transform-react-jsx-source@^6.22.0, babel-plugin-transform-react-jsx-source@^6.3.13:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-react-jsx@^6.23.0, babel-plugin-transform-react-jsx@^6.3.13:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.23.0.tgz#23e892f7f2e759678eb5e4446a8f8e94e81b3470"
@ -1079,12 +1088,6 @@ babel-plugin-transform-react-jsx@^6.23.0, babel-plugin-transform-react-jsx@^6.3.
    babel-plugin-syntax-jsx "^6.8.0"
    babel-runtime "^6.22.0"

-babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.6.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.22.0.tgz#65740593a319c44522157538d690b84094617ea6"
-  dependencies:
-    regenerator-transform "0.9.8"
-
 babel-plugin-transform-regenerator@6.16.1:
  version "6.16.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.16.1.tgz#a75de6b048a14154aae14b0122756c5bed392f59"
@ -1093,11 +1096,11 @@ babel-plugin-transform-regenerator@6.16.1:
    babel-types "^6.16.0"
    private "~0.1.5"

-babel-plugin-transform-runtime@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.6.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.22.0.tgz#65740593a319c44522157538d690b84094617ea6"
  dependencies:
-    babel-runtime "^6.22.0"
+    regenerator-transform "0.9.8"

 babel-plugin-transform-runtime@6.15.0:
  version "6.15.0"
@ -1105,6 +1108,12 @@ babel-plugin-transform-runtime@6.15.0:
  dependencies:
    babel-runtime "^6.9.0"

+babel-plugin-transform-runtime@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-strict-mode@^6.22.0:
  version "6.22.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.22.0.tgz#e008df01340fdc87e959da65991b7e05970c8c7c"
@ -1120,6 +1129,39 @@ babel-polyfill@^6.23.0:
    core-js "^2.4.0"
    regenerator-runtime "^0.10.0"

+babel-preset-env@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-0.0.6.tgz#cda63a020069098fad12272a7a447a7c5bafb3c8"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.3.13"
+    babel-plugin-syntax-trailing-function-commas "^6.13.0"
+    babel-plugin-transform-async-to-generator "^6.8.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoping "^6.6.0"
+    babel-plugin-transform-es2015-classes "^6.6.0"
+    babel-plugin-transform-es2015-computed-properties "^6.3.13"
+    babel-plugin-transform-es2015-destructuring "^6.6.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
+    babel-plugin-transform-es2015-for-of "^6.6.0"
+    babel-plugin-transform-es2015-function-name "^6.3.13"
+    babel-plugin-transform-es2015-literals "^6.3.13"
+    babel-plugin-transform-es2015-modules-amd "^6.8.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.6.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.12.0"
+    babel-plugin-transform-es2015-modules-umd "^6.12.0"
+    babel-plugin-transform-es2015-object-super "^6.3.13"
+    babel-plugin-transform-es2015-parameters "^6.6.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.3.13"
+    babel-plugin-transform-es2015-spread "^6.3.13"
+    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
+    babel-plugin-transform-es2015-template-literals "^6.6.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.6.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
+    babel-plugin-transform-exponentiation-operator "^6.8.0"
+    babel-plugin-transform-regenerator "^6.6.0"
+    browserslist "^1.4.0"
+
 babel-preset-env@^1.1.10:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.2.1.tgz#659178f54df74a74765f796be4d290b5beeb3f5f"
@ -1155,39 +1197,6 @@ babel-preset-env@^1.1.10:
    electron-to-chromium "^1.1.0"
    invariant "^2.2.2"

-babel-preset-env@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-0.0.6.tgz#cda63a020069098fad12272a7a447a7c5bafb3c8"
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.3.13"
-    babel-plugin-syntax-trailing-function-commas "^6.13.0"
-    babel-plugin-transform-async-to-generator "^6.8.0"
-    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
-    babel-plugin-transform-es2015-block-scoping "^6.6.0"
-    babel-plugin-transform-es2015-classes "^6.6.0"
-    babel-plugin-transform-es2015-computed-properties "^6.3.13"
-    babel-plugin-transform-es2015-destructuring "^6.6.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
-    babel-plugin-transform-es2015-for-of "^6.6.0"
-    babel-plugin-transform-es2015-function-name "^6.3.13"
-    babel-plugin-transform-es2015-literals "^6.3.13"
-    babel-plugin-transform-es2015-modules-amd "^6.8.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.6.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.12.0"
-    babel-plugin-transform-es2015-modules-umd "^6.12.0"
-    babel-plugin-transform-es2015-object-super "^6.3.13"
-    babel-plugin-transform-es2015-parameters "^6.6.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.3.13"
-    babel-plugin-transform-es2015-spread "^6.3.13"
-    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
-    babel-plugin-transform-es2015-template-literals "^6.6.0"
-    babel-plugin-transform-es2015-typeof-symbol "^6.6.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
-    babel-plugin-transform-exponentiation-operator "^6.8.0"
-    babel-plugin-transform-regenerator "^6.6.0"
-    browserslist "^1.4.0"
-
 babel-preset-es2015@^6.16.0:
  version "6.22.0"
  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.22.0.tgz#af5a98ecb35eb8af764ad8a5a05eb36dc4386835"
@ -1262,17 +1271,6 @@ babel-preset-react-app@^1.0.0:
    babel-preset-react "6.16.0"
    babel-runtime "6.11.6"

-babel-preset-react@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.23.0.tgz#eb7cee4de98a3f94502c28565332da9819455195"
-  dependencies:
-    babel-plugin-syntax-jsx "^6.3.13"
-    babel-plugin-transform-react-display-name "^6.23.0"
-    babel-plugin-transform-react-jsx "^6.23.0"
-    babel-plugin-transform-react-jsx-self "^6.22.0"
-    babel-plugin-transform-react-jsx-source "^6.22.0"
-    babel-preset-flow "^6.23.0"
-
 babel-preset-react@6.16.0:
  version "6.16.0"
  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.16.0.tgz#aa117d60de0928607e343c4828906e4661824316"
@ -1285,6 +1283,17 @@ babel-preset-react@6.16.0:
    babel-plugin-transform-react-jsx-self "^6.11.0"
    babel-plugin-transform-react-jsx-source "^6.3.13"

+babel-preset-react@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.23.0.tgz#eb7cee4de98a3f94502c28565332da9819455195"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.23.0"
+    babel-plugin-transform-react-jsx "^6.23.0"
+    babel-plugin-transform-react-jsx-self "^6.22.0"
+    babel-plugin-transform-react-jsx-source "^6.22.0"
+    babel-preset-flow "^6.23.0"
+
 babel-register@^6.23.0:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.23.0.tgz#c9aa3d4cca94b51da34826c4a0f9e08145d74ff3"
@ -1297,13 +1306,6 @@ babel-register@^6.23.0:
    mkdirp "^0.5.1"
    source-map-support "^0.4.2"

-babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.5.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2, babel-runtime@6.x.x:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
 babel-runtime@6.11.6:
  version "6.11.6"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.11.6.tgz#6db707fef2d49c49bfa3cb64efdb436b518b8222"
@ -1311,6 +1313,13 @@ babel-runtime@6.11.6:
    core-js "^2.4.0"
    regenerator-runtime "^0.9.5"

+babel-runtime@6.x.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.5.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.23.0, babel-template@^6.7.0:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
@ -1839,21 +1848,21 @@ colormin@^1.0.5:
    css-color-names "0.0.4"
    has "^1.0.1"

-colors@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
-
 colors@0.5.x:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"

+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
 combined-stream@^1.0.5, combined-stream@~1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
  dependencies:
    delayed-stream "~1.0.0"

-commander@^2.8.1, commander@^2.9.0, commander@2:
+commander@2, commander@^2.8.1, commander@^2.9.0:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
  dependencies:
@ -2143,7 +2152,7 @@ csso@~2.3.1:
    clap "^1.0.9"
    source-map "^0.5.3"

-"cssom@>= 0.3.2 < 0.4.0", cssom@0.3.x:
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"

@ -2159,12 +2168,6 @@ currently-unhandled@^0.4.1:
  dependencies:
    array-find-index "^1.0.1"

-d@^0.1.1, d@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
-  dependencies:
-    es5-ext "~0.10.2"
-
 d3-array@1, d3-array@1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.1.0.tgz#bfea66b89d46f9aedf77296d3aad6307b50771cc"
@ -2375,6 +2378,12 @@ d3@^4.7.0:
    d3-voronoi "1.1.1"
    d3-zoom "1.1.2"

+d@^0.1.1, d@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+  dependencies:
+    es5-ext "~0.10.2"
+
 damerau-levenshtein@^1.0.0:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.3.tgz#ae4f4ce0b62acae10ff63a01bb08f652f5213af2"
@ -2405,7 +2414,7 @@ debug-log@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/debug-log/-/debug-log-1.0.1.tgz#2307632d4c04382b8df8a32f70b895046d52745f"

-debug@^2.1.1, debug@^2.2.0, debug@2.6.1:
+debug@2.6.1, debug@^2.1.1, debug@^2.2.0:
  version "2.6.1"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
  dependencies:
@ -2470,7 +2479,7 @@ delegates@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"

-depd@~1.1.0, depd@1.1.0:
+depd@1.1.0, depd@~1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"

@ -2523,7 +2532,7 @@ doiuse@^2.4.1:
    through2 "^0.6.3"
    yargs "^3.5.4"

-dom-serializer@~0.1.0, dom-serializer@0:
+dom-serializer@0, dom-serializer@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
  dependencies:
@ -2534,7 +2543,7 @@ domain-browser@^1.1.1:
  version "1.1.7"
  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"

-domelementtype@^1.3.0, domelementtype@1:
+domelementtype@1, domelementtype@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"

@ -2548,7 +2557,7 @@ domhandler@^2.3.0:
  dependencies:
    domelementtype "1"

-domutils@^1.5.1, domutils@1.5.1:
+domutils@1.5.1, domutils@^1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
  dependencies:
@ -2567,9 +2576,11 @@ dot-prop@^4.1.0:
  dependencies:
    is-obj "^1.0.0"

-duplexer@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+duplexer2@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
+  dependencies:
+    readable-stream "~1.1.9"

 duplexer2@^0.1.4:
  version "0.1.4"
@ -2577,11 +2588,9 @@ duplexer2@^0.1.4:
  dependencies:
    readable-stream "^2.0.2"

-duplexer2@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
-  dependencies:
-    readable-stream "~1.1.9"
+duplexer@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"

 ecc-jsbn@~0.1.1:
  version "0.1.1"
@ -2733,7 +2742,7 @@ es6-shim@^0.35.1:
  version "0.35.3"
  resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.3.tgz#9bfb7363feffff87a6cdb6cd93e405ec3c4b6f26"

-es6-symbol@~3.1, es6-symbol@~3.1.0, es6-symbol@3:
+es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
  dependencies:
@ -3022,7 +3031,7 @@ fastparse@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"

-fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.7, fbjs@^0.8.8:
+fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.7, fbjs@^0.8.8, fbjs@^0.8.9:
  version "0.8.9"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"
  dependencies:
@ -3438,7 +3447,7 @@ highlight.js@^9.9.0:
  version "9.10.0"
  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.10.0.tgz#f9f0b14c0be00f0e4fb1e577b749fed9e6f52f55"

-history@^4.5.1:
+history@^4.5.1, history@^4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/history/-/history-4.6.0.tgz#2e09f7b173333040044c9fede373ad29bc2e2186"
  dependencies:
@ -3452,7 +3461,7 @@ hoek@2.x.x:
  version "2.16.3"
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"

-hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0, hoist-non-react-statics@1.x.x:
+hoist-non-react-statics@1.x.x, hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"

@ -3521,7 +3530,7 @@ hyphenate-style-name@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"

-iconv-lite@~0.4.13, iconv-lite@0.4:
+iconv-lite@0.4, iconv-lite@~0.4.13:
  version "0.4.15"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"

@ -3578,7 +3587,7 @@ inflight@^1.0.4:
    once "^1.3.0"
    wrappy "1"

-inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@2, inherits@2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"

@ -3623,7 +3632,7 @@ interpret@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"

-invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2, invariant@2.x.x:
+invariant@2.x.x, invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
  dependencies:
@ -3876,14 +3885,14 @@ is-utf8@^0.2.0, is-utf8@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"

-isarray@^1.0.0, isarray@~1.0.0, isarray@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-
 isarray@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"

+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
 isexe@^1.1.1:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
@ -4110,13 +4119,6 @@ jsonpointer@^4.0.0:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"

-JSONStream@^0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-0.8.4.tgz#91657dfe6ff857483066132b4618b62e8f4887bd"
-  dependencies:
-    jsonparse "0.0.5"
-    through ">=2.2.7 <3"
-
 jsprim@^1.2.2:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
@ -4364,14 +4366,14 @@ lodash.uniq@^4.3.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

+lodash@4.x.x, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
 lodash@^3.5.0:
  version "3.10.1"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

-lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@4.x.x:
-  version "4.17.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
-
 log-symbols@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@ -4539,7 +4541,7 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
  dependencies:
    mime-db "~1.26.0"

-mime@^1.3.4, mime@~1.3.4, mime@1.3.4, mime@1.3.x:
+mime@1.3.4, mime@1.3.x, mime@^1.3.4, mime@~1.3.4:
  version "1.3.4"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"

@ -4553,15 +4555,15 @@ minimatch@^3.0.0, minimatch@^3.0.2:
  dependencies:
    brace-expansion "^1.0.0"

+minimist@0.0.8, minimist@~0.0.1:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
 minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@~1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

-minimist@~0.0.1, minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-
-mkdirp@^0.5.0, mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1:
+"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
  dependencies:
@ -4575,14 +4577,14 @@ moment@^2.10.6, moment@^2.17.1:
  version "2.17.1"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82"

-ms@^0.7.1, ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
-
 ms@0.7.1:
  version "0.7.1"
  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"

+ms@0.7.2, ms@^0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+
 multimatch@^2.0.0, multimatch@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
@ -4612,7 +4614,7 @@ nearley@^2.7.7:
    railroad-diagrams "^1.0.0"
    randexp "^0.4.2"

-negotiator@~0.6.1, negotiator@0.6.1:
+negotiator@0.6.1, negotiator@~0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"

@ -5053,16 +5055,16 @@ path-parse@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"

+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
 path-to-regexp@^1.5.3:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
  dependencies:
    isarray "0.0.1"

-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-
 path-type@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@ -5520,6 +5522,13 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

+prop-types@^15.5.4:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 proxy-addr@~1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.3.tgz#dc97502f5722e888467b3fa2297a7b1ff47df074"
@ -5535,19 +5544,19 @@ pseudomap@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"

-punycode@^1.2.4, punycode@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-
 punycode@1.3.2:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"

+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
 q@^1.1.2:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"

-qs@^6.1.0, qs@^6.2.0, qs@6.4.0:
+qs@6.4.0, qs@^6.1.0, qs@^6.2.0:
  version "6.4.0"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"

@ -5566,7 +5575,7 @@ querystring-es3@^0.2.0:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"

-querystring@^0.2.0, querystring@0.2.0:
+querystring@0.2.0, querystring@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"

@ -5716,21 +5725,26 @@ react-remarkable@^1.1.1:
  dependencies:
    remarkable "^1.4.1"

-react-router-dom@4.0.0-beta.6:
-  version "4.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.0.0-beta.6.tgz#bdbd8f2fea3def52970735778db03b24cc082a02"
+react-router-dom@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
  dependencies:
    history "^4.5.1"
-    react-router "^4.0.0-beta.6"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.4"
+    react-router "^4.1.1"

-react-router@^4.0.0-beta.6, react-router@4.0.0-beta.6:
-  version "4.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.0.0-beta.6.tgz#561ac0bf1929960813bf201319ff85d821d5547b"
+react-router@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
  dependencies:
-    history "^4.5.1"
+    history "^4.6.0"
+    hoist-non-react-statics "^1.2.0"
    invariant "^2.2.2"
    loose-envify "^1.3.1"
    path-to-regexp "^1.5.3"
+    prop-types "^15.5.4"
+    warning "^3.0.0"

 react-select@^1.0.0-rc.3:
  version "1.0.0-rc.3"
@ -5803,6 +5817,15 @@ read-pkg@^2.0.0:
    normalize-package-data "^2.3.2"
    path-type "^2.0.0"

+"readable-stream@>=1.0.33-1 <1.1.0-0":
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readable-stream@^1.0.33, readable-stream@~1.1.9:
  version "1.1.14"
  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
@ -5824,15 +5847,6 @@ readable-stream@^2, readable-stream@^2.0.0, "readable-stream@^2.0.0 || ^1.1.13",
    string_decoder "~0.10.x"
    util-deprecate "~1.0.1"

-"readable-stream@>=1.0.33-1 <1.1.0-0":
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readable-stream@~2.0.5:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
@ -6113,7 +6127,7 @@ right-align@^0.1.1:
  dependencies:
    align-text "^0.1.1"

-rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@2:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4:
  version "2.6.1"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
  dependencies:
@ -6153,7 +6167,7 @@ semver-diff@^2.0.0:
  dependencies:
    semver "^5.0.3"

-semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@~5.3.0, "semver@2 || 3 || 4 || 5":
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@~5.3.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"

@ -6213,7 +6227,7 @@ sha.js@2.2.6:
  version "2.2.6"
  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"

-shallowequal@^0.2.2, shallowequal@0.2.x:
+shallowequal@0.2.x, shallowequal@^0.2.2:
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
  dependencies:
@ -6417,10 +6431,6 @@ strict-uri-encode@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"

-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-width@^1.0.1, string-width@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@ -6452,6 +6462,10 @@ string.prototype.padstart@^3.0.0:
    es-abstract "^1.4.3"
    function-bind "^1.0.2"

+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"
+
 stringstream@~0.0.4:
  version "0.0.5"
  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
@ -6717,10 +6731,6 @@ text-table@^0.2.0, text-table@~0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"

-through@^2.3.6, "through@>=2.2.7 <3", through@~2.3.4:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-
 through2@^0.6.1, through2@^0.6.3, through2@~0.6.1:
  version "0.6.5"
  resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
@ -6735,6 +6745,10 @@ through2@^2.0.0, through2@~2.0.0:
    readable-stream "^2.1.5"
    xtend "~4.0.1"

+"through@>=2.2.7 <3", through@^2.3.6, through@~2.3.4:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
 time-require@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/time-require/-/time-require-0.1.2.tgz#f9e12cb370fc2605e11404582ba54ef5ca2b2d98"
@ -6954,7 +6968,7 @@ util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

-util@^0.10.3, util@0.10.3:
+util@0.10.3, util@^0.10.3:
  version "0.10.3"
  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
  dependencies:
@ -7101,7 +7115,7 @@ which-module@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"

-which@^1.2.4, which@^1.2.9, which@1.2.x:
+which@1.2.x, which@^1.2.4, which@^1.2.9:
  version "1.2.12"
  resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
  dependencies:
@ -7119,13 +7133,17 @@ widest-line@^1.0.0:
  dependencies:
    string-width "^1.0.1"

+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
 window-size@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"

-window-size@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"

 wordwrap@~0.0.2:
  version "0.0.3"
@ -7135,10 +7153,6 @@ wordwrap@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"

-wordwrap@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
-
 wrap-ansi@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@ -7205,7 +7219,7 @@ xmlhttprequest@1:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"

-xtend@^4.0.0, "xtend@>=4.0.0 <4.1.0-0", xtend@~4.0.0, xtend@~4.0.1:
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"

@ -7265,4 +7279,3 @@ yargs@~3.10.0:
    cliui "^2.1.0"
    decamelize "^1.0.0"
    window-size "0.1.0"
-
				`@ -0,0 +1 @@`
				`export { default as EmptyDeployementGroups } from './empty';`
				`@ -0,0 +1 @@`
				`export { default as EmptyServices } from './empty';`