From 60eaf9e235e3a6dbe36e47d6810c7211b71c3b69 Mon Sep 17 00:00:00 2001
From: Kersom <9053044+nixocio@users.noreply.github.com>
Date: Tue, 7 Jun 2022 16:27:46 -0400
Subject: [PATCH] Provide feedback when a health check is being performed
 (#12330)

Provide feedback when a health check is being performed
---
 .../HealthCheckButton/HealthCheckButton.js           |  4 ++--
 .../InstanceGroup/InstanceDetails/InstanceDetails.js | 12 +++++++++---
 .../Instances/InstanceDetail/InstanceDetail.js       | 12 +++++++++---
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/awx/ui/src/components/HealthCheckButton/HealthCheckButton.js b/awx/ui/src/components/HealthCheckButton/HealthCheckButton.js
index e13cb45277..034f94d83b 100644
--- a/awx/ui/src/components/HealthCheckButton/HealthCheckButton.js
+++ b/awx/ui/src/components/HealthCheckButton/HealthCheckButton.js
@@ -29,7 +29,7 @@ function HealthCheckButton({ isDisabled, onClick, selectedItems }) {
           onClick={onClick}
           ouiaId="health-check"
         >
-          {t`Health Check`}
+          {t`Run health check`}
         </DropdownItem>
       </Tooltip>
     );
@@ -42,7 +42,7 @@ function HealthCheckButton({ isDisabled, onClick, selectedItems }) {
           variant="secondary"
           ouiaId="health-check"
           onClick={onClick}
-        >{t`Health Check`}</Button>
+        >{t`Run health check`}</Button>
       </div>
     </Tooltip>
   );
diff --git a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
index 5232e6de2d..f2449a1556 100644
--- a/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js
@@ -116,7 +116,11 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
     fetchDetails();
   }, [fetchDetails]);
 
-  const { error: healthCheckError, request: fetchHealthCheck } = useRequest(
+  const {
+    error: healthCheckError,
+    isLoading: isRunningHealthCheck,
+    request: fetchHealthCheck,
+  } = useRequest(
     useCallback(async () => {
       const { data } = await InstancesAPI.healthCheck(instanceId);
       setHealthCheck(data);
@@ -265,12 +269,14 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
         <CardActionsRow>
           <Tooltip content={t`Run a health check on the instance`}>
             <Button
-              isDisabled={!me.is_superuser}
+              isDisabled={!me.is_superuser || isRunningHealthCheck}
               variant="primary"
               ouiaId="health-check-button"
               onClick={fetchHealthCheck}
+              isLoading={isRunningHealthCheck}
+              spinnerAriaLabel={t`Running health check`}
             >
-              {t`Health Check`}
+              {t`Run health check`}
             </Button>
           </Tooltip>
           {me.is_superuser && instance.node_type !== 'control' && (
diff --git a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
index ddfd8845f8..9338b7c8d2 100644
--- a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
+++ b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
@@ -97,7 +97,11 @@ function InstanceDetail({ setBreadcrumb }) {
     }
   }, [instance, setBreadcrumb]);
 
-  const { error: healthCheckError, request: fetchHealthCheck } = useRequest(
+  const {
+    error: healthCheckError,
+    isLoading: isRunningHealthCheck,
+    request: fetchHealthCheck,
+  } = useRequest(
     useCallback(async () => {
       const { data } = await InstancesAPI.healthCheck(id);
       setHealthCheck(data);
@@ -220,12 +224,14 @@ function InstanceDetail({ setBreadcrumb }) {
         <CardActionsRow>
           <Tooltip content={t`Run a health check on the instance`}>
             <Button
-              isDisabled={!me.is_superuser}
+              isDisabled={!me.is_superuser || isRunningHealthCheck}
               variant="primary"
               ouiaId="health-check-button"
               onClick={fetchHealthCheck}
+              isLoading={isRunningHealthCheck}
+              spinnerAriaLabel={t`Running health check`}
             >
-              {t`Health Check`}
+              {t`Run health check`}
             </Button>
           </Tooltip>
           <InstanceToggle