[8.x] [Security Solution][Alert details] - improving session view exp…

…erience in expandable flyout (elastic#200270) (elastic#205834) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Alert details] - improving session view experience in expandable flyout (elastic#200270)](elastic#200270)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Philippe Oberti <[email protected]>
kibanamachine · Jan 8, 2025 · a6b07b9 · a6b07b9
1 parent 42ab0ef
commit a6b07b9
Show file tree

Hide file tree

Showing 24 changed files with 1,026 additions and 183 deletions.
diff --git a/...ns/security_solution/public/flyout/document_details/left/components/session_view.test.tsx b/...ns/security_solution/public/flyout/document_details/left/components/session_view.test.tsx
@@ -21,12 +21,12 @@ import {
   ENTRY_LEADER_ENTITY_ID,
   ENTRY_LEADER_START,
 } from '../../shared/constants/field_names';
-import { useSessionPreview } from '../../right/hooks/use_session_preview';
+import { useSessionViewConfig } from '../../shared/hooks/use_session_view_config';
 import { useSourcererDataView } from '../../../../sourcerer/containers';
 import { mockContextValue } from '../../shared/mocks/mock_context';
 import { useLicense } from '../../../../common/hooks/use_license';
 
-jest.mock('../../right/hooks/use_session_preview');
+jest.mock('../../shared/hooks/use_session_view_config');
 jest.mock('../../../../common/hooks/use_license');
 jest.mock('../../../../sourcerer/containers');
 
@@ -80,7 +80,7 @@ const renderSessionView = (contextValue: DocumentDetailsContext = mockContextVal
 
 describe('<SessionView />', () => {
   beforeEach(() => {
-    (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+    (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
     (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
     jest.mocked(useSourcererDataView).mockReturnValue({
       browserFields: {},
@@ -121,7 +121,7 @@ describe('<SessionView />', () => {
 
   it('should render error message and text in header if no sessionConfig', () => {
     (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
-    (useSessionPreview as jest.Mock).mockReturnValue(null);
+    (useSessionViewConfig as jest.Mock).mockReturnValue(null);
 
     const { getByTestId } = renderSessionView();
     expect(getByTestId(SESSION_VIEW_NO_DATA_TEST_ID)).toHaveTextContent(NO_DATA_MESSAGE);

diff --git a/...plugins/security_solution/public/flyout/document_details/left/components/session_view.tsx b/...plugins/security_solution/public/flyout/document_details/left/components/session_view.tsx
@@ -6,27 +6,24 @@
  */
 
 import type { FC } from 'react';
-import React, { useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
-import type { TableId } from '@kbn/securitysolution-data-table';
 import { EuiPanel } from '@elastic/eui';
-import {
-  ANCESTOR_INDEX,
-  ENTRY_LEADER_ENTITY_ID,
-  ENTRY_LEADER_START,
-} from '../../shared/constants/field_names';
-import { getField } from '../../shared/utils';
+import type { Process } from '@kbn/session-view-plugin/common';
+import type { CustomProcess } from '../../session_view/context';
+import { useUserPrivileges } from '../../../../common/components/user_privileges';
 import { SESSION_VIEW_TEST_ID } from './test_ids';
-import { isActiveTimeline } from '../../../../helpers';
 import { useSourcererDataView } from '../../../../sourcerer/containers';
-import { DocumentDetailsPreviewPanelKey } from '../../shared/constants/panel_keys';
+import {
+  DocumentDetailsPreviewPanelKey,
+  DocumentDetailsSessionViewPanelKey,
+} from '../../shared/constants/panel_keys';
 import { useKibana } from '../../../../common/lib/kibana';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { SourcererScopeName } from '../../../../sourcerer/store/model';
-import { detectionsTimelineIds } from '../../../../timelines/containers/helpers';
 import { ALERT_PREVIEW_BANNER } from '../../preview/constants';
 import { useLicense } from '../../../../common/hooks/use_license';
-import { useSessionPreview } from '../../right/hooks/use_session_preview';
+import { useSessionViewConfig } from '../../shared/hooks/use_session_view_config';
 import { SessionViewNoDataMessage } from '../../shared/components/session_view_no_data_message';
 import { DocumentEventTypes } from '../../../../common/lib/telemetry';
 
@@ -35,46 +32,47 @@ export const SESSION_VIEW_ID = 'session-view';
 /**
  * Session view displayed in the document details expandable flyout left section under the Visualize tab
  */
-export const SessionView: FC = () => {
+export const SessionView: FC = memo(() => {
   const { sessionView, telemetry } = useKibana().services;
-  const { getFieldsData, indexName, scopeId, dataFormattedForFieldBrowser } =
-    useDocumentDetailsContext();
+  const {
+    eventId,
+    indexName,
+    getFieldsData,
+    scopeId,
+    dataFormattedForFieldBrowser,
+    jumpToEntityId,
+    jumpToCursor,
+  } = useDocumentDetailsContext();
+
+  const { canReadPolicyManagement } = useUserPrivileges().endpointPrivileges;
 
-  const sessionViewConfig = useSessionPreview({ getFieldsData, dataFormattedForFieldBrowser });
+  const sessionViewConfig = useSessionViewConfig({ getFieldsData, dataFormattedForFieldBrowser });
   const isEnterprisePlus = useLicense().isEnterprise();
   const isEnabled = sessionViewConfig && isEnterprisePlus;
 
-  const ancestorIndex = getField(getFieldsData(ANCESTOR_INDEX)); // e.g in case of alert, we want to grab it's origin index
-  const sessionEntityId = getField(getFieldsData(ENTRY_LEADER_ENTITY_ID)) || '';
-  const sessionStartTime = getField(getFieldsData(ENTRY_LEADER_START)) || '';
-  const index = ancestorIndex || indexName;
-
-  const sourcererScope = useMemo(() => {
-    if (isActiveTimeline(scopeId)) {
-      return SourcererScopeName.timeline;
-    } else if (detectionsTimelineIds.includes(scopeId as TableId)) {
-      return SourcererScopeName.detections;
-    } else {
-      return SourcererScopeName.default;
-    }
-  }, [scopeId]);
-
-  const { selectedPatterns } = useSourcererDataView(sourcererScope);
+  const { selectedPatterns } = useSourcererDataView(SourcererScopeName.detections);
   const eventDetailsIndex = useMemo(() => selectedPatterns.join(','), [selectedPatterns]);
 
-  const { openPreviewPanel } = useExpandableFlyoutApi();
+  const { openPreviewPanel, closePreviewPanel } = useExpandableFlyoutApi();
   const openAlertDetailsPreview = useCallback(
-    (eventId?: string, onClose?: () => void) => {
-      openPreviewPanel({
-        id: DocumentDetailsPreviewPanelKey,
-        params: {
-          id: eventId,
-          indexName: eventDetailsIndex,
-          scopeId,
-          banner: ALERT_PREVIEW_BANNER,
-          isPreviewMode: true,
-        },
-      });
+    (evtId?: string, onClose?: () => void) => {
+      // In the SessionView component, when the user clicks on the
+      // expand button to open a alert in the preview panel, this actually also selects the row and opens
+      // the detailed panel in preview.
+      // In order to NOT modify the SessionView code, the setTimeout here guarantees that the alert details preview
+      // will be opened in second, so that we have a correct order in the opened preview panels
+      setTimeout(() => {
+        openPreviewPanel({
+          id: DocumentDetailsPreviewPanelKey,
+          params: {
+            id: evtId,
+            indexName: eventDetailsIndex,
+            scopeId,
+            banner: ALERT_PREVIEW_BANNER,
+            isPreviewMode: true,
+          },
+        });
+      }, 100);
       telemetry.reportEvent(DocumentEventTypes.DetailsFlyoutOpened, {
         location: scopeId,
         panel: 'preview',
@@ -83,14 +81,63 @@ export const SessionView: FC = () => {
     [openPreviewPanel, eventDetailsIndex, scopeId, telemetry]
   );
 
+  const openDetailsInPreview = useCallback(
+    (selectedProcess: Process | null) => {
+      // We cannot pass the original Process object sent from the SessionView component
+      // as it contains functions (that should not put into Redux)
+      // and also some recursive properties (that will break rison.encode when updating the URL)
+      const simplifiedSelectedProcess: CustomProcess | null = selectedProcess
+        ? {
+            id: selectedProcess.id,
+            details: selectedProcess.getDetails(),
+            endTime: selectedProcess.getEndTime(),
+          }
+        : null;
+
+      openPreviewPanel({
+        id: DocumentDetailsSessionViewPanelKey,
+        params: {
+          eventId,
+          indexName,
+          selectedProcess: simplifiedSelectedProcess,
+          index: sessionViewConfig?.index,
+          sessionEntityId: sessionViewConfig?.sessionEntityId,
+          sessionStartTime: sessionViewConfig?.sessionStartTime,
+          investigatedAlertId: sessionViewConfig?.investigatedAlertId,
+          scopeId,
+          jumpToEntityId,
+          jumpToCursor,
+        },
+      });
+    },
+    [
+      openPreviewPanel,
+      eventId,
+      indexName,
+      sessionViewConfig?.index,
+      sessionViewConfig?.sessionEntityId,
+      sessionViewConfig?.sessionStartTime,
+      sessionViewConfig?.investigatedAlertId,
+      scopeId,
+      jumpToEntityId,
+      jumpToCursor,
+    ]
+  );
+
+  const closeDetailsInPreview = useCallback(() => closePreviewPanel(), [closePreviewPanel]);
+
   return isEnabled ? (
     <div data-test-subj={SESSION_VIEW_TEST_ID}>
       {sessionView.getSessionView({
-        index,
-        sessionEntityId,
-        sessionStartTime,
+        ...sessionViewConfig,
         isFullScreen: true,
         loadAlertDetails: openAlertDetailsPreview,
+        openDetailsInExpandableFlyout: (selectedProcess: Process | null) =>
+          openDetailsInPreview(selectedProcess),
+        closeDetailsInExpandableFlyout: () => closeDetailsInPreview(),
+        canReadPolicyManagement,
+        resetJumpToEntityId: jumpToEntityId,
+        resetJumpToCursor: jumpToCursor,
       })}
     </div>
   ) : (
@@ -101,6 +148,6 @@ export const SessionView: FC = () => {
       />
     </EuiPanel>
   );
-};
+});
 
 SessionView.displayName = 'SessionView';
diff --git a/...lution/public/flyout/document_details/right/components/session_preview_container.test.tsx b/...lution/public/flyout/document_details/right/components/session_preview_container.test.tsx
@@ -10,7 +10,7 @@ import { TestProviders } from '../../../../common/mock';
 import React from 'react';
 import { DocumentDetailsContext } from '../../shared/context';
 import { SessionPreviewContainer } from './session_preview_container';
-import { useSessionPreview } from '../hooks/use_session_preview';
+import { useSessionViewConfig } from '../../shared/hooks/use_session_view_config';
 import { useLicense } from '../../../../common/hooks/use_license';
 import { SESSION_PREVIEW_TEST_ID } from './test_ids';
 import {
@@ -24,7 +24,7 @@ import { mockContextValue } from '../../shared/mocks/mock_context';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { useInvestigateInTimeline } from '../../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline';
 
-jest.mock('../hooks/use_session_preview');
+jest.mock('../../shared/hooks/use_session_view_config');
 jest.mock('../../../../common/hooks/use_license');
 jest.mock('../../../../common/hooks/use_experimental_features');
 jest.mock(
@@ -84,7 +84,7 @@ describe('SessionPreviewContainer', () => {
   });
 
   it('should render component and link in header', () => {
-    (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+    (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
     (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
 
     const { getByTestId } = renderSessionPreview();
@@ -115,7 +115,7 @@ describe('SessionPreviewContainer', () => {
   });
 
   it('should render error message and text in header if no sessionConfig', () => {
-    (useSessionPreview as jest.Mock).mockReturnValue(null);
+    (useSessionViewConfig as jest.Mock).mockReturnValue(null);
     (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
 
     const { getByTestId, queryByTestId } = renderSessionPreview();
@@ -133,7 +133,7 @@ describe('SessionPreviewContainer', () => {
   });
 
   it('should render upsell message in header if no correct license', () => {
-    (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+    (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
     (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => false });
 
     const { getByTestId, queryByTestId } = renderSessionPreview();
@@ -152,7 +152,7 @@ describe('SessionPreviewContainer', () => {
   });
 
   it('should not render link to session viewer if flyout is open in preview', () => {
-    (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+    (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
     (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
 
     const { getByTestId, queryByTestId } = renderSessionPreview({
@@ -179,7 +179,7 @@ describe('SessionPreviewContainer', () => {
   });
 
   it('should not render link to session viewer if flyout is open in preview mode', () => {
-    (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+    (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
     (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
 
     const { getByTestId, queryByTestId } = renderSessionPreview({
@@ -199,7 +199,7 @@ describe('SessionPreviewContainer', () => {
   describe('when visualization in flyout flag is enabled', () => {
     it('should open left panel vizualization tab when visualization in flyout flag is on', () => {
       mockUseUiSetting.mockReturnValue([true]);
-      (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+      (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
       (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
 
       const { getByTestId } = renderSessionPreview();
@@ -212,7 +212,7 @@ describe('SessionPreviewContainer', () => {
     });
 
     it('should not render link to session viewer if flyout is open in rule preview', () => {
-      (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+      (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
       (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
 
       const { getByTestId, queryByTestId } = renderSessionPreview({
@@ -230,7 +230,7 @@ describe('SessionPreviewContainer', () => {
     });
 
     it('should not render link to session viewer if flyout is open in preview mode', () => {
-      (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+      (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
       (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
 
       const { getByTestId, queryByTestId } = renderSessionPreview({
@@ -253,7 +253,7 @@ describe('SessionPreviewContainer', () => {
       beforeEach(() => {
         jest.clearAllMocks();
         mockUseUiSetting.mockReturnValue([true]);
-        (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+        (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
         (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
         (useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
       });
@@ -304,7 +304,7 @@ describe('SessionPreviewContainer', () => {
       beforeEach(() => {
         jest.clearAllMocks();
         mockUseUiSetting.mockReturnValue([false]);
-        (useSessionPreview as jest.Mock).mockReturnValue(sessionViewConfig);
+        (useSessionViewConfig as jest.Mock).mockReturnValue(sessionViewConfig);
         (useLicense as jest.Mock).mockReturnValue({ isEnterprise: () => true });
         (useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
       });

diff --git a/...ty_solution/public/flyout/document_details/right/components/session_preview_container.tsx b/...ty_solution/public/flyout/document_details/right/components/session_preview_container.tsx
@@ -13,7 +13,7 @@ import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import { ENABLE_VISUALIZATIONS_IN_FLYOUT_SETTING } from '../../../../../common/constants';
 import { useLicense } from '../../../../common/hooks/use_license';
 import { SessionPreview } from './session_preview';
-import { useSessionPreview } from '../hooks/use_session_preview';
+import { useSessionViewConfig } from '../../shared/hooks/use_session_view_config';
 import { useInvestigateInTimeline } from '../../../../detections/components/alerts_table/timeline_actions/use_investigate_in_timeline';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions';
@@ -48,7 +48,7 @@ export const SessionPreviewContainer: FC = () => {
   );
 
   // decide whether to show the session view or not
-  const sessionViewConfig = useSessionPreview({ getFieldsData, dataFormattedForFieldBrowser });
+  const sessionViewConfig = useSessionViewConfig({ getFieldsData, dataFormattedForFieldBrowser });
   const isEnterprisePlus = useLicense().isEnterprise();
   const isEnabled = sessionViewConfig && isEnterprisePlus;
 

diff --git a/...ecurity/plugins/security_solution/public/flyout/document_details/session_view/content.tsx b/...ecurity/plugins/security_solution/public/flyout/document_details/session_view/content.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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, { useMemo } from 'react';
+import type { SessionViewPanelPaths } from '.';
+import type { SessionViewPanelTabType } from './tabs';
+import { FlyoutBody } from '../../shared/components/flyout_body';
+
+export interface PanelContentProps {
+  /**
+   * Id of the tab selected in the parent component to display its content
+   */
+  selectedTabId: SessionViewPanelPaths;
+  /**
+   * Tabs display right below the flyout's header
+   */
+  tabs: SessionViewPanelTabType[];
+}
+
+/**
+ * SessionView preview panel content, that renders the process, metadata and alerts tab contents.
+ */
+export const PanelContent: FC<PanelContentProps> = ({ selectedTabId, tabs }) => {
+  const selectedTabContent = useMemo(() => {
+    return tabs.find((tab) => tab.id === selectedTabId)?.content;
+  }, [selectedTabId, tabs]);
+
+  return <FlyoutBody>{selectedTabContent}</FlyoutBody>;
+};
+
+PanelContent.displayName = 'PanelContent';