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 ? (
-
+
) : (