From 28f24c8811a50e94f500d029ca88f649b04d706f Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Wed, 24 Aug 2022 15:37:44 -0700
Subject: [PATCH] Represent `enabled` field in Topology View:

- use dotted circles to represent `enabled: false`
- use solid circle stroke to represent `enabled: true`
- excise places where `Unavailable` node state is used in the UI.
---
 awx/ui/src/screens/TopologyView/Legend.js        | 15 ---------------
 awx/ui/src/screens/TopologyView/MeshGraph.js     |  2 +-
 awx/ui/src/screens/TopologyView/constants.js     |  3 ---
 awx/ui/src/screens/TopologyView/utils/helpers.js |  6 ++----
 4 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/awx/ui/src/screens/TopologyView/Legend.js b/awx/ui/src/screens/TopologyView/Legend.js
index b292786a59..c57cba43da 100644
--- a/awx/ui/src/screens/TopologyView/Legend.js
+++ b/awx/ui/src/screens/TopologyView/Legend.js
@@ -19,7 +19,6 @@ import {
   OutlinedClockIcon,
   PlusIcon,
   MinusIcon,
-  ResourcesEmptyIcon,
 } from '@patternfly/react-icons';
 
 const Wrapper = styled.div`
@@ -162,20 +161,6 @@ function Legend() {
           </DescriptionListTerm>
           <DescriptionListDescription>{t`Deprovisioning`}</DescriptionListDescription>
         </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>
-            <Button
-              icon={
-                <ResourcesEmptyIcon
-                  style={{ fill: 'white', marginLeft: '3px', marginTop: '3px' }}
-                />
-              }
-              isSmall
-              style={{ backgroundColor: '#F0AB00' }}
-            />
-          </DescriptionListTerm>
-          <DescriptionListDescription>{t`Unavailable`}</DescriptionListDescription>
-        </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button
diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index 4ba538798f..f520a75b69 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -58,7 +58,6 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
       const { data: instanceGroupsData } = await InstancesAPI.readInstanceGroup(
         selectedNode.id
       );
-
       return {
         instance: instanceData,
         instanceGroups: instanceGroupsData,
@@ -206,6 +205,7 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
         .attr('class', (d) => d.node_type)
         .attr('class', (d) => `id-${d.id}`)
         .attr('fill', DEFAULT_NODE_COLOR)
+        .attr('stroke-dasharray', (d) => (d.enabled ? null : 3))
         .attr('stroke', DEFAULT_NODE_STROKE_COLOR);
 
       // node type labels
diff --git a/awx/ui/src/screens/TopologyView/constants.js b/awx/ui/src/screens/TopologyView/constants.js
index e3ad1445ae..efff753ae5 100644
--- a/awx/ui/src/screens/TopologyView/constants.js
+++ b/awx/ui/src/screens/TopologyView/constants.js
@@ -18,7 +18,6 @@ export const DEFAULT_FONT_SIZE = '12px';
 export const LABEL_TEXT_MAX_LENGTH = 15;
 export const MARGIN = 15;
 export const NODE_STATE_COLOR_KEY = {
-  unavailable: '#F0AB00',
   ready: '#3E8635',
   'provision-fail': '#C9190B',
   'deprovision-fail': '#C9190B',
@@ -44,6 +43,4 @@ export const ICONS = {
   minus:
     'M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z',
   plus: 'M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z',
-  empty:
-    'M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.7,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 L512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.3 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 L512.1,0 Z',
 };
diff --git a/awx/ui/src/screens/TopologyView/utils/helpers.js b/awx/ui/src/screens/TopologyView/utils/helpers.js
index 3d96692765..02bff9c3dd 100644
--- a/awx/ui/src/screens/TopologyView/utils/helpers.js
+++ b/awx/ui/src/screens/TopologyView/utils/helpers.js
@@ -42,7 +42,6 @@ export function renderNodeIcon(selectedNode) {
 export function renderLabelIcons(nodeState) {
   if (nodeState) {
     const nodeLabelIconMapper = {
-      unavailable: 'empty',
       ready: 'checkmark',
       installed: 'clock',
       'provision-fail': 'exclaimation',
@@ -59,7 +58,6 @@ export function renderLabelIcons(nodeState) {
 export function renderIconPosition(nodeState, bbox) {
   if (nodeState) {
     const iconPositionMapper = {
-      unavailable: `translate(${bbox.x - 12}, ${bbox.y + 3}), scale(0.01)`,
       ready: `translate(${bbox.x - 15}, ${bbox.y + 3}), scale(0.02)`,
       installed: `translate(${bbox.x - 18}, ${bbox.y + 1}), scale(0.03)`,
       'provision-fail': `translate(${bbox.x - 9}, ${bbox.y + 3}), scale(0.02)`,
@@ -128,10 +126,9 @@ export const generateRandomNodes = (n) => {
       'provisioning',
       'deprovisioning',
       'installed',
-      'unavailable',
       'provision-fail',
       'deprovision-fail',
-    ][getRandomInt(0, 6)];
+    ][getRandomInt(0, 5)];
   }
   for (let i = 0; i < n; i++) {
     const id = i + 1;
@@ -142,6 +139,7 @@ export const generateRandomNodes = (n) => {
       hostname: `node-${id}`,
       node_type: randomType,
       node_state: randomState,
+      enabled: Math.random() < 0.5,
     };
     nodes.push(node);
   }