diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx index 2ce97cfbce32e..6ae4207a46f78 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx @@ -5,34 +5,58 @@ * 2.0. */ -import { EuiButtonEmpty, EuiText, EuiTitle } from '@elastic/eui'; +import { + EuiBetaBadge, + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiText, + EuiTitle, +} from '@elastic/eui'; +import { css } from '@emotion/react'; import React from 'react'; import { ISOLATE_HOST, UNISOLATE_HOST, } from '../../../../../detections/components/host_isolation/translations'; -import { ALERT_DETAILS } from '../translations'; +import { ALERT_DETAILS, TECHNICAL_PREVIEW, TECHNICAL_PREVIEW_DESCRIPTION } from '../translations'; const BackToAlertDetailsLinkComponent = ({ showAlertDetails, + showExperimentalBadge, isolateAction, }: { showAlertDetails: () => void; + showExperimentalBadge?: boolean; isolateAction: 'isolateHost' | 'unisolateHost'; -}) => { - return ( - <> - - -

{ALERT_DETAILS}

-
-
- -

{isolateAction === 'isolateHost' ? ISOLATE_HOST : UNISOLATE_HOST}

-
- - ); -}; +}) => ( + <> + + +

{ALERT_DETAILS}

+
+
+ + + +

{isolateAction === 'isolateHost' ? ISOLATE_HOST : UNISOLATE_HOST}

+
+
+ + {showExperimentalBadge && ( + + )} + +
+ +); const BackToAlertDetailsLink = React.memo(BackToAlertDetailsLinkComponent); diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx index d5df4304a0894..0d139449b1ca2 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx @@ -6,8 +6,9 @@ */ import { EuiFlyoutHeader } from '@elastic/eui'; -import React from 'react'; +import React, { useMemo } from 'react'; +import { SENTINEL_ONE_AGENT_ID_FIELD } from '../../../../../common/utils/sentinelone_alert_check'; import type { GetFieldsData } from '../../../../../common/hooks/use_get_fields_data'; import { ExpandableEventTitle } from '../expandable_event'; import { BackToAlertDetailsLink } from './back_to_alert_details_link'; @@ -43,10 +44,19 @@ const FlyoutHeaderContentComponent = ({ refetchFlyoutData, getFieldsData, }: FlyoutHeaderComponentProps) => { + const isSentinelOneAlert = useMemo( + () => !!(isAlert && getFieldsData(SENTINEL_ONE_AGENT_ID_FIELD)?.length), + [getFieldsData, isAlert] + ); + return ( <> {isHostIsolationPanelOpen ? ( - + ) : (