Migration, menus, topology, inline svg

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",

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/,

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 { client, store } from '@state/store';
-import Router from './router';
+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>

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>
+);

frontend/src/components/deployment-groups/index.js

@@ -0,0 +1 @@
+export { default as EmptyDeployementGroups } from './empty';

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

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;

frontend/src/components/messaging/index.js

@@ -0,0 +1,2 @@
+export { default as Loader } from './loader';
+export { default as ErrorMessage } from './error';

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

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

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>
+);

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

frontend/src/components/navigation/menu.js

@@ -1,13 +1,15 @@
-import React from 'react';
+// TODO need to sort out navlinks
-// import { FormattedMessage } from 'react-intl';
+
-import styled from 'styled-components';
+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(
+  links: PropTypes.arrayOf(
-    React.PropTypes.shape({
+    PropTypes.shape({
-      name: React.PropTypes.string,
+      name: PropTypes.string,
-      pathname: React.PropTypes.string
+      pathname: PropTypes.string
     }))
 };
 

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>
+);

frontend/src/components/services/index.js

@@ -0,0 +1 @@
+export { default as EmptyServices } from './empty';

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 {
+  if(loading) {
-      location,
+    return (
-      deploymentGroups,
+      <LayoutContainer>
-      loading,
+        <Loader />
-      error
+      </LayoutContainer>
-    } = this.props;
+    )
+  }
+  else if(error) {
+    return (
+      <LayoutContainer>
+        <ErrorMessage
+          message='Oops, and error occured while loading your deployment groups.'
+        />
+      </LayoutContainer>
+    )
+  }
 
-    const deploymentGroupList =
+  let emptyDeployementGroups = null;
-      loading ? <p>Loading...</p> :
+  let deploymentGroupList = null;
-      error ? <p>Error!!!</p> :
+
-      deploymentGroups.map((deploymentGroup, index) => {
+  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 (
+    deploymentGroupList = (
-      <div>
+      <Row>
-        <div>
+        <Column>
-          <h2>Deployment Group List</h2>
+          <ul>
-        </div>
+            {list}
-        { deploymentGroupList }
+          </ul>
-      </div>
+        </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
   })

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 deploymentGroupPathName = params.deploymentGroup;
-    const serviceId = params.service;
+    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, {});
         }
       }

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() {
+  return (
-
+    <MenuComponent links={sections} />
-    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>
-    );
-  }
 }
 
 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 deploymentGroupPathName = params.deploymentGroup;
-    const serviceId = params.service;
+    const servicePathName = params.service;
 
-    let sections;
+    const sections = servicePathName ?
-    // To come from Redux store
+      state.ui.sections.services :
-    if(deploymentGroupId && serviceId) {
+      deploymentGroupPathName ?
-      sections = [{
+      state.ui.sections.deploymentGroups :
-        name: 'Metrics',
+      null;
-        id: 'metrics'
-      }, {
-        name: 'Single Metrics',
-        id: 'single-metrics'
-      }, {
-        name: 'Instances',
-        id: 'instances'
-      }]
-    }
-    else if(deploymentGroupId) {
-      sections = [{
-        name: 'Services',
-        id: 'services'
-      }, {
-        name: 'Instances',
-        id: 'instances'
-      }]
-    }
 
     return {
       sections,

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

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

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;

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;

frontend/src/graphql/DeploymentGroupInfo.gql

@@ -1,5 +1,5 @@
 fragment DeploymentGroupInfo on DeploymentGroup {
   uuid
   name
-  id
+  pathName
 }

frontend/src/graphql/DeploymentGroups.gql

@@ -1,11 +1,7 @@
+#import "./DeploymentGroupInfo.gql"
+
 query DeploymentGroups {
   deploymentGroups {
     ...DeploymentGroupInfo
   }
 }
-
-fragment DeploymentGroupInfo on DeploymentGroup {
-  uuid
-  name
-  id
-}

frontend/src/graphql/Instances.gql

@@ -1,12 +1,11 @@
-query Instances($deploymentGroupId: String!){
+#import "./DeploymentGroupInfo.gql"
-  deploymentGroup(id: $deploymentGroupId) {
+#import "./ServiceInfo.gql"
-    uuid
+
-    id
+query Instances($deploymentGroupPathName: String!) {
-    name
+  deploymentGroup(pathName: $deploymentGroupPathName) {
+    ...DeploymentGroupInfo
     services {
-      uuid
+      ...ServiceInfo
-      id
-      name
       instances {
         uuid
         name

frontend/src/graphql/Portal.gql

@@ -0,0 +1,9 @@
+query Portal {
+  portal {
+    username
+    host
+    datacenter {
+      id
+    }
+  }
+}

frontend/src/graphql/ServiceInfo.gql

@@ -0,0 +1,5 @@
+fragment ServiceInfo on Service {
+  uuid
+  name
+  pathName
+}

frontend/src/graphql/Services.gql

@@ -1,12 +1,11 @@
 #import "./DeploymentGroupInfo.gql"
+#import "./ServiceInfo.gql"
 
-query Services($deploymentGroupId: String!){
+query Services($deploymentGroupPathName: String!){
-  deploymentGroup(id: $deploymentGroupId) {
+  deploymentGroup(pathName: $deploymentGroupPathName) {
     ...DeploymentGroupInfo
     services {
-      uuid
+      ...ServiceInfo
-      name
-      id
     }
   }
 }

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

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

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

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

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;

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,
+    ui: (s) => {
-    // users: userReducer,
+      return s ? s : state.ui
+    },
     apollo: client.reducer(),
   }),
   {}, // initial state

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"

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 datacenters = data.datacenters.data;
-const deploymentGroups = data.projects.data;
+const portal = { username: 'juditgreskovits', host: 'dockerhost', datacenter: datacenters[0]};
-const services = data.services.data;
+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) {
+      if(pathName) {
-        return find(deploymentGroups, { id: id });
+        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) {
+      if(deploymentGroupPathName) {
-        const deploymentGroup = find(deploymentGroups, { id: deploymentGroupId });
+        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) {
+      if(pathName) {
-        return find(services, { id: id });
+        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
-      }])
+      }]);
     }
   }
 };

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!
+  version: Manifest!
-  history: [Version]!
+  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
+  deploymentGroup(uuid: String, pathName: String): DeploymentGroup
-  services(deploymentGroupUuid: String, deploymentGroupId: String): [Service]
+  services(deploymentGroupUuid: String, deploymentGroupPathName: String): [Service]
-  service(uuid: String, id: String): Service
+  service(uuid: String, pathName: String): Service
-  instances(serviceUuid: String, serviceId: String): [Instance]
+  instances(serviceUuid: String, servicePathName: String): [Instance]
   instance(uuid: String, id: String): Instance
   metricTypes: [MetricType]
   metricData(instanceUuid: String!, metricType: String!, from: Date!, to: Date!): [InstanceMetric]!

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": "^4.1.1",
-    "react-router-dom": "4.0.0-beta.6",
+    "react-router-dom": "^4.1.1",
     "react-select": "^1.0.0-rc.3",
     "reduce-css-calc": "^1.3.0",
     "redux-form": "^6.5.0",

ui/src/components/form/toggle/index.js

@@ -92,6 +92,7 @@ const Toggle = BaseInput(({
   ...props
 }) => {
   const render = (value) => {
+
     const id = rndId();
     return (
       <StyledLi>

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}

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

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

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 = {

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:
+babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.6.0:
-  version "6.23.0"
+  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  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:
+duplexer2@0.0.2:
-  version "0.1.1"
+  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  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:
+duplexer@~0.1.1:
-  version "0.0.2"
+  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
-  dependencies:
-    readable-stream "~1.1.9"
 
 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:
+"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
-  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:
   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:
+react-router-dom@^4.1.1:
-  version "4.0.0-beta.6"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.0.0-beta.6.tgz#bdbd8f2fea3def52970735778db03b24cc082a02"
+  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:
+react-router@^4.1.1:
-  version "4.0.0-beta.6"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.0.0-beta.6.tgz#561ac0bf1929960813bf201319ff85d821d5547b"
+  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:
+wordwrap@0.0.2:
-  version "0.1.0"
+  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+  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"
-