mirror of
https://github.com/yldio/copilot.git
synced 2024-11-14 15:20:06 +02:00
feat(cp-frontend): transitional states as disabled card
This commit is contained in:
parent
68685284ea
commit
820dcfd728
@ -2,6 +2,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
|
||||
import Status from './status';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardView,
|
||||
@ -15,10 +18,6 @@ import {
|
||||
Anchor
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
|
||||
|
||||
import Status from './status';
|
||||
|
||||
const StyledCardHeader = styled(CardHeader)`
|
||||
position: relative;
|
||||
`;
|
||||
@ -36,7 +35,7 @@ const ServiceListItem = ({
|
||||
service = {},
|
||||
isChild = false
|
||||
}) => {
|
||||
const isServiceActive = service.status === 'ACTIVE';
|
||||
const isServiceInactive = service.status !== 'ACTIVE';
|
||||
|
||||
const children = service.children
|
||||
? service.children.map(service =>
|
||||
@ -57,7 +56,7 @@ const ServiceListItem = ({
|
||||
</CardTitle>
|
||||
: <CardTitle>
|
||||
<TitleInnerContainer>
|
||||
<Anchor secondary to={to}>
|
||||
<Anchor to={to} disabled={isServiceInactive} secondary>
|
||||
{service.name}
|
||||
</Anchor>
|
||||
</TitleInnerContainer>
|
||||
@ -81,10 +80,6 @@ const ServiceListItem = ({
|
||||
)
|
||||
: service.instances.length;
|
||||
|
||||
const options = isServiceActive
|
||||
? <CardOptions onClick={handleCardOptionsClick} />
|
||||
: null;
|
||||
|
||||
const header = !isChild
|
||||
? <StyledCardHeader>
|
||||
{title}
|
||||
@ -95,26 +90,28 @@ const ServiceListItem = ({
|
||||
label={`${instancesCount} ${instancesCount > 1
|
||||
? 'instances'
|
||||
: 'instance'}`}
|
||||
color="light"
|
||||
color={isServiceInactive ? 'disabled' : 'light'}
|
||||
/>
|
||||
</CardDescription>
|
||||
{options}
|
||||
<CardOptions onClick={handleCardOptionsClick} />
|
||||
</StyledCardHeader>
|
||||
: null;
|
||||
|
||||
const healthyInfo = service.instancesHealthy
|
||||
? <CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
: <CardInfo
|
||||
icon={<UnhealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Unhealthy"
|
||||
color="dark"
|
||||
/>;
|
||||
const healthyInfo = isServiceInactive
|
||||
? null
|
||||
: service.instancesHealthy
|
||||
? <CardInfo
|
||||
icon={<HealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Healthy"
|
||||
color="dark"
|
||||
/>
|
||||
: <CardInfo
|
||||
icon={<UnhealthyIcon />}
|
||||
iconPosition="left"
|
||||
label="Unhealthy"
|
||||
color="dark"
|
||||
/>;
|
||||
|
||||
const view = children
|
||||
? <CardGroupView>
|
||||
@ -132,6 +129,7 @@ const ServiceListItem = ({
|
||||
return (
|
||||
<Card
|
||||
collapsed={service.collapsed}
|
||||
disabled={isServiceInactive}
|
||||
flat={isChild}
|
||||
headed={!isChild}
|
||||
key={service.id}
|
||||
|
Loading…
Reference in New Issue
Block a user