Add pagination to discover embeddable (#5770)

* Add pagination Signed-off-by: abbyhu2000 <[email protected]> * fix an errir Signed-off-by: abbyhu2000 <[email protected]> * small change Signed-off-by: abbyhu2000 <[email protected]> * fix errors Signed-off-by: abbyhu2000 <[email protected]> --------- Signed-off-by: abbyhu2000 <[email protected]>
opensearch-project · Feb 2, 2024 · 40e61ba · 40e61ba
1 parent 7677c03
commit 40e61ba
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 17 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -41,6 +41,7 @@ export interface DataGridTableProps {
   isContextView?: boolean;
   isLoading?: boolean;
   storage: Storage;
+  showPagination?: boolean;
 }
 
 export const DataGridTable = ({
@@ -61,6 +62,7 @@ export const DataGridTable = ({
   isContextView = false,
   isLoading = false,
   storage,
+  showPagination,
 }: DataGridTableProps) => {
   const { services } = useOpenSearchDashboards<DiscoverServices>();
 
@@ -161,6 +163,7 @@ export const DataGridTable = ({
         onFilter={onFilter}
         onClose={() => setInspectedHit(undefined)}
         sampleSize={pageSizeLimit}
+        showPagination={showPagination}
       />
     ),
     [
@@ -175,6 +178,7 @@ export const DataGridTable = ({
       onAddColumn,
       onFilter,
       pageSizeLimit,
+      showPagination,
     ]
   );
 

diff --git a/.../discover/public/application/components/default_discover_table/default_discover_table.tsx b/.../discover/public/application/components/default_discover_table/default_discover_table.tsx
@@ -12,6 +12,9 @@ import {
   EuiDataGridColumn,
   EuiDataGridSorting,
   EuiProgress,
+  EuiPagination,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { TableHeader } from './table_header';
@@ -35,6 +38,7 @@ export interface DefaultDiscoverTableProps {
   onFilter: DocViewFilterFn;
   onClose: () => void;
   sampleSize: number;
+  showPagination?: boolean;
 }
 
 export const LegacyDiscoverTable = ({
@@ -50,8 +54,15 @@ export const LegacyDiscoverTable = ({
   onFilter,
   onClose,
   sampleSize,
+  showPagination,
 }: DefaultDiscoverTableProps) => {
+  const pageSize = 50;
   const [renderedRowCount, setRenderedRowCount] = useState(50); // Start with 50 rows
+  const [displayedRows, setDisplayedRows] = useState(rows.slice(0, pageSize));
+  const [currentRowCounts, setCurrentRowCounts] = useState({
+    startRow: 0,
+    endRow: pageSize,
+  });
   const observerRef = useRef<IntersectionObserver | null>(null);
   const sentinelRef = useRef<HTMLDivElement | null>(null);
 
@@ -81,9 +92,48 @@ export const LegacyDiscoverTable = ({
     };
   }, []);
 
+  const [activePage, setActivePage] = useState(0);
+  const pageCount = Math.ceil(rows.length / pageSize);
+
+  const goToPage = (pageNumber: number) => {
+    const startRow = pageNumber * pageSize;
+    const endRow =
+      rows.length < pageNumber * pageSize + pageSize
+        ? rows.length
+        : pageNumber * pageSize + pageSize;
+    setCurrentRowCounts({
+      startRow,
+      endRow,
+    });
+    setDisplayedRows(rows.slice(startRow, endRow));
+    setActivePage(pageNumber);
+  };
+
   return (
     indexPattern && (
       <>
+        {showPagination ? (
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiPagination
+                pageCount={pageCount}
+                activePage={activePage}
+                onPageClick={(currentPage) => goToPage(currentPage)}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <FormattedMessage
+                id="discover.docTable.pagerControl.pagesCountLabel"
+                defaultMessage="{startItem}&ndash;{endItem} of {totalItems}"
+                values={{
+                  startItem: currentRowCounts.startRow,
+                  endItem: currentRowCounts.endRow,
+                  totalItems: rows.length,
+                }}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : null}
         <table data-test-subj="docTable" className="osd-table table">
           <thead>
             <TableHeader
@@ -99,29 +149,31 @@ export const LegacyDiscoverTable = ({
             />
           </thead>
           <tbody>
-            {rows.slice(0, renderedRowCount).map((row: OpenSearchSearchHit, index: number) => {
-              return (
-                <TableRow
-                  key={index}
-                  row={row}
-                  columnIds={displayedTableColumns.map((column) => column.id)}
-                  columns={columns}
-                  indexPattern={indexPattern}
-                  onRemoveColumn={onRemoveColumn}
-                  onAddColumn={onAddColumn}
-                  onFilter={onFilter}
-                  onClose={onClose}
-                />
-              );
-            })}
+            {(showPagination ? displayedRows : rows.slice(0, renderedRowCount)).map(
+              (row: OpenSearchSearchHit, index: number) => {
+                return (
+                  <TableRow
+                    key={index}
+                    row={row}
+                    columnIds={displayedTableColumns.map((column) => column.id)}
+                    columns={columns}
+                    indexPattern={indexPattern}
+                    onRemoveColumn={onRemoveColumn}
+                    onAddColumn={onAddColumn}
+                    onFilter={onFilter}
+                    onClose={onClose}
+                  />
+                );
+              }
+            )}
           </tbody>
         </table>
-        {renderedRowCount < rows.length && (
+        {!showPagination && renderedRowCount < rows.length && (
           <div ref={sentinelRef}>
             <EuiProgress size="xs" color="accent" />
           </div>
         )}
-        {rows.length === sampleSize && (
+        {!showPagination && rows.length === sampleSize && (
           <EuiCallOut className="dscTable__footer" data-test-subj="discoverDocTableFooter">
             <FormattedMessage
               id="discover.howToSeeOtherMatchingDocumentsDescription"

diff --git a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx
@@ -45,6 +45,7 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
     title: searchProps.title,
     description: searchProps.description,
     storage,
+    showPagination: true,
   } as DiscoverEmbeddableProps;
 
   return (