[RAC] EuiDataGrid pagination (#109269) (#110471)

* Update T-Grid to use DataGrid pagination

* It also improves the Gtid loading state
* DataGrid pagination makes sure that we display the grid with the proper height.

* Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

* Apply DataGrid laoding and pagination changes to observability

* Fix cypress tests

* Fix t-grid page render bug on Observability

* some pagination fixes

* hide table when analyzer active

* isolate exported function

Co-authored-by: semd <sergi.massaneda@elastic.co>

Co-authored-by: Pablo Machado <pablo.nevesmachado@elastic.co>

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

@@ -322,7 +322,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     return [
       {
         id: 'expand',
-        width: 96,
+        width: 120,
         headerCellRender: () => {
           return (
             <EventsThContent>

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

@@ -13,7 +13,7 @@ import FilterForValueButton from './filter_for_value';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { TimelineNonEcsData } from '../../../../timelines/common/search_strategy';
 import { TGridCellAction } from '../../../../timelines/common/types/timeline';
-import { TimelinesUIStart } from '../../../../timelines/public';
+import { getPageRowIndex, TimelinesUIStart } from '../../../../timelines/public';
 
 export const FILTER_FOR_VALUE = i18n.translate('xpack.observability.hoverActions.filterForValue', {
   defaultMessage: 'Filter for value',
@@ -35,11 +35,15 @@ const useKibanaServices = () => {
 
 /** actions common to all cells (e.g. copy to clipboard) */
 const commonCellActions: TGridCellAction[] = [
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+  ({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
+    rowIndex,
+    columnId,
+    Component,
+  }) => {
     const { timelines } = useKibanaServices();
 
     const value = getMappedNonEcsValue({
-      data: data[rowIndex],
+      data: data[getPageRowIndex(rowIndex, pageSize)],
       fieldName: columnId,
     });
 
@@ -60,9 +64,13 @@ const commonCellActions: TGridCellAction[] = [
 
 /** actions for adding filters to the search bar */
 const buildFilterCellActions = (addToQuery: (value: string) => void): TGridCellAction[] => [
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+  ({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
+    rowIndex,
+    columnId,
+    Component,
+  }) => {
     const value = getMappedNonEcsValue({
-      data: data[rowIndex],
+      data: data[getPageRowIndex(rowIndex, pageSize)],
       fieldName: columnId,
     });
 

x-pack/plugins/security_solution/cypress/screens/hosts/events.ts

@@ -38,4 +38,4 @@ export const LOAD_MORE =
 export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count"]';
 
 export const EVENTS_VIEWER_PAGINATION =
-  '[data-test-subj="events-viewer-panel"] [data-test-subj="timeline-pagination"]';
+  '[data-test-subj="events-viewer-panel"] .euiDataGrid__pagination';

x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.tsx

@@ -12,6 +12,7 @@ import type {
   TimelineNonEcsData,
 } from '../../../../../timelines/common/search_strategy';
 import { DataProvider, TGridCellAction } from '../../../../../timelines/common/types';
+import { getPageRowIndex } from '../../../../../timelines/public';
 import { getMappedNonEcsValue } from '../../../timelines/components/timeline/body/data_driven_columns';
 import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
 import { allowTopN, escapeDataProviderId } from '../../components/drag_and_drop/helpers';
@@ -36,11 +37,20 @@ const useKibanaServices = () => {
 
 /** the default actions shown in `EuiDataGrid` cells */
 export const defaultCellActions: TGridCellAction[] = [
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+  ({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
+    rowIndex,
+    columnId,
+    Component,
+  }) => {
     const { timelines, filterManager } = useKibanaServices();
 
+    const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
+    if (pageRowIndex >= data.length) {
+      return null;
+    }
+
     const value = getMappedNonEcsValue({
-      data: data[rowIndex],
+      data: data[pageRowIndex],
       fieldName: columnId,
     });
 
@@ -58,11 +68,20 @@ export const defaultCellActions: TGridCellAction[] = [
       </>
     );
   },
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+  ({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
+    rowIndex,
+    columnId,
+    Component,
+  }) => {
     const { timelines, filterManager } = useKibanaServices();
 
+    const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
+    if (pageRowIndex >= data.length) {
+      return null;
+    }
+
     const value = getMappedNonEcsValue({
-      data: data[rowIndex],
+      data: data[pageRowIndex],
       fieldName: columnId,
     });
 
@@ -80,11 +99,20 @@ export const defaultCellActions: TGridCellAction[] = [
       </>
     );
   },
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+  ({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
+    rowIndex,
+    columnId,
+    Component,
+  }) => {
     const { timelines } = useKibanaServices();
 
+    const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
+    if (pageRowIndex >= data.length) {
+      return null;
+    }
+
     const value = getMappedNonEcsValue({
-      data: data[rowIndex],
+      data: data[pageRowIndex],
       fieldName: columnId,
     });
 
@@ -122,16 +150,23 @@ export const defaultCellActions: TGridCellAction[] = [
     browserFields,
     data,
     timelineId,
+    pageSize,
   }: {
     browserFields: BrowserFields;
     data: TimelineNonEcsData[][];
     timelineId: string;
+    pageSize: number;
   }) => ({ rowIndex, columnId, Component }) => {
     const [showTopN, setShowTopN] = useState(false);
     const onClick = useCallback(() => setShowTopN(!showTopN), [showTopN]);
 
+    const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
+    if (pageRowIndex >= data.length) {
+      return null;
+    }
+
     const value = getMappedNonEcsValue({
-      data: data[rowIndex],
+      data: data[pageRowIndex],
       fieldName: columnId,
     });
 
@@ -159,11 +194,20 @@ export const defaultCellActions: TGridCellAction[] = [
       </>
     );
   },
-  ({ data }: { data: TimelineNonEcsData[][] }) => ({ rowIndex, columnId, Component }) => {
+  ({ data, pageSize }: { data: TimelineNonEcsData[][]; pageSize: number }) => ({
+    rowIndex,
+    columnId,
+    Component,
+  }) => {
     const { timelines } = useKibanaServices();
 
+    const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
+    if (pageRowIndex >= data.length) {
+      return null;
+    }
+
     const value = getMappedNonEcsValue({
-      data: data[rowIndex],
+      data: data[pageRowIndex],
       fieldName: columnId,
     });
 

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx

@@ -14,7 +14,6 @@ import { esQuery, Filter } from '../../../../../../../src/plugins/data/public';
 import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
 import { RowRendererId, TimelineIdLiteral } from '../../../../common/types/timeline';
 import { StatefulEventsViewer } from '../../../common/components/events_viewer';
-import { HeaderSection } from '../../../common/components/header_section';
 import {
   displayErrorToast,
   displaySuccessToast,
@@ -371,8 +370,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
 
   if (loading || indexPatternsLoading || isEmpty(selectedPatterns)) {
     return (
-      <EuiPanel hasBorder>
-        <HeaderSection title="" />
+      <EuiPanel hasBorder={false} hasShadow={false} paddingSize="none">
         <EuiLoadingContent data-test-subj="loading-alerts-panel" />
       </EuiPanel>
     );

x-pack/plugins/timelines/common/types/timeline/columns/index.tsx

@@ -46,11 +46,13 @@ export type TGridCellAction = ({
   browserFields,
   data,
   timelineId,
+  pageSize,
 }: {
   browserFields: BrowserFields;
   /** each row of data is represented as one TimelineNonEcsData[] */
   data: TimelineNonEcsData[][];
   timelineId: string;
+  pageSize: number;
 }) => (props: EuiDataGridColumnCellActionProps) => ReactNode;
 
 /** The specification of a column header */

x-pack/plugins/timelines/common/utils/pagination.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+/**
+ * rowIndex is bigger than `data.length` for pages with page numbers bigger than one.
+ * For that reason, we must calculate `rowIndex % itemsPerPage`.
+ *
+ * Ex:
+ * Given `rowIndex` is `13` and `itemsPerPage` is `10`.
+ * It means that the `activePage` is `2` and the `pageRowIndex` is `3`
+ *
+ * **Warning**:
+ * Be careful with array out of bounds. `pageRowIndex` can be bigger or equal to `data.length`
+ *  in the scenario where the user changes the event status (Open, Acknowledged, Closed).
+ */
+
+export const getPageRowIndex = (rowIndex: number, itemsPerPage: number) => rowIndex % itemsPerPage;

x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 { useState, useLayoutEffect } from 'react';
+
+// That could be different from security and observability. Get it as parameter?
+const INITIAL_DATA_GRID_HEIGHT = 967;
+
+// It will recalculate DataGrid height after this time interval.
+const TIME_INTERVAL = 50;
+
+/**
+ * You are probably asking yourself "Why 3?". But that is the wrong mindset. You should be asking yourself "why not 3?".
+ * 3 (three) is a number, numeral and digit. It is the natural number following 2 and preceding 4, and is the smallest
+ * odd prime number and the only prime preceding a square number. It has religious or cultural significance in many societies.
+ */
+const MAGIC_GAP = 3;
+
+/**
+ * HUGE HACK!!!
+ * DataGrtid height isn't properly calculated when the grid has horizontal scroll.
+ * https://github.com/elastic/eui/issues/5030
+ *
+ * In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.
+ *
+ * Please delete me and allow DataGrid to calculate its height when the bug is fixed.
+ */
+export const useDataGridHeightHack = (pageSize: number, rowCount: number) => {
+  const [height, setHeight] = useState(INITIAL_DATA_GRID_HEIGHT);
+
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      const gridVirtualized = document.querySelector('#body-data-grid .euiDataGrid__virtualized');
+
+      if (
+        gridVirtualized &&
+        gridVirtualized.children[0].clientHeight !== gridVirtualized.clientHeight // check if it has vertical scroll
+      ) {
+        setHeight(
+          height +
+            gridVirtualized.children[0].clientHeight -
+            gridVirtualized.clientHeight +
+            MAGIC_GAP
+        );
+      }
+    }, TIME_INTERVAL);
+  }, [pageSize, rowCount, height]);
+
+  return height;
+};

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

@@ -66,10 +66,11 @@ describe('Body', () => {
     excludedRowRendererIds: [],
     id: 'timeline-test',
     isSelectAllChecked: false,
+    isLoading: false,
     itemsPerPageOptions: [],
     loadingEventIds: [],
     loadPage: jest.fn(),
-    querySize: 25,
+    pageSize: 25,
     renderCellValue: TestCellRenderer,
     rowRenderers: [],
     selectedEventIds: {},
@@ -78,7 +79,6 @@ describe('Body', () => {
     showCheckboxes: false,
     tabType: TimelineTabs.query,
     tableView: 'gridView',
-    totalPages: 1,
     totalItems: 1,
     leadingControlColumns: [],
     trailingControlColumns: [],