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

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

@@ -80,7 +80,7 @@ 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 ACTION_BUTTON_COUNT = 5;
 
   const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
 

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

@@ -84,7 +84,7 @@ const EventsQueryTabBodyComponent: React.FC<EventsQueryTabBodyComponentProps> =
 }) => {
   const dispatch = useDispatch();
   const { globalFullScreen } = useGlobalFullScreen();
-  const ACTION_BUTTON_COUNT = 4;
+  const ACTION_BUTTON_COUNT = 5;
   const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
 
   useEffect(() => {

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.getByTestId(`hoverVisibilityContainer`)).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

@@ -24,7 +24,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 +32,7 @@ import {
   useFieldBrowserOptions,
   FieldEditorActions,
 } from '../../../timelines/components/fields_browser';
+import { useSessionView } from '../../../timelines/components/timeline/session_tab_content/use_session_view';
 
 const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 
@@ -105,6 +105,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
       itemsPerPage,
       itemsPerPageOptions,
       kqlMode,
+      sessionViewId,
       showCheckboxes,
       sort,
     } = defaultModel,
@@ -155,11 +156,19 @@ 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 { DetailsPanel, SessionView, Navigation } = useSessionView({
+    entityType,
+    timelineId: id,
+  });
+
+  const graphOverlay = useMemo(() => {
+    const shouldShowOverlay =
+      (graphEventId != null && graphEventId.length > 0) || sessionViewId !== null;
+    return shouldShowOverlay ? (
+      <GraphOverlay timelineId={id} SessionView={SessionView} Navigation={Navigation} />
+    ) : null;
+  }, [graphEventId, id, sessionViewId, SessionView, Navigation]);
   const setQuery = useCallback(
     (inspect, loading, refetch) => {
       dispatch(inputsActions.setQuery({ id, inputId: 'global', inspect, loading, refetch }));
@@ -239,14 +248,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

@@ -104,7 +104,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   const kibana = useKibana();
   const [, dispatchToaster] = useStateToaster();
   const { addWarning } = useAppToasts();
-  const ACTION_BUTTON_COUNT = 4;
+  const ACTION_BUTTON_COUNT = 5;
 
   const getGlobalQuery = useCallback(
     (customFilters: Filter[]) => {