diff --git a/awx/ui/src/components/HealthCheckAlert/HealthCheckAlert.js b/awx/ui/src/components/HealthCheckAlert/HealthCheckAlert.js new file mode 100644 index 000000000000..d10f2c136252 --- /dev/null +++ b/awx/ui/src/components/HealthCheckAlert/HealthCheckAlert.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { t } from '@lingui/macro'; +import { Alert, Button, AlertActionCloseButton } from '@patternfly/react-core'; + +function HealthCheckAlert({ onSetHealthCheckAlert }) { + return ( + onSetHealthCheckAlert(false)} /> + } + title={ + <> + {t`Health check request(s) submitted. Please wait and reload the page.`}{' '} + + + } + /> + ); +} + +export default HealthCheckAlert; diff --git a/awx/ui/src/components/HealthCheckAlert/index.js b/awx/ui/src/components/HealthCheckAlert/index.js new file mode 100644 index 000000000000..038b28f79661 --- /dev/null +++ b/awx/ui/src/components/HealthCheckAlert/index.js @@ -0,0 +1 @@ +export { default } from './HealthCheckAlert'; diff --git a/awx/ui/src/screens/Instances/InstanceList/InstanceList.js b/awx/ui/src/screens/Instances/InstanceList/InstanceList.js index f73fad8c448e..14f4202fc9f7 100644 --- a/awx/ui/src/screens/Instances/InstanceList/InstanceList.js +++ b/awx/ui/src/screens/Instances/InstanceList/InstanceList.js @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { t } from '@lingui/macro'; import { useLocation } from 'react-router-dom'; import 'styled-components/macro'; @@ -23,6 +23,7 @@ import useSelected from 'hooks/useSelected'; import { InstancesAPI, SettingsAPI } from 'api'; import { getQSConfig, parseQueryString } from 'util/qs'; import HealthCheckButton from 'components/HealthCheckButton'; +import HealthCheckAlert from 'components/HealthCheckAlert'; import InstanceListItem from './InstanceListItem'; import RemoveInstanceButton from '../Shared/RemoveInstanceButton'; @@ -35,6 +36,7 @@ const QS_CONFIG = getQSConfig('instance', { function InstanceList() { const location = useLocation(); const { me } = useConfig(); + const [showHealthCheckAlert, setShowHealthCheckAlert] = useState(false); const { result: { instances, count, relatedSearchableKeys, searchableKeys, isK8s }, @@ -83,18 +85,23 @@ function InstanceList() { isLoading: isHealthCheckLoading, } = useRequest( useCallback(async () => { - await Promise.all( + const [...response] = await Promise.all( selected .filter(({ node_type }) => node_type !== 'hop') .map(({ id }) => InstancesAPI.healthCheck(id)) ); - fetchInstances(); - }, [selected, fetchInstances]) + if (response) { + setShowHealthCheckAlert(true); + } + + return response; + }, [selected]) ); const handleHealthCheck = async () => { await fetchHealthCheck(); clearSelected(); }; + const { error, dismissError } = useDismissableError(healthCheckError); const { expanded, isAllExpanded, handleExpand, expandAll } = @@ -115,6 +122,9 @@ function InstanceList() { return ( <> + {showHealthCheckAlert ? ( + + ) : null} handleSelect(instance)} + onSelect={() => { + handleSelect(instance); + }} isSelected={selected.some((row) => row.id === instance.id)} fetchInstances={fetchInstances} rowIndex={index}