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

View File

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

View File

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