[Discover] Fixes pagination style (#5778)

* fixes pagination style Signed-off-by: Ashwin P Chandran <[email protected]> * style-lint fix Signed-off-by: Ashwin P Chandran <[email protected]> * fix react warning for unnecessary prop Signed-off-by: Ashwin P Chandran <[email protected]> * Show total hit count and pass services in embeddable Signed-off-by: Ashwin P Chandran <[email protected]> * removed unnecessary div Signed-off-by: Ashwin P Chandran <[email protected]> --------- Signed-off-by: Ashwin P Chandran <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> Co-authored-by: Anan Zhuang <[email protected]>
opensearch-project · Feb 2, 2024 · 04b1eaf · 04b1eaf
1 parent 0901ddc
commit 04b1eaf
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 66 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
@@ -14,8 +14,6 @@ import { DiscoverGridContextProvider } from './data_grid_table_context';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { usePagination } from '../utils/use_pagination';
 import { buildColumns } from '../../utils/columns';
-import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
-import { DiscoverServices } from '../../../build_services';
 import {
   DOC_HIDE_TIME_COLUMN_SETTING,
   SAMPLE_SIZE_SETTING,
@@ -25,7 +23,6 @@ import { UI_SETTINGS } from '../../../../../data/common';
 import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table';
 import { toolbarVisibility } from './constants';
 import { getDataGridTableSetting } from '../utils/local_storage';
-import { Storage } from '../../../../../opensearch_dashboards_utils/public';
 import { SortOrder } from '../default_discover_table/helper';
 
 export interface DataGridTableProps {
@@ -35,7 +32,7 @@ export interface DataGridTableProps {
   onFilter: DocViewFilterFn;
   onMoveColumn: (colName: string, destination: number) => void;
   onRemoveColumn: (column: string) => void;
-  onReorderColumn: (col: string, source: number, destination: number) => void;
+  hits?: number;
   onSort: (s: SortOrder[]) => void;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
@@ -46,7 +43,6 @@ export interface DataGridTableProps {
   isToolbarVisible?: boolean;
   isContextView?: boolean;
   isLoading?: boolean;
-  storage: Storage;
   showPagination?: boolean;
 }
 
@@ -57,18 +53,17 @@ export const DataGridTable = ({
   onFilter,
   onMoveColumn,
   onRemoveColumn,
-  onReorderColumn,
   onSetColumns,
   onSort,
   sort,
+  hits,
   rows,
   displayTimeColumn,
   title = '',
   description = '',
   isToolbarVisible = true,
   isContextView = false,
   isLoading = false,
-  storage,
   showPagination,
 }: DataGridTableProps) => {
   const services = getServices();
@@ -159,12 +154,13 @@ export const DataGridTable = ({
     ];
   }, []);
 
-  const datagridActive = getDataGridTableSetting(storage);
+  const datagridActive = getDataGridTableSetting(services.storage);
 
   const legacyDiscoverTable = useMemo(
     () => (
       <LegacyDiscoverTable
         columns={adjustedColumns}
+        hits={hits}
         rows={rows}
         indexPattern={indexPattern}
         sort={sort}
@@ -183,6 +179,7 @@ export const DataGridTable = ({
     ),
     [
       adjustedColumns,
+      hits,
       rows,
       indexPattern,
       sort,

diff --git a/src/plugins/discover/public/application/components/default_discover_table/_pagination.scss b/src/plugins/discover/public/application/components/default_discover_table/_pagination.scss
@@ -0,0 +1,7 @@
+.osdDocTable_pagination {
+  width: 100%;
+
+  & ~ table {
+    margin-bottom: 0;
+  }
+}
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
@@ -10,20 +10,19 @@ import {
   EuiButtonEmpty,
   EuiCallOut,
   EuiProgress,
-  EuiPagination,
-  EuiFlexGroup,
-  EuiFlexItem,
 } 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';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { Pagination } from './pagination';
 import { SortOrder } from './helper';
 import { getLegacyDisplayedColumns } from './helper';
 
 export interface DefaultDiscoverTableProps {
   columns: string[];
+  hits?: number;
   rows: OpenSearchSearchHit[];
   indexPattern: IndexPattern;
   sort: SortOrder[];
@@ -42,6 +41,7 @@ export interface DefaultDiscoverTableProps {
 
 export const LegacyDiscoverTable = ({
   columns,
+  hits,
   rows,
   indexPattern,
   sort,
@@ -121,26 +121,15 @@ export const LegacyDiscoverTable = ({
     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>
+          <Pagination
+            pageCount={pageCount}
+            activePage={activePage}
+            goToPage={goToPage}
+            startItem={currentRowCounts.startRow + 1}
+            endItem={currentRowCounts.endRow}
+            totalItems={hits}
+            sampleSize={sampleSize}
+          />
         ) : null}
         <table data-test-subj="docTable" className="osd-table table">
           <thead>
@@ -193,6 +182,17 @@ export const LegacyDiscoverTable = ({
             </EuiButtonEmpty>
           </EuiCallOut>
         )}
+        {showPagination ? (
+          <Pagination
+            pageCount={pageCount}
+            activePage={activePage}
+            goToPage={goToPage}
+            startItem={currentRowCounts.startRow + 1}
+            endItem={currentRowCounts.endRow}
+            totalItems={hits}
+            sampleSize={sampleSize}
+          />
+        ) : null}
       </>
     )
   );

diff --git a/src/plugins/discover/public/application/components/default_discover_table/pagination.tsx b/src/plugins/discover/public/application/components/default_discover_table/pagination.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiPagination, EuiTextColor } from '@elastic/eui';
+import React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import './_pagination.scss';
+
+interface Props {
+  pageCount: number;
+  activePage: number;
+  goToPage: (page: number) => void;
+  startItem: number;
+  endItem: number;
+  totalItems?: number;
+  sampleSize: number;
+}
+
+export const Pagination = ({
+  pageCount,
+  activePage,
+  goToPage,
+  startItem,
+  endItem,
+  totalItems = 0,
+  sampleSize,
+}: Props) => {
+  return (
+    <EuiFlexGroup className="osdDocTable_pagination" alignItems="center" justifyContent="flexEnd">
+      {endItem >= sampleSize && (
+        <EuiFlexItem grow={false}>
+          <EuiTextColor color="subdued">
+            <FormattedMessage
+              id="discover.docTable.limitedSearchResultLabel"
+              defaultMessage="Limited to {sampleSize} results. Refine your search."
+              values={{ sampleSize }}
+            />
+          </EuiTextColor>
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem grow={false}>
+        <FormattedMessage
+          id="discover.docTable.pagerControl.pagesCountLabel"
+          defaultMessage="{startItem}&ndash;{endItem} of {totalItems}"
+          values={{
+            startItem,
+            endItem,
+            totalItems,
+          }}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiPagination
+          pageCount={pageCount}
+          activePage={activePage}
+          onPageClick={(currentPage) => goToPage(currentPage)}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx
@@ -40,7 +40,7 @@ export function ContextApp({
   appState,
 }: Props) {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
-  const { uiSettings, storage } = services;
+  const { uiSettings } = services;
   const defaultStepSize = useMemo(() => parseInt(uiSettings.get(CONTEXT_STEP_SETTING), 10), [
     uiSettings,
   ]);
@@ -111,7 +111,6 @@ export function ContextApp({
           displayTimeColumn={displayTimeColumn}
           isToolbarVisible={false}
           isContextView={true}
-          storage={storage}
         />
       </div>
       <ActionBar

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
@@ -267,7 +267,6 @@ const FieldList = ({
     <>
       <EuiButtonEmpty
         iconSide="right"
-        iconSize="s"
         color="text"
         iconType={expanded ? 'arrowDown' : 'arrowRight'}
         onClick={() => setExpanded(!expanded)}

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DataGridTable } from '../../components/data_grid/data_grid_table';
@@ -38,7 +38,6 @@ export const DiscoverTable = ({ rows }: Props) => {
     },
     capabilities,
     indexPatterns,
-    storage,
   } = services;
 
   const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
@@ -121,7 +120,6 @@ export const DiscoverTable = ({ rows }: Props) => {
       displayTimeColumn={displayTimeColumn}
       title={savedSearch?.id ? savedSearch.title : ''}
       description={savedSearch?.id ? savedSearch.description : ''}
-      storage={storage}
     />
   );
 };
diff --git a/src/plugins/discover/public/application/view_components/utils/get_default_sort.ts b/src/plugins/discover/public/application/view_components/utils/get_default_sort.ts
@@ -29,18 +29,17 @@
  */
 
 import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { SortOrder } from '../../../saved_searches/types';
 // @ts-ignore
 import { isSortable } from './get_sort';
 
-export type SortOrder = [string, string];
-
 /**
  * use in case the user didn't manually sort.
  * the default sort is returned depending of the index pattern
  */
 export function getDefaultSort(
   indexPattern: IndexPattern,
-  defaultSortOrder: string = 'desc'
+  defaultSortOrder: 'asc' | 'desc' = 'desc'
 ): SortOrder[] {
   if (indexPattern.timeFieldName && isSortable(indexPattern.timeFieldName, indexPattern)) {
     return [[indexPattern.timeFieldName, defaultSortOrder]];

diff --git a/src/plugins/discover/public/embeddable/search_embeddable.tsx b/src/plugins/discover/public/embeddable/search_embeddable.tsx
@@ -84,7 +84,7 @@ export interface SearchProps {
   onFilter?: (field: IFieldType, value: string[], operator: string) => void;
   rows?: any[];
   indexPattern?: IndexPattern;
-  totalHitCount?: number;
+  hits?: number;
   isLoading?: boolean;
   displayTimeColumn?: boolean;
   services: DiscoverServices;
@@ -360,7 +360,7 @@ export class SearchEmbeddable
       inspectorRequest.stats(getResponseInspectorStats(resp, searchSource)).ok({ json: resp });
 
       this.searchProps!.rows = resp.hits.hits;
-      this.searchProps!.totalHitCount = resp.hits.total;
+      this.searchProps!.hits = resp.hits.total;
       this.searchProps!.isLoading = false;
     } catch (error) {
       this.updateOutput({ loading: false, error });

diff --git a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx
@@ -14,20 +14,19 @@ import {
 import { VisualizationNoResults } from '../../../visualizations/public';
 import { getServices } from '../opensearch_dashboards_services';
 import './search_embeddable.scss';
+import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
 
 interface SearchEmbeddableProps {
   searchProps: SearchProps;
 }
-export interface DiscoverEmbeddableProps extends DataGridTableProps {
-  totalHitCount: number;
-}
+export type DiscoverEmbeddableProps = DataGridTableProps;
 
 export const DataGridTableMemoized = React.memo((props: DataGridTableProps) => (
   <DataGridTable {...props} />
 ));
 
 export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps) {
-  const { storage } = getServices();
+  const services = getServices();
   const discoverEmbeddableProps = {
     columns: searchProps.columns,
     indexPattern: searchProps.indexPattern,
@@ -42,32 +41,33 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
     sort: searchProps.sort,
     displayTimeColumn: searchProps.displayTimeColumn,
     services: searchProps.services,
-    totalHitCount: searchProps.totalHitCount,
+    hits: searchProps.hits,
     title: searchProps.title,
     description: searchProps.description,
-    storage,
     showPagination: true,
   } as DiscoverEmbeddableProps;
 
   return (
     <I18nProvider>
-      <EuiFlexGroup
-        gutterSize="xs"
-        direction="column"
-        responsive={false}
-        data-test-subj="embeddedSavedSearchDocTable"
-        className="eui-xScrollWithShadows eui-yScrollWithShadows"
-      >
-        {discoverEmbeddableProps.totalHitCount !== 0 ? (
-          <EuiFlexItem style={{ minHeight: 0 }} className="osdDocTable__container">
-            <DataGridTableMemoized {...discoverEmbeddableProps} />
-          </EuiFlexItem>
-        ) : (
-          <EuiFlexItem>
-            <VisualizationNoResults />
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
+      <OpenSearchDashboardsContextProvider services={services}>
+        <EuiFlexGroup
+          gutterSize="xs"
+          direction="column"
+          responsive={false}
+          data-test-subj="embeddedSavedSearchDocTable"
+          className="eui-xScrollWithShadows eui-yScrollWithShadows"
+        >
+          {discoverEmbeddableProps.hits !== 0 ? (
+            <EuiFlexItem style={{ minHeight: 0 }} className="osdDocTable__container">
+              <DataGridTableMemoized {...discoverEmbeddableProps} />
+            </EuiFlexItem>
+          ) : (
+            <EuiFlexItem>
+              <VisualizationNoResults />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </OpenSearchDashboardsContextProvider>
     </I18nProvider>
   );
 }