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

* 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>
Co-authored-by: semd <sergi.massaneda@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: [],