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

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

@@ -15,11 +15,7 @@ import {
   Anchor
 } from 'joyent-ui-toolkit';
 
-import {
+import { InstancesIcon, HealthyIcon, UnhealthyIcon } from 'joyent-ui-toolkit';
-  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
+  const options = isServiceActive
-    ? null
+    ? <CardOptions onClick={handleCardOptionsClick} />
-    : <StyledCardHeader>
+    : null;
+
+  const header = !isChild
+    ? <StyledCardHeader>
         {title}
         <CardDescription>
           <CardInfo
@@ -97,8 +98,9 @@ const ServiceListItem = ({
             color="light"
           />
         </CardDescription>
-        <CardOptions onClick={handleCardOptionsClick} />
+        {options}
-      </StyledCardHeader>;
+      </StyledCardHeader>
+    : null;
 
   const healthyInfo = service.instancesHealthy
     ? <CardInfo

packages/cp-frontend/src/containers/services/menu.js

@@ -5,13 +5,7 @@ import remcalc from 'remcalc';
 import unitcalc from 'unitcalc';
 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`
   float: left;

packages/ui-toolkit/src/topology/node/index.js

@@ -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
+  const nodeContent = !children
-    ? data.children.reduce(
+    ? <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
+      ).children;
-    : <GraphNodeContent data={data} />;
 
-  const nodeShadow = data.instancesActive
+  const nodeShadow = instancesActive
     ? <GraphShadowRect
         x={0}
         y={3}
         width={width}
         height={height}
-        consul={data.isConsul}
+        consul={isConsul}
-        active={data.instancesActive}
+        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}
+        consul={isConsul}
-        active={data.instancesActive}
+        active={instancesActive}
-        connected={data.connected}
+        connected={connected}
         {...nodeRectEvents}
       />
       <GraphNodeTitle data={data} onNodeTitleClick={onTitleClick} />
-      <GraphNodeButton
+      {nodeButton}
-        index={index}
-        onButtonClick={onButtonClick}
-        isConsul={data.isConsul}
-        instancesActive={data.instancesActive}
-      />
       {nodeContent}
     </g>
   );