Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(cp-frontend): update instance status colors based on new InstanceStatus'es

Browse Source
This commit is contained in:
Sérgio Ramos 2017-06-27 18:46:29 +01:00 committed by Judit Greskovits
parent 2bc7ef3973
commit d7a8a55d22
1 changed files with 16 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import styled from 'styled-components'; import styled from 'styled-components';
import is from 'styled-is'; import is, { isOr } from 'styled-is';
import titleCase from 'title-case'; import titleCase from 'title-case';
import { import {
@ -16,17 +16,18 @@ import {
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
const STATUSES = [ const STATUSES = [
'CREATED',
'RESTARTING',
'PROVISIONING', 'PROVISIONING',
'READY', 'READY',
'ACTIVE',
'RUNNING', 'RUNNING',
'PAUSED',
'EXITED',
'DELETED',
'STOPPED',
'STOPPING', 'STOPPING',
'FAILED' 'STOPPED',
'OFFLINE',
'DELETED',
'DESTROYED',
'FAILED',
'INCOMPLETE',
'UNKNOWN'
]; ];
const Span = styled.span` const Span = styled.span`
@ -41,48 +42,28 @@ const Dot = styled.div`
border-radius: ${remcalc(3)}; border-radius: ${remcalc(3)};
display: inline-block; display: inline-block;
${is('created')` ${isOr('provisioning', 'ready', 'active')`
background-color: ${props => props.theme.primary}; background-color: ${props => props.theme.primary};
`}; `};
${is('restarting')`
background-color: yellow;
`};
${is('provisioning')`
background-color: yellow;
`};
${is('ready')`
background-color: yellow;
`};
${is('running')` ${is('running')`
background-color: ${props => props.theme.green}; 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('stopping')` ${is('stopping')`
background-color: orange; background-color: orange;
`}; `};
${is('stopped')` ${is('stopped')`
background-color: ${props => props.theme.grey};
`};
${isOr('offline', 'destroyed', 'failed')`
background-color: ${props => props.theme.red}; background-color: ${props => props.theme.red};
`}; `};
${is('failed')` ${isOr('deleted', 'incomplete', 'unknown')`
background-color: ${props => props.theme.red}; background-color: ${props => props.theme.secondaryActive};
`}; `};
`; `;