mirror of
https://github.com/yldio/copilot.git
synced 2024-11-14 15:20:06 +02:00
feat(cp-frontend): don't show options when service is in a transitional state
This commit is contained in:
parent
763bf9ecc8
commit
dab0beedc0
@ -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
|
||||
|
@ -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;
|
||||
|
@ -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,20 +73,29 @@ 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;
|
||||
|
||||
return (
|
||||
<g transform={`translate(${x}, ${y})`}>
|
||||
{nodeShadow}
|
||||
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user