[8.x] [Security Solution]Analyzer in flyout Part 1 - add split mode in analyzer and enable visualization tab (#192531)

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -193,6 +193,11 @@ export const allowedExperimentalValues = Object.freeze({
    */
   analyzerDatePickersAndSourcererDisabled: false,
 
+  /**
+   * Enables visualization: session viewer and analyzer in expandable flyout
+   */
+  visualizationInFlyoutEnabled: false,
+
   /**
    * Enables an ability to customize Elastic prebuilt rules.
    *

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -445,7 +445,7 @@ export const mockGlobalState: State = {
     [TableId.test]: EMPTY_RESOLVER,
     [TimelineId.test]: EMPTY_RESOLVER,
     [TimelineId.active]: EMPTY_RESOLVER,
-    flyout: EMPTY_RESOLVER,
+    [`securitySolution-${TableId.test}`]: EMPTY_RESOLVER,
   },
   sourcerer: {
     ...mockSourcererState,

x-pack/plugins/security_solution/public/flyout/document_details/analyzer_panels/index.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 React from 'react';
+import type { FlyoutPanelProps } from '@kbn/expandable-flyout';
+import { FlyoutBody } from '@kbn/security-solution-common';
+import type { DocumentDetailsAnalyzerPanelKey } from '../shared/constants/panel_keys';
+import { DetailsPanel } from '../../../resolver/view/details_panel';
+
+interface AnalyzerPanelProps extends Record<string, unknown> {
+  /**
+   * id to identify the scope of analyzer in redux
+   */
+  resolverComponentInstanceID: string;
+}
+
+export interface AnalyzerPanelExpandableFlyoutProps extends FlyoutPanelProps {
+  key: typeof DocumentDetailsAnalyzerPanelKey;
+  params: AnalyzerPanelProps;
+}
+
+/**
+ * Displays node details panel for analyzer
+ */
+export const AnalyzerPanel: React.FC<AnalyzerPanelProps> = ({ resolverComponentInstanceID }) => {
+  return (
+    <FlyoutBody>
+      <div style={{ marginTop: '-15px' }}>
+        <DetailsPanel resolverComponentInstanceID={resolverComponentInstanceID} />
+      </div>
+    </FlyoutBody>
+  );
+};
+
+AnalyzerPanel.displayName = 'AnalyzerPanel';

x-pack/plugins/security_solution/public/flyout/document_details/left/components/analyze_graph.test.tsx

@@ -8,17 +8,25 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { TableId } from '@kbn/securitysolution-data-table';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { DocumentDetailsContext } from '../../shared/context';
 import { TestProviders } from '../../../../common/mock';
-import { AnalyzeGraph } from './analyze_graph';
+import { AnalyzeGraph, ANALYZER_PREVIEW_BANNER } from './analyze_graph';
 import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
+import { useWhichFlyout } from '../../shared/hooks/use_which_flyout';
+import { mockFlyoutApi } from '../../shared/mocks/mock_flyout_context';
+import { DocumentDetailsAnalyzerPanelKey } from '../../shared/constants/panel_keys';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
   return { ...actual, useLocation: jest.fn().mockReturnValue({ pathname: '' }) };
 });
-
+jest.mock('@kbn/expandable-flyout');
 jest.mock('../../../../resolver/view/use_resolver_query_params_cleaner');
+jest.mock('../../shared/hooks/use_which_flyout');
+const mockUseWhichFlyout = useWhichFlyout as jest.Mock;
+const FLYOUT_KEY = 'securitySolution';
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => {
@@ -31,9 +39,15 @@ jest.mock('react-redux', () => {
 });
 
 describe('<AnalyzeGraph />', () => {
+  beforeEach(() => {
+    mockUseWhichFlyout.mockReturnValue(FLYOUT_KEY);
+    jest.mocked(useExpandableFlyoutApi).mockReturnValue(mockFlyoutApi);
+  });
+
   it('renders analyzer graph correctly', () => {
     const contextValue = {
       eventId: 'eventId',
+      scopeId: TableId.test,
     } as unknown as DocumentDetailsContext;
 
     const wrapper = render(
@@ -45,4 +59,29 @@ describe('<AnalyzeGraph />', () => {
     );
     expect(wrapper.getByTestId(ANALYZER_GRAPH_TEST_ID)).toBeInTheDocument();
   });
+
+  it('clicking view button should open details panel in preview', () => {
+    const contextValue = {
+      eventId: 'eventId',
+      scopeId: TableId.test,
+    } as unknown as DocumentDetailsContext;
+
+    const wrapper = render(
+      <TestProviders>
+        <DocumentDetailsContext.Provider value={contextValue}>
+          <AnalyzeGraph />
+        </DocumentDetailsContext.Provider>
+      </TestProviders>
+    );
+
+    expect(wrapper.getByTestId('resolver:graph-controls:show-panel-button')).toBeInTheDocument();
+    wrapper.getByTestId('resolver:graph-controls:show-panel-button').click();
+    expect(mockFlyoutApi.openPreviewPanel).toBeCalledWith({
+      id: DocumentDetailsAnalyzerPanelKey,
+      params: {
+        resolverComponentInstanceID: `${FLYOUT_KEY}-${TableId.test}`,
+        banner: ANALYZER_PREVIEW_BANNER,
+      },
+    });
+  });
 });

x-pack/plugins/security_solution/public/flyout/document_details/left/components/analyze_graph.tsx

@@ -6,38 +6,62 @@
  */
 
 import type { FC } from 'react';
-import React, { useMemo } from 'react';
-
+import React, { useMemo, useCallback } from 'react';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { i18n } from '@kbn/i18n';
+import { useWhichFlyout } from '../../shared/hooks/use_which_flyout';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
 import { Resolver } from '../../../../resolver/view';
 import { useTimelineDataFilters } from '../../../../timelines/containers/use_timeline_data_filters';
 import { isActiveTimeline } from '../../../../helpers';
+import { DocumentDetailsAnalyzerPanelKey } from '../../shared/constants/panel_keys';
 
 export const ANALYZE_GRAPH_ID = 'analyze_graph';
 
+export const ANALYZER_PREVIEW_BANNER = {
+  title: i18n.translate(
+    'xpack.securitySolution.flyout.left.visualizations.analyzer.panelPreviewTitle',
+    {
+      defaultMessage: 'Preview analyzer panels',
+    }
+  ),
+  backgroundColor: 'warning',
+  textColor: 'warning',
+};
+
 /**
  * Analyzer graph view displayed in the document details expandable flyout left section under the Visualize tab
  */
 export const AnalyzeGraph: FC = () => {
-  const { eventId } = useDocumentDetailsContext();
-  const scopeId = 'flyout'; // Different scope Id to distinguish flyout and data table analyzers
+  const { eventId, scopeId } = useDocumentDetailsContext();
+  const key = useWhichFlyout() ?? 'memory';
   const { from, to, shouldUpdate, selectedPatterns } = useTimelineDataFilters(
     isActiveTimeline(scopeId)
   );
   const filters = useMemo(() => ({ from, to }), [from, to]);
+  const { openPreviewPanel } = useExpandableFlyoutApi();
 
-  // TODO as part of https://github.com/elastic/security-team/issues/7032
-  //  bring back no data message if needed
+  const onClick = useCallback(() => {
+    openPreviewPanel({
+      id: DocumentDetailsAnalyzerPanelKey,
+      params: {
+        resolverComponentInstanceID: `${key}-${scopeId}`,
+        banner: ANALYZER_PREVIEW_BANNER,
+      },
+    });
+  }, [openPreviewPanel, key, scopeId]);
 
   return (
     <div data-test-subj={ANALYZER_GRAPH_TEST_ID}>
       <Resolver
         databaseDocumentID={eventId}
-        resolverComponentInstanceID={scopeId}
+        resolverComponentInstanceID={`${key}-${scopeId}`}
         indices={selectedPatterns}
         shouldUpdate={shouldUpdate}
         filters={filters}
+        isSplitPanel
+        showPanelOnClick={onClick}
       />
     </div>
   );

x-pack/plugins/security_solution/public/flyout/document_details/left/index.tsx

@@ -38,6 +38,10 @@ export const LeftPanel: FC<Partial<DocumentDetailsProps>> = memo(({ path }) => {
     'securitySolutionNotesEnabled'
   );
 
+  const visualizationInFlyoutEnabled = useIsExperimentalFeatureEnabled(
+    'visualizationInFlyoutEnabled'
+  );
+
   const tabsDisplayed = useMemo(() => {
     const tabList =
       eventKind === EventKind.signal
@@ -46,8 +50,11 @@ export const LeftPanel: FC<Partial<DocumentDetailsProps>> = memo(({ path }) => {
     if (securitySolutionNotesEnabled && !isPreview) {
       tabList.push(tabs.notesTab);
     }
+    if (visualizationInFlyoutEnabled && !isPreview) {
+      return [tabs.visualizeTab, ...tabList];
+    }
     return tabList;
-  }, [eventKind, isPreview, securitySolutionNotesEnabled]);
+  }, [eventKind, isPreview, securitySolutionNotesEnabled, visualizationInFlyoutEnabled]);
 
   const selectedTabId = useMemo(() => {
     const defaultTab = tabsDisplayed[0].id;

x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx

@@ -12,14 +12,22 @@ import { useExpandableFlyoutApi, useExpandableFlyoutState } from '@kbn/expandabl
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useDocumentDetailsContext } from '../../shared/context';
-import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys';
+import { useWhichFlyout } from '../../shared/hooks/use_which_flyout';
+import {
+  DocumentDetailsLeftPanelKey,
+  DocumentDetailsAnalyzerPanelKey,
+} from '../../shared/constants/panel_keys';
 import { LeftPanelVisualizeTab } from '..';
 import {
   VISUALIZE_TAB_BUTTON_GROUP_TEST_ID,
   VISUALIZE_TAB_GRAPH_ANALYZER_BUTTON_TEST_ID,
   VISUALIZE_TAB_SESSION_VIEW_BUTTON_TEST_ID,
 } from './test_ids';
-import { ANALYZE_GRAPH_ID, AnalyzeGraph } from '../components/analyze_graph';
+import {
+  ANALYZE_GRAPH_ID,
+  AnalyzeGraph,
+  ANALYZER_PREVIEW_BANNER,
+} from '../components/analyze_graph';
 import { SESSION_VIEW_ID, SessionView } from '../components/session_view';
 import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions';
 import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
@@ -52,11 +60,12 @@ const visualizeButtons: EuiButtonGroupOptionProps[] = [
  */
 export const VisualizeTab = memo(() => {
   const { eventId, indexName, scopeId } = useDocumentDetailsContext();
-  const { openLeftPanel } = useExpandableFlyoutApi();
+  const { openLeftPanel, openPreviewPanel } = useExpandableFlyoutApi();
   const panels = useExpandableFlyoutState();
   const [activeVisualizationId, setActiveVisualizationId] = useState(
     panels.left?.path?.subTab ?? SESSION_VIEW_ID
   );
+  const key = useWhichFlyout() ?? 'memory';
   const { startTransaction } = useStartTransaction();
   const onChangeCompressed = useCallback(
     (optionId: string) => {
@@ -76,8 +85,15 @@ export const VisualizeTab = memo(() => {
           scopeId,
         },
       });
+      openPreviewPanel({
+        id: DocumentDetailsAnalyzerPanelKey,
+        params: {
+          resolverComponentInstanceID: `${key}-${scopeId}`,
+          banner: ANALYZER_PREVIEW_BANNER,
+        },
+      });
     },
-    [startTransaction, eventId, indexName, scopeId, openLeftPanel]
+    [startTransaction, eventId, indexName, scopeId, openLeftPanel, openPreviewPanel, key]
   );
 
   useEffect(() => {