[Security Solution] Use session view plugin to render session viewer in alerts, events and timeline

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

@@ -182,6 +182,9 @@ export const ENABLE_NEWS_FEED_SETTING = 'securitySolution:enableNewsFeed' as con
 /** This Kibana Advanced Setting enables the warnings for CCS read permissions */
 export const ENABLE_CCS_READ_WARNING_SETTING = 'securitySolution:enableCcsWarning' as const;
 
+/** This Kibana Advanced Setting enables the session view component in the UI */
+export const ENABLE_SESSION_VIEW_PLUGIN = 'securitySolution:enableSessionView' as const;
+
 /** This Kibana Advanced Setting sets the auto refresh interval for the detections all rules table */
 export const DEFAULT_RULES_TABLE_REFRESH_SETTING = 'securitySolution:rulesTableRefresh' as const;
 

x-pack/plugins/security_solution/common/ecs/process/index.ts

@@ -11,6 +11,9 @@ export interface ProcessEcs {
   Ext?: Ext;
   command_line?: string[];
   entity_id?: string[];
+  entry_leader?: ProcessSessionData;
+  session_leader?: ProcessSessionData;
+  group_leader?: ProcessSessionData;
   exit_code?: number[];
   hash?: ProcessHashData;
   parent?: ProcessParentData;
@@ -25,6 +28,12 @@ export interface ProcessEcs {
   working_directory?: string[];
 }
 
+export interface ProcessSessionData {
+  entity_id?: string[];
+  pid?: string[];
+  name?: string[];
+}
+
 export interface ProcessHashData {
   md5?: string[];
   sha1?: string[];

x-pack/plugins/security_solution/common/types/timeline/index.ts

@@ -482,6 +482,7 @@ export enum TimelineTabs {
   notes = 'notes',
   pinned = 'pinned',
   eql = 'eql',
+  session = 'session',
 }
 
 /**

x-pack/plugins/security_solution/kibana.json

@@ -22,6 +22,7 @@
     "licensing",
     "maps",
     "ruleRegistry",
+    "sessionView",
     "taskManager",
     "timelines",
     "triggersActionsUi",

x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx

@@ -22,6 +22,7 @@ import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_fe
 import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 import type { EntityType } from '../../../../../timelines/common';
 import { getDefaultControlColumn } from '../../../timelines/components/timeline/body/control_columns';
+import { ENABLE_SESSION_VIEW_PLUGIN } from '../../../../common/constants';
 
 export interface OwnProps {
   end: string;
@@ -79,8 +80,16 @@ const AlertsTableComponent: React.FC<Props> = ({
 }) => {
   const dispatch = useDispatch();
   const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
-  const { filterManager } = useKibana().services.data.query;
-  const ACTION_BUTTON_COUNT = 4;
+  const {
+    uiSettings,
+    data: {
+      query: { filterManager },
+    },
+  } = useKibana().services;
+
+  const isSessionViewEnabled = uiSettings.get(ENABLE_SESSION_VIEW_PLUGIN);
+
+  const ACTION_BUTTON_COUNT = isSessionViewEnabled ? 5 : 4;
 
   const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
 
@@ -106,7 +115,10 @@ const AlertsTableComponent: React.FC<Props> = ({
     );
   }, [dispatch, filterManager, tGridEnabled, timelineId]);
 
-  const leadingControlColumns = useMemo(() => getDefaultControlColumn(ACTION_BUTTON_COUNT), []);
+  const leadingControlColumns = useMemo(
+    () => getDefaultControlColumn(ACTION_BUTTON_COUNT),
+    [ACTION_BUTTON_COUNT]
+  );
 
   return (
     <StatefulEventsViewer

x-pack/plugins/security_solution/public/common/components/events_tab/events_query_tab_body.tsx

@@ -30,6 +30,8 @@ import { GlobalTimeArgs } from '../../containers/use_global_time';
 import { MatrixHistogramConfigs, MatrixHistogramOption } from '../matrix_histogram/types';
 import { QueryTabBodyProps as UserQueryTabBodyProps } from '../../../users/pages/navigation/types';
 import { QueryTabBodyProps as HostQueryTabBodyProps } from '../../../hosts/pages/navigation/types';
+import { ENABLE_SESSION_VIEW_PLUGIN } from '../../../../common/constants';
+import { useKibana } from '../../lib/kibana';
 
 const EVENTS_HISTOGRAM_ID = 'eventsHistogramQuery';
 
@@ -84,7 +86,11 @@ const EventsQueryTabBodyComponent: React.FC<EventsQueryTabBodyComponentProps> =
 }) => {
   const dispatch = useDispatch();
   const { globalFullScreen } = useGlobalFullScreen();
-  const ACTION_BUTTON_COUNT = 4;
+  const { uiSettings } = useKibana().services;
+
+  const isSessionViewEnabled = uiSettings.get(ENABLE_SESSION_VIEW_PLUGIN);
+
+  const ACTION_BUTTON_COUNT = isSessionViewEnabled ? 5 : 4;
   const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
 
   useEffect(() => {
@@ -111,7 +117,10 @@ const EventsQueryTabBodyComponent: React.FC<EventsQueryTabBodyComponentProps> =
     };
   }, [deleteQuery]);
 
-  const leadingControlColumns = useMemo(() => getDefaultControlColumn(ACTION_BUTTON_COUNT), []);
+  const leadingControlColumns = useMemo(
+    () => getDefaultControlColumn(ACTION_BUTTON_COUNT),
+    [ACTION_BUTTON_COUNT]
+  );
 
   return (
     <>

x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx

@@ -9,9 +9,8 @@ import React from 'react';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 
 import '../../mock/match_media';
-import { waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { TestProviders } from '../../mock';
-import { useMountAppended } from '../../utils/use_mount_appended';
 
 import { mockEventViewerResponse } from './mock';
 import { StatefulEventsViewer } from '.';
@@ -61,37 +60,27 @@ const testProps = {
   start: from,
 };
 describe('StatefulEventsViewer', () => {
-  const mount = useMountAppended();
-
   (useTimelineEvents as jest.Mock).mockReturnValue([false, mockEventViewerResponse]);
 
   test('it renders the events viewer', async () => {
-    const wrapper = mount(
+    const wrapper = render(
       <TestProviders>
         <StatefulEventsViewer {...testProps} />
       </TestProviders>
     );
 
-    await waitFor(() => {
-      wrapper.update();
-
-      expect(wrapper.text()).toMatchInlineSnapshot(`"hello grid"`);
-    });
+    expect(wrapper.getByText('hello grid')).toBeTruthy();
   });
 
   // InspectButtonContainer controls displaying InspectButton components
   test('it renders InspectButtonContainer', async () => {
-    const wrapper = mount(
+    const wrapper = render(
       <TestProviders>
         <StatefulEventsViewer {...testProps} />
       </TestProviders>
     );
 
-    await waitFor(() => {
-      wrapper.update();
-
-      expect(wrapper.find(`InspectButtonContainer`).exists()).toBe(true);
-    });
+    expect(wrapper.findByTestId(`InspectButtonContainer`)).toBeTruthy();
   });
 
   test('it closes field editor when unmounted', async () => {
@@ -101,14 +90,14 @@ describe('StatefulEventsViewer', () => {
       return {};
     });
 
-    const wrapper = mount(
+    const { unmount } = render(
       <TestProviders>
         <StatefulEventsViewer {...testProps} />
       </TestProviders>
     );
     expect(mockCloseEditor).not.toHaveBeenCalled();
 
-    wrapper.unmount();
+    unmount();
     expect(mockCloseEditor).toHaveBeenCalled();
   });
 });

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -11,7 +11,12 @@ import styled from 'styled-components';
 import type { Filter } from '@kbn/es-query';
 import { inputsModel, State } from '../../store';
 import { inputsActions } from '../../store/actions';
-import { ControlColumnProps, RowRenderer, TimelineId } from '../../../../common/types/timeline';
+import {
+  ControlColumnProps,
+  RowRenderer,
+  TimelineId,
+  TimelineTabs,
+} from '../../../../common/types/timeline';
 import { APP_ID, APP_UI_ID } from '../../../../common/constants';
 import { timelineActions } from '../../../timelines/store/timeline';
 import type { SubsetTimelineModel } from '../../../timelines/store/timeline/model';
@@ -24,7 +29,6 @@ import { SourcererScopeName } from '../../store/sourcerer/model';
 import { useSourcererDataView } from '../../containers/sourcerer';
 import type { EntityType } from '../../../../../timelines/common';
 import { TGridCellAction } from '../../../../../timelines/common/types';
-import { DetailsPanel } from '../../../timelines/components/side_panel';
 import { CellValueElementProps } from '../../../timelines/components/timeline/cell_rendering';
 import { FIELDS_WITHOUT_CELL_ACTIONS } from '../../lib/cell_actions/constants';
 import { useGetUserCasesPermissions, useKibana } from '../../lib/kibana';
@@ -33,6 +37,7 @@ import {
   useFieldBrowserOptions,
   FieldEditorActions,
 } from '../../../timelines/components/fields_browser';
+import { useDetailPanel } from '../../../timelines/components/side_panel/hooks/use_detail_panel';
 
 const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 
@@ -105,6 +110,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
       itemsPerPage,
       itemsPerPageOptions,
       kqlMode,
+      sessionViewId,
       showCheckboxes,
       sort,
     } = defaultModel,
@@ -155,11 +161,22 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
 
   const globalFilters = useMemo(() => [...filters, ...(pageFilters ?? [])], [filters, pageFilters]);
   const trailingControlColumns: ControlColumnProps[] = EMPTY_CONTROL_COLUMNS;
-  const graphOverlay = useMemo(
-    () =>
-      graphEventId != null && graphEventId.length > 0 ? <GraphOverlay timelineId={id} /> : null,
-    [graphEventId, id]
-  );
+
+  const { openDetailsPanel, DetailsPanel } = useDetailPanel({
+    isFlyoutView: true,
+    entityType,
+    sourcererScope: SourcererScopeName.timeline,
+    timelineId: id,
+    tabType: TimelineTabs.query,
+  });
+
+  const graphOverlay = useMemo(() => {
+    const shouldShowOverlay =
+      (graphEventId != null && graphEventId.length > 0) || sessionViewId !== null;
+    return shouldShowOverlay ? (
+      <GraphOverlay timelineId={id} openDetailsPanel={openDetailsPanel} />
+    ) : null;
+  }, [graphEventId, id, sessionViewId, openDetailsPanel]);
   const setQuery = useCallback(
     (inspect, loading, refetch) => {
       dispatch(inputsActions.setQuery({ id, inputId: 'global', inspect, loading, refetch }));
@@ -239,14 +256,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
             })}
           </InspectButtonContainer>
         </FullScreenContainer>
-        <DetailsPanel
-          browserFields={browserFields}
-          entityType={entityType}
-          docValueFields={docValueFields}
-          isFlyoutView
-          runtimeMappings={runtimeMappings}
-          timelineId={id}
-        />
+        {DetailsPanel}
       </CasesContext>
     </>
   );

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

@@ -321,6 +321,7 @@ export const mockGlobalState: State = {
           end: '2020-07-08T08:20:18.966Z',
         },
         selectedEventIds: {},
+        sessionViewId: null,
         show: false,
         showCheckboxes: false,
         pinnedEventIds: {},

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

@@ -2011,6 +2011,7 @@ export const mockTimelineModel: TimelineModel = {
   savedObjectId: 'ef579e40-jibber-jabber',
   selectAll: false,
   selectedEventIds: {},
+  sessionViewId: null,
   show: false,
   showCheckboxes: false,
   sort: [
@@ -2132,6 +2133,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
     savedObjectId: null,
     selectAll: false,
     selectedEventIds: {},
+    sessionViewId: null,
     show: false,
     showCheckboxes: false,
     sort: [{ columnId: '@timestamp', columnType: 'number', sortDirection: Direction.desc }],

x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx

@@ -228,6 +228,7 @@ describe('alert actions', () => {
             savedObjectId: null,
             selectAll: false,
             selectedEventIds: {},
+            sessionViewId: null,
             show: true,
             showCheckboxes: false,
             sort: [

x-pack/plugins/security_solution/public/detections/components/alerts_table/default_config.tsx

@@ -176,4 +176,5 @@ export const requiredFieldsForActions = [
   'file.hash.sha256',
   'host.os.family',
   'event.code',
+  'process.entry_leader.entity_id',
 ];

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx

@@ -10,7 +10,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { connect, ConnectedProps, useDispatch } from 'react-redux';
 import { Dispatch } from 'redux';
 import type { Filter } from '@kbn/es-query';
-import { APP_ID } from '../../../../common/constants';
+import { APP_ID, ENABLE_SESSION_VIEW_PLUGIN } from '../../../../common/constants';
 import { getEsQueryConfig } from '../../../../../../../src/plugins/data/common';
 import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
 import { RowRendererId, TimelineIdLiteral } from '../../../../common/types/timeline';
@@ -104,7 +104,16 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   const kibana = useKibana();
   const [, dispatchToaster] = useStateToaster();
   const { addWarning } = useAppToasts();
-  const ACTION_BUTTON_COUNT = 4;
+  const {
+    uiSettings,
+    data: {
+      query: { filterManager },
+    },
+  } = useKibana().services;
+
+  const isSessionViewEnabled = uiSettings.get(ENABLE_SESSION_VIEW_PLUGIN);
+
+  const ACTION_BUTTON_COUNT = isSessionViewEnabled ? 5 : 4;
 
   const getGlobalQuery = useCallback(
     (customFilters: Filter[]) => {
@@ -334,7 +343,6 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       return [...defaultFilters, ...alertStatusFilter];
     }
   }, [defaultFilters, filterGroup]);
-  const { filterManager } = useKibana().services.data.query;
 
   const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
 
@@ -363,7 +371,10 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     );
   }, [dispatch, filterManager, tGridEnabled, timelineId]);
 
-  const leadingControlColumns = useMemo(() => getDefaultControlColumn(ACTION_BUTTON_COUNT), []);
+  const leadingControlColumns = useMemo(
+    () => getDefaultControlColumn(ACTION_BUTTON_COUNT),
+    [ACTION_BUTTON_COUNT]
+  );
 
   const casesPermissions = useGetUserCasesPermissions();
   const CasesContext = kibana.services.cases.ui.getCasesContext();