Show total hit count and pass services in embeddable

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
ashwin-pc · Feb 2, 2024 · c5ff6ca · c5ff6ca
1 parent f0ff842
commit c5ff6ca
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 43 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
@@ -21,8 +21,6 @@ import { SAMPLE_SIZE_SETTING } from '../../../../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';
-
 export interface DataGridTableProps {
   columns: string[];
   indexPattern: IndexPattern;
@@ -31,6 +29,7 @@ export interface DataGridTableProps {
   onRemoveColumn: (column: string) => void;
   onReorderColumn: (col: string, source: number, destination: number) => void;
   onSort: (sort: SortOrder[]) => void;
+  hits?: number;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
   sort: SortOrder[];
@@ -40,7 +39,6 @@ export interface DataGridTableProps {
   isToolbarVisible?: boolean;
   isContextView?: boolean;
   isLoading?: boolean;
-  storage: Storage;
   showPagination?: boolean;
 }
 
@@ -54,14 +52,14 @@ export const DataGridTable = ({
   onSetColumns,
   onSort,
   sort,
+  hits,
   rows,
   displayTimeColumn,
   title = '',
   description = '',
   isToolbarVisible = true,
   isContextView = false,
   isLoading = false,
-  storage,
   showPagination,
 }: DataGridTableProps) => {
   const { services } = useOpenSearchDashboards<DiscoverServices>();
@@ -146,13 +144,14 @@ export const DataGridTable = ({
     ];
   }, []);
 
-  const datagridActive = getDataGridTableSetting(storage);
+  const datagridActive = getDataGridTableSetting(services.storage);
 
   const legacyDiscoverTable = useMemo(
     () => (
       <LegacyDiscoverTable
         displayedTableColumns={displayedTableColumns}
         columns={adjustedColumns}
+        hits={hits}
         rows={rows}
         indexPattern={indexPattern}
         sortOrder={sortingColumns}
@@ -169,6 +168,7 @@ export const DataGridTable = ({
     [
       displayedTableColumns,
       adjustedColumns,
+      hits,
       rows,
       indexPattern,
       sortingColumns,

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
@@ -23,6 +23,7 @@ import { Pagination } from './pagination';
 export interface DefaultDiscoverTableProps {
   displayedTableColumns: EuiDataGridColumn[];
   columns: string[];
+  hits?: number;
   rows: OpenSearchSearchHit[];
   indexPattern: IndexPattern;
   sortOrder: Array<{
@@ -42,6 +43,7 @@ export interface DefaultDiscoverTableProps {
 export const LegacyDiscoverTable = ({
   displayedTableColumns,
   columns,
+  hits,
   rows,
   indexPattern,
   sortOrder,
@@ -117,7 +119,8 @@ export const LegacyDiscoverTable = ({
             goToPage={goToPage}
             startItem={currentRowCounts.startRow + 1}
             endItem={currentRowCounts.endRow}
-            totalItems={rows.length}
+            totalItems={hits}
+            sampleSize={sampleSize}
           />
         ) : null}
         <table data-test-subj="docTable" className="osd-table table">
@@ -180,7 +183,8 @@ export const LegacyDiscoverTable = ({
             goToPage={goToPage}
             startItem={currentRowCounts.startRow + 1}
             endItem={currentRowCounts.endRow}
-            totalItems={rows.length}
+            totalItems={hits}
+            sampleSize={sampleSize}
           />
         ) : null}
       </div>

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
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiPagination } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPagination, EuiTextColor } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 import './_pagination.scss';
@@ -14,7 +14,8 @@ interface Props {
   goToPage: (page: number) => void;
   startItem: number;
   endItem: number;
-  totalItems: number;
+  totalItems?: number;
+  sampleSize: number;
 }
 
 export const Pagination = ({
@@ -23,10 +24,22 @@ export const Pagination = ({
   goToPage,
   startItem,
   endItem,
-  totalItems,
+  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"

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,
   ]);
@@ -110,7 +110,6 @@ export function ContextApp({
           displayTimeColumn={displayTimeColumn}
           isToolbarVisible={false}
           isContextView={true}
-          storage={storage}
         />
       </div>
       <ActionBar

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';
@@ -37,7 +37,6 @@ export const DiscoverTable = ({ rows }: Props) => {
     },
     capabilities,
     indexPatterns,
-    storage,
   } = services;
 
   const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
@@ -115,7 +114,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,
@@ -41,32 +40,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>
   );
 }