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 index c738bfd65d50..f2ee6d078e2b 100644 --- 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(); @@ -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/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx index 05fe7f5cdb33..e9ef657fc924 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx +++ b/src/plugins/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,17 @@ export const LegacyDiscoverTable = ({ onFilter, onClose, sampleSize, + showPagination, }: DefaultDiscoverTableProps) => { + const pageSize = 50; const [renderedRowCount, setRenderedRowCount] = useState(50); // Start with 50 rows + const [displayedRows, setDisplayedRows] = useState( + showPagination ? rows.slice(0, pageSize) : rows.slice(0, renderedRowCount) + ); + const [currentRowCounts, setCurrentRowCounts] = useState({ + startRow: 0, + endRow: pageSize, + }); const observerRef = useRef(null); const sentinelRef = useRef(null); @@ -81,9 +94,48 @@ export const LegacyDiscoverTable = ({ }; }, []); + const [activePage, setActivePage] = useState(0); + const PAGE_COUNT = 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 ? ( + + + goToPage(currentPage)} + /> + + + + + + ) : null} - {rows.slice(0, renderedRowCount).map((row: OpenSearchSearchHit, index: number) => { + {displayedRows.map((row: OpenSearchSearchHit, index: number) => { return ( ( @@ -45,6 +46,7 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps title: searchProps.title, description: searchProps.description, storage, + showPagination: true, } as DiscoverEmbeddableProps; return (