diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx index 6795557f17f1a30..ad86b0f3622347a 100644 --- a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { memo, useMemo } from 'react'; +import React, { memo, useMemo, useRef, useEffect } from 'react'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiTextColor, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { useTestIdGenerator } from '../../../../management/components/hooks/use_test_id_generator'; @@ -28,12 +28,20 @@ export interface EndpointHostIsolationStatusProps { export const EndpointHostIsolationStatus = memo( ({ isIsolated, pendingIsolate = 0, pendingUnIsolate = 0, 'data-test-subj': dataTestSubj }) => { const getTestId = useTestIdGenerator(dataTestSubj); - const isPendingStatuseDisabled = useIsExperimentalFeatureEnabled( + const isPendingStatusDisabled = useIsExperimentalFeatureEnabled( 'disableIsolationUIPendingStatuses' ); + const wasReleasing = useRef(false); + const wasIsolating = useRef(false); + + useEffect(() => { + wasReleasing.current = pendingIsolate === 0 && pendingUnIsolate > 0; + wasIsolating.current = pendingIsolate > 0 && pendingUnIsolate === 0; + }, [pendingIsolate, pendingUnIsolate]); + return useMemo(() => { - if (isPendingStatuseDisabled) { + if (isPendingStatusDisabled) { // If nothing is pending and host is not currently isolated, then render nothing if (!isIsolated) { return null; @@ -49,21 +57,23 @@ export const EndpointHostIsolationStatus = memo - - - ); + // If nothing is pending + if (!(pendingIsolate || pendingUnIsolate)) { + // and host is either releasing and or currently released, then render nothing + if ((!wasIsolating.current && wasReleasing.current) || !isIsolated) { + return null; + } + // else host was isolating or is isolated, then show isolation badge + else if ((!isIsolated && wasIsolating.current && !wasReleasing.current) || isIsolated) { + return ( + + + + ); + } } // If there are multiple types of pending isolation actions, then show count of actions with tooltip that displays breakdown @@ -136,7 +146,7 @@ export const EndpointHostIsolationStatus = memo( { index: ENDPOINT_ACTION_RESPONSES_INDEX, + size: 10000, body: { query: { bool: {