[SentinelOne] Add technical preview badge to the Host isolation flyout (

#174123) ## Summary Add technical preview to the S1 Host isolation flyout <img width="2056" alt="Zrzut ekranu 2024-01-2 o 21 02 35" src="https://github.com/elastic/kibana/assets/5188868/813d3a1a-dbc0-4c36-9c43-55613e983306"> <img width="2056" alt="Zrzut ekranu 2024-01-2 o 21 17 58" src="https://github.com/elastic/kibana/assets/5188868/a863f4dd-1d00-4708-8c4b-c7c8c4dbf0cb"> (cherry picked from commit 8a443a2)
elastic · Jan 12, 2024 · d5eff61 · d5eff61
1 parent dd00a38
commit d5eff61
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 18 deletions.
diff --git a/...ublic/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx b/...ublic/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 (
-    <>
-      <EuiButtonEmpty iconType="arrowLeft" iconSide="left" flush="left" onClick={showAlertDetails}>
-        <EuiText size="xs">
-          <p>{ALERT_DETAILS}</p>
-        </EuiText>
-      </EuiButtonEmpty>
-      <EuiTitle>
-        <h2>{isolateAction === 'isolateHost' ? ISOLATE_HOST : UNISOLATE_HOST}</h2>
-      </EuiTitle>
-    </>
-  );
-};
+}) => (
+  <>
+    <EuiButtonEmpty iconType="arrowLeft" iconSide="left" flush="left" onClick={showAlertDetails}>
+      <EuiText size="xs">
+        <p>{ALERT_DETAILS}</p>
+      </EuiText>
+    </EuiButtonEmpty>
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiTitle>
+          <h2>{isolateAction === 'isolateHost' ? ISOLATE_HOST : UNISOLATE_HOST}</h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        {showExperimentalBadge && (
+          <EuiBetaBadge
+            css={css`
+              display: inline-flex;
+            `}
+            label={TECHNICAL_PREVIEW}
+            size="s"
+            tooltipContent={TECHNICAL_PREVIEW_DESCRIPTION}
+          />
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
 
 const BackToAlertDetailsLink = React.memo(BackToAlertDetailsLinkComponent);
 

diff --git a/.../security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx b/.../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 ? (
-        <BackToAlertDetailsLink isolateAction={isolateAction} showAlertDetails={showAlertDetails} />
+        <BackToAlertDetailsLink
+          isolateAction={isolateAction}
+          showAlertDetails={showAlertDetails}
+          showExperimentalBadge={isSentinelOneAlert}
+        />
       ) : (
         <ExpandableEventTitle
           eventId={eventId}

diff --git a/...ns/security_solution/public/timelines/components/side_panel/event_details/translations.ts b/...ns/security_solution/public/timelines/components/side_panel/event_details/translations.ts
@@ -35,6 +35,21 @@ export const ALERT_DETAILS = i18n.translate(
   }
 );
 
+export const TECHNICAL_PREVIEW = i18n.translate(
+  'xpack.securitySolution.timeline.expandableEvent.technicalPreviewLabel',
+  {
+    defaultMessage: 'Technical Preview',
+  }
+);
+
+export const TECHNICAL_PREVIEW_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.timeline.expandableEvent.technicalPreviewDescription',
+  {
+    defaultMessage:
+      'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
+  }
+);
+
 export const SHARE_ALERT = i18n.translate(
   'xpack.securitySolution.timeline.expandableEvent.shareAlert',
   {