From ed48990395c639a49370a829345d22d89f24522f Mon Sep 17 00:00:00 2001 From: Philippe Oberti Date: Thu, 7 Sep 2023 16:49:10 +0200 Subject: [PATCH] [Security Solution] expandable flyout - add isolate host panel (#165933) ## Summary This new expandable flyout is going GA in `8.10`. One feature isn't working: the `isolate host` from the `take action` button in the right section footer. The code was added in this [PR](https://github.com/elastic/kibana/pull/153903) but isolate host testing must have been overlooked. This PR adds the functionality to the new expandable flyout, by creating a new panel, displayed similarly to the right panel is today. https://github.com/elastic/kibana/assets/17276605/abd99323-616b-4474-a21c-29ce3c56dd1a https://github.com/elastic/kibana/pull/165933 ### TODO - [ ] verify logic - [ ] add unit tests - [ ] add Cypress tests ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Ashokaditya --- .../security_solution/public/flyout/index.tsx | 11 ++ .../public/flyout/isolate_host/content.tsx | 62 +++++++++ .../public/flyout/isolate_host/context.tsx | 122 ++++++++++++++++++ .../public/flyout/isolate_host/header.tsx | 31 +++++ .../public/flyout/isolate_host/index.tsx | 37 ++++++ .../public/flyout/isolate_host/test_ids.ts | 8 ++ .../flyout/isolate_host/translations.ts | 22 ++++ .../public/flyout/right/footer.tsx | 38 ++++-- 8 files changed, 322 insertions(+), 9 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/flyout/isolate_host/content.tsx create mode 100644 x-pack/plugins/security_solution/public/flyout/isolate_host/context.tsx create mode 100644 x-pack/plugins/security_solution/public/flyout/isolate_host/header.tsx create mode 100644 x-pack/plugins/security_solution/public/flyout/isolate_host/index.tsx create mode 100644 x-pack/plugins/security_solution/public/flyout/isolate_host/test_ids.ts create mode 100644 x-pack/plugins/security_solution/public/flyout/isolate_host/translations.ts diff --git a/x-pack/plugins/security_solution/public/flyout/index.tsx b/x-pack/plugins/security_solution/public/flyout/index.tsx index 922c7e55219e0..c5da39105d929 100644 --- a/x-pack/plugins/security_solution/public/flyout/index.tsx +++ b/x-pack/plugins/security_solution/public/flyout/index.tsx @@ -11,6 +11,9 @@ import { type ExpandableFlyoutProps, ExpandableFlyoutProvider, } from '@kbn/expandable-flyout'; +import type { IsolateHostPanelProps } from './isolate_host'; +import { IsolateHostPanel, IsolateHostPanelKey } from './isolate_host'; +import { IsolateHostPanelProvider } from './isolate_host/context'; import type { RightPanelProps } from './right'; import { RightPanel, RightPanelKey } from './right'; import { RightPanelProvider } from './right/context'; @@ -54,6 +57,14 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels'] ), }, + { + key: IsolateHostPanelKey, + component: (props) => ( + + + + ), + }, ]; const OuterProviders: FC = ({ children }) => { diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/content.tsx b/x-pack/plugins/security_solution/public/flyout/isolate_host/content.tsx new file mode 100644 index 0000000000000..7f3671cc60805 --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/isolate_host/content.tsx @@ -0,0 +1,62 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import type { FC } from 'react'; +import React, { useCallback } from 'react'; +import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; +import { EuiPanel } from '@elastic/eui'; +import { RightPanelKey } from '../right'; +import { useBasicDataFromDetailsData } from '../../timelines/components/side_panel/event_details/helpers'; +import { EndpointIsolateSuccess } from '../../common/components/endpoint/host_isolation'; +import { useHostIsolationTools } from '../../timelines/components/side_panel/event_details/use_host_isolation_tools'; +import { useIsolateHostPanelContext } from './context'; +import { HostIsolationPanel } from '../../detections/components/host_isolation'; + +/** + * Document details expandable flyout section content for the isolate host component, displaying the form or the success banner + */ +export const PanelContent: FC = () => { + const { openRightPanel } = useExpandableFlyoutContext(); + const { dataFormattedForFieldBrowser, eventId, scopeId, indexName, isolateAction } = + useIsolateHostPanelContext(); + + const { isIsolateActionSuccessBannerVisible, handleIsolationActionSuccess } = + useHostIsolationTools(); + + const { alertId, hostName } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser); + + const showAlertDetails = useCallback( + () => + openRightPanel({ + id: RightPanelKey, + params: { + id: eventId, + indexName, + scopeId, + }, + }), + [eventId, indexName, scopeId, openRightPanel] + ); + + return ( + + {isIsolateActionSuccessBannerVisible && ( + + )} + + + ); +}; diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/context.tsx b/x-pack/plugins/security_solution/public/flyout/isolate_host/context.tsx new file mode 100644 index 0000000000000..6451437646a53 --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/isolate_host/context.tsx @@ -0,0 +1,122 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import type { TimelineEventsDetailsItem } from '@kbn/timelines-plugin/common'; +import { css } from '@emotion/react'; +import React, { createContext, memo, useContext, useMemo } from 'react'; +import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; + +import { useTimelineEventsDetails } from '../../timelines/containers/details'; +import { getAlertIndexAlias } from '../../timelines/components/side_panel/event_details/helpers'; +import { useSpaceId } from '../../common/hooks/use_space_id'; +import { useRouteSpy } from '../../common/utils/route/use_route_spy'; +import { SecurityPageName } from '../../../common/constants'; +import { SourcererScopeName } from '../../common/store/sourcerer/model'; +import { useSourcererDataView } from '../../common/containers/sourcerer'; +import type { IsolateHostPanelProps } from '.'; + +export interface IsolateHostPanelContext { + /** + * Id of the document + */ + eventId: string; + /** + * Name of the index used in the parent's page + */ + indexName: string; + /** + * Maintain backwards compatibility // TODO remove when possible + */ + scopeId: string; + /** + * An array of field objects with category and value + */ + dataFormattedForFieldBrowser: TimelineEventsDetailsItem[] | null; + /** + * Isolate action, either 'isolateHost' or 'unisolateHost' + */ + isolateAction: 'isolateHost' | 'unisolateHost'; +} + +export const IsolateHostPanelContext = createContext( + undefined +); + +export type IsolateHostPanelProviderProps = { + /** + * React components to render + */ + children: React.ReactNode; +} & Partial; + +export const IsolateHostPanelProvider = memo( + ({ id, indexName, scopeId, isolateAction, children }: IsolateHostPanelProviderProps) => { + const currentSpaceId = useSpaceId(); + // TODO Replace getAlertIndexAlias way to retrieving the eventIndex with the GET /_alias + // https://github.com/elastic/kibana/issues/113063 + const eventIndex = indexName ? getAlertIndexAlias(indexName, currentSpaceId) ?? indexName : ''; + const [{ pageName }] = useRouteSpy(); + const sourcererScope = + pageName === SecurityPageName.detections + ? SourcererScopeName.detections + : SourcererScopeName.default; + const sourcererDataView = useSourcererDataView(sourcererScope); + const [loading, dataFormattedForFieldBrowser] = useTimelineEventsDetails({ + indexName: eventIndex, + eventId: id ?? '', + runtimeMappings: sourcererDataView.runtimeMappings, + skip: !id, + }); + + const contextValue = useMemo( + () => + id && indexName && scopeId && isolateAction + ? { + eventId: id, + indexName, + scopeId, + dataFormattedForFieldBrowser, + isolateAction, + } + : undefined, + [id, indexName, scopeId, dataFormattedForFieldBrowser, isolateAction] + ); + + if (loading) { + return ( + + + + ); + } + + return ( + + {children} + + ); + } +); + +IsolateHostPanelProvider.displayName = 'IsolateHostPanelProvider'; + +export const useIsolateHostPanelContext = (): IsolateHostPanelContext => { + const contextValue = useContext(IsolateHostPanelContext); + + if (!contextValue) { + throw new Error( + 'IsolateHostPanelContext can only be used within IsolateHostPanelContext provider' + ); + } + + return contextValue; +}; diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/header.tsx b/x-pack/plugins/security_solution/public/flyout/isolate_host/header.tsx new file mode 100644 index 0000000000000..168175878d802 --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/isolate_host/header.tsx @@ -0,0 +1,31 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiFlyoutHeader, EuiTitle } from '@elastic/eui'; +import type { FC } from 'react'; +import React from 'react'; +import { useIsolateHostPanelContext } from './context'; +import { FLYOUT_HEADER_TITLE_TEST_ID } from './test_ids'; +import { PANEL_HEADER_ISOLATE_TITLE, PANEL_HEADER_RELEASE_TITLE } from './translations'; + +/** + * Document details expandable right section header for the isolate host panel + */ +export const PanelHeader: FC = () => { + const { isolateAction } = useIsolateHostPanelContext(); + + const title = + isolateAction === 'isolateHost' ? PANEL_HEADER_ISOLATE_TITLE : PANEL_HEADER_RELEASE_TITLE; + + return ( + + +

{title}

+ + + ); +}; diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/index.tsx b/x-pack/plugins/security_solution/public/flyout/isolate_host/index.tsx new file mode 100644 index 0000000000000..ff02d7b78a115 --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/isolate_host/index.tsx @@ -0,0 +1,37 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import type { FC } from 'react'; +import React from 'react'; +import type { FlyoutPanelProps } from '@kbn/expandable-flyout'; +import { PanelContent } from './content'; +import { PanelHeader } from './header'; + +export const IsolateHostPanelKey: IsolateHostPanelProps['key'] = 'document-details-isolate-host'; + +export interface IsolateHostPanelProps extends FlyoutPanelProps { + key: 'document-details-isolate-host'; + params?: { + id: string; + indexName: string; + scopeId: string; + isolateAction: 'isolateHost' | 'unisolateHost' | undefined; + }; +} + +/** + * Panel to be displayed right section in the document details expandable flyout when isolate host is clicked in the + * take action button + */ +export const IsolateHostPanel: FC> = () => { + return ( + <> + + + + ); +}; diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/test_ids.ts b/x-pack/plugins/security_solution/public/flyout/isolate_host/test_ids.ts new file mode 100644 index 0000000000000..a40891c2c3d63 --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/isolate_host/test_ids.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export const FLYOUT_HEADER_TITLE_TEST_ID = 'securitySolutionDocumentDetailsFlyoutHeaderTitle'; diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/translations.ts b/x-pack/plugins/security_solution/public/flyout/isolate_host/translations.ts new file mode 100644 index 0000000000000..84ec8d62c09de --- /dev/null +++ b/x-pack/plugins/security_solution/public/flyout/isolate_host/translations.ts @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { i18n } from '@kbn/i18n'; + +export const PANEL_HEADER_ISOLATE_TITLE = i18n.translate( + 'xpack.securitySolution.flyout.documentDetails.isolateHostPanelHeaderIsolateTitle', + { + defaultMessage: `Isolate host`, + } +); + +export const PANEL_HEADER_RELEASE_TITLE = i18n.translate( + 'xpack.securitySolution.flyout.documentDetails.isolateHostPanelHeaderReleaseTitle', + { + defaultMessage: `Release host`, + } +); diff --git a/x-pack/plugins/security_solution/public/flyout/right/footer.tsx b/x-pack/plugins/security_solution/public/flyout/right/footer.tsx index d0980141ebfcc..b411470ee386f 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/footer.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/footer.tsx @@ -6,7 +6,7 @@ */ import type { FC } from 'react'; -import React, { memo } from 'react'; +import React, { useCallback } from 'react'; import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; import { FlyoutFooter } from '../../timelines/components/side_panel/event_details/flyout'; import { useRightPanelContext } from './context'; @@ -15,13 +15,35 @@ import { useHostIsolationTools } from '../../timelines/components/side_panel/eve /** * */ -export const PanelFooter: FC = memo(() => { - const { closeFlyout } = useExpandableFlyoutContext(); - const { dataFormattedForFieldBrowser, dataAsNestedObject, refetchFlyoutData, scopeId } = - useRightPanelContext(); +export const PanelFooter: FC = () => { + const { closeFlyout, openRightPanel } = useExpandableFlyoutContext(); + const { + eventId, + indexName, + dataFormattedForFieldBrowser, + dataAsNestedObject, + refetchFlyoutData, + scopeId, + } = useRightPanelContext(); const { isHostIsolationPanelOpen, showHostIsolationPanel } = useHostIsolationTools(); + const showHostIsolationPanelCallback = useCallback( + (action: 'isolateHost' | 'unisolateHost' | undefined) => { + showHostIsolationPanel(action); + openRightPanel({ + id: 'document-details-isolate-host', + params: { + id: eventId, + indexName, + scopeId, + isolateAction: action, + }, + }); + }, + [eventId, indexName, openRightPanel, scopeId, showHostIsolationPanel] + ); + if (!dataFormattedForFieldBrowser || !dataAsNestedObject) { return null; } @@ -34,11 +56,9 @@ export const PanelFooter: FC = memo(() => { isHostIsolationPanelOpen={isHostIsolationPanelOpen} isReadOnly={false} loadingEventDetails={false} - onAddIsolationStatusClick={showHostIsolationPanel} + onAddIsolationStatusClick={showHostIsolationPanelCallback} scopeId={scopeId} refetchFlyoutData={refetchFlyoutData} /> ); -}); - -PanelFooter.displayName = 'PanelFooter'; +};