[Security Solution] Cleanup alerts table rendering and reference issues (elastic#213649)

## Summary

This pr fixes some odd issues with getBulkActions, which is really a
hook in disguise, as well as an issue with the useGetMutedAlertsQuery
hook, which was/is fetching data much more often than it should, exactly
why that is I'm not sure, perhaps something to do with how timeline
blocks focus to the underlying DOM when it's open, and this causes the
default to true refetchOnWindowFocus prop of useQuery to re-run the
query, or if there's an error with the queryKey.

Below are 2 GIFs comparing react performance profiles of simply opening
and then closing the timeline while on the alerts page with 50 alerts in
the table.

Before fix:

![pre_fixes_profiler](https://github.com/user-attachments/assets/548d1ea8-6bde-460f-90da-0cead5ea76e1)

12 renders for a total of 950 ms, a large portion of which is coming
from the alert table cells.

After fix:


![with_fixes_profiler](https://github.com/user-attachments/assets/7119725a-fe3a-4e66-a181-4dd7b24204f0)

8 renders for a total of 380 ms, almost none of it coming from the alert
table.

Each of the alerts table and timeline/discover drive some of the more
stateful and complex workflows in kibana on their own, and on top of
that one is rendering within a flyout on top of the other, listening to
the same url changes/tens of context provider wrappers changing above
them in the tree/kibana services, etc, & so proper memoization is a
pre-requisite for a good ux.

### Checklist



- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

Author: kqualters-elastic

src/platform/packages/shared/response-ops/alerts-apis/hooks/use_get_muted_alerts_query.tsx

@@ -54,5 +54,6 @@ export const useGetMutedAlertsQuery = (
       }
     },
     enabled: ruleIds.length > 0 && enabled !== false,
+    refetchOnWindowFocus: false,
   });
 };

src/platform/packages/shared/response-ops/alerts-table/components/alerts_data_grid.test.tsx

@@ -74,7 +74,7 @@ export const mockDataGridProps: Partial<BaseAlertsDataGridProps> = {
   onSortChange: jest.fn(),
   onChangePageIndex: jest.fn(),
   onChangePageSize: jest.fn(),
-  getBulkActions: () => [
+  additionalBulkActions: [
     {
       id: 0,
       items: [

src/platform/packages/shared/response-ops/alerts-table/components/alerts_data_grid.tsx

@@ -79,7 +79,7 @@ export const AlertsDataGrid = typedMemo(
       onChangePageSize,
       onChangePageIndex,
       actionsColumnWidth = DEFAULT_ACTIONS_COLUMN_WIDTH,
-      getBulkActions,
+      additionalBulkActions,
       fieldsBrowserOptions,
       cellActionsOptions,
       pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
@@ -114,7 +114,7 @@ export const AlertsDataGrid = typedMemo(
       query,
       alertsCount: alerts.length,
       casesConfig: casesConfiguration,
-      getBulkActions,
+      additionalBulkActions,
       refresh: refreshQueries,
       hideBulkActions,
       http,

src/platform/packages/shared/response-ops/alerts-table/hooks/use_bulk_actions.test.tsx

@@ -583,15 +583,15 @@ describe('bulk action hooks', () => {
           items,
         },
       ];
-      const useBulkActionsConfig = () => customBulkActionConfig;
+      const useBulkActionsConfig = customBulkActionConfig;
       const { result, rerender } = renderHook(
         () =>
           useBulkActions({
             alertsCount: 0,
             query: {},
             casesConfig,
             refresh,
-            getBulkActions: useBulkActionsConfig,
+            additionalBulkActions: useBulkActionsConfig,
             http,
             notifications,
             application,

src/platform/packages/shared/response-ops/alerts-table/hooks/use_bulk_actions.ts

@@ -39,7 +39,7 @@ interface BulkActionsProps {
   query: Pick<QueryDslQueryContainer, 'bool' | 'ids'>;
   alertsCount: number;
   casesConfig?: PublicAlertsDataGridProps['casesConfiguration'];
-  getBulkActions?: PublicAlertsDataGridProps['getBulkActions'];
+  additionalBulkActions?: PublicAlertsDataGridProps['additionalBulkActions'];
   refresh: () => void;
   hideBulkActions?: boolean;
   application: ApplicationStart;
@@ -283,14 +283,14 @@ export const useBulkUntrackActions = ({
   ]);
 };
 
-const EMPTY_BULK_ACTIONS_CONFIG = () => [];
+const EMPTY_BULK_ACTIONS_CONFIG: BulkActionsPanelConfig[] = [];
 
 export function useBulkActions({
   alertsCount,
   casesConfig,
   query,
   refresh,
-  getBulkActions = EMPTY_BULK_ACTIONS_CONFIG,
+  additionalBulkActions = EMPTY_BULK_ACTIONS_CONFIG,
   ruleTypeIds,
   hideBulkActions,
   http,
@@ -301,7 +301,6 @@ export function useBulkActions({
   const {
     bulkActionsStore: [bulkActionsState, updateBulkActionsState],
   } = useAlertsTableContext();
-  const configBulkActionPanels = getBulkActions(query, refresh);
 
   const clearSelection = useCallback(() => {
     updateBulkActionsState({ action: BulkActionsVerbs.clear });
@@ -343,11 +342,11 @@ export function useBulkActions({
 
     return initialItems.length
       ? addItemsToInitialPanel({
-          panels: configBulkActionPanels,
+          panels: additionalBulkActions,
           items: initialItems,
         })
-      : configBulkActionPanels;
-  }, [configBulkActionPanels, initialItems, hideBulkActions]);
+      : additionalBulkActions;
+  }, [additionalBulkActions, initialItems, hideBulkActions]);
 
   const isBulkActionsColumnActive = bulkActions.length !== 0;
 

src/platform/packages/shared/response-ops/alerts-table/reducers/bulk_actions_reducer.test.tsx

@@ -77,7 +77,7 @@ describe('AlertsDataGrid bulk actions', () => {
 
   const dataGridProps: TestAlertsDataGridProps = {
     ...mockDataGridProps,
-    getBulkActions: undefined,
+    additionalBulkActions: undefined,
   };
 
   const baseRenderContext = {
@@ -92,7 +92,7 @@ describe('AlertsDataGrid bulk actions', () => {
 
   const dataGridPropsWithBulkActions: AlertsTableWithBulkActionsContextProps = {
     ...dataGridProps,
-    getBulkActions: () => [
+    additionalBulkActions: [
       {
         id: 0,
         items: [
@@ -173,7 +173,7 @@ describe('AlertsDataGrid bulk actions', () => {
     );
   };
 
-  describe('when the getBulkActions option is not set', () => {
+  describe('when the additionalBulkActions option is not set', () => {
     beforeEach(() => {
       jest.clearAllMocks();
     });
@@ -249,7 +249,7 @@ describe('AlertsDataGrid bulk actions', () => {
           rowCount: 1,
           rowSelection: new Map([[0, { isLoading: false }]]),
         },
-        getBulkActions: () => [
+        additionalBulkActions: [
           {
             id: 0,
             items: [
@@ -310,7 +310,7 @@ describe('AlertsDataGrid bulk actions', () => {
     });
   });
 
-  describe('when the getBulkActions option is set', () => {
+  describe('when the additionalBulkActions option is set', () => {
     beforeEach(() => {
       jest.clearAllMocks();
     });
@@ -498,7 +498,7 @@ describe('AlertsDataGrid bulk actions', () => {
               ...createDefaultBulkActionsState(),
               rowSelection: new Map([[1, { isLoading: false }]]),
             },
-            getBulkActions: () => [
+            additionalBulkActions: [
               {
                 id: 0,
                 items: [
@@ -560,7 +560,7 @@ describe('AlertsDataGrid bulk actions', () => {
           const mockOnClick = jest.fn();
           const props: TestAlertsDataGridProps = {
             ...dataGridPropsWithBulkActions,
-            getBulkActions: () => [
+            additionalBulkActions: [
               {
                 id: 0,
                 items: [
@@ -710,7 +710,7 @@ describe('AlertsDataGrid bulk actions', () => {
                   [1, { isLoading: false }],
                 ]),
               },
-              getBulkActions: () => [
+              additionalBulkActions: [
                 {
                   id: 0,
                   items: [

src/platform/packages/shared/response-ops/alerts-table/types.ts

@@ -391,13 +391,9 @@ export interface PublicAlertsDataGridProps
    */
   hideBulkActions?: boolean;
   /**
-   * A getter to customize the bulk actions menu items
-   * based on the current alerts search query used
+   * An array of bulk actions to be displayed in the table
    */
-  getBulkActions?: (
-    query: Pick<QueryDslQueryContainer, 'bool' | 'ids'>,
-    refresh: () => void
-  ) => BulkActionsPanelConfig[];
+  additionalBulkActions?: BulkActionsPanelConfig[];
   /**
    * Width of the actions column
    */

x-pack/solutions/security/packages/data-table/store/data_table/selectors.ts

@@ -14,6 +14,9 @@ const selectTableById = (state: DataTableState): TableById => state.dataTable.ta
 
 export const tableByIdSelector = createSelector(selectTableById, (tableById) => tableById);
 
+export const createTableSelector = (tableId: string) =>
+  createSelector(tableByIdSelector, (tableById: TableById) => tableById[tableId]);
+
 const selectTable = (state: DataTableState, tableId: string): DataTableModel =>
   state.dataTable.tableById[tableId];
 

x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/use_inspect.tsx

@@ -6,11 +6,15 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { InputsModelId } from '../../store/inputs/constants';
 import { useDeepEqualSelector } from '../../hooks/use_selector';
 import { inputsSelectors } from '../../store';
 import { inputsActions } from '../../store/actions';
+import { TimelineId } from '../../../../common/types/timeline';
+import { selectTimelineById } from '../../../timelines/store/selectors';
+import { timelineDefaults } from '../../../timelines/store/defaults';
+import type { State } from '../../store';
 
 interface UseInspectModalProps {
   inputId?: InputsModelId.global | InputsModelId.timeline;
@@ -34,12 +38,16 @@ export const useInspect = ({
   const dispatch = useDispatch();
 
   const getGlobalQuery = useMemo(() => inputsSelectors.globalQueryByIdSelector(), []);
-  const getTimelineQuery = useMemo(() => inputsSelectors.timelineQueryByIdSelector(), []);
+  const getTimelineQuery = useMemo(() => inputsSelectors.timelineQueryByIdSelectorFactory(), []);
+  const { activeTab } = useSelector(
+    (state: State) => selectTimelineById(state, TimelineId.active) ?? timelineDefaults
+  );
+
   const { loading, inspect, selectedInspectIndex, isInspected, searchSessionId } =
     useDeepEqualSelector((state) =>
       inputId === InputsModelId.global
         ? getGlobalQuery(state, queryId)
-        : getTimelineQuery(state, queryId)
+        : getTimelineQuery(state, `${TimelineId.active}-${activeTab}`)
     );
 
   const handleClick = useCallback(() => {

x-pack/solutions/security/plugins/security_solution/public/common/components/page/use_refetch_by_session.tsx

@@ -7,15 +7,18 @@
 
 import type { MutableRefObject } from 'react';
 import { useCallback, useRef, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import type { ISessionService } from '@kbn/data-plugin/public';
 import { useDeepEqualSelector } from '../../hooks/use_selector';
 import { useKibana } from '../../lib/kibana';
 import { inputsSelectors } from '../../store';
 import { inputsActions } from '../../store/actions';
 import { InputsModelId } from '../../store/inputs/constants';
 import type { Refetch } from '../../store/inputs/model';
-
+import { TimelineId } from '../../../../common/types/timeline';
+import { selectTimelineById } from '../../../timelines/store/selectors';
+import type { State } from '../../store';
+import { timelineDefaults } from '../../../timelines/store/defaults';
 interface UseRefetchByRestartingSessionProps {
   inputId?: InputsModelId;
   queryId: string;
@@ -35,11 +38,15 @@ export const useRefetchByRestartingSession = ({
   const session = useRef(data.search.session);
 
   const getGlobalQuery = useMemo(() => inputsSelectors.globalQueryByIdSelector(), []);
-  const getTimelineQuery = useMemo(() => inputsSelectors.timelineQueryByIdSelector(), []);
+  const getTimelineQuery = useMemo(() => inputsSelectors.timelineQueryByIdSelectorFactory(), []);
+  const { activeTab } = useSelector(
+    (state: State) => selectTimelineById(state, TimelineId.active) ?? timelineDefaults
+  );
+
   const { selectedInspectIndex } = useDeepEqualSelector((state) =>
     inputId === InputsModelId.global
       ? getGlobalQuery(state, queryId)
-      : getTimelineQuery(state, queryId)
+      : getTimelineQuery(state, `${TimelineId.active}-${activeTab}`)
   );
 
   const refetchByRestartingSession = useCallback(() => {