From 7cad8228ee57f0fbb0440dcba2907bf26e77ec2f Mon Sep 17 00:00:00 2001
From: JUDIT GRESKOVITS <juditgreskovits@gmail.com>
Date: Tue, 16 May 2017 14:46:04 +0100
Subject: [PATCH] Migration, menus, topology, inline svg

---
 frontend/package.json                         |   3 +
 frontend/scripts/config-overrides.dev.js      |  22 +
 frontend/src/app.js                           |   5 +-
 frontend/src/assets/triton_logo.png           | Bin 0 -> 5766 bytes
 frontend/src/assets/triton_logo_dark.png      | Bin 0 -> 19878 bytes
 .../src/components/deployment-groups/empty.js |  12 +
 .../src/components/deployment-groups/index.js |   1 +
 frontend/src/components/layout/container.js   |   1 -
 frontend/src/components/messaging/error.js    |  18 +
 frontend/src/components/messaging/index.js    |   2 +
 frontend/src/components/messaging/loader.js   |   9 +
 .../src/components/navigation/breadcrumb.js   |   7 +-
 frontend/src/components/navigation/header.js  |  32 ++
 frontend/src/components/navigation/index.js   |   1 +
 frontend/src/components/navigation/menu.js    |  26 +-
 frontend/src/components/services/empty.js     |  56 +++
 frontend/src/components/services/index.js     |   1 +
 .../src/containers/deployment-groups/list.js  | 103 +++-
 .../src/containers/navigation/breadcrumb.js   |  20 +-
 frontend/src/containers/navigation/menu.js    |  63 +--
 frontend/src/containers/services/index.js     |   2 +
 frontend/src/containers/services/list.js      |   2 +-
 frontend/src/containers/services/menu.js      | 109 +++++
 frontend/src/containers/services/topology.js  | 134 ++++++
 frontend/src/graphql/DeploymentGroupInfo.gql  |   2 +-
 frontend/src/graphql/DeploymentGroups.gql     |   8 +-
 frontend/src/graphql/Instances.gql            |  15 +-
 frontend/src/graphql/Portal.gql               |   9 +
 frontend/src/graphql/ServiceInfo.gql          |   5 +
 frontend/src/graphql/Services.gql             |   9 +-
 frontend/src/graphql/ServicesTopology.gql     |  21 +
 frontend/src/router.js                        |  21 +-
 frontend/src/state/actions.js                 |   9 +
 frontend/src/state/selectors.js               |   8 +-
 frontend/src/state/state.js                   |  52 ++
 frontend/src/state/store.js                   |  11 +-
 frontend/yarn.lock                            |  53 ++-
 .../graphql/graphql-server/src/resolvers.js   |  65 ++-
 spikes/graphql/graphql-server/src/schema.js   |  36 +-
 ui/package.json                               |   4 +-
 ui/src/components/form/toggle/index.js        |   1 +
 .../components/topology/graph-node/content.js |   2 +-
 ui/src/components/topology/graph-node/info.js |   6 +-
 ui/src/components/topology/wp-data.js         |  12 +-
 ui/src/shared/constants/colors.js             |   3 +-
 ui/yarn.lock                                  | 443 +++++++++---------
 46 files changed, 1020 insertions(+), 404 deletions(-)
 create mode 100644 frontend/src/assets/triton_logo.png
 create mode 100644 frontend/src/assets/triton_logo_dark.png
 create mode 100644 frontend/src/components/deployment-groups/empty.js
 create mode 100644 frontend/src/components/deployment-groups/index.js
 create mode 100644 frontend/src/components/messaging/error.js
 create mode 100644 frontend/src/components/messaging/index.js
 create mode 100644 frontend/src/components/messaging/loader.js
 create mode 100644 frontend/src/components/navigation/header.js
 create mode 100644 frontend/src/components/services/empty.js
 create mode 100644 frontend/src/components/services/index.js
 create mode 100644 frontend/src/containers/services/menu.js
 create mode 100644 frontend/src/containers/services/topology.js
 create mode 100644 frontend/src/graphql/Portal.gql
 create mode 100644 frontend/src/graphql/ServiceInfo.gql
 create mode 100644 frontend/src/graphql/ServicesTopology.gql
 create mode 100644 frontend/src/state/actions.js
 create mode 100644 frontend/src/state/state.js

diff --git a/frontend/package.json b/frontend/package.json
index 83196a5d..80650039 100644
--- 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",
diff --git a/frontend/scripts/config-overrides.dev.js b/frontend/scripts/config-overrides.dev.js
index 3fcaf694..67af15f1 100644
--- 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/,
diff --git a/frontend/src/app.js b/frontend/src/app.js
index bb7d73be..3c1d420b 100644
--- 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>
diff --git a/frontend/src/assets/triton_logo.png b/frontend/src/assets/triton_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..666fe0fe39d45b3068d74503b5d855eafc35f833
GIT binary patch
literal 5766
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

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/triton_logo_dark.png b/frontend/src/assets/triton_logo_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..53aa24f808461dd246b3cde0c9f7a1d92cd03a81
GIT binary patch
literal 19878
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
I4V$3<0=;aOdjJ3c

literal 0
HcmV?d00001

diff --git a/frontend/src/components/deployment-groups/empty.js b/frontend/src/components/deployment-groups/empty.js
new file mode 100644
index 00000000..37fba2e1
--- /dev/null
+++ 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>
+);
diff --git a/frontend/src/components/deployment-groups/index.js b/frontend/src/components/deployment-groups/index.js
new file mode 100644
index 00000000..d7d458ff
--- /dev/null
+++ b/frontend/src/components/deployment-groups/index.js
@@ -0,0 +1 @@
+export { default as EmptyDeployementGroups } from './empty';
diff --git a/frontend/src/components/layout/container.js b/frontend/src/components/layout/container.js
index 9b37eccd..69e5e9ab 100644
--- 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';
diff --git a/frontend/src/components/messaging/error.js b/frontend/src/components/messaging/error.js
new file mode 100644
index 00000000..d761da6a
--- /dev/null
+++ 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;
diff --git a/frontend/src/components/messaging/index.js b/frontend/src/components/messaging/index.js
new file mode 100644
index 00000000..6fe4ab69
--- /dev/null
+++ b/frontend/src/components/messaging/index.js
@@ -0,0 +1,2 @@
+export { default as Loader } from './loader';
+export { default as ErrorMessage } from './error';
diff --git a/frontend/src/components/messaging/loader.js b/frontend/src/components/messaging/loader.js
new file mode 100644
index 00000000..128d4364
--- /dev/null
+++ 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>
+  );
+};
diff --git a/frontend/src/components/navigation/breadcrumb.js b/frontend/src/components/navigation/breadcrumb.js
index 8bb5dcde..9ed94870 100644
--- 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>
         );
diff --git a/frontend/src/components/navigation/header.js b/frontend/src/components/navigation/header.js
new file mode 100644
index 00000000..b83567b1
--- /dev/null
+++ 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>
+);
diff --git a/frontend/src/components/navigation/index.js b/frontend/src/components/navigation/index.js
index 4e5c76e1..d5cc1a4d 100644
--- 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';
diff --git a/frontend/src/components/navigation/menu.js b/frontend/src/components/navigation/menu.js
index ca8bd2c3..e3d8522a 100644
--- 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
     }))
 };
 
diff --git a/frontend/src/components/services/empty.js b/frontend/src/components/services/empty.js
new file mode 100644
index 00000000..a0658f04
--- /dev/null
+++ 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>
+);
diff --git a/frontend/src/components/services/index.js b/frontend/src/components/services/index.js
new file mode 100644
index 00000000..ff8529ba
--- /dev/null
+++ b/frontend/src/components/services/index.js
@@ -0,0 +1 @@
+export { default as EmptyServices } from './empty';
diff --git a/frontend/src/containers/deployment-groups/list.js b/frontend/src/containers/deployment-groups/list.js
index b48d6cd9..d499c820 100644
--- 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
   })
diff --git a/frontend/src/containers/navigation/breadcrumb.js b/frontend/src/containers/navigation/breadcrumb.js
index b6275a30..90d48a2c 100644
--- 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, {});
         }
       }
diff --git a/frontend/src/containers/navigation/menu.js b/frontend/src/containers/navigation/menu.js
index 49d48884..603acf2d 100644
--- 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,
diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js
index d8e6bcaf..ca469cb3 100644
--- 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';
diff --git a/frontend/src/containers/services/list.js b/frontend/src/containers/services/list.js
index 5dc6c001..cd20c5d3 100644
--- 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
       }
     }
   },
diff --git a/frontend/src/containers/services/menu.js b/frontend/src/containers/services/menu.js
new file mode 100644
index 00000000..aab873d6
--- /dev/null
+++ 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;
diff --git a/frontend/src/containers/services/topology.js b/frontend/src/containers/services/topology.js
new file mode 100644
index 00000000..7f0a0409
--- /dev/null
+++ 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;
diff --git a/frontend/src/graphql/DeploymentGroupInfo.gql b/frontend/src/graphql/DeploymentGroupInfo.gql
index aedcca34..49dd1b71 100644
--- a/frontend/src/graphql/DeploymentGroupInfo.gql
+++ b/frontend/src/graphql/DeploymentGroupInfo.gql
@@ -1,5 +1,5 @@
 fragment DeploymentGroupInfo on DeploymentGroup {
   uuid
   name
-  id
+  pathName
 }
diff --git a/frontend/src/graphql/DeploymentGroups.gql b/frontend/src/graphql/DeploymentGroups.gql
index c1499b88..5b02e15d 100644
--- 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
-}
diff --git a/frontend/src/graphql/Instances.gql b/frontend/src/graphql/Instances.gql
index 5e853ec6..3b26120d 100644
--- 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
diff --git a/frontend/src/graphql/Portal.gql b/frontend/src/graphql/Portal.gql
new file mode 100644
index 00000000..e94c1ebc
--- /dev/null
+++ b/frontend/src/graphql/Portal.gql
@@ -0,0 +1,9 @@
+query Portal {
+  portal {
+    username
+    host
+    datacenter {
+      id
+    }
+  }
+}
diff --git a/frontend/src/graphql/ServiceInfo.gql b/frontend/src/graphql/ServiceInfo.gql
new file mode 100644
index 00000000..26d4f520
--- /dev/null
+++ b/frontend/src/graphql/ServiceInfo.gql
@@ -0,0 +1,5 @@
+fragment ServiceInfo on Service {
+  uuid
+  name
+  pathName
+}
diff --git a/frontend/src/graphql/Services.gql b/frontend/src/graphql/Services.gql
index 5dd3fb94..1eebffa4 100644
--- 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
     }
   }
 }
diff --git a/frontend/src/graphql/ServicesTopology.gql b/frontend/src/graphql/ServicesTopology.gql
new file mode 100644
index 00000000..de494a93
--- /dev/null
+++ 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
+      }
+    }
+  }
+}
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 108b15a6..4a795585 100644
--- 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>
 );
 
diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js
new file mode 100644
index 00000000..fa428d71
--- /dev/null
+++ 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`);
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index b25e16b3..caf03fda 100644
--- 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
 );
 
diff --git a/frontend/src/state/state.js b/frontend/src/state/state.js
new file mode 100644
index 00000000..5a7abdf3
--- /dev/null
+++ 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;
diff --git a/frontend/src/state/store.js b/frontend/src/state/store.js
index 36d6653a..1c12ef5a 100644
--- 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
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 138c2c7b..fe90ab39 100644
--- 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"
diff --git a/spikes/graphql/graphql-server/src/resolvers.js b/spikes/graphql/graphql-server/src/resolvers.js
index 8d6e61a4..5c87590f 100644
--- 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
-      }])
+      }]);
     }
   }
 };
diff --git a/spikes/graphql/graphql-server/src/schema.js b/spikes/graphql/graphql-server/src/schema.js
index 77d61e76..43e57e6a 100644
--- 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]!
diff --git a/ui/package.json b/ui/package.json
index 7ccab6ec..c9c12aa0 100644
--- 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",
diff --git a/ui/src/components/form/toggle/index.js b/ui/src/components/form/toggle/index.js
index f9783ee0..1528350d 100644
--- 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>
diff --git a/ui/src/components/topology/graph-node/content.js b/ui/src/components/topology/graph-node/content.js
index 18d75792..ad805a5c 100644
--- 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}
diff --git a/ui/src/components/topology/graph-node/info.js b/ui/src/components/topology/graph-node/info.js
index 589cd0ed..adeaf2c1 100644
--- 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
diff --git a/ui/src/components/topology/wp-data.js b/ui/src/components/topology/wp-data.js
index 32bb39da..a976c288 100644
--- 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
 }];
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index 3b374c61..f3c624e2 100644
--- 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 = {
diff --git a/ui/yarn.lock b/ui/yarn.lock
index a3325b01..9ff9a616 100644
--- 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"
-