[Security Solution][Tech Debt] Decoupled TGrid state part from Timelines under the security_solution store

packages/kbn-optimizer/limits.yml

@@ -105,7 +105,7 @@ pageLoadAssetSize:
   screenshotting: 22870
   searchprofiler: 67080
   security: 65433
-  securitySolution: 273763
+  securitySolution: 66738
   sessionView: 77750
   share: 71239
   snapshotRestore: 79032

x-pack/plugins/observability/public/pages/alerts/components/render_cell_value/render_cell_value.test.tsx

@@ -75,5 +75,5 @@ const requiredProperties: CellValueElementProps = {
   },
   isDraggable: false,
   linkValues: [],
-  timelineId: '',
+  scopeId: '',
 };

x-pack/plugins/observability/public/pages/alerts/containers/alerts_table_t_grid/alerts_table_t_grid.tsx

@@ -221,7 +221,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
 
   const onStateChange = useCallback(
     (state: TGridState) => {
-      const pickedState = pick(state.timelineById['standalone-t-grid'], [
+      const pickedState = pick(state.tableById['standalone-t-grid'], [
         'columns',
         'sort',
         'selectedEventIds',
@@ -259,7 +259,6 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
       itemsPerPage,
       itemsPerPageOptions: [10, 25, 50],
       loadingText: translations.alertsTable.loadingTextLabel,
-      footerText: translations.alertsTable.footerTextLabel,
       onStateChange,
       query: {
         query: kuery ?? '',

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

@@ -313,34 +313,36 @@ export type TimelineWithoutExternalRefs = Omit<SavedTimeline, 'dataViewId' | 'sa
  */
 
 export enum TimelineId {
+  active = 'timeline-1',
+  casePage = 'timeline-case',
+  test = 'timeline-test', // Reserved for testing purposes
+}
+
+export enum TableId {
   usersPageEvents = 'users-page-events',
   hostsPageEvents = 'hosts-page-events',
   networkPageEvents = 'network-page-events',
   hostsPageSessions = 'hosts-page-sessions-v2', // the v2 is to cache bust localstorage settings as default columns were reworked.
-  detectionsRulesDetailsPage = 'detections-rules-details-page',
-  detectionsPage = 'detections-page',
-  active = 'timeline-1',
-  casePage = 'timeline-case',
-  test = 'test', // Reserved for testing purposes
+  alertsOnRuleDetailsPage = 'alerts-rules-details-page',
+  alertsOnAlertsPage = 'alerts-page',
+  test = 'table-test', // Reserved for testing purposes
   alternateTest = 'alternateTest',
   rulePreview = 'rule-preview',
   kubernetesPageSessions = 'kubernetes-page-sessions',
 }
 
-export const TimelineIdLiteralRt = runtimeTypes.union([
-  runtimeTypes.literal(TimelineId.usersPageEvents),
-  runtimeTypes.literal(TimelineId.hostsPageEvents),
-  runtimeTypes.literal(TimelineId.networkPageEvents),
-  runtimeTypes.literal(TimelineId.hostsPageSessions),
-  runtimeTypes.literal(TimelineId.detectionsRulesDetailsPage),
-  runtimeTypes.literal(TimelineId.detectionsPage),
-  runtimeTypes.literal(TimelineId.active),
-  runtimeTypes.literal(TimelineId.test),
-  runtimeTypes.literal(TimelineId.rulePreview),
-  runtimeTypes.literal(TimelineId.kubernetesPageSessions),
+export const TableIdLiteralRt = runtimeTypes.union([
+  runtimeTypes.literal(TableId.usersPageEvents),
+  runtimeTypes.literal(TableId.hostsPageEvents),
+  runtimeTypes.literal(TableId.networkPageEvents),
+  runtimeTypes.literal(TableId.hostsPageSessions),
+  runtimeTypes.literal(TableId.alertsOnRuleDetailsPage),
+  runtimeTypes.literal(TableId.alertsOnAlertsPage),
+  runtimeTypes.literal(TableId.test),
+  runtimeTypes.literal(TableId.rulePreview),
+  runtimeTypes.literal(TableId.kubernetesPageSessions),
 ]);
-
-export type TimelineIdLiteral = runtimeTypes.TypeOf<typeof TimelineIdLiteralRt>;
+export type TableIdLiteral = runtimeTypes.TypeOf<typeof TableIdLiteralRt>;
 
 export const TimelineSavedToReturnObjectRuntimeType = runtimeTypes.intersection([
   SavedTimelineRuntimeType,
@@ -528,7 +530,7 @@ export type TimelineExpandedDetail = {
 
 export type ToggleDetailPanel = TimelineExpandedDetailType & {
   tabType?: TimelineTabs;
-  timelineId: string;
+  id: string;
 };
 
 export const pageInfoTimeline = runtimeTypes.type({

x-pack/plugins/security_solution/public/app/home/global_header/index.test.tsx

@@ -26,6 +26,7 @@ import { TimelineId } from '../../../../common/types/timeline';
 import { createStore } from '../../../common/store';
 import { kibanaObservable } from '@kbn/timelines-plugin/public/mock';
 import { sourcererPaths } from '../../../common/containers/sourcerer';
+import { tGridReducer } from '@kbn/timelines-plugin/public';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -72,7 +73,13 @@ describe('global header', () => {
     },
   };
   const { storage } = createSecuritySolutionStorageMock();
-  const store = createStore(state, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+  const store = createStore(
+    state,
+    SUB_PLUGINS_REDUCER,
+    { dataTable: tGridReducer },
+    kibanaObservable,
+    storage
+  );
 
   beforeEach(() => {
     useVariationMock.mockReset();
@@ -169,7 +176,13 @@ describe('global header', () => {
         },
       },
     };
-    const mockStore = createStore(mockstate, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+    const mockStore = createStore(
+      mockstate,
+      SUB_PLUGINS_REDUCER,
+      { dataTable: tGridReducer },
+      kibanaObservable,
+      storage
+    );
 
     (useLocation as jest.Mock).mockReturnValue({ pathname: sourcererPaths[2] });
 

x-pack/plugins/security_solution/public/app/home/index.test.tsx

@@ -33,6 +33,7 @@ import type { TimelineUrl } from '../../timelines/store/timeline/model';
 import { timelineDefaults } from '../../timelines/store/timeline/defaults';
 import { URL_PARAM_KEY } from '../../common/hooks/use_url_state';
 import { InputsModelId } from '../../common/store/inputs/constants';
+import { tGridReducer } from '@kbn/timelines-plugin/public';
 
 jest.mock('../../common/store/inputs/actions');
 
@@ -298,7 +299,13 @@ describe('HomePage', () => {
         },
       };
 
-      const mockStore = createStore(mockstate, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+      const mockStore = createStore(
+        mockstate,
+        SUB_PLUGINS_REDUCER,
+        { dataTable: tGridReducer },
+        kibanaObservable,
+        storage
+      );
 
       render(
         <TestProviders store={mockStore}>
@@ -452,7 +459,13 @@ describe('HomePage', () => {
       };
 
       const { storage } = createSecuritySolutionStorageMock();
-      const mockStore = createStore(mockstate, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+      const mockStore = createStore(
+        mockstate,
+        SUB_PLUGINS_REDUCER,
+        { dataTable: tGridReducer },
+        kibanaObservable,
+        storage
+      );
 
       const TestComponent = () => (
         <TestProviders store={mockStore}>
@@ -509,7 +522,13 @@ describe('HomePage', () => {
       };
 
       const { storage } = createSecuritySolutionStorageMock();
-      const mockStore = createStore(mockstate, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+      const mockStore = createStore(
+        mockstate,
+        SUB_PLUGINS_REDUCER,
+        { dataTable: tGridReducer },
+        kibanaObservable,
+        storage
+      );
 
       const TestComponent = () => (
         <TestProviders store={mockStore}>
@@ -569,7 +588,13 @@ describe('HomePage', () => {
 
     it('it removes empty timeline state from URL', async () => {
       const { storage } = createSecuritySolutionStorageMock();
-      const store = createStore(mockGlobalState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+      const store = createStore(
+        mockGlobalState,
+        SUB_PLUGINS_REDUCER,
+        { dataTable: tGridReducer },
+        kibanaObservable,
+        storage
+      );
 
       mockUseInitializeUrlParam(URL_PARAM_KEY.timeline, {
         id: 'testSavedTimelineId',
@@ -596,7 +621,13 @@ describe('HomePage', () => {
 
     it('it updates URL when timeline store changes', async () => {
       const { storage } = createSecuritySolutionStorageMock();
-      const store = createStore(mockGlobalState, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+      const store = createStore(
+        mockGlobalState,
+        SUB_PLUGINS_REDUCER,
+        { dataTable: tGridReducer },
+        kibanaObservable,
+        storage
+      );
       const savedObjectId = 'testTimelineId';
 
       mockUseInitializeUrlParam(URL_PARAM_KEY.timeline, {

x-pack/plugins/security_solution/public/app/types.ts

@@ -18,6 +18,8 @@ import type {
 import type { RouteProps } from 'react-router-dom';
 import type { AppMountParameters } from '@kbn/core/public';
 import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
+import type { TableState } from '@kbn/timelines-plugin/public';
+
 import type { StartServices } from '../types';
 
 /**
@@ -33,7 +35,6 @@ export interface RenderAppProps extends AppMountParameters {
 import type { State, SubPluginsInitReducer } from '../common/store';
 import type { Immutable } from '../../common/endpoint/types';
 import type { AppAction } from '../common/store/actions';
-import type { TimelineState } from '../timelines/store/timeline/types';
 
 export { SecurityPageName } from '../../common/constants';
 
@@ -47,7 +48,7 @@ export type SecuritySubPluginRoutes = RouteProps[];
 
 export interface SecuritySubPlugin {
   routes: SecuritySubPluginRoutes;
-  storageTimelines?: Pick<TimelineState, 'timelineById'>;
+  storageDataTables?: Pick<TableState, 'tableById'>;
 }
 
 export type SecuritySubPluginKeyStore =

x-pack/plugins/security_solution/public/cases/pages/index.tsx

@@ -34,7 +34,7 @@ const TimelineDetailsPanel = () => {
       entityType="events"
       isFlyoutView
       runtimeMappings={runtimeMappings}
-      timelineId={TimelineId.casePage}
+      scopeId={TimelineId.casePage}
     />
   );
 };
@@ -58,7 +58,7 @@ const CaseContainerComponent: React.FC = () => {
       dispatch(
         timelineActions.toggleDetailPanel({
           panelView: 'eventDetail',
-          timelineId: TimelineId.casePage,
+          id: TimelineId.casePage,
           params: {
             eventId: alertId,
             indexName: index,

x-pack/plugins/security_solution/public/common/components/chart_settings_popover/configurations/default/index.test.tsx

@@ -19,6 +19,7 @@ import type { State } from '../../../../store';
 import { createStore } from '../../../../store';
 import * as i18n from './translations';
 import { useChartSettingsPopoverConfiguration } from '.';
+import { tGridReducer } from '@kbn/timelines-plugin/public';
 
 const mockHandleClick = jest.fn();
 
@@ -32,7 +33,13 @@ describe('useChartSettingsPopoverConfiguration', () => {
 
   const state: State = mockGlobalState;
   const { storage } = createSecuritySolutionStorageMock();
-  const store = createStore(state, SUB_PLUGINS_REDUCER, kibanaObservable, storage);
+  const store = createStore(
+    state,
+    SUB_PLUGINS_REDUCER,
+    { dataTable: tGridReducer },
+    kibanaObservable,
+    storage
+  );
   const wrapper = ({ children }: { children: React.ReactNode }) => (
     <TestProviders store={store}>{children}</TestProviders>
   );

x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx

@@ -168,7 +168,7 @@ export interface BarChartComponentProps {
   barChart: ChartSeriesData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
   stackByField?: string;
-  timelineId?: string;
+  scopeId?: string;
   visualizationActionsOptions?: VisualizationActionsProps;
 }
 
@@ -178,7 +178,7 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
   barChart,
   configs,
   stackByField,
-  timelineId,
+  scopeId,
   visualizationActionsOptions,
 }) => {
   const { ref: measureRef, width, height } = useThrottledResizeObserver();
@@ -190,12 +190,12 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
             dataProviderId: escapeDataProviderId(
               `draggable-legend-item-${uuid.v4()}-${stackByField}-${d.key}`
             ),
-            timelineId,
+            scopeId,
             field: stackByField,
             value: d.key,
           }))
         : NO_LEGEND_DATA,
-    [barChart, stackByField, timelineId]
+    [barChart, stackByField, scopeId]
   );
 
   const yAxisTitle = get('yAxisTitle', configs);
@@ -243,7 +243,7 @@ export const BarChart = React.memo(
   BarChartComponent,
   (prevProps, nextProps) =>
     prevProps.stackByField === nextProps.stackByField &&
-    prevProps.timelineId === nextProps.timelineId &&
+    prevProps.scopeId === nextProps.scopeId &&
     deepEqual(prevProps.configs, nextProps.configs) &&
     deepEqual(prevProps.barChart, nextProps.barChart)
 );

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx

@@ -25,7 +25,7 @@ export interface LegendItem {
   dataProviderId: string;
   render?: (fieldValuePair?: { field: string; value: string | number }) => React.ReactNode;
   field: string;
-  timelineId?: string;
+  scopeId?: string;
   value: string | number;
   count?: number;
 }
@@ -47,7 +47,7 @@ const DraggableLegendItemComponent: React.FC<{
   legendItem: LegendItem;
 }> = ({ legendItem }) => {
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const { color, count, dataProviderId, field, timelineId, value } = legendItem;
+  const { color, count, dataProviderId, field, scopeId, value } = legendItem;
 
   return (
     <EuiText size="xs">
@@ -72,7 +72,7 @@ const DraggableLegendItemComponent: React.FC<{
                 hideTopN={true}
                 id={dataProviderId}
                 isDraggable={false}
-                timelineId={timelineId}
+                scopeId={scopeId}
                 value={value}
               >
                 {legendItem.render == null ? (