improved loader

Signed-off-by: Ashwin P Chandran <[email protected]>
ashwin-pc · Jan 31, 2024 · 579e5aa · 579e5aa
1 parent 0958180
commit 579e5aa
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 38 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
@@ -160,19 +160,21 @@ export const DataGridTable = ({
         onAddColumn={onAddColumn}
         onFilter={onFilter}
         onClose={() => setInspectedHit(undefined)}
+        sampleSize={pageSizeLimit}
       />
     ),
     [
       displayedTableColumns,
       adjustedColumns,
+      rows,
       indexPattern,
-      onAddColumn,
+      sortingColumns,
       onColumnSort,
-      onFilter,
       onRemoveColumn,
       onReorderColumn,
-      rows,
-      sortingColumns,
+      onAddColumn,
+      onFilter,
+      pageSizeLimit,
     ]
   );
 

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
@@ -6,7 +6,14 @@
 import './_doc_table.scss';
 
 import React, { useEffect, useRef, useState } from 'react';
-import { EuiDataGridColumn, EuiDataGridSorting } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiDataGridColumn,
+  EuiDataGridSorting,
+  EuiProgress,
+} from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
 import { TableHeader } from './table_header';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { TableRow } from './table_rows';
@@ -27,6 +34,7 @@ export interface DefaultDiscoverTableProps {
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
   onClose: () => void;
+  sampleSize: number;
 }
 
 export const LegacyDiscoverTable = ({
@@ -41,6 +49,7 @@ export const LegacyDiscoverTable = ({
   onAddColumn,
   onFilter,
   onClose,
+  sampleSize,
 }: DefaultDiscoverTableProps) => {
   const [renderedRowCount, setRenderedRowCount] = useState(50); // Start with 50 rows
   const observerRef = useRef<IntersectionObserver | null>(null);
@@ -74,39 +83,59 @@ export const LegacyDiscoverTable = ({
 
   return (
     indexPattern && (
-      <table data-test-subj="docTable" className="osd-table table">
-        <thead>
-          <TableHeader
-            displayedTableColumns={displayedTableColumns}
-            defaultSortOrder={''}
-            // hideTimeColumn,
-            indexPattern={indexPattern}
-            // isShortDots,
-            onChangeSortOrder={onChangeSortOrder}
-            onReorderColumn={onReorderColumn}
-            onRemoveColumn={onRemoveColumn}
-            sortOrder={sortOrder}
-          />
-        </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}
-              />
-            );
-          })}
-          {renderedRowCount < rows.length && <div ref={sentinelRef} style={{ height: '1px' }} />}
-        </tbody>
-      </table>
+      <>
+        <table data-test-subj="docTable" className="osd-table table">
+          <thead>
+            <TableHeader
+              displayedTableColumns={displayedTableColumns}
+              defaultSortOrder={''}
+              // hideTimeColumn,
+              indexPattern={indexPattern}
+              // isShortDots,
+              onChangeSortOrder={onChangeSortOrder}
+              onReorderColumn={onReorderColumn}
+              onRemoveColumn={onRemoveColumn}
+              sortOrder={sortOrder}
+            />
+          </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}
+                />
+              );
+            })}
+          </tbody>
+        </table>
+        {renderedRowCount < rows.length && (
+          <div ref={sentinelRef}>
+            <EuiProgress size="xs" color="accent" />
+          </div>
+        )}
+        {rows.length === sampleSize && (
+          <EuiCallOut className="dscTable__footer" data-test-subj="discoverDocTableFooter">
+            <FormattedMessage
+              id="discover.howToSeeOtherMatchingDocumentsDescription"
+              defaultMessage="These are the first {sampleSize} documents matching
+              your search, refine your search to see others."
+              values={{ sampleSize }}
+            />
+
+            <EuiButtonEmpty onClick={() => window.scrollTo(0, 0)}>
+              <FormattedMessage id="discover.backToTopLinkText" defaultMessage="Back to top." />
+            </EuiButtonEmpty>
+          </EuiCallOut>
+        )}
+      </>
     )
   );
 };