feat(cp-frontend): don't show options when service is in a transitional state

This commit is contained in:
Sérgio Ramos 2017-07-27 17:58:37 +01:00
parent 763bf9ecc8
commit dab0beedc0
3 changed files with 40 additions and 37 deletions

View File

@ -15,11 +15,7 @@ import {
Anchor Anchor
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import { import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
InstancesIcon,
HealthyIcon,
UnhealthyIcon
} from 'joyent-ui-toolkit';
import Status from './status'; import Status from './status';
@ -40,6 +36,8 @@ const ServiceListItem = ({
service = {}, service = {},
isChild = false isChild = false
}) => { }) => {
const isServiceActive = service.status === 'ACTIVE';
const children = service.children const children = service.children
? service.children.map(service => ? service.children.map(service =>
<ServiceListItem <ServiceListItem
@ -83,9 +81,12 @@ const ServiceListItem = ({
) )
: service.instances.length; : service.instances.length;
const header = isChild const options = isServiceActive
? null ? <CardOptions onClick={handleCardOptionsClick} />
: <StyledCardHeader> : null;
const header = !isChild
? <StyledCardHeader>
{title} {title}
<CardDescription> <CardDescription>
<CardInfo <CardInfo
@ -97,8 +98,9 @@ const ServiceListItem = ({
color="light" color="light"
/> />
</CardDescription> </CardDescription>
<CardOptions onClick={handleCardOptionsClick} /> {options}
</StyledCardHeader>; </StyledCardHeader>
: null;
const healthyInfo = service.instancesHealthy const healthyInfo = service.instancesHealthy
? <CardInfo ? <CardInfo

View File

@ -5,13 +5,7 @@ import remcalc from 'remcalc';
import unitcalc from 'unitcalc'; import unitcalc from 'unitcalc';
import { LayoutContainer } from '@components/layout'; import { LayoutContainer } from '@components/layout';
import { import { H2, FormGroup, Toggle, ToggleList, Legend } from 'joyent-ui-toolkit';
H2,
FormGroup,
Toggle,
ToggleList,
Legend
} from 'joyent-ui-toolkit';
const StyledLegend = Legend.extend` const StyledLegend = Legend.extend`
float: left; float: left;

View File

@ -16,10 +16,12 @@ const GraphNode = ({
onQuickActions onQuickActions
}) => { }) => {
const { left, top, width, height } = data.nodeRect; const { left, top, width, height } = data.nodeRect;
const { connected, id, children, instancesActive, isConsul, status } = data;
let x = data.x; let x = data.x;
let y = data.y; let y = data.y;
if (data.connected) {
if (connected) {
x = data.x + left; x = data.x + left;
y = data.y + top; y = data.y + top;
} }
@ -30,7 +32,7 @@ const GraphNode = ({
y: data.y + Constants.buttonRect.y + Constants.buttonRect.height y: data.y + Constants.buttonRect.y + Constants.buttonRect.height
}; };
if (data.connected) { if (connected) {
tooltipPosition.x += left; tooltipPosition.x += left;
tooltipPosition.y += top; tooltipPosition.y += top;
} }
@ -50,18 +52,19 @@ const GraphNode = ({
const onStart = evt => { const onStart = evt => {
evt.preventDefault(); evt.preventDefault();
onDragStart(evt, data.id); onDragStart(evt, id);
}; };
const nodeRectEvents = data.connected const nodeRectEvents = connected
? { ? {
onMouseDown: onStart, onMouseDown: onStart,
onTouchStart: onStart onTouchStart: onStart
} }
: {}; : {};
const nodeContent = data.children const nodeContent = !children
? data.children.reduce( ? <GraphNodeContent data={data} />
: children.reduce(
(acc, d, i) => { (acc, d, i) => {
acc.children.push( acc.children.push(
<GraphNodeContent key={i} child data={d} index={i} y={acc.y} /> <GraphNodeContent key={i} child data={d} index={i} y={acc.y} />
@ -70,20 +73,29 @@ const GraphNode = ({
return acc; return acc;
}, },
{ y: Constants.contentRect.y, children: [] } { y: Constants.contentRect.y, children: [] }
).children ).children;
: <GraphNodeContent data={data} />;
const nodeShadow = data.instancesActive const nodeShadow = instancesActive
? <GraphShadowRect ? <GraphShadowRect
x={0} x={0}
y={3} y={3}
width={width} width={width}
height={height} height={height}
consul={data.isConsul} consul={isConsul}
active={data.instancesActive} active={instancesActive}
/> />
: null; : null;
const nodeButton =
status === 'ACTIVE'
? <GraphNodeButton
index={index}
onButtonClick={onButtonClick}
isConsul={isConsul}
instancesActive={instancesActive}
/>
: null;
return ( return (
<g transform={`translate(${x}, ${y})`}> <g transform={`translate(${x}, ${y})`}>
{nodeShadow} {nodeShadow}
@ -92,18 +104,13 @@ const GraphNode = ({
y={0} y={0}
width={width} width={width}
height={height} height={height}
consul={data.isConsul} consul={isConsul}
active={data.instancesActive} active={instancesActive}
connected={data.connected} connected={connected}
{...nodeRectEvents} {...nodeRectEvents}
/> />
<GraphNodeTitle data={data} onNodeTitleClick={onTitleClick} /> <GraphNodeTitle data={data} onNodeTitleClick={onTitleClick} />
<GraphNodeButton {nodeButton}
index={index}
onButtonClick={onButtonClick}
isConsul={data.isConsul}
instancesActive={data.instancesActive}
/>
{nodeContent} {nodeContent}
</g> </g>
); );