From fd10d83893d94b79cd8664209f6d5b83c11c6699 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Wed, 7 Sep 2022 12:39:32 -0700
Subject: [PATCH] Account for node state of 'unavailable' in the UI.

---
 awx/ui/src/components/StatusIcon/StatusIcon.js   | 1 +
 awx/ui/src/components/StatusIcon/icons.js        | 1 +
 awx/ui/src/components/StatusLabel/StatusLabel.js | 3 +++
 awx/ui/src/screens/TopologyView/constants.js     | 1 +
 awx/ui/src/screens/TopologyView/utils/helpers.js | 5 ++++-
 5 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/awx/ui/src/components/StatusIcon/StatusIcon.js b/awx/ui/src/components/StatusIcon/StatusIcon.js
index d63da75fd6..909e800256 100644
--- a/awx/ui/src/components/StatusIcon/StatusIcon.js
+++ b/awx/ui/src/components/StatusIcon/StatusIcon.js
@@ -27,6 +27,7 @@ const colors = {
   installed: blue,
   provisioning: gray,
   deprovisioning: gray,
+  unavailable: red,
   'provision-fail': red,
   'deprovision-fail': red,
 };
diff --git a/awx/ui/src/components/StatusIcon/icons.js b/awx/ui/src/components/StatusIcon/icons.js
index 01eb1704ba..74b50a31ed 100644
--- a/awx/ui/src/components/StatusIcon/icons.js
+++ b/awx/ui/src/components/StatusIcon/icons.js
@@ -46,6 +46,7 @@ const icons = {
   installed: ClockIcon,
   provisioning: PlusCircleIcon,
   deprovisioning: MinusCircleIcon,
+  unavailable: ExclamationCircleIcon,
   'provision-fail': ExclamationCircleIcon,
   'deprovision-fail': ExclamationCircleIcon,
 };
diff --git a/awx/ui/src/components/StatusLabel/StatusLabel.js b/awx/ui/src/components/StatusLabel/StatusLabel.js
index dc78fd69e6..284e2c8d5f 100644
--- a/awx/ui/src/components/StatusLabel/StatusLabel.js
+++ b/awx/ui/src/components/StatusLabel/StatusLabel.js
@@ -29,6 +29,7 @@ const colors = {
   installed: 'blue',
   provisioning: 'gray',
   deprovisioning: 'gray',
+  unavailable: 'red',
   'provision-fail': 'red',
   'deprovision-fail': 'red',
 };
@@ -57,6 +58,7 @@ export default function StatusLabel({ status, tooltipContent = '', children }) {
     installed: t`Installed`,
     provisioning: t`Provisioning`,
     deprovisioning: t`Deprovisioning`,
+    unavailable: t`Unavailable`,
     'provision-fail': t`Provisioning fail`,
     'deprovision-fail': t`Deprovisioning fail`,
   };
@@ -106,6 +108,7 @@ StatusLabel.propTypes = {
     'installed',
     'provisioning',
     'deprovisioning',
+    'unavailable',
     'provision-fail',
     'deprovision-fail',
   ]).isRequired,
diff --git a/awx/ui/src/screens/TopologyView/constants.js b/awx/ui/src/screens/TopologyView/constants.js
index efff753ae5..1748a94c9e 100644
--- a/awx/ui/src/screens/TopologyView/constants.js
+++ b/awx/ui/src/screens/TopologyView/constants.js
@@ -21,6 +21,7 @@ export const NODE_STATE_COLOR_KEY = {
   ready: '#3E8635',
   'provision-fail': '#C9190B',
   'deprovision-fail': '#C9190B',
+  unavailable: '#C9190B',
   installed: '#0066CC',
   provisioning: '#666',
   deprovisioning: '#666',
diff --git a/awx/ui/src/screens/TopologyView/utils/helpers.js b/awx/ui/src/screens/TopologyView/utils/helpers.js
index 02bff9c3dd..d2d875dc91 100644
--- a/awx/ui/src/screens/TopologyView/utils/helpers.js
+++ b/awx/ui/src/screens/TopologyView/utils/helpers.js
@@ -44,6 +44,7 @@ export function renderLabelIcons(nodeState) {
     const nodeLabelIconMapper = {
       ready: 'checkmark',
       installed: 'clock',
+      unavailable: 'exclaimation',
       'provision-fail': 'exclaimation',
       'deprovision-fail': 'exclaimation',
       provisioning: 'plus',
@@ -60,6 +61,7 @@ export function renderIconPosition(nodeState, bbox) {
     const iconPositionMapper = {
       ready: `translate(${bbox.x - 15}, ${bbox.y + 3}), scale(0.02)`,
       installed: `translate(${bbox.x - 18}, ${bbox.y + 1}), scale(0.03)`,
+      unavailable: `translate(${bbox.x - 9}, ${bbox.y + 3}), scale(0.02)`,
       'provision-fail': `translate(${bbox.x - 9}, ${bbox.y + 3}), scale(0.02)`,
       'deprovision-fail': `translate(${bbox.x - 9}, ${
         bbox.y + 3
@@ -128,7 +130,8 @@ export const generateRandomNodes = (n) => {
       'installed',
       'provision-fail',
       'deprovision-fail',
-    ][getRandomInt(0, 5)];
+      'unavailable',
+    ][getRandomInt(0, 6)];
   }
   for (let i = 0; i < n; i++) {
     const id = i + 1;