From f2ad0da7e2bc21f9211c0621524dc19c20b2d781 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 26 Jun 2017 14:12:50 +0100 Subject: [PATCH] feat(cp-frontend): add status to instances --- packages/cp-frontend/package.json | 1 + .../src/components/instances/list-item.js | 104 +++++++++++++++++- .../src/components/navigation/menu.js | 2 +- .../src/containers/instances/list.js | 34 +++--- yarn.lock | 25 +---- 5 files changed, 125 insertions(+), 41 deletions(-) diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json index fd892a5f..3e30d091 100644 --- a/packages/cp-frontend/package.json +++ b/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": { diff --git a/packages/cp-frontend/src/components/instances/list-item.js b/packages/cp-frontend/src/components/instances/list-item.js index adf4d104..3068575a 100644 --- a/packages/cp-frontend/src/components/instances/list-item.js +++ b/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 ( + + + {titleCase(status)} + + ); +}; + +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 }) => - + {instance.name} + + + - ; + ; InstanceCard.propTypes = { instance: PropTypes.object, diff --git a/packages/cp-frontend/src/components/navigation/menu.js b/packages/cp-frontend/src/components/navigation/menu.js index 3b3e58b2..9f771d82 100644 --- a/packages/cp-frontend/src/components/navigation/menu.js +++ b/packages/cp-frontend/src/components/navigation/menu.js @@ -14,7 +14,7 @@ import { const getMenuItems = (...links) => forceArray(links).map(({ pathname, name }) => - + {name} diff --git a/packages/cp-frontend/src/containers/instances/list.js b/packages/cp-frontend/src/containers/instances/list.js index 076a94b5..c498bcf4 100644 --- a/packages/cp-frontend/src/containers/instances/list.js +++ b/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 ( - - - - ); - } else if (error) { - return ( - + + const _loading = !loading ? null : ; + + const _error = !error + ? null + : - - ); - } + ; const instanceList = instances ? instances.map((instance, index) => @@ -39,9 +39,7 @@ class InstanceList extends Component { return ( -
-

Instance List

-
+ Instances {instanceList} ); diff --git a/yarn.lock b/yarn.lock index 46a67bfc..ced82dfb 100644 --- a/yarn.lock +++ b/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"