From 6afb5bfea479422b205d0fa2b46841fe00a567c4 Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski <contact@patrykkopycinski.com> Date: Tue, 2 Jan 2024 21:17:32 +0100 Subject: [PATCH] [sentinel_one] Add technical preview badge to the Host isolation flyout --- .../flyout/back_to_alert_details_link.tsx | 56 +++++++++++++------ .../event_details/flyout/header.tsx | 14 ++++- .../side_panel/event_details/translations.ts | 15 +++++ 3 files changed, 67 insertions(+), 18 deletions(-) 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 ( - <> - <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/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 ? ( - <BackToAlertDetailsLink isolateAction={isolateAction} showAlertDetails={showAlertDetails} /> + <BackToAlertDetailsLink + isolateAction={isolateAction} + showAlertDetails={showAlertDetails} + showExperimentalBadge={isSentinelOneAlert} + /> ) : ( <ExpandableEventTitle eventId={eventId} diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/translations.ts index 3416636f71e17..87f8839adcf54 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/translations.ts +++ b/x-pack/plugins/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', {