feat(ui-toolkit, cp-frontend): Add error message component and error messages

2024-11-14 15:20:06 +02:00 · 2017-08-02 11:29:19 +01:00 · 2017-08-02 11:29:19 +01:00 · b1f76553ce
commit b1f76553ce
parent e5bbdadd6a
17 changed files with 521 additions and 279 deletions
--- a/packages/cp-frontend/src/components/messaging/error.js
+++ b/packages/cp-frontend/src/components/messaging/error.js
@ -1,17 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Message } from 'joyent-ui-toolkit';

-import { P } from 'joyent-ui-toolkit';
-
-const ErrorMessage = ({ message = "Ooops, there's been an error!!!" }) => {
-  return (
-    <P>
-      {message}
-    </P>
-  );
-};
+const ErrorMessage = ({
+  title,
+  message = 'Ooops, there\'s been an error'
+}) =>
+  <Message
+    title={title}
+    message={message}
+    type='ERROR'
+  />

 ErrorMessage.propTypes = {
+  title: PropTypes.string,
  message: PropTypes.string
 };

--- a/packages/cp-frontend/src/components/messaging/index.js
+++ b/packages/cp-frontend/src/components/messaging/index.js
@ -1,2 +1,3 @@
 export { default as Loader } from './loader';
 export { default as ErrorMessage } from './error';
+export { default as WarningMessage } from './warning';
--- a/packages/cp-frontend/src/components/messaging/warning.js
+++ b/packages/cp-frontend/src/components/messaging/warning.js
@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Message } from 'joyent-ui-toolkit';
+
+const WarningMessage = ({
+  title,
+  message
+}) =>
+  <Message
+    title={title}
+    message={message}
+    type='WARNING'
+  />
+
+WarningMessage.propTypes = {
+  title: PropTypes.string,
+  message: PropTypes.string.isRequired
+};
+
+export default WarningMessage;
--- a/packages/cp-frontend/src/containers/deployment-group/delete.js
+++ b/packages/cp-frontend/src/containers/deployment-group/delete.js
@ -5,12 +5,26 @@ import DeploymentGroupDeleteMutation from '@graphql/DeploymentGroupDeleteMutatio
 import DeploymentGroupQuery from '@graphql/DeploymentGroup.gql';
 import { Loader, ErrorMessage } from '@components/messaging';
 import { DeploymentGroupDelete as DeploymentGroupDeleteComponent } from '@components/deployment-group';
-import { Modal } from 'joyent-ui-toolkit';
+import { Modal, ModalHeading, Button } from 'joyent-ui-toolkit';

 class DeploymentGroupDelete extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      error: null
+    }
+  }
+
  render() {
    const { loading, error } = this.props;

+    const handleCloseClick = evt => {
+      const closeUrl = match.url.split('/').slice(0, -2).join('/');
+      history.replace(closeUrl);
+    };
+
    if (loading) {
      return (
        <Modal width={460} onCloseClick={handleCloseClick}>
@ -22,7 +36,9 @@ class DeploymentGroupDelete extends Component {
    if (error) {
      return (
        <Modal width={460} onCloseClick={handleCloseClick}>
-          <ErrorMessage message="Oops, an error occured while deleting your service." />
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occurred while loading your deployment group.' />
        </Modal>
      );
    }
@ -34,14 +50,28 @@ class DeploymentGroupDelete extends Component {
      match
    } = this.props;

-    const handleCloseClick = evt => {
-      const closeUrl = match.url.split('/').slice(0, -2).join('/');
-      history.replace(closeUrl);
-    };
+    if (this.state.error) {
+      return (
+        <Modal width={460} onCloseClick={handleCloseClick}>
+          <ModalHeading>
+            Deleting a deployment group: <br /> {deploymentGroup.name}
+          </ModalHeading>
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occurred while attempting to delete your deployment group.' />
+          <Button onClick={handleCloseClick} secondary>
+            Ok
+          </Button>
+        </Modal>
+      );
+    }

    const handleConfirmClick = evt => {
-      console.log('deploymentGroup = ', deploymentGroup);
-      deleteDeploymentGroup(deploymentGroup.id).then(() => handleCloseClick());
+      deleteDeploymentGroup(deploymentGroup.id)
+        .then(() => handleCloseClick())
+        .catch((err) => {
+          this.setState({ error: err });
+        });
    };

    return (
--- a/packages/cp-frontend/src/containers/deployment-groups/import.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/import.js
@ -45,7 +45,9 @@ class DeploymentGroupImport extends Component {
      return (
        <LayoutContainer>
          {_title}
-          <ErrorMessage message="Oops, and error occured while importing your deployment groups." />
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occurred while importing your deployment groups.' />
        </LayoutContainer>
      );
    }
--- a/packages/cp-frontend/src/containers/deployment-groups/list.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/list.js
@ -120,7 +120,9 @@ const DeploymentGroupList = ({
    return (
      <LayoutContainer>
        {_title}
-        <ErrorMessage message="Oops, and error occured while loading your deployment groups." />
+        <ErrorMessage
+          title='Ooops!'
+          message='An error occured while loading your deployment groups.' />
      </LayoutContainer>
    );
  }
--- a/packages/cp-frontend/src/containers/instances/list.js
+++ b/packages/cp-frontend/src/containers/instances/list.js
@ -27,7 +27,9 @@ const InstanceList = ({ deploymentGroup, instances = [], loading, error }) => {
    return (
      <LayoutContainer>
        {_title}
-        <ErrorMessage message="Oops, and error occured while loading your instances." />
+        <ErrorMessage
+          title='Ooops!'
+          message='An error occured while loading your instances.' />
      </LayoutContainer>
    );
  }
--- a/packages/cp-frontend/src/containers/manifest/edit-or-create.js
+++ b/packages/cp-frontend/src/containers/manifest/edit-or-create.js
@ -358,7 +358,9 @@ class DeploymentGroupEditOrCreate extends Component {
    const { error, loading, defaultStage, manifestStage } = this.state;

    if (error) {
-      return <ErrorMessage message={error} />;
+      return <ErrorMessage
+        title='Ooops!'
+        message={error} />;
    }

    const { match, create } = this.props;
--- a/packages/cp-frontend/src/containers/manifest/index.js
+++ b/packages/cp-frontend/src/containers/manifest/index.js
@ -10,7 +10,7 @@ import ManifestEditOrCreate from '@containers/manifest/edit-or-create';
 import { Progress } from '@components/manifest/edit-or-create';
 import { LayoutContainer } from '@components/layout';
 import { Title } from '@components/navigation';
-import { Loader, ErrorMessage } from '@components/messaging';
+import { Loader, ErrorMessage, WarningMessage } from '@components/messaging';

 const Manifest = ({
  loading,
@ -36,14 +36,18 @@ const Manifest = ({
    return (
      <LayoutContainer>
        {_title}
-        <ErrorMessage message="Oops, and error occured while loading your services." />
+        <ErrorMessage
+          title='Ooops!'
+          message='An error occured while loading your deployment group.' />
      </LayoutContainer>
    );
  }

  const _notice =
    deploymentGroup && deploymentGroup.imported && !manifest
-      ? <ErrorMessage message="Since this DeploymentGroup was imported, it doesn&#x27;t have the initial manifest" />
+      ? <WarningMessage
+          title='Be aware'
+          message='Since this DeploymentGroup was imported, it doesn&#x27;t have the initial manifest.' />
      : null;

  return (
--- a/packages/cp-frontend/src/containers/service/delete.js
+++ b/packages/cp-frontend/src/containers/service/delete.js
@ -4,13 +4,27 @@ import { compose, graphql } from 'react-apollo';
 import ServicesDeleteMutation from '@graphql/ServicesDeleteMutation.gql';
 import { Loader, ErrorMessage } from '@components/messaging';
 import { ServiceDelete as ServiceDeleteComponent } from '@components/service';
-import { Modal } from 'joyent-ui-toolkit';
+import { Modal, ModalHeading, Button } from 'joyent-ui-toolkit';
 import ServiceGql from './service-gql';

 class ServiceDelete extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      error: null
+    }
+  }
+
  render() {
    const { loading, error } = this.props;

+    const handleCloseClick = evt => {
+      const closeUrl = match.url.split('/').slice(0, -2).join('/');
+      history.replace(closeUrl);
+    };
+
    if (loading) {
      return (
        <Modal width={460} onCloseClick={handleCloseClick}>
@ -22,20 +36,37 @@ class ServiceDelete extends Component {
    if (error) {
      return (
        <Modal width={460} onCloseClick={handleCloseClick}>
-          <ErrorMessage message="Oops, an error occured while deleting your service." />
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occured while loading your service.' />
        </Modal>
      );
    }

    const { service, deleteServices, history, match } = this.props;

-    const handleCloseClick = evt => {
-      const closeUrl = match.url.split('/').slice(0, -2).join('/');
-      history.replace(closeUrl);
-    };
+    if(this.state.error) {
+      return (
+        <Modal width={460} onCloseClick={handleCloseClick}>
+          <ModalHeading>
+            Deleting a service: <br /> {service.name}
+          </ModalHeading>
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occurred while attempting to delete your service.' />
+          <Button onClick={handleCloseClick} secondary>
+            Ok
+          </Button>
+        </Modal>
+      );
+    }

    const handleConfirmClick = evt => {
-      deleteServices(service.id).then(() => handleCloseClick());
+      deleteServices(service.id)
+        .then(() => handleCloseClick())
+        .catch((err) => {
+          this.setState({ error: err });
+        });
    };

    return (
--- a/packages/cp-frontend/src/containers/service/scale.js
+++ b/packages/cp-frontend/src/containers/service/scale.js
@ -5,13 +5,27 @@ import { reduxForm } from 'redux-form';
 import ServiceScaleMutation from '@graphql/ServiceScale.gql';
 import { Loader, ErrorMessage } from '@components/messaging';
 import { ServiceScale as ServiceScaleComponent } from '@components/service';
-import { Modal } from 'joyent-ui-toolkit';
+import { Modal, ModalHeading, Button } from 'joyent-ui-toolkit';
 import ServiceGql from './service-gql';

 class ServiceScale extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      error: null
+    }
+  }
+
  render() {
    const { loading, error } = this.props;

+    const handleCloseClick = evt => {
+      const closeUrl = match.url.split('/').slice(0, -2).join('/');
+      history.replace(closeUrl);
+    };
+
    if (loading) {
      return (
        <Modal width={460} onCloseClick={handleCloseClick}>
@ -23,13 +37,31 @@ class ServiceScale extends Component {
    if (error) {
      return (
        <Modal width={460} onCloseClick={handleCloseClick}>
-          <ErrorMessage message="Oops, an error occured while scaling your service." />
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occured while loading your service.' />
        </Modal>
      );
    }

    const { service, scale, history, match } = this.props;

+    if(this.state.error) {
+      return (
+        <Modal width={460} onCloseClick={handleCloseClick}>
+          <ModalHeading>
+            Scaling a service: <br /> {service.name}
+          </ModalHeading>
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occurred while attempting to scale your service.' />
+          <Button onClick={handleCloseClick} secondary>
+            Ok
+          </Button>
+        </Modal>
+      );
+    }
+
    const validateReplicas = ({ replicas }) => {
      if (replicas === '') {
        return {
@ -39,13 +71,12 @@ class ServiceScale extends Component {
      }
    };

-    const handleCloseClick = evt => {
-      const closeUrl = match.url.split('/').slice(0, -2).join('/');
-      history.replace(closeUrl);
-    };
-
    const handleSubmitClick = values => {
-      scale(service.id, values.replicas).then(handleCloseClick);
+      scale(service.id, values.replicas)
+        .then(handleCloseClick)
+        .catch((err) => {
+          this.setState({ error: err });
+        });
    };

    if (!service) {
--- a/packages/cp-frontend/src/containers/services/list.js
+++ b/packages/cp-frontend/src/containers/services/list.js
@ -19,11 +19,22 @@ import { ServiceListItem } from '@components/services';

 import { ServicesQuickActions } from '@components/services';

+import { Message } from 'joyent-ui-toolkit';
+
 const StyledContainer = styled.div`
  position: relative;
 `;

 class ServiceList extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      errors: {}
+    }
+  }
+
  ref(name) {
    this._refs = this._refs || {};

@ -58,7 +69,9 @@ class ServiceList extends Component {
    if (error) {
      return (
        <LayoutContainer>
-          <ErrorMessage message="Oops, and error occured while loading your services." />
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occured while loading your services.' />
        </LayoutContainer>
      );
    }
@ -95,15 +108,27 @@ class ServiceList extends Component {
    };

    const handleRestartClick = (evt, service) => {
-      restartServices(service.id);
+      this.setState({ errors: {} });
+      restartServices(service.id)
+        .catch((err) => {
+          this.setState({ errors: { restart: err }});
+        });
    };

    const handleStopClick = (evt, service) => {
-      stopServices(service.id);
+      this.setState({ errors: {} });
+      stopServices(service.id)
+        .catch((err) => {
+          this.setState({ errors: { stop: err }});
+        });
    };

    const handleStartClick = (evt, service) => {
-      startServices(service.id);
+      this.setState({ errors: {} });
+      startServices(service.id)
+        .catch((err) => {
+          this.setState({ errors: { start: err }});
+        });
    };

    const handleScaleClick = (evt, service) => {
@ -120,6 +145,27 @@ class ServiceList extends Component {
      toggleServicesQuickActions({ show: false });
    };

+    let renderedError = null;
+
+    if (this.state.errors.stop || this.state.errors.start || this.state.errors.restart) {
+
+      const message = this.state.errors.stop
+        ? 'An error occured while attempting to stop your service.'
+        : this.state.errors.start
+        ? 'An error occured while attempting to start your service.'
+        : this.state.errors.restart
+        ? 'An error occured while attempting to restart your service.'
+        : '';
+
+      renderedError = (
+        <LayoutContainer>
+          <ErrorMessage
+            title='Ooops!'
+            message={message} />
+        </LayoutContainer>
+      );
+    }
+
    const serviceList = sortBy(services, ['slug']).map(service => {
      return (
        <ServiceListItem
@ -133,6 +179,7 @@ class ServiceList extends Component {

    return (
      <LayoutContainer>
+        {renderedError}
        <StyledContainer>
          <div ref={this.ref('container')}>
            {serviceList}
--- a/packages/cp-frontend/src/containers/services/topology.js
+++ b/packages/cp-frontend/src/containers/services/topology.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
@ -26,104 +26,157 @@ const StyledContainer = styled.div`
  position: relative;
 `;

-const ServicesTopology = ({
-  url,
-  push,
-  deploymentGroup,
-  services,
-  datacenter,
-  loading,
-  error,
-  servicesQuickActions,
-  toggleServicesQuickActions,
-  restartServices,
-  stopServices,
-  startServices
-}) => {
-  if (loading) {
-    return (
-      <LayoutContainer center>
-        <Loader />
-      </LayoutContainer>
-    );
+class ServicesTopology extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      errors: {}
+    }
  }

-  if (error) {
+  render() {
+
+    const {
+      url,
+      push,
+      deploymentGroup,
+      services,
+      datacenter,
+      loading,
+      error,
+      servicesQuickActions,
+      toggleServicesQuickActions,
+      restartServices,
+      stopServices,
+      startServices
+    } = this.props;
+
+    if (loading) {
+      return (
+        <LayoutContainer center>
+          <Loader />
+        </LayoutContainer>
+      );
+    }
+
+    if (error) {
+
+      return (
+        <LayoutContainer>
+          <ErrorMessage
+            title='Ooops!'
+            message='An error occured while loading your services.' />
+        </LayoutContainer>
+      );
+    }
+
+    if (
+      deploymentGroup.status === 'PROVISIONING' &&
+      !forceArray(services).length
+    ) {
+      return (
+        <LayoutContainer center>
+          <Loader msg="Just a moment, we’re on it" />
+        </LayoutContainer>
+      );
+    }
+
+    const handleQuickActionsClick = (evt, tooltipData) => {
+      toggleServicesQuickActions(tooltipData);
+    };
+
+    const handleTooltipBlur = evt => {
+      toggleServicesQuickActions({ show: false });
+    };
+
+    const handleRestartClick = (evt, service) => {
+      this.setState({ errors: {} });
+      restartServices(service.id)
+        .catch((err) => {
+          this.setState({ errors: { restart: err }});
+        });
+    };
+
+    const handleStopClick = (evt, service) => {
+      this.setState({ errors: {} });
+      stopServices(service.id)
+        .catch((err) => {
+          this.setState({ errors: { stop: err }});
+        });
+    };
+
+    const handleStartClick = (evt, service) => {
+      this.setState({ errors: {} });
+      startServices(service.id)
+        .catch((err) => {
+          this.setState({ errors: { start: err }});
+        });
+    };
+
+    const handleScaleClick = (evt, service) => {
+      toggleServicesQuickActions({ show: false });
+      push(`${url}/${service.slug}/scale`);
+    };
+
+    const handleDeleteClick = (evt, service) => {
+      toggleServicesQuickActions({ show: false });
+      push(`${url}/${service.slug}/delete`);
+    };
+
+    const handleNodeTitleClick = (evt, { service }) => {
+      push(`${url.split('/').slice(0, 3).join('/')}/services/${service.slug}`);
+    };
+
+    let renderedError = null;
+
+    if (this.state.errors.stop || this.state.errors.start || this.state.errors.restart) {
+
+      const message = this.state.errors.stop
+        ? 'An error occured while attempting to stop your service.'
+        : this.state.errors.start
+        ? 'An error occured while attempting to start your service.'
+        : this.state.errors.restart
+        ? 'An error occured while attempting to restart your service.'
+        : '';
+
+      renderedError = (
+        <LayoutContainer>
+          <ErrorMessage
+            title='Ooops!'
+            message={message} />
+        </LayoutContainer>
+      );
+    }
+
    return (
-      <LayoutContainer>
-        <ErrorMessage message="Oops, and error occured while loading your services." />
-      </LayoutContainer>
+      <div>
+        { renderedError }
+        <StyledBackground>
+          <StyledContainer>
+            <Topology
+              services={services}
+              onQuickActionsClick={handleQuickActionsClick}
+              onNodeTitleClick={handleNodeTitleClick}
+            />
+            <ServicesQuickActions
+              service={servicesQuickActions.service}
+              show={servicesQuickActions.show}
+              position={servicesQuickActions.position}
+              onBlur={handleTooltipBlur}
+              onRestartClick={handleRestartClick}
+              onStopClick={handleStopClick}
+              onStartClick={handleStartClick}
+              onScaleClick={handleScaleClick}
+              onDeleteClick={handleDeleteClick}
+            />
+          </StyledContainer>
+        </StyledBackground>
+      </div>
    );
  }
-
-  if (
-    deploymentGroup.status === 'PROVISIONING' &&
-    !forceArray(services).length
-  ) {
-    return (
-      <LayoutContainer center>
-        <Loader msg="Just a moment, we’re on it" />
-      </LayoutContainer>
-    );
-  }
-
-  const handleQuickActionsClick = (evt, tooltipData) => {
-    toggleServicesQuickActions(tooltipData);
-  };
-
-  const handleTooltipBlur = evt => {
-    toggleServicesQuickActions({ show: false });
-  };
-
-  const handleRestartClick = (evt, service) => {
-    restartServices(service.id);
-  };
-
-  const handleStopClick = (evt, service) => {
-    stopServices(service.id);
-  };
-
-  const handleStartClick = (evt, service) => {
-    startServices(service.id);
-  };
-
-  const handleScaleClick = (evt, service) => {
-    toggleServicesQuickActions({ show: false });
-    push(`${url}/${service.slug}/scale`);
-  };
-
-  const handleDeleteClick = (evt, service) => {
-    toggleServicesQuickActions({ show: false });
-    push(`${url}/${service.slug}/delete`);
-  };
-
-  const handleNodeTitleClick = (evt, { service }) => {
-    push(`${url.split('/').slice(0, 3).join('/')}/services/${service.slug}`);
-  };
-
-  return (
-    <StyledBackground>
-      <StyledContainer>
-        <Topology
-          services={services}
-          onQuickActionsClick={handleQuickActionsClick}
-          onNodeTitleClick={handleNodeTitleClick}
-        />
-        <ServicesQuickActions
-          service={servicesQuickActions.service}
-          show={servicesQuickActions.show}
-          position={servicesQuickActions.position}
-          onBlur={handleTooltipBlur}
-          onRestartClick={handleRestartClick}
-          onStopClick={handleStopClick}
-          onStartClick={handleStartClick}
-          onScaleClick={handleScaleClick}
-          onDeleteClick={handleDeleteClick}
-        />
-      </StyledContainer>
-    </StyledBackground>
-  );
-};
+}

 const mapStateToProps = (state, ownProps) => ({
  servicesQuickActions: state.ui.services.quickActions,
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@ -18,6 +18,7 @@ export { default as IconButton } from './icon-button';
 export { Tooltip, TooltipButton, TooltipDivider } from './tooltip';
 export { Dropdown } from './dropdown';
 export { default as StatusLoader } from './status-loader';
+export { default as Message } from './message';

 export {
  default as Progressbar,
--- a/packages/ui-toolkit/src/message/index.js
+++ b/packages/ui-toolkit/src/message/index.js
@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import unitcalc from 'unitcalc';
+
+import { H3 } from '../text/headings';
+import P from '../text/p';
+import CloseButton from '../close-button';
+import { border, bottomShaddow } from '../boxes';
+
+const StyledContainer = styled.div`
+  position: relative;
+  margin-bottom: ${unitcalc(2)};
+  background-color: ${props => props.theme.white};
+  box-shadow: ${bottomShaddow};
+  border: ${border.confirmed};
+`;
+
+const StyledColor = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: ${unitcalc(6)};
+  height: 100%;
+  background-color: ${props =>
+    props.type === 'ERROR' ? props.theme.red
+    : props.type === 'WARNING' ? props.theme.orange
+    : props.type === 'EDUCATION' ? props.theme.green
+    : props.theme.green};
+`;
+
+const StyledMessageContainer = styled.div`
+  padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0;
+`;
+
+const StyledTitle = styled(H3)`
+  margin: 0 ${unitcalc(9)} ${unitcalc(0.25)} ${unitcalc(9)};
+  font-weight: 600;
+`;
+
+const StyledMessage = styled(P)`
+  margin: ${unitcalc(0.25)} ${unitcalc(9)} 0 ${unitcalc(9)};
+`;
+
+const StyledClose = styled(CloseButton)`
+  position: absolute;
+  right: ${unitcalc(0.5)};
+  top: ${unitcalc(0.5)};
+`;
+
+const Message = ({
+  title,
+  message,
+  onCloseClick,
+  type='MESSAGE'
+ }) => {
+
+   const renderTitle = title
+    ? <StyledTitle>{title}</StyledTitle>
+    : null;
+
+  const renderClose = onCloseClick
+    ? <StyledClose onClick={ onCloseClick } />
+    : null;
+
+  return (
+    <StyledContainer>
+      <StyledColor type={type} />
+      <StyledMessageContainer>
+        { renderTitle }
+        <StyledMessage>{message}</StyledMessage>
+      </StyledMessageContainer>
+      { renderClose }
+    </StyledContainer>
+  );
+};
+
+Message.propTypes = {
+  title: PropTypes.string,
+  message: PropTypes.string.isRequired,
+  onCloseClick: PropTypes.func,
+  type: PropTypes.oneOf([
+    'ERROR',
+    'WARNING',
+    'EDUCATION',
+    'MESSAGE'
+  ])
+};
+
+export default Message;
--- a/packages/ui-toolkit/src/topology/node/index.js
+++ b/packages/ui-toolkit/src/topology/node/index.js
@ -87,16 +87,6 @@ const GraphNode = ({
      />
    : null;

-  const nodeButton =
-    status === 'ACTIVE'
-      ? <GraphNodeButton
-          index={index}
-          onButtonClick={onButtonClick}
-          isConsul={isConsul}
-          instancesActive={instancesActive}
-        />
-      : null;
-
  return (
    <g transform={`translate(${x}, ${y})`}>
      {nodeShadow}
@ -111,7 +101,12 @@ const GraphNode = ({
        {...nodeRectEvents}
      />
      <GraphNodeTitle data={data} onNodeTitleClick={onTitleClick} />
-      {nodeButton}
+      <GraphNodeButton
+        index={index}
+        onButtonClick={onButtonClick}
+        isConsul={isConsul}
+        instancesActive={instancesActive}
+      />
      {nodeContent}
    </g>
  );
--- a/yarn.lock
+++ b/yarn.lock
@ -1395,20 +1395,13 @@ babel-register@^6.24.1:
    mkdirp "^0.5.1"
    source-map-support "^0.4.2"

-babel-runtime@6.23.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
+babel-runtime@6.23.0, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, 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-runtime@^6.18.0, babel-runtime@^6.9.2:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.25.0.tgz#33b98eaa5d482bb01a8d1aa6b437ad2b01aec41c"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
 babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0:
  version "6.25.0"
  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
@ -1456,18 +1449,12 @@ babylon@~5.8.3:
  version "5.8.38"
  resolved "https://registry.yarnpkg.com/babylon/-/babylon-5.8.38.tgz#ec9b120b11bf6ccd4173a18bf217e60b79859ffd"

-backoff@2.4.1:
+backoff@2.4.1, backoff@^2.4.1:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/backoff/-/backoff-2.4.1.tgz#2f68c50e0dd789dbefe24200a62efb04d2456d68"
  dependencies:
    precond "0.2"

-backoff@^2.4.1:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/backoff/-/backoff-2.5.0.tgz#f616eda9d3e4b66b8ca7fca79f695722c5f8e26f"
-  dependencies:
-    precond "0.2"
-
 bail@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.2.tgz#f7d6c1731630a9f9f0d4d35ed1f962e2074a1764"
@ -1611,11 +1598,7 @@ breeze-async@0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/breeze-async/-/breeze-async-0.1.0.tgz#ba4265949980a3d9d8bb9137a61a42e1f87da73a"

-breeze-nexttick@*:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/breeze-nexttick/-/breeze-nexttick-0.2.1.tgz#1e0b82f45eab600d84f0e91f16aef8d65b2dfbab"
-
-breeze-nexttick@0.1.0:
+breeze-nexttick@*, breeze-nexttick@0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/breeze-nexttick/-/breeze-nexttick-0.1.0.tgz#d68a56655045d205cb6e36bfaf3c6b2b2c438b2a"

@ -1841,7 +1824,7 @@ camelcase@^1.0.2:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"

-camelcase@^2.0.0, camelcase@^2.0.1:
+camelcase@^2.0.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"

@ -2049,7 +2032,7 @@ cliui@^2.1.0:
    right-align "^0.1.1"
    wordwrap "0.0.2"

-cliui@^3.0.3, cliui@^3.2.0:
+cliui@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
  dependencies:
@ -2537,7 +2520,7 @@ core-js@^2.0.0, core-js@^2.4.0, core-js@^2.4.1:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"

-core-util-is@1.0.2, core-util-is@~1.0.0:
+core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"

@ -3406,10 +3389,14 @@ es6-map@^0.1.3:
    es6-symbol "~3.1.1"
    event-emitter "~0.3.5"

-es6-promise@^3.0.2, es6-promise@^3.1.2:
+es6-promise@^3.0.2:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"

+es6-promise@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
+
 es6-set@~0.1.5:
  version "0.1.5"
  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
@ -3839,11 +3826,11 @@ extsprintf@1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"

-extsprintf@1.2.0:
+extsprintf@1.2.0, extsprintf@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.2.0.tgz#5ad946c22f5b32ba7f8cd7426711c6e8a3fc2529"

-extsprintf@1.3.0, extsprintf@^1.2.0:
+extsprintf@1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"

@ -3872,14 +3859,10 @@ fast-levenshtein@~2.0.4:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"

-fast-safe-stringify@1.1.x:
+fast-safe-stringify@1.1.x, fast-safe-stringify@^1.1.3:
  version "1.1.13"
  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-1.1.13.tgz#a01e9cd9c9e491715c98a75a42d5f0bbd107ff76"

-fast-safe-stringify@^1.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-1.2.0.tgz#ebd42666fd18fe4f2ba4f0d295065f3f85cade96"
-
 fbjs@^0.8.5, fbjs@^0.8.9:
  version "0.8.14"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
@ -4039,6 +4022,10 @@ form-data@~2.1.1:
    combined-stream "^1.0.5"
    mime-types "^2.1.12"

+format-util@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/format-util/-/format-util-1.0.3.tgz#032dca4a116262a12c43f4c3ec8566416c5b2d95"
+
 forwarded@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
@ -4184,18 +4171,12 @@ get-stream@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"

-getpass@0.1.6:
+getpass@0.1.6, getpass@^0.1.1:
  version "0.1.6"
  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
  dependencies:
    assert-plus "^1.0.0"

-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  dependencies:
-    assert-plus "^1.0.0"
-
 git-raw-commits@1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.1.2.tgz#a12d8492aeba2881802d700825ed81c9f39e6f2f"
@ -4281,16 +4262,6 @@ glob@^5.0.14:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

-glob@^6.0.1:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "2 || 3"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 globals@^9.0.0, globals@^9.14.0, globals@^9.17.0:
  version "9.18.0"
  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@ -5335,8 +5306,8 @@ jest-snapshot@^20.0.3:
    pretty-format "^20.0.3"

 jest-styled-components@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-4.2.2.tgz#8b4cc442e26a6ad8d8806360c4cea2117f8a62a7"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-4.3.0.tgz#3ba64eabe5e83e4f16f4e8db7b532a2fffb74b76"
  dependencies:
    css "^2.2.1"

@ -5425,7 +5396,14 @@ js-tokens@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"

-js-yaml@^3.2.7, js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.6.0, js-yaml@^3.8.2, js-yaml@^3.8.4:
+js-yaml@^3.2.7, js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.1.tgz#08775cebdfdd359209f0d2acd383c8f86a6904a0"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^3.5.1, js-yaml@^3.8.2, js-yaml@^3.8.4:
  version "3.9.0"
  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.0.tgz#4ffbbf25c2ac963b8299dc74da7e3740de1c18ce"
  dependencies:
@ -5476,15 +5454,15 @@ json-schema-ref-parser@^1.4.1:
    ono "^2.0.1"

 json-schema-ref-parser@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-3.1.2.tgz#a38ecb7774f87f32e7eb9723d5921390e76a9a42"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-3.2.0.tgz#c2c3725755e69818418e9aeacd61903a494a43d8"
  dependencies:
    call-me-maybe "^1.0.1"
-    debug "^2.2.0"
-    es6-promise "^3.1.2"
-    js-yaml "^3.6.0"
-    ono "^2.2.1"
-    z-schema "^3.17.0"
+    debug "^2.6.8"
+    es6-promise "^4.1.1"
+    js-yaml "^3.9.1"
+    ono "^4.0.2"
+    z-schema "^3.18.2"

 json-schema-traverse@^0.3.0:
  version "0.3.1"
@ -6199,14 +6177,10 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7:
  dependencies:
    mime-db "~1.29.0"

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

-mime@^1.3.4:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
-
 mimic-fn@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
@ -6622,7 +6596,7 @@ once@1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/once/-/once-1.3.0.tgz#151af86bfc1f08c4b9f07d06ab250ffcbeb56581"

-once@1.3.2:
+once@1.3.2, once@~1.3.0:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/once/-/once-1.3.2.tgz#d8feeca93b039ec1dcdee7741c92bdac5e28081b"
  dependencies:
@ -6634,12 +6608,6 @@ once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.3.3, once@^1.4.0:
  dependencies:
    wrappy "1"

-once@~1.3.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
-  dependencies:
-    wrappy "1"
-
 onecolor@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/onecolor/-/onecolor-3.0.4.tgz#75a46f80da6c7aaa5b4daae17a47198bd9652494"
@ -6654,10 +6622,16 @@ onetime@^2.0.0:
  dependencies:
    mimic-fn "^1.0.0"

-ono@^2.0.1, ono@^2.2.1:
+ono@^2.0.1:
  version "2.2.5"
  resolved "https://registry.yarnpkg.com/ono/-/ono-2.2.5.tgz#daf09488b51174da7a7e4275dfab31b438ffa0e3"

+ono@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ono/-/ono-4.0.2.tgz#2e18ff7c21b9eac0cab794f7a3082507000d6d36"
+  dependencies:
+    format-util "^1.0.3"
+
 oppsy@1.x.x, oppsy@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/oppsy/-/oppsy-1.0.2.tgz#98014cd6967653a83cfffa554226dc90050baad4"
@ -6705,12 +6679,6 @@ os-homedir@^1.0.0, os-homedir@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"

-os-locale@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
-  dependencies:
-    lcid "^1.0.0"
-
 os-locale@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
@ -7400,7 +7368,7 @@ raw-body@~2.1.7:
    iconv-lite "0.4.13"
    unpipe "1.0.0"

-rc@1.1.7:
+rc@1.1.7, rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
  version "1.1.7"
  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea"
  dependencies:
@ -7409,15 +7377,6 @@ rc@1.1.7:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

-rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
-  dependencies:
-    deep-extend "~0.4.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-apollo@^1.4.2:
  version "1.4.8"
  resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-1.4.8.tgz#b510f207b08ce4bd1e3adbd46a3ede68e3af27e7"
@ -8188,18 +8147,12 @@ rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.
  dependencies:
    glob "^7.0.5"

-rimraf@2.4.4:
+rimraf@2.4.4, rimraf@~2.4.0:
  version "2.4.4"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.4.tgz#b528ce2ebe0e6d89fb03b265de11d61da0dbcf82"
  dependencies:
    glob "^5.0.14"

-rimraf@~2.4.0:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
-  dependencies:
-    glob "^6.0.1"
-
 ripemd160@^2.0.0, ripemd160@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
@ -8890,8 +8843,8 @@ stylelint-processor-styled-components@styled-components/stylelint-processor-styl
    typescript-eslint-parser "^4.0.0"

 stylelint-scss@^1.4.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-1.5.1.tgz#a5aae203fc5aaaba484c7d1380f28560b6f33ac0"
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-1.5.2.tgz#98e0cbf21cb53f1f196f8b1831c41ff8036ac8b2"
  dependencies:
    lodash "^4.11.1"
    postcss-media-query-parser "^0.2.3"
@ -9788,20 +9741,12 @@ verror@1.3.6:
  dependencies:
    extsprintf "1.0.2"

-verror@1.6.0:
+verror@1.6.0, verror@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/verror/-/verror-1.6.0.tgz#7d13b27b1facc2e2da90405eb5ea6e5bdd252ea5"
  dependencies:
    extsprintf "1.2.0"

-verror@^1.6.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
 vfile-location@^2.0.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.2.tgz#d3675c59c877498e492b4756ff65e4af1a752255"
@ -9959,10 +9904,6 @@ 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"
-
 wordwrap@0.0.2:
  version "0.0.2"
  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
@ -10080,7 +10021,7 @@ xmlhttprequest@1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"

-y18n@^3.2.0, y18n@^3.2.1:
+y18n@^3.2.1:
  version "3.2.1"
  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"

@ -10119,17 +10060,14 @@ yargs@^1.2.6:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.3.3.tgz#054de8b61f22eefdb7207059eaef9d6b83fb931a"

-yargs@^3.5.4:
-  version "3.32.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
+yargs@^3.5.4, yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
  dependencies:
-    camelcase "^2.0.1"
-    cliui "^3.0.3"
-    decamelize "^1.1.1"
-    os-locale "^1.4.0"
-    string-width "^1.0.1"
-    window-size "^0.1.4"
-    y18n "^3.2.0"
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"

 yargs@^8.0.1, yargs@^8.0.2:
  version "8.0.2"
@ -10149,16 +10087,7 @@ yargs@^8.0.1, yargs@^8.0.2:
    y18n "^3.2.1"
    yargs-parser "^7.0.0"

-yargs@~3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
-  dependencies:
-    camelcase "^1.0.2"
-    cliui "^2.1.0"
-    decamelize "^1.0.0"
-    window-size "0.1.0"
-
-z-schema@^3.16.1, z-schema@^3.17.0:
+z-schema@^3.16.1, z-schema@^3.18.2:
  version "3.18.2"
  resolved "https://registry.yarnpkg.com/z-schema/-/z-schema-3.18.2.tgz#e422196b5efe60b46adef3c3f2aef2deaa911161"
  dependencies:
@ -10170,7 +10099,7 @@ z-schema@^3.16.1, z-schema@^3.17.0:

 "zen-observable@git+https://github.com/evanshauser/zen-observable.git":
  version "0.5.2"
-  resolved "git+https://github.com/evanshauser/zen-observable.git#a11ee4bd848f381898b6cd93c769eb1dcc0febf6"
+  resolved "git+https://github.com/evanshauser/zen-observable.git#e5d2507e8684c88ea0d2f33c78b59eaa858112b5"

 zerorpc@^0.9.7:
  version "0.9.7"