From 03685e51b5f2e7e687d6df1937355612efe70858 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Fri, 2 Sep 2022 12:39:54 -0700
Subject: [PATCH] Fix Instance Detail StatusLabel to show node_state.

---
 .../InstanceGroup/InstanceDetails/InstanceDetails.js        | 6 +++---
 .../InstanceGroup/InstanceDetails/InstanceDetails.test.js   | 1 +
 .../src/screens/Instances/InstanceDetail/InstanceDetail.js  | 5 +++--
 .../screens/Instances/InstanceDetail/InstanceDetail.test.js | 1 +
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
index f2449a1556..43d9fe6eae 100644
--- a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
@@ -115,7 +115,6 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
   useEffect(() => {
     fetchDetails();
   }, [fetchDetails]);
-
   const {
     error: healthCheckError,
     isLoading: isRunningHealthCheck,
@@ -148,7 +147,6 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
       [instance]
     )
   );
-
   const debounceUpdateInstance = useDebounce(updateInstance, 200);
 
   const handleChangeValue = (value) => {
@@ -200,7 +198,9 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
           <Detail
             label={t`Status`}
             value={
-              <StatusLabel status={healthCheck?.errors ? 'error' : 'healthy'} />
+              instance.node_state ? (
+                <StatusLabel status={instance.node_state} />
+              ) : null
             }
           />
           <Detail
diff --git a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.test.js b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.test.js
index c787c8855d..9c9b2f31e5 100644
--- a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.test.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.test.js
@@ -88,6 +88,7 @@ describe('<InstanceDetails/>', () => {
         enabled: true,
         managed_by_policy: true,
         node_type: 'hybrid',
+        node_state: 'ready',
       },
     });
     InstancesAPI.readHealthCheckDetail.mockResolvedValue({
diff --git a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
index c8d35ac10d..9d3e081f1b 100644
--- a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
+++ b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
@@ -113,7 +113,6 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
       setBreadcrumb(instance);
     }
   }, [instance, setBreadcrumb]);
-
   const {
     error: healthCheckError,
     isLoading: isRunningHealthCheck,
@@ -186,7 +185,9 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
         <Detail
           label={t`Status`}
           value={
-            <StatusLabel status={healthCheck?.errors ? 'error' : 'healthy'} />
+            instance.node_state ? (
+              <StatusLabel status={instance.node_state} />
+            ) : null
           }
         />
         <Detail label={t`Node Type`} value={instance.node_type} />
diff --git a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.test.js b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.test.js
index a2bff6d281..019b43a3dd 100644
--- a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.test.js
+++ b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.test.js
@@ -50,6 +50,7 @@ describe('<InstanceDetail/>', () => {
         enabled: true,
         managed_by_policy: true,
         node_type: 'hybrid',
+        node_state: 'ready',
       },
     });
     InstancesAPI.readInstanceGroup.mockResolvedValue({