[Observability] [Timelines] Reduce number of alerts per page in Alerts table

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

@@ -46,7 +46,12 @@ import {
   getAlertsPermissions,
   useGetUserAlertsPermissions,
 } from '../../hooks/use_alert_permission';
-import type { TimelinesUIStart, TGridType, SortDirection } from '../../../../timelines/public';
+import type {
+  TimelinesUIStart,
+  GetTGridProps,
+  TGridType,
+  SortDirection,
+} from '../../../../timelines/public';
 import { useStatusBulkActionItems } from '../../../../timelines/public';
 import type { TopAlert } from './';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
@@ -370,7 +375,10 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
       filters: [],
       hasAlertsCrudPermissions,
       indexNames,
-      itemsPerPageOptions: [10, 25, 50],
+      // Limited to 10 to work around performance issues as described in
+      // https://github.com/elastic/kibana/issues/110758
+      itemsPerPage: 10,
+      itemsPerPageOptions: [],
       loadingText: i18n.translate('xpack.observability.alertsTable.loadingTextLabel', {
         defaultMessage: 'loading alerts',
       }),
@@ -400,7 +408,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
           values: { totalAlerts },
           defaultMessage: '{totalAlerts, plural, =1 {alert} other {alerts}}',
         }),
-    };
+    } as GetTGridProps<typeof type>;
   }, [
     casePermissions,
     addToQuery,

x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx

@@ -102,6 +102,7 @@ export interface TGridStandaloneProps {
   }) => boolean;
   height?: number;
   indexNames: string[];
+  itemsPerPage: number;
   itemsPerPageOptions: number[];
   query: Query;
   onRuleChange?: () => void;
@@ -133,6 +134,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   filterStatus,
   hasAlertsCrudPermissions,
   indexNames,
+  itemsPerPage,
   itemsPerPageOptions,
   onRuleChange,
   query,
@@ -311,7 +313,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
           end,
         },
         indexNames,
-        itemsPerPage: itemsPerPageStore,
+        itemsPerPage,
         itemsPerPageOptions,
         showCheckboxes: true,
       })

x-pack/plugins/timelines/public/index.ts

@@ -28,7 +28,7 @@ export type {
 export { Direction } from '../common/search_strategy/common';
 export { tGridReducer } from './store/t_grid/reducer';
 export type { TGridModelForTimeline, TimelineState, TimelinesUIStart } from './types';
-export { TGridType, SortDirection } from './types';
+export { TGridType, GetTGridProps, SortDirection } from './types';
 export {
   ARIA_COLINDEX_ATTRIBUTE,
   ARIA_ROWINDEX_ATTRIBUTE,

x-pack/test/observability_functional/apps/observability/alerts/index.ts

@@ -46,7 +46,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       it('Renders the correct number of cells', async () => {
         // NOTE: This isn't ideal, but EuiDataGrid doesn't really have the concept of "rows"
         const cells = await testSubjects.findAll('dataGridRowCell');
-        expect(cells.length).to.be(54);
+        expect(cells.length).to.be(10);
       });
     });
   });

x-pack/test/plugin_functional/plugins/timelines_test/public/applications/timelines_test/index.tsx

@@ -78,6 +78,7 @@ const AppRoot = React.memo(
                   footerText: 'Events',
                   filters: [],
                   hasAlertsCrudPermissions,
+                  itemsPerPage: 50,
                   itemsPerPageOptions: [1, 2, 3],
                   loadingText: 'Loading events',
                   renderCellValue: () => <div data-test-subj="timeline-wrapper">test</div>,