[Discover] Data Grid Pagination Options

CHANGELOG.md

@@ -27,6 +27,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Decouple] Add new cross compatibility check core service which export functionality for plugins to verify if their OpenSearch plugin counterpart is installed on the cluster or has incompatible version to configure the plugin behavior([#4710](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4710))
 - [Discover] Add long numerals support [#5592](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5592)
 - [Discover] Display inner properties in the left navigation bar [#5429](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5429)
+- [Discover] Added customizable pagination options based on Discover UI settings [#5610](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5610)
 - [Chrome] Introduce registerCollapsibleNavHeader to allow plugins to customize the rendering of nav menu header ([#5244](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5244))
 - [Custom Branding] Relative URL should be allowed for logos ([#5572](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5572))
 

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -16,6 +16,9 @@ import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_
 import { usePagination } from '../utils/use_pagination';
 import { SortOrder } from '../../../saved_searches/types';
 import { buildColumns } from '../../utils/columns';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverServices } from '../../../build_services';
+import { SAMPLE_SIZE_SETTING } from '../../../../common';
 
 export interface DataGridTableProps {
   columns: string[];
@@ -52,9 +55,12 @@ export const DataGridTable = ({
   isContextView = false,
   isLoading = false,
 }: DataGridTableProps) => {
+  const { services } = useOpenSearchDashboards<DiscoverServices>();
+
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
-  const pagination = usePagination(rowCount);
+  const pageSizeLimit = services.uiSettings?.get(SAMPLE_SIZE_SETTING);
+  const pagination = usePagination({ rowCount, pageSizeLimit });
 
   let adjustedColumns = buildColumns(columns);
   // handle case where the user removes selected filed and leaves only time column

src/plugins/discover/public/application/components/utils/page_size_options.test.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { defaultPageOptions, generatePageSizeOptions } from './page_size_options';
+
+describe('generatePageSizeOptions', () => {
+  it('generates default options and additional options based on sample size', () => {
+    const sampleSize = 1000;
+
+    const pageSizeOptions = generatePageSizeOptions(sampleSize);
+
+    // Expected result based on the provided sample size
+    const expectedOptions = [...defaultPageOptions, 500, 1000];
+
+    // Check if the generated options match the expected result
+    expect(pageSizeOptions).toEqual(expectedOptions);
+  });
+
+  it('handles edge case when sample size is less than maxSize', () => {
+    const sampleSize = 50;
+
+    // Call the function
+    const pageSizeOptions = generatePageSizeOptions(sampleSize);
+
+    // Check if the generated options match the expected result
+    expect(pageSizeOptions).toEqual(defaultPageOptions);
+  });
+
+  it('handles edge case when sample size is less than 0', () => {
+    const sampleSize = -10;
+
+    // Call the function
+    const pageSizeOptions = generatePageSizeOptions(sampleSize);
+
+    // Check if the generated options match the expected result
+    expect(pageSizeOptions).toEqual(defaultPageOptions);
+  });
+});

src/plugins/discover/public/application/components/utils/page_size_options.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Generates an array of pagination options based on the provided `pageSizeLimit`.
+ * The array includes default values (25, 50, 100) and additional options derived from the `pageSizeLimit` setting.
+ * Ensures uniqueness and sorts the array in ascending order, representing available page size options for pagination.
+ * @param {number} pageSizeLimit - The sample size used to determine additional pagination options.
+ * @returns {number[]} - An array of available page size options.
+ */
+
+export const generatePageSizeOptions = (pageSizeLimit: number): number[] => {
+  const isInDefaultRange = pageSizeLimit < defaultPageOptions[defaultPageOptions.length - 1];
+
+  if (pageSizeLimit && pageSizeLimit > 0 && !isInDefaultRange) {
+    const stepSize = 500;
+    const pageSizeFromSetting = [...Array(Math.ceil(pageSizeLimit / stepSize)).keys()].map(
+      (i) => (i + 1) * stepSize
+    );
+    return Array.from(new Set([...defaultPageOptions, ...pageSizeFromSetting])).sort(
+      (a, b) => a - b
+    );
+  }
+  return defaultPageOptions;
+};
+
+export const defaultPageOptions = [25, 50, 100];

src/plugins/discover/public/application/components/utils/use_pagination.test.ts

@@ -7,22 +7,23 @@ import { renderHook, act } from '@testing-library/react-hooks';
 import { usePagination } from './use_pagination';
 
 describe('usePagination', () => {
+  const pageSizeLimit = 500;
   it('should initialize correctly with visParams and nRow', () => {
     const nRow = 30;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, pageSizeLimit }));
 
     expect(result.current).toEqual({
       pageIndex: 0,
       pageSize: 100,
       onChangeItemsPerPage: expect.any(Function),
       onChangePage: expect.any(Function),
-      pageSizeOptions: [25, 50, 100],
+      pageSizeOptions: [25, 50, 100, 500],
     });
   });
 
   it('should update pageSize correctly when calling onChangeItemsPerPage', () => {
     const nRow = 30;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, pageSizeLimit }));
 
     act(() => {
       result.current?.onChangeItemsPerPage(20);
@@ -33,13 +34,13 @@ describe('usePagination', () => {
       pageSize: 20,
       onChangeItemsPerPage: expect.any(Function),
       onChangePage: expect.any(Function),
-      pageSizeOptions: [25, 50, 100],
+      pageSizeOptions: [25, 50, 100, 500],
     });
   });
 
   it('should update pageIndex correctly when calling onChangePage', () => {
     const nRow = 30;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, pageSizeLimit }));
 
     act(() => {
       result.current?.onChangePage(1);
@@ -50,13 +51,13 @@ describe('usePagination', () => {
       pageSize: 100,
       onChangeItemsPerPage: expect.any(Function),
       onChangePage: expect.any(Function),
-      pageSizeOptions: [25, 50, 100],
+      pageSizeOptions: [25, 50, 100, 500],
     });
   });
 
   it('should correct pageIndex if it exceeds maximum page index after nRow or perPage change', () => {
     const nRow = 300;
-    const { result } = renderHook(() => usePagination(nRow));
+    const { result } = renderHook(() => usePagination({ rowCount: nRow, pageSizeLimit }));
 
     act(() => {
       result.current?.onChangePage(4);
@@ -67,7 +68,7 @@ describe('usePagination', () => {
       pageSize: 100,
       onChangeItemsPerPage: expect.any(Function),
       onChangePage: expect.any(Function),
-      pageSizeOptions: [25, 50, 100],
+      pageSizeOptions: [25, 50, 100, 500],
     });
   });
 });

src/plugins/discover/public/application/components/utils/use_pagination.ts

@@ -4,14 +4,21 @@
  */
 
 import { useState, useMemo, useCallback } from 'react';
+import { generatePageSizeOptions } from './page_size_options';
+export interface Props {
+  pageSizeLimit: number;
+  rowCount: number;
+}
 
-export const usePagination = (rowCount: number) => {
+export const usePagination = ({ rowCount, pageSizeLimit }: Props) => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 100 });
   const pageCount = useMemo(() => Math.ceil(rowCount / pagination.pageSize), [
     rowCount,
     pagination,
   ]);
 
+  const pageSizeOptions = generatePageSizeOptions(pageSizeLimit);
+
   const onChangeItemsPerPage = useCallback(
     (pageSize: number) => setPagination((p) => ({ ...p, pageSize })),
     []
@@ -31,9 +38,9 @@ export const usePagination = (rowCount: number) => {
             onChangePage,
             pageIndex: pagination.pageIndex > pageCount - 1 ? 0 : pagination.pageIndex,
             pageSize: pagination.pageSize,
-            pageSizeOptions: [25, 50, 100], // TODO: make this configurable
+            pageSizeOptions,
           }
         : undefined,
-    [pagination, onChangeItemsPerPage, onChangePage, pageCount]
+    [pagination, onChangeItemsPerPage, onChangePage, pageCount, pageSizeOptions]
   );
 };