[Security Solution][Investigations] - Integrate details flyout with session view

x-pack/plugins/rule_registry/common/assets/field_maps/ecs_field_map.ts

@@ -2401,6 +2401,21 @@ export const ecsFieldMap = {
     array: false,
     required: false,
   },
+  'process.entry_leader.entity_id': {
+    type: 'keyword',
+    array: false,
+    required: false,
+  },
+  'process.session_leader.entity_id': {
+    type: 'keyword',
+    array: false,
+    required: false,
+  },
+  'process.group_leader.entity_id': {
+    type: 'keyword',
+    array: false,
+    required: false,
+  },
   'process.executable': {
     type: 'keyword',
     array: false,

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

@@ -476,6 +476,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/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';
@@ -33,6 +38,7 @@ import {
   useFieldBrowserOptions,
   FieldEditorActions,
 } from '../../../timelines/components/fields_browser';
+import { useLoadDetailPanel } from '../../../timelines/components/side_panel/hooks/use_load_detail_panel';
 
 const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 
@@ -105,6 +111,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
       itemsPerPage,
       itemsPerPageOptions,
       kqlMode,
+      sessionViewId,
       showCheckboxes,
       sort,
     } = defaultModel,
@@ -155,11 +162,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, FlyoutDetailsPanel } = useLoadDetailPanel({
+    isFlyoutView: true,
+    entityType,
+    sourcerScope: 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 +257,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
             })}
           </InspectButtonContainer>
         </FullScreenContainer>
-        <DetailsPanel
-          browserFields={browserFields}
-          entityType={entityType}
-          docValueFields={docValueFields}
-          isFlyoutView
-          runtimeMappings={runtimeMappings}
-          timelineId={id}
-        />
+        {FlyoutDetailsPanel}
       </CasesContext>
     </>
   );

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[]) => {

x-pack/plugins/security_solution/public/hosts/pages/navigation/events_query_tab_body.tsx

@@ -72,7 +72,7 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
 }) => {
   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/timelines/components/graph_overlay/index.tsx

@@ -28,12 +28,17 @@ import {
   useGlobalFullScreen,
   useTimelineFullScreen,
 } from '../../../common/containers/use_full_screen';
+import { useKibana } from '../../../common/lib/kibana';
 import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
 import { TimelineId } from '../../../../common/types/timeline';
 import { timelineSelectors } from '../../store/timeline';
 import { timelineDefaults } from '../../store/timeline/defaults';
 import { isFullScreen } from '../timeline/body/column_headers';
-import { updateTimelineGraphEventId } from '../../../timelines/store/timeline/actions';
+import {
+  updateTimelineGraphEventId,
+  updateTimelineSessionViewEventId,
+  updateTimelineSessionViewSessionId,
+} from '../../../timelines/store/timeline/actions';
 import { inputsActions } from '../../../common/store/actions';
 import { Resolver } from '../../../resolver/view';
 import {
@@ -70,7 +75,14 @@ const FullScreenButtonIcon = styled(EuiButtonIcon)`
   margin: 4px 0 4px 0;
 `;
 
-interface OwnProps {
+const ScrollableFlexItem = styled(EuiFlexItem)`
+  ${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}
+  overflow: hidden;
+  width: 100%;
+`;
+
+interface GraphOverlayProps {
+  openDetailsPanel: (eventId?: string, onClose?: () => void) => void;
   timelineId: TimelineId;
 }
 
@@ -122,7 +134,7 @@ NavigationComponent.displayName = 'NavigationComponent';
 
 const Navigation = React.memo(NavigationComponent);
 
-const GraphOverlayComponent: React.FC<OwnProps> = ({ timelineId }) => {
+const GraphOverlayComponent: React.FC<GraphOverlayProps> = ({ timelineId, openDetailsPanel }) => {
   const dispatch = useDispatch();
   const { globalFullScreen, setGlobalFullScreen } = useGlobalFullScreen();
   const { timelineFullScreen, setTimelineFullScreen } = useTimelineFullScreen();
@@ -131,6 +143,19 @@ const GraphOverlayComponent: React.FC<OwnProps> = ({ timelineId }) => {
   const graphEventId = useDeepEqualSelector(
     (state) => (getTimeline(state, timelineId) ?? timelineDefaults).graphEventId
   );
+  const { sessionView } = useKibana().services;
+  const sessionViewId = useDeepEqualSelector(
+    (state) => (getTimeline(state, timelineId) ?? timelineDefaults).sessionViewId
+  );
+  const sessionViewMain = useMemo(() => {
+    return sessionViewId !== null
+      ? sessionView.getSessionView({
+          sessionEntityId: sessionViewId,
+          loadAlertDetails: openDetailsPanel,
+        })
+      : null;
+  }, [sessionView, sessionViewId, openDetailsPanel]);
+
   const getStartSelector = useMemo(() => startSelector(), []);
   const getEndSelector = useMemo(() => endSelector(), []);
   const getIsLoadingSelector = useMemo(() => isLoadingSelector(), []);
@@ -180,6 +205,8 @@ const GraphOverlayComponent: React.FC<OwnProps> = ({ timelineId }) => {
       }
     }
     dispatch(updateTimelineGraphEventId({ id: timelineId, graphEventId: '' }));
+    dispatch(updateTimelineSessionViewEventId({ id: timelineId, eventId: null }));
+    dispatch(updateTimelineSessionViewSessionId({ id: timelineId, eventId: null }));
   }, [dispatch, timelineId, setTimelineFullScreen, setGlobalFullScreen]);
 
   useEffect(() => {
@@ -219,7 +246,18 @@ const GraphOverlayComponent: React.FC<OwnProps> = ({ timelineId }) => {
     [defaultDataView.patternList, isInTimeline, timelinePatterns]
   );
 
-  if (fullScreen && !isInTimeline) {
+  if (!isInTimeline && sessionViewId !== null) {
+    return (
+      <EuiFlexGroup alignItems="flexStart" gutterSize="none" direction="column">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty iconType="cross" onClick={onCloseOverlay} size="xs">
+            {i18n.CLOSE_SESSION}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <ScrollableFlexItem grow={2}>{sessionViewMain}</ScrollableFlexItem>
+      </EuiFlexGroup>
+    );
+  } else if (fullScreen && !isInTimeline) {
     return (
       <FullScreenOverlayContainer data-test-subj="overlayContainer">
         <EuiHorizontalRule margin="none" />

x-pack/plugins/security_solution/public/timelines/components/graph_overlay/translations.ts

@@ -13,3 +13,10 @@ export const CLOSE_ANALYZER = i18n.translate(
     defaultMessage: 'Close analyzer',
   }
 );
+
+export const CLOSE_SESSION = i18n.translate(
+  'xpack.securitySolution.timeline.graphOverlay.closeSessionButton',
+  {
+    defaultMessage: 'Close Session',
+  }
+);

x-pack/plugins/security_solution/public/timelines/components/side_panel/hooks/use_load_detail_panel.tsx

@@ -0,0 +1,136 @@
+/*
+ * 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, { useMemo, useCallback, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { timelineActions, timelineSelectors } from '../../../store/timeline';
+import type { EntityType } from '../../../../../../timelines/common';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
+import { activeTimeline } from '../../../containers/active_timeline_context';
+import { TimelineId, TimelineTabs } from '../../../../../common/types/timeline';
+import { timelineDefaults } from '../../../store/timeline/defaults';
+import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
+import { DetailsPanel } from '..';
+
+export interface UseLoadDetailPanelConfig {
+  entityType?: EntityType;
+  isFlyoutView?: boolean;
+  sourcerScope: SourcererScopeName;
+  timelineId: TimelineId;
+  tabType?: TimelineTabs;
+}
+
+export interface UseLoadDetailPanelReturn {
+  openDetailsPanel: (eventId?: string, onClose?: () => void) => void;
+  handleOnDetailsPanelClosed: () => void;
+  FlyoutDetailsPanel: JSX.Element;
+  shouldShowFlyoutDetailsPanel: boolean;
+}
+
+export const useLoadDetailPanel = ({
+  entityType,
+  isFlyoutView,
+  sourcerScope,
+  timelineId,
+  tabType,
+}: UseLoadDetailPanelConfig): UseLoadDetailPanelReturn => {
+  const { browserFields, docValueFields, selectedPatterns, runtimeMappings } =
+    useSourcererDataView(sourcerScope);
+  const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
+  const dispatch = useDispatch();
+
+  const expandedDetail = useDeepEqualSelector(
+    (state) => (getTimeline(state, timelineId) ?? timelineDefaults).expandedDetail
+  );
+  const onFlyoutClose = useRef(() => {});
+
+  const shouldShowFlyoutDetailsPanel = useMemo(() => {
+    if (
+      tabType &&
+      expandedDetail &&
+      expandedDetail[tabType] &&
+      !!expandedDetail[tabType]?.panelView
+    ) {
+      return true;
+    }
+    return false;
+  }, [expandedDetail, tabType]);
+
+  const loadDetailsPanel = useCallback(
+    (eventId?: string) => {
+      if (eventId) {
+        dispatch(
+          timelineActions.toggleDetailPanel({
+            panelView: 'eventDetail',
+            tabType,
+            timelineId,
+            params: {
+              eventId,
+              indexName: selectedPatterns.join(','),
+            },
+          })
+        );
+      }
+    },
+    [dispatch, selectedPatterns, tabType, timelineId]
+  );
+
+  const openDetailsPanel = useCallback(
+    (eventId?: string, onClose?: () => void) => {
+      loadDetailsPanel(eventId);
+      onFlyoutClose.current = onClose ?? (() => {});
+    },
+    [loadDetailsPanel]
+  );
+
+  const handleOnDetailsPanelClosed = useCallback(() => {
+    if (onFlyoutClose.current) onFlyoutClose.current();
+    dispatch(timelineActions.toggleDetailPanel({ tabType, timelineId }));
+
+    if (
+      tabType &&
+      expandedDetail[tabType]?.panelView &&
+      timelineId === TimelineId.active &&
+      shouldShowFlyoutDetailsPanel
+    ) {
+      activeTimeline.toggleExpandedDetail({});
+    }
+  }, [dispatch, timelineId, expandedDetail, tabType, shouldShowFlyoutDetailsPanel]);
+
+  const FlyoutDetailsPanel = useMemo(
+    () => (
+      <DetailsPanel
+        browserFields={browserFields}
+        docValueFields={docValueFields}
+        entityType={entityType}
+        handleOnPanelClosed={handleOnDetailsPanelClosed}
+        isFlyoutView={isFlyoutView}
+        runtimeMappings={runtimeMappings}
+        tabType={tabType}
+        timelineId={timelineId}
+      />
+    ),
+    [
+      browserFields,
+      docValueFields,
+      entityType,
+      handleOnDetailsPanelClosed,
+      isFlyoutView,
+      runtimeMappings,
+      tabType,
+      timelineId,
+    ]
+  );
+
+  return {
+    openDetailsPanel,
+    handleOnDetailsPanelClosed,
+    shouldShowFlyoutDetailsPanel,
+    FlyoutDetailsPanel,
+  };
+};