Provide feedback when a health check is being performed (#12330)

Provide feedback when a health check is being performed
This commit is contained in:
Kersom
2022-06-07 16:27:46 -04:00
committed by GitHub
parent f5102ed24d
commit 60eaf9e235
3 changed files with 20 additions and 8 deletions

View File

@@ -29,7 +29,7 @@ function HealthCheckButton({ isDisabled, onClick, selectedItems }) {
onClick={onClick} onClick={onClick}
ouiaId="health-check" ouiaId="health-check"
> >
{t`Health Check`} {t`Run health check`}
</DropdownItem> </DropdownItem>
</Tooltip> </Tooltip>
); );
@@ -42,7 +42,7 @@ function HealthCheckButton({ isDisabled, onClick, selectedItems }) {
variant="secondary" variant="secondary"
ouiaId="health-check" ouiaId="health-check"
onClick={onClick} onClick={onClick}
>{t`Health Check`}</Button> >{t`Run health check`}</Button>
</div> </div>
</Tooltip> </Tooltip>
); );

View File

@@ -116,7 +116,11 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
fetchDetails(); fetchDetails();
}, [fetchDetails]); }, [fetchDetails]);
const { error: healthCheckError, request: fetchHealthCheck } = useRequest( const {
error: healthCheckError,
isLoading: isRunningHealthCheck,
request: fetchHealthCheck,
} = useRequest(
useCallback(async () => { useCallback(async () => {
const { data } = await InstancesAPI.healthCheck(instanceId); const { data } = await InstancesAPI.healthCheck(instanceId);
setHealthCheck(data); setHealthCheck(data);
@@ -265,12 +269,14 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
<CardActionsRow> <CardActionsRow>
<Tooltip content={t`Run a health check on the instance`}> <Tooltip content={t`Run a health check on the instance`}>
<Button <Button
isDisabled={!me.is_superuser} isDisabled={!me.is_superuser || isRunningHealthCheck}
variant="primary" variant="primary"
ouiaId="health-check-button" ouiaId="health-check-button"
onClick={fetchHealthCheck} onClick={fetchHealthCheck}
isLoading={isRunningHealthCheck}
spinnerAriaLabel={t`Running health check`}
> >
{t`Health Check`} {t`Run health check`}
</Button> </Button>
</Tooltip> </Tooltip>
{me.is_superuser && instance.node_type !== 'control' && ( {me.is_superuser && instance.node_type !== 'control' && (

View File

@@ -97,7 +97,11 @@ function InstanceDetail({ setBreadcrumb }) {
} }
}, [instance, setBreadcrumb]); }, [instance, setBreadcrumb]);
const { error: healthCheckError, request: fetchHealthCheck } = useRequest( const {
error: healthCheckError,
isLoading: isRunningHealthCheck,
request: fetchHealthCheck,
} = useRequest(
useCallback(async () => { useCallback(async () => {
const { data } = await InstancesAPI.healthCheck(id); const { data } = await InstancesAPI.healthCheck(id);
setHealthCheck(data); setHealthCheck(data);
@@ -220,12 +224,14 @@ function InstanceDetail({ setBreadcrumb }) {
<CardActionsRow> <CardActionsRow>
<Tooltip content={t`Run a health check on the instance`}> <Tooltip content={t`Run a health check on the instance`}>
<Button <Button
isDisabled={!me.is_superuser} isDisabled={!me.is_superuser || isRunningHealthCheck}
variant="primary" variant="primary"
ouiaId="health-check-button" ouiaId="health-check-button"
onClick={fetchHealthCheck} onClick={fetchHealthCheck}
isLoading={isRunningHealthCheck}
spinnerAriaLabel={t`Running health check`}
> >
{t`Health Check`} {t`Run health check`}
</Button> </Button>
</Tooltip> </Tooltip>
<InstanceToggle <InstanceToggle