From 04b1eafb362d8859689cc6eeeff3ca130ed525b5 Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Fri, 2 Feb 2024 11:19:55 -0800 Subject: [PATCH] [Discover] Fixes pagination style (#5778) * fixes pagination style Signed-off-by: Ashwin P Chandran * style-lint fix Signed-off-by: Ashwin P Chandran * fix react warning for unnecessary prop Signed-off-by: Ashwin P Chandran * Show total hit count and pass services in embeddable Signed-off-by: Ashwin P Chandran * removed unnecessary div Signed-off-by: Ashwin P Chandran --------- Signed-off-by: Ashwin P Chandran Signed-off-by: Anan Zhuang Co-authored-by: Anan Zhuang --- .../components/data_grid/data_grid_table.tsx | 13 ++-- .../default_discover_table/_pagination.scss | 7 +++ .../default_discover_table.tsx | 46 +++++++------- .../default_discover_table/pagination.tsx | 63 +++++++++++++++++++ .../components/doc_views/context_app.tsx | 3 +- .../components/sidebar/discover_sidebar.tsx | 1 - .../view_components/canvas/discover_table.tsx | 4 +- .../view_components/utils/get_default_sort.ts | 5 +- .../public/embeddable/search_embeddable.tsx | 4 +- .../search_embeddable_component.tsx | 46 +++++++------- .../view_events_flyout/components/styles.scss | 2 +- 11 files changed, 128 insertions(+), 66 deletions(-) create mode 100644 src/plugins/discover/public/application/components/default_discover_table/_pagination.scss create mode 100644 src/plugins/discover/public/application/components/default_discover_table/pagination.tsx 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 864a2be1077a..d2ba5150084b 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 @@ -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,10 +53,10 @@ export const DataGridTable = ({ onFilter, onMoveColumn, onRemoveColumn, - onReorderColumn, onSetColumns, onSort, sort, + hits, rows, displayTimeColumn, title = '', @@ -68,7 +64,6 @@ export const DataGridTable = ({ 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( () => ( {showPagination ? ( - - - goToPage(currentPage)} - /> - - - - - + ) : null} @@ -193,6 +182,17 @@ export const LegacyDiscoverTable = ({ )} + {showPagination ? ( + + ) : 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 new file mode 100644 index 000000000000..feec7631f735 --- /dev/null +++ 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 ( + + {endItem >= sampleSize && ( + + + + + + )} + + + + + goToPage(currentPage)} + /> + + + ); +}; 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 index f2777f41076a..e49f8161a661 100644 --- 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(); - 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} /> 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 index 7f3bdfb0b924..e2fee8506e1f 100644 --- 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 index 584e47047c57..2a958ec00fcb 100644 --- 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 index fd4c1761ad52..79080cf8657f 100644 --- 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 index 16e91abdf173..ecf0f1bc2b30 100644 --- 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) => ( )); 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 ( - - {discoverEmbeddableProps.totalHitCount !== 0 ? ( - - - - ) : ( - - - - )} - + + + {discoverEmbeddableProps.hits !== 0 ? ( + + + + ) : ( + + + + )} + + ); } diff --git a/src/plugins/vis_augmenter/public/view_events_flyout/components/styles.scss b/src/plugins/vis_augmenter/public/view_events_flyout/components/styles.scss index 75cb154d1957..1fb5c007fadc 100644 --- a/src/plugins/vis_augmenter/public/view_events_flyout/components/styles.scss +++ b/src/plugins/vis_augmenter/public/view_events_flyout/components/styles.scss @@ -1,7 +1,7 @@ $vis-description-width: 200px; $event-vis-height: 55px; $timeline-panel-height: 90px; -$content-padding-top: 110px; // Padding needed within view events flyout content to sit comfortably below flyout header +$content-padding-top: 110px; // Padding required for view events flyout content to align below flyout header. $date-range-height: 45px; // Static height we want for the date range picker component $error-icon-padding-right: -8px; // This is so the error icon is aligned consistent with the event count icons $base-vis-min-height: 25vh; // Visualizations require the container to have a valid width and height to render