Update with main

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

@@ -181,6 +181,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/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 = 5;
+  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/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 = 5;
+  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();

x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx

@@ -36,7 +36,6 @@ import { timelineDefaults } from '../../store/timeline/defaults';
 import { isFullScreen } from '../timeline/body/column_headers';
 import {
   updateTimelineGraphEventId,
-  updateTimelineSessionViewEventId,
   updateTimelineSessionViewSessionId,
 } from '../../../timelines/store/timeline/actions';
 import { inputsActions } from '../../../common/store/actions';
@@ -147,7 +146,9 @@ const GraphOverlayComponent: React.FC<OwnProps> = ({ timelineId }) => {
     (state) => (getTimeline(state, timelineId) ?? timelineDefaults).sessionViewId
   );
   const sessionViewMain = useMemo(() => {
-    return sessionViewId !== null ? sessionView.getSessionView(sessionViewId) : null;
+    return sessionViewId !== null
+      ? sessionView.getSessionView({ sessionEntityId: sessionViewId })
+      : null;
   }, [sessionView, sessionViewId]);
 
   const getStartSelector = useMemo(() => startSelector(), []);
@@ -199,7 +200,6 @@ 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]);
 

x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx

@@ -25,7 +25,6 @@ import {
   setActiveTabTimeline,
   updateTimelineGraphEventId,
   updateTimelineSessionViewSessionId,
-  updateTimelineSessionViewEventId,
 } from '../../../../store/timeline/actions';
 import {
   useGlobalFullScreen,
@@ -144,7 +143,6 @@ const ActionsComponent: React.FC<ActionProps> = ({
     if (entryLeader !== null) {
       dispatch(setActiveTabTimeline({ id: timelineId, activeTab: TimelineTabs.session }));
       dispatch(updateTimelineSessionViewSessionId({ id: timelineId, eventId: entryLeader }));
-      dispatch(updateTimelineSessionViewEventId({ id: timelineId, eventId: entryLeader }));
     }
   }, [dispatch, timelineId, entryLeader]);
 

x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx

@@ -24,6 +24,7 @@ import { InPortal } from 'react-reverse-portal';
 import { timelineActions, timelineSelectors } from '../../../store/timeline';
 import { CellValueElementProps } from '../cell_rendering';
 import { TimelineItem } from '../../../../../common/search_strategy';
+import { ENABLE_SESSION_VIEW_PLUGIN } from '../../../../../common/constants';
 import { useTimelineEvents } from '../../../containers/index';
 import { defaultHeaders } from '../body/column_headers/default_headers';
 import { StatefulBody } from '../body';
@@ -56,6 +57,7 @@ import { HeaderActions } from '../body/actions/header_actions';
 import { getDefaultControlColumn } from '../body/control_columns';
 import { Sort } from '../body/sort';
 import { Sourcerer } from '../../../../common/components/sourcerer';
+import { useKibana } from '../../../../common/lib/kibana';
 
 const TimelineHeaderContainer = styled.div`
   margin-top: 6px;
@@ -181,7 +183,11 @@ export const EqlTabContentComponent: React.FC<Props> = ({
     runtimeMappings,
     selectedPatterns,
   } = useSourcererDataView(SourcererScopeName.timeline);
-  const ACTION_BUTTON_COUNT = 5;
+  const { uiSettings } = useKibana().services;
+
+  const isSessionViewEnabled = uiSettings.get(ENABLE_SESSION_VIEW_PLUGIN);
+
+  const ACTION_BUTTON_COUNT = isSessionViewEnabled ? 6 : 5;
 
   const isBlankTimeline: boolean = isEmpty(eqlQuery);
 
@@ -252,7 +258,7 @@ export const EqlTabContentComponent: React.FC<Props> = ({
         ...x,
         headerCellRender: HeaderActions,
       })),
-    []
+    [ACTION_BUTTON_COUNT]
   );
 
   return (

x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx

@@ -24,6 +24,8 @@ import { Footer, footerHeight } from '../footer';
 import { requiredFieldsForActions } from '../../../../detections/components/alerts_table/default_config';
 import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
+import { useKibana } from '../../../../common/lib/kibana';
+import { ENABLE_SESSION_VIEW_PLUGIN } from '../../../../../common/constants';
 import { timelineDefaults } from '../../../store/timeline/defaults';
 import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { useTimelineFullScreen } from '../../../../common/containers/use_full_screen';
@@ -125,7 +127,11 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
     selectedPatterns,
   } = useSourcererDataView(SourcererScopeName.timeline);
   const { setTimelineFullScreen, timelineFullScreen } = useTimelineFullScreen();
-  const ACTION_BUTTON_COUNT = 5;
+  const { uiSettings } = useKibana().services;
+
+  const isSessionViewEnabled = uiSettings.get(ENABLE_SESSION_VIEW_PLUGIN);
+
+  const ACTION_BUTTON_COUNT = isSessionViewEnabled ? 6 : 5;
 
   const filterQuery = useMemo(() => {
     if (isEmpty(pinnedEventIds)) {
@@ -209,7 +215,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
         ...x,
         headerCellRender: HeaderActions,
       })),
-    []
+    [ACTION_BUTTON_COUNT]
   );
 
   return (

x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx

@@ -45,6 +45,7 @@ import {
 } from '../../../../../common/types/timeline';
 import { requiredFieldsForActions } from '../../../../detections/components/alerts_table/default_config';
 import { SuperDatePicker } from '../../../../common/components/super_date_picker';
+import { ENABLE_SESSION_VIEW_PLUGIN } from '../../../../../common/constants';
 import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
 import { inputsModel, inputsSelectors, State } from '../../../../common/store';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
@@ -202,8 +203,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   } = useSourcererDataView(SourcererScopeName.timeline);
 
   const { uiSettings } = useKibana().services;
-  const ACTION_BUTTON_COUNT = 6;
 
+  const isSessionViewEnabled = uiSettings.get(ENABLE_SESSION_VIEW_PLUGIN);
+
+  const ACTION_BUTTON_COUNT = isSessionViewEnabled ? 6 : 5;
   const getManageTimeline = useMemo(() => timelineSelectors.getManageTimelineById(), []);
   const { filterManager: activeFilterManager } = useDeepEqualSelector((state) =>
     getManageTimeline(state, timelineId ?? '')
@@ -330,7 +333,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
         ...x,
         headerCellRender: HeaderActions,
       })),
-    []
+    [ACTION_BUTTON_COUNT]
   );
 
   return (

x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx

@@ -38,7 +38,9 @@ const SessionTabContent: React.FC<Props> = ({ timelineId }) => {
     (state) => (getTimeline(state, timelineId) ?? timelineDefaults).sessionViewId
   );
   const sessionViewMain = useMemo(() => {
-    return sessionViewId !== null ? sessionView.getSessionView(sessionViewId) : null;
+    return sessionViewId !== null
+      ? sessionView.getSessionView({ sessionEntityId: sessionViewId })
+      : null;
   }, [sessionView, sessionViewId]);
 
   return <ScrollableFlexItem grow={2}>{sessionViewMain}</ScrollableFlexItem>;

x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts

@@ -81,11 +81,6 @@ export const updateTimelineGraphEventId = actionCreator<{ id: string; graphEvent
   'UPDATE_TIMELINE_GRAPH_EVENT_ID'
 );
 
-export const updateTimelineSessionViewEventId = actionCreator<{
-  id: string;
-  eventId: string | null;
-}>('UPDATE_TIMELINE_SESSION_VIEW_EVENT_ID');
-
 export const updateTimelineSessionViewSessionId = actionCreator<{
   id: string;
   eventId: string | null;

x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts

@@ -287,33 +287,13 @@ export const updateGraphEventId = ({
   };
 };
 
-export const updateSessionViewEventId = ({
-  id,
-  eventId,
-  timelineById,
-}: {
-  id: string;
-  eventId: string;
-  timelineById: TimelineById;
-}): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      sessionViewId: eventId,
-    },
-  };
-};
-
 export const updateSessionViewSessionId = ({
   id,
   eventId,
   timelineById,
 }: {
   id: string;
-  eventId: string;
+  eventId: string | null;
   timelineById: TimelineById;
 }): TimelineById => {
   const timeline = timelineById[id];
@@ -322,7 +302,7 @@ export const updateSessionViewSessionId = ({
     ...timelineById,
     [id]: {
       ...timeline,
-      sessionViewSessionId: eventId,
+      sessionViewId: eventId,
     },
   };
 };

x-pack/plugins/security_solution/public/timelines/store/timeline/model.ts

@@ -64,7 +64,6 @@ export type TimelineModel = TGridModelForTimeline & {
   showSaveModal?: boolean;
   savedQueryId?: string | null;
   sessionViewId: string | null;
-  sessionViewSessionId: string | null;
   /** When true, show the timeline flyover */
   show: boolean;
   /** status: active | draft */
@@ -121,7 +120,6 @@ export type SubsetTimelineModel = Readonly<
     | 'selectAll'
     | 'selectedEventIds'
     | 'sessionViewId'
-    | 'sessionViewSessionId'
     | 'show'
     | 'showCheckboxes'
     | 'sort'

x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts

@@ -44,7 +44,6 @@ import {
   updateTimeline,
   updateTimelineGraphEventId,
   updateTitleAndDescription,
-  updateTimelineSessionViewEventId,
   updateTimelineSessionViewSessionId,
   toggleModalSaveTimeline,
   updateEqlOptions,
@@ -79,7 +78,6 @@ import {
   updateGraphEventId,
   updateFilters,
   updateTimelineEventType,
-  updateSessionViewEventId,
   updateSessionViewSessionId,
 } from './helpers';
 
@@ -150,10 +148,6 @@ export const timelineReducer = reducerWithInitialState(initialTimelineState)
     ...state,
     timelineById: updateGraphEventId({ id, graphEventId, timelineById: state.timelineById }),
   }))
-  .case(updateTimelineSessionViewEventId, (state, { id, eventId }) => ({
-    ...state,
-    timelineById: updateSessionViewEventId({ id, eventId, timelineById: state.timelineById }),
-  }))
   .case(updateTimelineSessionViewSessionId, (state, { id, eventId }) => ({
     ...state,
     timelineById: updateSessionViewSessionId({ id, eventId, timelineById: state.timelineById }),