feat(my-joy-beta): instance home

fixes #814
2017-11-28 14:50:55 +00:00 · 2017-11-28 14:50:55 +00:00 · c087f0bd9f
commit c087f0bd9f
parent 506048a64a
31 changed files with 956 additions and 156 deletions
--- a/joyent.code-workspace
+++ b/joyent.code-workspace
@ -1,10 +1,13 @@
 {
 	"folders": [
 		{
-			"path": "prototypes/create-instance-icons"
+			"path": "packages/ui-toolkit"
 		},
 		{
-			"path": "packages/ui-toolkit"
+			"path": "packages/icons"
+		},
+		{
+			"path": "packages/my-joy-beta"
 		}
 	],
 	"settings": {}
--- a/packages/icons/src/copy.js
+++ b/packages/icons/src/copy.js
@ -0,0 +1,37 @@
+import React from 'react';
+
+import Colors from './colors';
+import Rotate from './rotate';
+import calcFill from './fill';
+
+export default ({
+  fill = null,
+  light = false,
+  disabled = false,
+  direction = 'down',
+  style = {},
+  ...rest
+}) => (
+  <Colors white text grey>
+    {colors => (
+      <Rotate direction={direction}>
+        {({ style: rotateStyle }) => (
+          <svg
+            width="13"
+            height="16"
+            viewBox="0 0 13 16"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{ ...style, ...rotateStyle }}
+            {...rest}
+          >
+            <path
+              fill={calcFill({ fill, disabled, light, colors })}
+              d="M 12 1L 10 1L 10 0L 3 0L 3 1L 1 1C 0.4 1 0 1.4 0 2L 0 15C 0 15.6 0.4 16 1 16L 12 16C 12.6 16 13 15.6 13 15L 13 2C 13 1.4 12.6 1 12 1ZM 4 1L 9 1L 9 2L 9 3L 4 3L 4 2L 4 1ZM 12 15L 1 15L 1 2L 3 2L 3 4L 10 4L 10 2L 12 2L 12 15Z"
+            />
+          </svg>
+        )}
+      </Rotate>
+    )}
+  </Colors>
+);
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@ -7,6 +7,7 @@ export { default as Chevron } from './chevron';
 export { default as Clipboard } from './clipboard';
 export { default as Close } from './close';
 export { default as Cns } from './cns';
+export { default as Copy } from './copy';
 export { default as DataCenter } from './data-center';
 export { default as Delete } from './delete';
 export { default as Dot } from './dot';
--- a/packages/icons/src/play.js
+++ b/packages/icons/src/play.js
@ -0,0 +1,26 @@
+import React from 'react';
+import Colors from './colors';
+
+export default ({ light = false, disabled, ...rest, }) => (
+  <Colors white secondary>
+    {({ white, text }) => (
+      <svg
+        width="18"
+        height="20"
+        viewBox="0 0 18 20"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          fill={light ? white : text}
+          style={{
+            transform: 'rotate(90deg) translateX(-2px) translateY(1px)',
+            transformOrigin: '50%'
+          }}
+          d="M 2.33975 15L 1.47372 14.5L 2.33975 15ZM 19.6603 15L 18.7942 15.5L 19.6603 15ZM 18.7942 16.5L 18.7942 15.5L 18.7942 16.5ZM 11.866 1.5L 12.7321 1L 11.866 1.5ZM 10.134 1.5L 11 2L 10.134 1.5ZM 11 2L 18.7942 15.5L 20.5263 14.5L 12.7321 1L 11 2ZM 18.7942 15.5L 3.20577 15.5L 3.20577 17.5L 18.7942 17.5L 18.7942 15.5ZM 3.20577 15.5L 11 2L 9.26795 1L 1.47372 14.5L 3.20577 15.5ZM 3.20577 15.5L 3.20577 15.5L 1.47372 14.5C 0.70392 15.8333 1.66617 17.5 3.20577 17.5L 3.20577 15.5ZM 18.7942 15.5L 18.7942 15.5L 18.7942 17.5C 20.3338 17.5 21.2961 15.8333 20.5263 14.5L 18.7942 15.5ZM 12.7321 1C 11.9622 -0.333334 10.0377 -0.333332 9.26795 1L 11 2L 11 2L 12.7321 1Z"
+        />
+      </svg>
+    )}
+  </Colors>
+);
--- a/packages/icons/src/restart.js
+++ b/packages/icons/src/restart.js
@ -0,0 +1,23 @@
+import React from 'react';
+
+export default props => (
+  <svg
+    width="16"
+    height="19"
+    viewBox="0 0 16 19"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      {...props}
+      style={{
+        transform: 'rotate(30deg) translateX(1px) translateY(-1px)',
+        transformOrigin: '50%'
+      }}
+      fill-rule="evenodd"
+      transform
+      d="M 6.67853 4.42272L 6.67879 6.61018L 12.4032 3.30519L 6.67874 0L 6.67829 2.4743C 2.88206 3.15051 -0.000481996 6.46786 6.04528e-08 10.4594C -1.2363e-05 14.9384 3.63041 18.5685 8.10965 18.5692C 12.588 18.5682 16.2192 14.9381 16.2192 10.4592L 14.3115 10.46C 14.3108 13.8839 11.535 16.6615 8.10976 16.6612C 4.68462 16.6608 1.90795 13.8842 1.90764 10.4586C 1.90797 7.52657 3.94309 5.06834 6.67853 4.42272Z"
+    />
+  </svg>
+);
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@ -6,14 +6,11 @@
  "repository": "github:yldio/joyent-portal",
  "main": "build/",
  "scripts": {
-    "dev":
-      "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
+    "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
    "start": "PORT=3069 joyent-react-scripts start",
    "build": "NODE_ENV=production joyent-react-scripts build",
-    "lint-ci":
-      "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-    "lint":
-      "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
+    "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
    "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
    "test-ci": "redrun test",
    "prepublish": "echo 0"
@ -21,6 +18,9 @@
  "dependencies": {
    "@manaflair/redux-batch": "^0.1.0",
    "apollo": "^0.2.2",
+    "apr-intercept": "^1.0.4",
+    "clipboard-copy": "^1.2.0",
+    "date-fns": "^1.29.0",
    "declarative-redux-form": "^1.0.3",
    "joyent-ui-toolkit": "^2.0.1",
    "lodash.find": "^4.6.0",
--- a/packages/my-joy-beta/src/app.js
+++ b/packages/my-joy-beta/src/app.js
@ -6,10 +6,46 @@ import { theme, RootContainer } from 'joyent-ui-toolkit';

 import { client, store } from '@state/store';
 import Router from '@root/router';
+import remcalc from 'remcalc';
+
+const fullTheme = {
+  ...theme,
+  flexboxgrid: {
+    gridSize: 12, // rem
+    gutterWidth: 1.25, // rem
+    outerMargin: 1.875, // rem
+    mediaQuery: 'only screen',
+    container: {
+      sm: 46, // rem
+      md: 56, // rem
+      lg: 59 // rem
+    },
+    breakpoints: {
+      xs: 0, // em
+      sm: 48, // em
+      md: 64, // em
+      lg: 75 // em
+    }
+  },
+  spacing: {
+    0.5: remcalc(4),
+    0: remcalc(0),
+    1: remcalc(6),
+    2: remcalc(12),
+    3: remcalc(18),
+    4: remcalc(24),
+    5: remcalc(30),
+    6: remcalc(36),
+    7: remcalc(42),
+    8: remcalc(48),
+    9: remcalc(54),
+    10: remcalc(60)
+  }
+};

 export default () => (
  <ApolloProvider client={client} store={store}>
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={fullTheme}>
      <RootContainer>
        <Router />
      </RootContainer>
--- a/packages/my-joy-beta/src/components/instances/tests/home.js
+++ b/packages/my-joy-beta/src/components/instances/tests/home.js
@ -0,0 +1,89 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Store from '@mocks/store';
+import 'jest-styled-components';
+
+import Home, { CopyToClipboardTooltip, CopiableField, Meta } from '../home';
+
+it('renders <CopiableField /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <CopiableField label="test" text="test" />
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Home /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Home
+          instance={{
+            id: '2252839a-e698-ceec-afac-9549ad0c6624',
+            state: 'RUNNING',
+            name: '2252839a',
+            created: '2017-10-13T11:36:04.463Z',
+            updated: '2017-11-27T13:46:28.000Z',
+            primary_ip: '72.2.119.146',
+            ips: ['ahgsjdasdhjas', 'ajshdajkdhk'],
+            docker: null,
+            dns_names: {},
+            compute_node: '70bb1cee-dba3-11e3-a799-002590e4f2b0',
+            image: {},
+            package: {},
+            __typename: 'Machine'
+          }}
+          starting={true}
+          stopping={false}
+          rebooting={true}
+          deleteing={false}
+          onAction={() => {}}
+        />
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Meta /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Meta {...{
+          "id": "2252839a-e698-ceec-afac-9549ad0c6624",
+          "state": "RUNNING",
+          "name": "2252839a",
+          "created": "2017-10-13T11:36:04.463Z",
+          "updated": "2017-11-27T13:46:28.000Z",
+          "primary_ip": "72.2.119.146",
+          "ips": {},
+          "docker": null,
+          "dns_names": {},
+          "compute_node": "70bb1cee-dba3-11e3-a799-002590e4f2b0",
+          "image": {},
+          "package": {},
+          "__typename": "Machine"
+      }} onAction={() => console.log('sup??')}/>
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <CopyToClipboardTooltip /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <CopyToClipboardTooltiptip>{"test"}</CopyToClipboardTooltiptip>
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
--- a/packages/my-joy-beta/src/components/instances/home.js
+++ b/packages/my-joy-beta/src/components/instances/home.js
@ -0,0 +1,291 @@
+import React, { Component } from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import styled, { withTheme} from 'styled-components';
+import { Margin, Padding } from 'styled-components-spacing';
+import remcalc from 'remcalc';
+import is from 'styled-is';
+import titleCase from 'title-case';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import copy from 'clipboard-copy';
+
+import {
+  Card,
+  CardOutlet,
+  Divider,
+  ResetIcon,
+  Button,
+  FormLabel,
+  Input,
+  H2,
+  Label,
+  DotIcon,
+  DeleteIcon,
+  StartIcon,
+  StopIcon,
+  TooltipContainer,
+  TooltipTarget,
+  Tooltip,
+  ClipboardIcon
+} from 'joyent-ui-toolkit';
+
+const stateColor = {
+  PROVISIONING: 'primary',
+  RUNNING: 'green',
+  STOPPING: 'grey',
+  STOPPED: 'grey',
+  DELETED: 'secondaryActive',
+  FAILED: 'red'
+};
+
+const GreyLabel = styled(Label)`
+  opacity: 0.5;
+  padding-right: ${remcalc(3)};
+`;
+
+const Flex = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+
+  @media (max-width: ${remcalc(767)}) {
+    display: block;
+  }
+`;
+
+const FlexEnd = styled.div`
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+`;
+
+const InputIconWrapper = styled.div`
+  display: flex;
+  margin-bottom: ${remcalc(10)};
+  align-items: center;
+
+  ${is('noMargin')`
+    margin-bottom: ${remcalc(0)};
+  `};
+
+  input {
+    padding-right: ${remcalc(30)};
+  }
+
+  div {
+    position: relative;
+    left: ${remcalc(-26)};
+  }
+`;
+
+const HorizontalDivider = styled.div`
+  width: ${remcalc(1)};
+  background: ${props => props.theme.grey};
+  height: ${remcalc(24)};
+  display: flex;
+  align-self: flex-end;
+  margin: 0 ${remcalc(18)};
+
+  @media (max-width: ${remcalc(767)}) {
+    display: none;
+  }
+`;
+
+const ClipboardIconActionable = styled(ClipboardIcon)`
+  cursor: pointer;
+`;
+
+export class CopyToClipboardTooltip extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      copied: false
+    };
+  }
+
+  handleClick = () => {
+    const { children: text } = this.props;
+
+    copy(text);
+
+    this.setState(
+      {
+        copied: true
+      },
+      () => {
+        setTimeout(() => {
+          this.setState({
+            copied: false
+          });
+        }, 4000);
+      }
+    );
+  };
+
+  render = () => (
+    <TooltipContainer hoverable>
+      <TooltipTarget>
+        <ClipboardIconActionable onClick={this.handleClick} />
+      </TooltipTarget>
+      <Tooltip placement="top" success={Boolean(this.state.copied)}>
+        {this.state.copied ? 'Copied To Clipboard' : 'Copy To Clipboard'}
+      </Tooltip>
+    </TooltipContainer>
+  );
+}
+
+export const CopiableField = ({ label, text, ...rest }) => (
+  <Row>
+    <Col xs={12} md={7}>
+      <FormLabel>{label}</FormLabel>
+      <InputIconWrapper {...rest}>
+        <Input fluid value={text} />
+        <CopyToClipboardTooltip>{text}</CopyToClipboardTooltip>
+      </InputIconWrapper>
+    </Col>
+  </Row>
+);
+
+export const Meta = ({ created, updated, state, brand, image, ...instance }) => [
+  <Row middle="xs">
+    <Col xs={12}>
+      <H2>{instance.package.name}</H2>
+    </Col>
+  </Row>,
+  <Margin top={2} bottom={3}>
+    <Flex>
+      <Label>
+        {image ? titleCase(image.name) : 'Custom Image'}
+      </Label>
+      <HorizontalDivider />
+      <Label>
+        {brand === 'LX'
+          ? 'Infrastructure Container'
+          : 'Hardware Virtual Machine'}
+      </Label>
+      <HorizontalDivider />
+      <Flex>
+        <DotIcon
+          borderRadius="50%"
+          marginRight={remcalc(6)}
+          marginTop={remcalc(1)}
+          width={remcalc(11)}
+          height={remcalc(11)}
+          color={stateColor[state]}
+        />
+        {titleCase(state)}
+      </Flex>
+    </Flex>
+    <Margin top={1}>
+      <Flex>
+        <Flex>
+          <GreyLabel>Created: </GreyLabel>
+          <Label> {distanceInWordsToNow(created)} ago</Label>
+        </Flex>
+        <HorizontalDivider />
+        <Flex>
+          <GreyLabel>Updated: </GreyLabel>
+          <Label> {distanceInWordsToNow(updated)} ago</Label>
+        </Flex>
+      </Flex>
+    </Margin>
+  </Margin>
+];
+
+export default withTheme(({
+  instance,
+  starting,
+  stopping,
+  rebooting,
+  deleteing,
+  onAction,
+  theme
+}) => (
+  <Row>
+    <Col xs={12} sm={12} md={9}>
+      <Card>
+        <CardOutlet big>
+          <Meta {...instance} />
+          <Flex>
+            <Flex>
+              <Button
+                secondary
+                bold
+                icon
+                loading={starting}
+                disabled={instance.state === 'RUNNING'}
+                onClick={() => onAction('start')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <StartIcon disabled={instance.state === 'RUNNING'} />
+                </Padding>
+                <span>Start</span>
+              </Button>
+              <Button
+                secondary
+                bold
+                icon
+                loading={stopping}
+                disabled={instance.state === 'STOPPED'}
+                onClick={() => onAction('stop')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <StopIcon disabled={instance.state === 'STOPPED'} />
+                </Padding>
+                <span>Stop</span>
+              </Button>
+              <Button
+                secondary
+                bold
+                icon
+                loading={rebooting}
+                disabled={instance.state === 'PROVISIONING'}
+                onClick={() => onAction('reboot')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <ResetIcon disabled={instance.state === 'PROVISIONING'} />
+                </Padding>
+                <span>Restart</span>
+              </Button>
+            </Flex>
+            <FlexEnd>
+              <Button
+                error
+                bold
+                icon
+                loading={deleteing}
+                disabled={instance.state === 'PROVISIONING'}
+                onClick={() => onAction('delete')}
+              >
+                <Padding right={3} style={{ height: 18 }}>
+                  <DeleteIcon fill={theme.red} disabled={instance.state === 'PROVISIONING'} />
+                </Padding>
+                <span>Delete</span>
+              </Button>
+            </FlexEnd>
+          </Flex>
+          <Margin bottom={5} top={4}>
+            <Divider height={remcalc(1)} />
+          </Margin>
+          <CopiableField text={instance.id.split('-')[0]} label="Short ID" />
+          <CopiableField text={instance.id} label="ID" />
+          <CopiableField text={instance.compute_node} label="CN UUID" />
+          {instance.image && (
+            <CopiableField text={instance.image.id} label="Image UUID" />
+          )}
+          <CopiableField text={`$ ssh root@${instance.primary_ip}`} label="Login" />
+
+          {instance.ips.map((ip, i) => (
+            <CopiableField
+              key={i}
+              noMargin={i === instance.ips.length - 1}
+              text={ip}
+              label={`IP address ${i + 1}`}
+            />
+          ))}
+        </CardOutlet>
+      </Card>
+    </Col>
+  </Row>
+));
--- a/packages/my-joy-beta/src/components/navigation/header.js
+++ b/packages/my-joy-beta/src/components/navigation/header.js
@ -21,13 +21,13 @@ export default () => (
  <Header fluid>
    <HeaderBrand beta>
      <HeaderAnchor to="/">
-        <Logo beta alt="Triton" />
+        <Logo beta alt="Triton" light />
      </HeaderAnchor>
    </HeaderBrand>
    <HeaderNav>
-      <li>
+      <HeaderItem>
        <HeaderAnchor to="/">Compute</HeaderAnchor>
-      </li>
+      </HeaderItem>
    </HeaderNav>
    <HeaderItem>
      <HeaderAnchor href="https://my.joyent.com">
--- a/packages/my-joy-beta/src/components/navigation/menu.js
+++ b/packages/my-joy-beta/src/components/navigation/menu.js
@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import forceArray from 'force-array';
+import { Margin } from 'styled-components-spacing';

 import { SectionList, SectionListItem, ViewContainer } from 'joyent-ui-toolkit';

@ -20,7 +21,9 @@ const Menu = ({ links = [] }) => {

  return (
    <ViewContainer plain>
-      <SectionList>{getMenuItems(_links)}</SectionList>
+      <Margin bottom={6}>
+        <SectionList>{getMenuItems(_links)}</SectionList>
+      </Margin>
    </ViewContainer>
  );
 };
--- a/packages/my-joy-beta/src/containers/instances/home.js
+++ b/packages/my-joy-beta/src/containers/instances/home.js
@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose, graphql } from 'react-apollo';
+import find from 'lodash.find';
+import get from 'lodash.get';
+import { connect } from 'react-redux';
+import { set } from 'react-redux-values';
+import intercept from 'apr-intercept';
+
+import {
+  ViewContainer,
+  StatusLoader,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
+
+import GetInstance from '@graphql/get-instance.gql';
+import StartInstance from '@graphql/start-instance.gql';
+import StopInstance from '@graphql/stop-instance.gql';
+import RebootInstance from '@graphql/reboot-instance.gql';
+import DeleteInstance from '@graphql/delete-instance.gql';
+import HomeScreen from '@components/instances/home';
+import parseError from '@state/parse-error';
+
+const Home = ({
+  instance,
+  loading,
+  loadingError,
+  mutationError,
+  handleAction,
+  starting,
+  stopping,
+  rebooting,
+  deleteing,
+}) => {
+  const { name } = instance || {};
+
+  const _loading = loading && !name && <StatusLoader />;
+  const _summary = !_loading &&
+    instance && (
+      <HomeScreen
+        instance={instance}
+        starting={starting}
+        stopping={stopping}
+        rebooting={rebooting}
+        deleteing={deleteing}
+        onAction={handleAction}
+      />
+    );
+
+  const _error = loadingError &&
+    !_loading &&
+    !instance && (
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instance summary
+        </MessageDescription>
+      </Message>
+    );
+
+  const _mutationError = mutationError && (
+    <Message error>
+      <MessageTitle>Ooops!</MessageTitle>
+      <MessageDescription>{mutationError}</MessageDescription>
+    </Message>
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_loading}
+      {_error}
+      {_mutationError}
+      {_summary}
+    </ViewContainer>
+  );
+};
+
+Home.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(StopInstance, { name: 'stop' }),
+  graphql(StartInstance, { name: 'start' }),
+  graphql(RebootInstance, { name: 'reboot' }),
+  graphql(DeleteInstance, { name: 'reboot' }),
+  graphql(GetInstance, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => ({
+      instance: find(get(rest, 'machines', []), ['name', variables.name]),
+      loading,
+      loadingError: error
+    })
+  }),
+  connect(
+    (state, ownProps) => {
+      const { instance = {} } = ownProps;
+      const { id } = instance;
+
+      if (!id) {
+        return ownProps;
+      }
+
+      return {
+        ...ownProps,
+        starting: state.values[`${id}-home-starting`],
+        stopping: state.values[`${id}-home-stoping`],
+        rebooting: state.values[`${id}-home-rebooting`],
+        deleteing: state.values[`${id}-home-deleteing`],
+        mutationError: state.values[`${id}-home-mutation-error`]
+      };
+    },
+    (disptach, ownProps) => ({
+      handleAction: async (action) => {
+        const { instance } = ownProps;
+        const { id } = instance;
+
+        const gerund = `${action}ing`;
+        const name = `${id}-home-${gerund}`;
+
+        // sets loading to true
+        disptach(set({
+          name,
+          value: true
+        }));
+
+        // calls mutation and waits while loading is still true
+        const [err] = await intercept(ownProps[action]({
+          variables: { id }
+        }));
+
+        if (!err && (action === 'delete')) {
+          const { history } = ownProps;
+          return history.push(`/instances/`);
+        }
+
+        // after mutation, sets loading back to false
+        const setLoadingFalse = set({
+          name,
+          value: false
+        });
+
+        // if error, sets error value
+        const mutationError = err && set({
+          name: `${id}-home-mutation-error`,
+          value: parseError(err)
+        });
+
+        return disptach([mutationError, setLoadingFalse].filter(Boolean));
+      }
+    })
+  )
+)(Home);
--- a/packages/my-joy-beta/src/containers/instances/index.js
+++ b/packages/my-joy-beta/src/containers/instances/index.js
@ -1,5 +1,5 @@
 export { default as List } from './list';
-export { default as Summary } from './summary';
+export { default as Home } from './home';
 export { default as Tags } from './tags';
 export { default as Metadata } from './metadata';
 export { default as Networks } from './networks';
--- a/packages/my-joy-beta/src/containers/instances/summary.js
+++ b/packages/my-joy-beta/src/containers/instances/summary.js
@ -1,65 +0,0 @@
-import React from 'react';
-import ReactJson from 'react-json-view';
-import PropTypes from 'prop-types';
-import { compose, graphql } from 'react-apollo';
-import find from 'lodash.find';
-import get from 'lodash.get';
-
-import {
-  ViewContainer,
-  Title,
-  StatusLoader,
-  Message,
-  MessageDescription,
-  MessageTitle
-} from 'joyent-ui-toolkit';
-
-import GetInstance from '@graphql/get-instance.gql';
-
-const Summary = ({ instance, loading, error }) => {
-  const { name } = instance || {};
-
-  const _title = <Title>Summary</Title>;
-  const _loading = loading && !name && <StatusLoader />;
-  const _summary = !_loading && instance && <ReactJson src={instance} />;
-
-  const _error = error &&
-    !_loading &&
-    !instance && (
-      <Message error>
-        <MessageTitle>Ooops!</MessageTitle>
-        <MessageDescription>
-          An error occurred while loading your instance summary
-        </MessageDescription>
-      </Message>
-    );
-
-  return (
-    <ViewContainer center={Boolean(_loading)} main>
-      {_title}
-      {_loading}
-      {_error}
-      {_summary}
-    </ViewContainer>
-  );
-};
-
-Summary.propTypes = {
-  loading: PropTypes.bool
-};
-
-export default compose(
-  graphql(GetInstance, {
-    options: ({ match }) => ({
-      pollInterval: 1000,
-      variables: {
-        name: get(match, 'params.instance')
-      }
-    }),
-    props: ({ data: { loading, error, variables, ...rest } }) => ({
-      instance: find(get(rest, 'machines', []), ['name', variables.name]),
-      loading,
-      error
-    })
-  })
-)(Summary);
--- a/packages/my-joy-beta/src/graphql/delete-instance.gql
+++ b/packages/my-joy-beta/src/graphql/delete-instance.gql
@ -0,0 +1,5 @@
+mutation startInstance($id: ID!) {
+  deleteMachine(id: $id) {
+    id
+  }
+}
--- a/packages/my-joy-beta/src/graphql/get-instance.gql
+++ b/packages/my-joy-beta/src/graphql/get-instance.gql
@ -1,6 +1,21 @@
 query instance($name: String) {
  machines(name: $name) {
    id
-    dns_names
+    state,
+    name,
+    created,
+    updated,
+    primary_ip,
+    ips,
+		docker,
+    dns_names,
+    compute_node,
+    image {
+      id,
+      name
+    },
+    package {
+      name
+    }
  }
 }
--- a/packages/my-joy-beta/src/graphql/start-instance.gql
+++ b/packages/my-joy-beta/src/graphql/start-instance.gql
@ -1,3 +1,5 @@
 mutation startInstance($id: ID!) {
-  startMachine(id: $id)
+  startMachine(id: $id) {
+    id
+  }
 }
--- a/packages/my-joy-beta/src/graphql/stop-instance.gql
+++ b/packages/my-joy-beta/src/graphql/stop-instance.gql
@ -1,3 +1,5 @@
 mutation stopInstance($id: ID!) {
-  stopMachine(id: $id)
+  stopMachine(id: $id) {
+    id
+  }
 }
--- a/packages/my-joy-beta/src/router.js
+++ b/packages/my-joy-beta/src/router.js
@ -9,7 +9,7 @@ import { Header } from '@components/navigation';

 import {
  List as Instances,
-  Summary as InstanceSummary,
+  Home as InstanceHome,
  Tags as InstanceTags,
  Metadata as InstanceMetadata,
  Networks as InstanceNetworks,
@ -55,9 +55,9 @@ export default () => (
          component={() => null}
        />
        <Route
-          path="/instances/:instance/summary"
+          path="/instances/:instance/home"
          exact
-          component={InstanceSummary}
+          component={InstanceHome}
        />
        <Route
          path="/instances/:instance/tags"
@ -90,7 +90,7 @@ export default () => (
          exact
          component={({ match }) => (
            <Redirect
-              to={`/instances/${get(match, 'params.instance')}/summary`}
+              to={`/instances/${get(match, 'params.instance')}/home`}
            />
          )}
        />
--- a/packages/my-joy-beta/src/state/parse-error.js
+++ b/packages/my-joy-beta/src/state/parse-error.js
@ -0,0 +1,4 @@
+export default ({ graphQLErrors = [], message = '' }) =>
+  graphQLErrors.length
+    ? graphQLErrors.map(({ message }) => message).join('\n')
+    : message;
--- a/packages/my-joy-beta/src/state/state.js
+++ b/packages/my-joy-beta/src/state/state.js
@ -2,8 +2,7 @@ export default {
  ui: {
    sections: {
      instances: [
-        'feed',
-        'summary',
+        'home',
        'tags',
        'metadata',
        'networks',
--- a/packages/ui-toolkit/etc/style.css
+++ b/packages/ui-toolkit/etc/style.css
@ -31,7 +31,7 @@ p.rsg--p-32 {
    padding-bottom: 36px;
 }

-.rsg--sidebar-4 a.rsg--link-72 {
+.rsg--sidebar-4 a.rsg--link-48 {
    color: #fff;
    font-size: 15px;
 }
--- a/packages/ui-toolkit/src/baseline/index.js
+++ b/packages/ui-toolkit/src/baseline/index.js
@ -9,7 +9,7 @@ const unitProps = (() => {

  const measures = ['margin', 'padding']
    .reduce((props, rule) => [...props, rule, ...sided(rule)], [])
-    .concat(['height', 'width']);
+    .concat(['height', 'width', 'border-radius']);

  return sides.reduce((acc, side) => [...acc, `border-${side}-width`], [
    'border',
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@ -109,6 +109,30 @@ const style = css`
    }
  `};

+  ${is('error')`
+    color: ${props => props.theme.red};
+    background-color: ${props => props.theme.white};
+    border-color: ${props => props.theme.red};
+    font-weight: 600;
+
+    &:focus {
+      background-color: ${props => props.theme.white};
+      border-color: ${props => props.theme.red};
+    }
+
+    &:hover {
+      background-color: ${props => props.theme.whiteHover};
+      border-color: ${props => props.theme.red};
+    }
+
+    &:active,
+    &:active:hover,
+    &:active:focus {
+      background-color: ${props => props.theme.whiteActive};
+      border-color: ${props => props.theme.red};
+    }
+  `};
+
  ${is('tertiary', 'selected')`
      background-color: rgba(59, 70, 204, 0.2);
      color: ${props => props.theme.primaryActive};
@ -160,7 +184,8 @@ const style = css`

  ${is('icon')`
    min-height: ${remcalc(48)};
-    min-width: ${remcalc(48)};
+    display: flex;
+    align-items: center;
  `};

  ${is('fluid')`
--- a/packages/ui-toolkit/src/card/outlet.js
+++ b/packages/ui-toolkit/src/card/outlet.js
@ -14,9 +14,13 @@ const BaseOutlet = BaseCard.extend`
  flex: 1 1 auto;
  flex-direction: column;
  border-width: 0;
-  padding: ${remcalc(13)};
+  padding: ${remcalc(12)};
  margin-bottom: 0;

+  ${is('big')`
+      padding: ${remcalc(24)};
+  `};
+
  background-color: transparent;

  ${is('collapsed')`
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@ -95,6 +95,10 @@ const style = css`
    width: ${remcalc(120)}
  `};

+   ${is('fluid')`
+    max-width: 100%;
+  `};
+
  ${is('xSmall')`
    width: ${remcalc(80)}
  `};
--- a/packages/ui-toolkit/src/icons/Readme.md
+++ b/packages/ui-toolkit/src/icons/Readme.md
@ -13,6 +13,7 @@ const {
  Clipboard,
  Close,
  Cns,
+  Copy,
  DataCenter,
  Delete,
  Dot,
@ -197,6 +198,24 @@ const {
    </Icon>
    <Label>CNS &gt; Disabled</Label>
  </ListItem>
+  <ListItem>
+    <Icon>
+      <Copy />
+    </Icon>
+    <Label>Copy &gt; Dark</Label>
+  </ListItem>
+  <ListItem>
+    <Icon dark>
+      <Copy light />
+    </Icon>
+    <Label>Copy &gt; Light</Label>
+  </ListItem>
+  <ListItem>
+    <Icon>
+      <Copy disabled />
+    </Icon>
+    <Label>Copy &gt; Disabled</Label>
+  </ListItem>
  <ListItem>
    <Icon>
      <DataCenter />
--- a/packages/ui-toolkit/src/icons/index.js
+++ b/packages/ui-toolkit/src/icons/index.js
@ -10,6 +10,7 @@ import {
  Clipboard as BaseClipboard,
  Close as BaseClose,
  Cns as BaseCns,
+  Copy as BaseCopy,
  DataCenter as BaseDataCenter,
  Delete as BaseDelete,
  Dot as BaseDot,
@ -46,6 +47,7 @@ export const Chevron = Baseline(BaseChevron);
 export const Clipboard = Baseline(BaseClipboard);
 export const Close = Baseline(BaseClose);
 export const Cns = Baseline(BaseCns);
+export const Copy = Baseline(BaseCopy);
 export const DataCenter = Baseline(BaseDataCenter);
 export const Delete = Baseline(BaseDelete);
 export const Dot = Baseline(BaseDot);
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@ -93,9 +93,11 @@ export {
  Arrow as ArrowIcon,
  Bin as BinIcon,
  Checkcircle as CheckcircleIcon,
+  Chevron as ChevronIcon,
  Clipboard as ClipboardIcon,
  Close as CloseIcon,
  Cns as CnsIcon,
+  Copy as CopyIcon,
  DataCenter as DataCenterIcon,
  Delete as DeleteIcon,
  Dot as DotIcon,
--- a/packages/ui-toolkit/src/tooltip/index.js
+++ b/packages/ui-toolkit/src/tooltip/index.js
@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Popper as BasePopper, Arrow } from 'react-popper';
 import rndId from 'rnd-id';
 import remcalc from 'remcalc';
+import is from 'styled-is';

 import style from './style';

@ -12,13 +13,21 @@ const arrowClassName = rndId();
 const Popper = styled(BasePopper)`
  padding: ${remcalc(13)} ${remcalc(18)};
  font-weight: normal;
-
  ${style({
    background: 'text',
    color: 'white',
    border: 'transparent',
    arrow: arrowClassName
  })};
+
+  ${is('success')`
+    ${style({
+      background: 'green',
+      color: 'white',
+      border: 'transparent',
+      arrow: arrowClassName
+    })};
+  `};
 `;

 export default class Tooltip extends Component {
--- a/yarn.lock
+++ b/yarn.lock
@ -251,8 +251,8 @@ ajv@^4.9.1:
    json-stable-stringify "^1.0.1"

 ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.4.0.tgz#32d1cf08dbc80c432f426f12e10b2511f6b46474"
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.0.tgz#eb2840746e9dc48bd5e063a36e3fd400c5eab5a9"
  dependencies:
    co "^4.6.0"
    fast-deep-equal "^1.0.0"
@ -456,6 +456,10 @@ apr-for-each@^1.0.6:
    apr-engine-each "^1.0.3"
    lodash.defaults "^4.2.0"

+apr-intercept@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/apr-intercept/-/apr-intercept-1.0.4.tgz#01c64345f4af647b6b04f5aba4755195429b061a"
+
 apr-main@^1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/apr-main/-/apr-main-1.0.7.tgz#4f2592e20cb236b09c3c3d98a95088fbcc5fad4d"
@ -2090,12 +2094,12 @@ caniuse-api@^1.5.2:
    lodash.uniq "^4.5.0"

 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000770"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000770.tgz#cf68ae1cb8a82f6d3c35df41c62dc6973e470244"
+  version "1.0.30000772"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"

 caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000770:
-  version "1.0.30000770"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000770.tgz#bc8e7f50b073273390db6ab357378909a14e9bdb"
+  version "1.0.30000772"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000772.tgz#78129622cabfed7af1ff38b64ab680a6a0865420"

 capture-stack-trace@^1.0.0:
  version "1.0.0"
@ -2177,8 +2181,8 @@ character-reference-invalid@^1.0.0:
  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz#942835f750e4ec61a308e60c2ef8cc1011202efc"

 chardet@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.0.tgz#0bbe1355ac44d7a3ed4a925707c4ef70f8190f6c"
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"

 checksum@^0.1.1:
  version "0.1.1"
@ -2431,11 +2435,7 @@ commander@2.1.x, commander@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"

-commander@2.11.x, commander@~2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-
-commander@^2.11.0, commander@^2.9.0:
+commander@2.12.x, commander@^2.11.0, commander@^2.9.0, commander@~2.12.1:
  version "2.12.1"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.1.tgz#468635c4168d06145b9323356d1da84d14ac4a7a"

@ -3070,6 +3070,10 @@ dashdash@^1.12.0:
  dependencies:
    assert-plus "^1.0.0"

+date-fns@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
 date-now@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@ -3263,6 +3267,13 @@ diffie-hellman@^5.0.0:
    miller-rabin "^4.0.0"
    randombytes "^2.0.0"

+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
 disable-scroll@^0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/disable-scroll/-/disable-scroll-0.3.0.tgz#486d309ec9873edb18aec7891c5576bf8b506c59"
@ -3295,12 +3306,11 @@ doctrine@1.5.0:
    esutils "^2.0.2"
    isarray "^1.0.0"

-doctrine@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+doctrine@^2.0.0, doctrine@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
  dependencies:
    esutils "^2.0.2"
-    isarray "^1.0.0"

 dom-converter@~0.1:
  version "0.1.4"
@ -3325,7 +3335,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:
+domelementtype@1, domelementtype@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"

@ -3339,6 +3349,12 @@ domhandler@2.1:
  dependencies:
    domelementtype "1"

+domhandler@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
+  dependencies:
+    domelementtype "1"
+
 domutils@1.1:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
@ -3352,13 +3368,20 @@ domutils@1.5.1:
    dom-serializer "0"
    domelementtype "1"

+domutils@^1.5.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 dot-prop@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
  dependencies:
    is-obj "^1.0.0"

-dot-prop@^4.1.0:
+dot-prop@^4.1.0, dot-prop@^4.1.1:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
  dependencies:
@ -3477,7 +3500,7 @@ enhanced-resolve@^3.4.0:
    object-assign "^4.0.1"
    tapable "^0.2.7"

-entities@~1.1.1:
+entities@^1.1.1, entities@~1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"

@ -3520,8 +3543,8 @@ error-ex@^1.2.0, error-ex@^1.3.1:
    is-arrayish "^0.2.1"

 es-abstract@^1.6.1, es-abstract@^1.7.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
  dependencies:
    es-to-primitive "^1.1.1"
    function-bind "^1.1.1"
@ -3634,8 +3657,8 @@ eslint-config-joyent-portal@3.2.0, eslint-config-joyent-portal@^3.2.0:
  resolved "https://registry.yarnpkg.com/eslint-config-joyent-portal/-/eslint-config-joyent-portal-3.2.0.tgz#20de54035938ea6918160393dc4b387e2792d57f"

 eslint-config-prettier@^2.6.0, eslint-config-prettier@^2.7.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.8.0.tgz#929861a11de0249677686eba908118175d1a26bc"
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.9.0.tgz#5ecd65174d486c22dff389fe036febf502d468a3"
  dependencies:
    get-stdin "^5.0.1"

@ -3812,8 +3835,8 @@ eslint@4.10.0:
    text-table "~0.2.0"

 eslint@^4.11.0, eslint@^4.9.0:
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.11.0.tgz#39a8c82bc0a3783adf5a39fa27fdd9d36fac9a34"
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.12.0.tgz#a7ce78eba8cc8f2443acfbbc870cc31a65135884"
  dependencies:
    ajv "^5.3.0"
    babel-code-frame "^6.22.0"
@ -3821,7 +3844,7 @@ eslint@^4.11.0, eslint@^4.9.0:
    concat-stream "^1.6.0"
    cross-spawn "^5.1.0"
    debug "^3.0.1"
-    doctrine "^2.0.0"
+    doctrine "^2.0.2"
    eslint-scope "^3.7.1"
    espree "^3.5.2"
    esquery "^1.0.0"
@ -3830,7 +3853,7 @@ eslint@^4.11.0, eslint@^4.9.0:
    file-entry-cache "^2.0.0"
    functional-red-black-tree "^1.0.1"
    glob "^7.1.2"
-    globals "^9.17.0"
+    globals "^11.0.1"
    ignore "^3.3.3"
    imurmurhash "^0.1.4"
    inquirer "^3.0.6"
@ -4025,7 +4048,7 @@ express-graphql@^0.6.6:
    http-errors "^1.3.0"
    raw-body "^2.1.0"

-express@^4.13.3, express@^4.15.3:
+express@^4.13.3, express@^4.15.3, express@^4.16.2:
  version "4.16.2"
  resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
  dependencies:
@ -4691,6 +4714,10 @@ globals@^10.0.0:
  version "10.4.0"
  resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7"

+globals@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.0.1.tgz#12a87bb010e5154396acc535e1e43fc753b0e5e8"
+
 globals@^9.17.0, globals@^9.18.0:
  version "9.18.0"
  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@ -4716,6 +4743,17 @@ globby@^6.1.0:
    pify "^2.0.0"
    pinkie-promise "^2.0.0"

+globby@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
 globjoin@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
@ -5009,17 +5047,17 @@ html-entities@1.2.1, html-entities@^1.2.0:
  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"

 html-minifier@^3.2.3:
-  version "3.5.6"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.6.tgz#7e4e661a09999599c7d8e8a2b8d7fb7430bb5c3e"
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.7.tgz#511e69bb5a8e7677d1012ebe03819aa02ca06208"
  dependencies:
    camel-case "3.0.x"
    clean-css "4.1.x"
-    commander "2.11.x"
+    commander "2.12.x"
    he "1.1.x"
    ncname "1.0.x"
    param-case "2.1.x"
    relateurl "0.2.x"
-    uglify-js "3.1.x"
+    uglify-js "3.2.x"

 html-tags@^2.0.0:
  version "2.0.0"
@ -5047,6 +5085,17 @@ html-webpack-plugin@^2.30.1:
    pretty-error "^2.0.2"
    toposort "^1.0.0"

+htmlparser2@^3.9.2:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+  dependencies:
+    domelementtype "^1.3.0"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
 htmlparser2@~3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@ -5156,7 +5205,7 @@ iferr@^0.1.5:
  version "0.1.5"
  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"

-ignore@^3.3.3:
+ignore@^3.3.3, ignore@^3.3.5:
  version "3.3.7"
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"

@ -7003,9 +7052,9 @@ mime@1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"

-mime@^1.2.11, mime@^1.4.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.5.0.tgz#59c20e03ae116089edeb7d3b34a6788c5b3cccea"
+mime@^1.2.11, mime@^1.4.1, mime@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"

 mimic-fn@^1.0.0:
  version "1.1.0"
@ -7104,8 +7153,8 @@ multicast-dns-service-types@^1.1.0:
  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"

 multicast-dns@^6.0.1:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.0.tgz#13f22d0c32dc5ee82a32878e3c380d875b3eab22"
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060"
  dependencies:
    dns-packet "^1.0.1"
    thunky "^0.1.0"
@ -7725,7 +7774,7 @@ path-to-regexp@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.1.0.tgz#7e30f9f5b134bd6a28ffc2e3ef1e47075ac5259b"

-path-type@3.0.0:
+path-type@3.0.0, path-type@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
  dependencies:
@ -7890,6 +7939,14 @@ postcss-flexbugs-fixes@3.2.0:
  dependencies:
    postcss "^6.0.1"

+postcss-html@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.11.0.tgz#03a3ff3116f8a0fe0d46316ea21893d4db4b63af"
+  dependencies:
+    htmlparser2 "^3.9.2"
+    remark "^8.0.0"
+    unist-util-find-all-after "^1.0.1"
+
 postcss-less@^1.1.0:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.3.tgz#6930525271bfe38d5793d33ac09c1a546b87bb51"
@ -8088,7 +8145,7 @@ postcss-scss@^1.0.2:
  dependencies:
    postcss "^6.0.3"

-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
  dependencies:
@ -8096,6 +8153,14 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector
    indexes-of "^1.0.1"
    uniq "^1.0.1"

+postcss-selector-parser@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  dependencies:
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-svgo@^2.1.1:
  version "2.1.6"
  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@ -8980,8 +9045,8 @@ redux-actions@^2.2.1:
    reduce-reducers "^0.1.0"

 redux-form@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.1.2.tgz#6b0f25c57fd8130a05ce00f6435fe1b051f402af"
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.2.0.tgz#4465d9bc863e40b1704695d672bea75fcf81db04"
  dependencies:
    deep-equal "^1.0.1"
    es6-error "^4.0.0"
@ -10175,8 +10240,8 @@ stylelint-config-styled-components@^0.1.1:
  resolved "https://registry.yarnpkg.com/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede"

 stylelint-processor-styled-components@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.1.0.tgz#27658def7844629960e194ae1b1af6b13f6e83d8"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.1.1.tgz#c16ee9d6cda0a8c150c3b620812960bdf30958dc"
  dependencies:
    babel-traverse "^6.16.0"
    babylon "^6.12.0"
@ -10184,8 +10249,8 @@ stylelint-processor-styled-components@^1.0.0:
    typescript-eslint-parser "^9.0.0"

 stylelint@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.2.0.tgz#6a15044553fb5c3143b16d62013a370314495b0d"
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.3.1.tgz#424c822f32c88e85025b55d72c7b98355e3fa6de"
  dependencies:
    autoprefixer "^7.1.2"
    balanced-match "^1.0.0"
@ -10195,7 +10260,7 @@ stylelint@^8.2.0:
    execall "^1.0.0"
    file-entry-cache "^2.0.0"
    get-stdin "^5.0.1"
-    globby "^6.1.0"
+    globby "^7.0.0"
    globjoin "^0.1.4"
    html-tags "^2.0.0"
    ignore "^3.3.3"
@ -10209,13 +10274,14 @@ stylelint@^8.2.0:
    normalize-selector "^0.2.0"
    pify "^3.0.0"
    postcss "^6.0.6"
+    postcss-html "^0.11.0"
    postcss-less "^1.1.0"
    postcss-media-query-parser "^0.2.3"
    postcss-reporter "^5.0.0"
    postcss-resolve-nested-selector "^0.1.1"
    postcss-safe-parser "^3.0.1"
    postcss-scss "^1.0.2"
-    postcss-selector-parser "^2.2.3"
+    postcss-selector-parser "^3.1.0"
    postcss-value-parser "^3.3.0"
    resolve-from "^4.0.0"
    specificity "^0.3.1"
@ -10226,8 +10292,8 @@ stylelint@^8.2.0:
    table "^4.0.1"

 stylis@3.x:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.4.tgz#7dbc7e3ca3c8707b796cd217fe6f8fbe81e78464"
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"

 sugarss@^1.0.0:
  version "1.0.1"
@ -10665,17 +10731,17 @@ ua-parser-js@^0.7.9:
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"

 uglify-es@^3.0.24:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.10.tgz#f1840c3b52771d17555a02ce158cf46f689384bd"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.2.0.tgz#fbbfb9dc465ec7e5065701b9720d0de977d0bc24"
  dependencies:
-    commander "~2.11.0"
+    commander "~2.12.1"
    source-map "~0.6.1"

-uglify-js@3.1.x, uglify-js@^3.0.13:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.10.tgz#c4a5f9b5c6276b40cb971c1d97c9eeb26af9509c"
+uglify-js@3.2.x, uglify-js@^3.0.13:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.2.0.tgz#cb411ee4ca0e0cadbfe3a4e1a1da97e6fa0d19c1"
  dependencies:
-    commander "~2.11.0"
+    commander "~2.12.1"
    source-map "~0.6.1"

 uglify-js@^2.6, uglify-js@^2.8.29:
@ -10776,7 +10842,13 @@ unique-string@^1.0.0:
  dependencies:
    crypto-random-string "^1.0.0"

-unist-util-is@^2.1.1:
+unist-util-find-all-after@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-1.0.1.tgz#4e5512abfef7e0616781aecf7b1ed751c00af908"
+  dependencies:
+    unist-util-is "^2.0.0"
+
+unist-util-is@^2.0.0, unist-util-is@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b"

@ -11118,16 +11190,16 @@ webpack-common-shake@^1.5.3:
    webpack-sources "^1.0.1"

 webpack-dev-middleware@^1.11.0:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.1.tgz#338be3ca930973be1c2ce07d84d275e997e1a25a"
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
  dependencies:
    memory-fs "~0.4.1"
-    mime "^1.4.1"
+    mime "^1.5.0"
    path-is-absolute "^1.0.0"
    range-parser "^1.0.3"
    time-stamp "^2.0.0"

-webpack-dev-server@2.9.4, webpack-dev-server@^2.8.2:
+webpack-dev-server@2.9.4:
  version "2.9.4"
  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.4.tgz#7883e61759c6a4b33e9b19ec4037bd4ab61428d1"
  dependencies:
@ -11159,6 +11231,38 @@ webpack-dev-server@2.9.4, webpack-dev-server@^2.8.2:
    webpack-dev-middleware "^1.11.0"
    yargs "^6.6.0"

+webpack-dev-server@^2.8.2:
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.5.tgz#79336fba0087a66ae491f4869f6545775b18daa8"
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^1.6.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    import-local "^0.1.1"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.18"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.1"
+    supports-color "^4.2.1"
+    webpack-dev-middleware "^1.11.0"
+    yargs "^6.6.0"
+
 webpack-manifest-plugin@1.3.2:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"