feat(cp-frontend): add status to instances

packages/cp-frontend/package.json

@@ -50,6 +50,7 @@
     "styled-components": "^2.1.0",
     "styled-is": "^1.0.11",
     "styled-text-spinners": "^1.0.1",
+    "title-case": "^2.1.1",
     "unitcalc": "^1.0.8"
   },
   "devDependencies": {

packages/cp-frontend/src/components/instances/list-item.js

@@ -1,27 +1,125 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import remcalc from 'remcalc';
+import styled from 'styled-components';
+import is from 'styled-is';
+import titleCase from 'title-case';
 
 import {
   Card,
   CardView,
   CardMeta,
   CardTitle,
-  CardOptions
+  CardDescription,
+  CardOptions,
+  typography
 } from 'joyent-ui-toolkit';
 
+const STATUSES = [
+  'CREATED',
+  'RESTARTING',
+  'RUNNING',
+  'PAUSED',
+  'EXITED',
+  'DELETED',
+  'STOPPED',
+  'FAILED'
+];
+
+const Span = styled.span`
+  ${typography.fontFamily};
+  ${typography.normal};
+`;
+
+const Dot = styled.div`
+  margin-right: ${remcalc(6)};
+  width: ${remcalc(6)};
+  height: ${remcalc(6)};
+  border-radius: ${remcalc(3)};
+  display: inline-block;
+
+  ${is('created')`
+    background-color: ${props => props.theme.primary};
+  `};
+
+  ${is('restarting')`
+    background-color: yellow;
+  `};
+
+  ${is('running')`
+    background-color: ${props => props.theme.green};
+  `};
+
+  ${is('paused')`
+    background-color: ${props => props.theme.text};
+  `};
+
+  ${is('exited')`
+    background-color: ${props => props.theme.red};
+  `};
+
+  ${is('deleted')`
+    background-color: ${props => props.theme.secondaryActive};
+  `};
+
+  ${is('stopped')`
+    background-color: ${props => props.theme.red};
+  `};
+
+  ${is('failed')`
+    background-color: ${props => props.theme.red};
+  `};
+`;
+
+const StatusBadge = ({ status }) => {
+  const props = STATUSES.reduce(
+    (acc, name) =>
+      Object.assign(acc, {
+        [name.toLowerCase()]: name === status
+      }),
+    {}
+  );
+
+  return (
+    <Span>
+      <Dot {...props} />
+      {titleCase(status)}
+    </Span>
+  );
+};
+
+const StyledCard = Card.extend`
+  &:not(:last-child) {
+    margin-bottom: 0;
+    box-shadow: none;
+    border-bottom-width: 0;
+  }
+
+  &:nth-child(odd) {
+    background-color: ${props => props.theme.background};
+
+    & [name="card-options"] > button {
+      background-color: ${props => props.theme.background};
+    }
+  }
+`;
+
 const InstanceCard = ({
   instance = {},
   onOptionsClick = () => null,
   toggleCollapsed = () => null
 }) =>
-  <Card collapsed={true} key={instance.uuid}>
+  <StyledCard collapsed={true} key={instance.uuid}>
     <CardView>
       <CardMeta onClick={toggleCollapsed}>
         <CardTitle>{instance.name}</CardTitle>
+        <CardDescription>
+          <StatusBadge status={instance.status} />
+        </CardDescription>
       </CardMeta>
     </CardView>
     <CardOptions onClick={onOptionsClick} />
-  </Card>;
+  </StyledCard>;
 
 InstanceCard.propTypes = {
   instance: PropTypes.object,

packages/cp-frontend/src/components/navigation/menu.js

@@ -14,7 +14,7 @@ import {
 
 const getMenuItems = (...links) =>
   forceArray(links).map(({ pathname, name }) =>
-    <SectionListItem>
+    <SectionListItem key={pathname}>
       <SectionListNavLink activeClassName="active" to={pathname}>
         {name}
       </SectionListNavLink>

packages/cp-frontend/src/containers/instances/list.js

@@ -2,30 +2,30 @@ import React, { Component } from 'react';
 // Import PropTypes from 'prop-types';
 import { compose, graphql } from 'react-apollo';
 import InstancesQuery from '@graphql/Instances.gql';
+import { Row } from 'react-styled-flexboxgrid';
+import remcalc from 'remcalc';
 
 import { LayoutContainer } from '@components/layout';
 import { Loader, ErrorMessage } from '@components/messaging';
 import { InstanceListItem, EmptyInstances } from '@components/instances';
+import { DeploymentGroupsLoading } from '@components/deployment-groups';
+import { H2 } from 'joyent-ui-toolkit';
+
+const Title = H2.extend`
+  margin-top: ${remcalc(2)};
+`;
 
 class InstanceList extends Component {
   render() {
     const { instances, loading, error } = this.props;
-    console.log('instances = ', instances);
-    console.log('loading = ', loading);
-    console.log('error = ', error);
-    if (loading) {
-      return (
-        <LayoutContainer>
-          <Loader />
-        </LayoutContainer>
-      );
-    } else if (error) {
-      return (
-        <LayoutContainer>
+
+    const _loading = !loading ? null : <DeploymentGroupsLoading />;
+
+    const _error = !error
+      ? null
+      : <Row>
           <ErrorMessage message="Oops, and error occured while loading your instances." />
-        </LayoutContainer>
-      );
-    }
+        </Row>;
 
     const instanceList = instances
       ? instances.map((instance, index) =>
@@ -39,9 +39,7 @@ class InstanceList extends Component {
 
     return (
       <LayoutContainer>
-        <div>
-          <h2>Instance List</h2>
-        </div>
+        <Title>Instances</Title>
         {instanceList}
       </LayoutContainer>
     );

yarn.lock

@@ -493,10 +493,6 @@ ast-types@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.0.tgz#c8721c8747ae4d5b29b929e99c5317b4e8745623"
 
-ast-types@0.9.6:
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
-
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -3493,7 +3489,7 @@ esprima@^2.6.0, esprima@~2.7.1:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
-esprima@^3.1.1, esprima@~3.1.0:
+esprima@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
 
@@ -3703,11 +3699,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"
 
@@ -7521,7 +7517,7 @@ readline2@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     mute-stream "0.0.5"
 
-recast@0.11.12:
+recast@0.11.12, recast@^0.11.5:
   version "0.11.12"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.12.tgz#a79e4d3f82d5d72a82ee177aeaa791e793bbe5d6"
   dependencies:
@@ -7530,15 +7526,6 @@ recast@0.11.12:
     private "~0.1.5"
     source-map "~0.5.0"
 
-recast@^0.11.5:
-  version "0.11.23"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
-  dependencies:
-    ast-types "0.9.6"
-    esprima "~3.1.0"
-    private "~0.1.5"
-    source-map "~0.5.0"
-
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -7605,8 +7592,8 @@ redux-form@^6.8.0:
     prop-types "^15.5.9"
 
 redux@^3.4.0, redux@^3.6.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.0.tgz#07a623cafd92eee8abe309d13d16538f6707926f"
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.1.tgz#bfc535c757d3849562ead0af18ac52122cd7268e"
   dependencies:
     lodash "^4.2.1"
     lodash-es "^4.2.1"