mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-12-29 05:10:05 +02:00
Code Issues 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 remcalc from 'remcalc';
import styled from 'styled-components';
import is from 'styled-is';
import is, { isOr } from 'styled-is';
import titleCase from 'title-case';
import {
@ -16,17 +16,18 @@ import {
} from 'joyent-ui-toolkit';
const STATUSES = [
'CREATED',
'RESTARTING',
'PROVISIONING',
'READY',
'ACTIVE',
'RUNNING',
'PAUSED',
'EXITED',
'DELETED',
'STOPPED',
'STOPPING',
'FAILED'
'STOPPED',
'OFFLINE',
'DELETED',
'DESTROYED',
'FAILED',
'INCOMPLETE',
'UNKNOWN'
];
const Span = styled.span`
@ -41,48 +42,28 @@ const Dot = styled.div`
border-radius: ${remcalc(3)};
display: inline-block;
${is('created')`
${isOr('provisioning', 'ready', 'active')`
background-color: ${props => props.theme.primary};
`};
${is('restarting')`
background-color: yellow;
`};
${is('provisioning')`
background-color: yellow;
`};
${is('ready')`
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('stopping')`
background-color: orange;
`};
${is('stopped')`
background-color: ${props => props.theme.grey};
`};
${isOr('offline', 'destroyed', 'failed')`
background-color: ${props => props.theme.red};
`};
${is('failed')`
background-color: ${props => props.theme.red};
${isOr('deleted', 'incomplete', 'unknown')`
background-color: ${props => props.theme.secondaryActive};
`};
`;