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

feat(cp-frontend): transitional states as disabled card

Browse Source
This commit is contained in:
Sérgio Ramos 2017-07-27 18:45:44 +01:00
parent 68685284ea
commit 820dcfd728
1 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/cp-frontend/src/components/services/list-item.js
View File

@ -2,6 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
import Status from './status';
import { import {
Card, Card,
CardView, CardView,
@ -15,10 +18,6 @@ import {
Anchor Anchor
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
import Status from './status';
const StyledCardHeader = styled(CardHeader)` const StyledCardHeader = styled(CardHeader)`
position: relative; position: relative;
`; `;
@ -36,7 +35,7 @@ const ServiceListItem = ({
service = {}, service = {},
isChild = false isChild = false
}) => { }) => {
const isServiceActive = service.status === 'ACTIVE'; const isServiceInactive = service.status !== 'ACTIVE';
const children = service.children const children = service.children
? service.children.map(service => ? service.children.map(service =>
@ -57,7 +56,7 @@ const ServiceListItem = ({
</CardTitle> </CardTitle>
: <CardTitle> : <CardTitle>
<TitleInnerContainer> <TitleInnerContainer>
<Anchor secondary to={to}> <Anchor to={to} disabled={isServiceInactive} secondary>
{service.name} {service.name}
</Anchor> </Anchor>
</TitleInnerContainer> </TitleInnerContainer>
@ -81,10 +80,6 @@ const ServiceListItem = ({
) )
: service.instances.length; : service.instances.length;
const options = isServiceActive
? <CardOptions onClick={handleCardOptionsClick} />
: null;
const header = !isChild const header = !isChild
? <StyledCardHeader> ? <StyledCardHeader>
{title} {title}
@ -95,26 +90,28 @@ const ServiceListItem = ({
label={`${instancesCount} ${instancesCount > 1 label={`${instancesCount} ${instancesCount > 1
? 'instances' ? 'instances'
: 'instance'}`} : 'instance'}`}
color="light" color={isServiceInactive ? 'disabled' : 'light'}
/> />
</CardDescription> </CardDescription>
{options} <CardOptions onClick={handleCardOptionsClick} />
</StyledCardHeader> </StyledCardHeader>
: null; : null;
const healthyInfo = service.instancesHealthy const healthyInfo = isServiceInactive
? <CardInfo ? null
icon={<HealthyIcon />} : service.instancesHealthy
iconPosition="left" ? <CardInfo
label="Healthy" icon={<HealthyIcon />}
color="dark" iconPosition="left"
/> label="Healthy"
: <CardInfo color="dark"
icon={<UnhealthyIcon />} />
iconPosition="left" : <CardInfo
label="Unhealthy" icon={<UnhealthyIcon />}
color="dark" iconPosition="left"
/>; label="Unhealthy"
color="dark"
/>;
const view = children const view = children
? <CardGroupView> ? <CardGroupView>
@ -132,6 +129,7 @@ const ServiceListItem = ({
return ( return (
<Card <Card
collapsed={service.collapsed} collapsed={service.collapsed}
disabled={isServiceInactive}
flat={isChild} flat={isChild}
headed={!isChild} headed={!isChild}
key={service.id} key={service.id}