From 2e2ddde94071b244f75e76d50670ba17f3b7caed Mon Sep 17 00:00:00 2001 From: Miki Date: Fri, 5 Apr 2024 12:21:42 -0700 Subject: [PATCH] Improve the perceived performance of Discover Signed-off-by: Miki --- package.json | 4 +- .../components/data_grid/data_grid.tsx | 153 ++++++++++++ .../components/data_grid/data_grid_table.tsx | 223 ++++-------------- .../default_discover_table.tsx | 44 ++-- .../default_discover_table/table_cell.tsx | 10 +- .../{table_rows.tsx => table_row.tsx} | 28 ++- .../components/doc_views/context_app.tsx | 8 +- .../view_components/canvas/discover_table.tsx | 9 +- .../apps/dashboard/dashboard_time_picker.js | 6 +- test/functional/apps/home/_sample_data.ts | 2 +- .../services/dashboard/expectations.ts | 11 +- yarn.lock | 16 +- 12 files changed, 265 insertions(+), 249 deletions(-) create mode 100644 src/plugins/discover/public/application/components/data_grid/data_grid.tsx rename src/plugins/discover/public/application/components/default_discover_table/{table_rows.tsx => table_row.tsx} (90%) diff --git a/package.json b/package.json index c728618fcbcd..089df1c14c73 100644 --- a/package.json +++ b/package.json @@ -285,7 +285,7 @@ "@types/dedent": "^0.7.0", "@types/deep-freeze-strict": "^1.1.0", "@types/delete-empty": "^2.0.0", - "@types/dompurify": "^2.3.3", + "@types/dompurify": "^3.0.5", "@types/elasticsearch": "^5.0.33", "@types/enzyme": "^3.10.7", "@types/eslint": "^6.1.3", @@ -372,7 +372,7 @@ "d3-cloud": "1.2.5", "dedent": "^0.7.0", "delete-empty": "^2.0.0", - "dompurify": "^2.4.1", + "dompurify": "^3.0.11", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "enzyme-to-json": "^3.5.0", diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid.tsx new file mode 100644 index 000000000000..fa4c58e6ea8f --- /dev/null +++ b/src/plugins/discover/public/application/components/data_grid/data_grid.tsx @@ -0,0 +1,153 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import './_data_grid_table.scss'; + +import React, { useMemo, useCallback } from 'react'; +import { EuiDataGrid, EuiDataGridSorting } from '@elastic/eui'; +import { IndexPattern, getServices } from '../../../opensearch_dashboards_services'; +import { fetchTableDataCell } from './data_grid_table_cell_value'; +import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns'; +import { DocViewInspectButton } from './data_grid_table_docview_inspect_button'; +import { OpenSearchSearchHit } from '../../doc_views/doc_views_types'; +import { usePagination } from '../utils/use_pagination'; +import { buildColumns } from '../../utils/columns'; +import { DOC_HIDE_TIME_COLUMN_SETTING, SAMPLE_SIZE_SETTING } from '../../../../common'; +import { UI_SETTINGS } from '../../../../../data/common'; +import { SortOrder } from '../../../saved_searches/types'; +import { useToolbarOptions } from './data_grid_toolbar'; + +export interface DataGridProps { + columns: string[]; + indexPattern: IndexPattern; + onSort: (s: SortOrder[]) => void; + rows: OpenSearchSearchHit[]; + onSetColumns: (columns: string[]) => void; + sort: SortOrder[]; + isToolbarVisible?: boolean; + isContextView?: boolean; +} + +const DataGridUI = ({ + columns, + indexPattern, + onSetColumns, + onSort, + sort, + rows, + isToolbarVisible = true, + isContextView = false, +}: DataGridProps) => { + const services = getServices(); + const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]); + const { toolbarOptions, lineCount } = useToolbarOptions(); + const [pageSizeLimit, isShortDots] = useMemo(() => { + return [ + services.uiSettings.get(SAMPLE_SIZE_SETTING), + services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE), + ]; + }, [services.uiSettings]); + const displayTimeColumn = useMemo( + () => + !services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased(), + [indexPattern, services.uiSettings] + ); + const pagination = usePagination({ rowCount, pageSizeLimit }); + + let adjustedColumns = buildColumns(columns); + // handle case where the user removes selected filed and leaves only time column + if ( + adjustedColumns.length === 1 && + indexPattern && + adjustedColumns[0] === indexPattern.timeFieldName + ) { + adjustedColumns = [...adjustedColumns, '_source']; + } + + const includeSourceInColumns = adjustedColumns.includes('_source'); + const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]); + const rowHeightsOptions = useMemo( + () => ({ + defaultHeight: { + lineCount: lineCount || (includeSourceInColumns ? 3 : 1), + }, + }), + [includeSourceInColumns, lineCount] + ); + + const onColumnSort = useCallback( + (cols: EuiDataGridSorting['columns']) => { + onSort(cols.map(({ id, direction }) => [id, direction])); + }, + [onSort] + ); + + const renderCellValue = useMemo(() => fetchTableDataCell(indexPattern, rows, isShortDots), [ + indexPattern, + isShortDots, + rows, + ]); + + const displayedTableColumns = useMemo( + () => + buildDataGridColumns( + adjustedColumns, + indexPattern, + displayTimeColumn, + includeSourceInColumns, + isContextView + ), + [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView] + ); + + const dataGridTableColumnsVisibility = useMemo( + () => ({ + visibleColumns: computeVisibleColumns( + adjustedColumns, + indexPattern, + displayTimeColumn + ) as string[], + setVisibleColumns: (cols: string[]) => { + onSetColumns(cols); + }, + }), + [adjustedColumns, indexPattern, displayTimeColumn, onSetColumns] + ); + + const sorting: EuiDataGridSorting = useMemo( + () => ({ columns: sortingColumns, onSort: onColumnSort }), + [sortingColumns, onColumnSort] + ); + + const leadingControlColumns = useMemo(() => { + return [ + { + id: 'inspectCollapseColumn', + headerCellRender: () => null, + rowCellRender: DocViewInspectButton, + width: 40, + }, + ]; + }, []); + + return ( + + ); +}; + +export const DataGrid = React.memo(DataGridUI); 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 d4b8de6ad211..cdd6cf8681ac 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 @@ -5,27 +5,17 @@ import './_data_grid_table.scss'; -import React, { useState, useMemo, useCallback } from 'react'; -import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui'; +import React, { useState } from 'react'; +import { EuiPanel } from '@elastic/eui'; import { IndexPattern, getServices } from '../../../opensearch_dashboards_services'; -import { fetchTableDataCell } from './data_grid_table_cell_value'; -import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns'; -import { DocViewInspectButton } from './data_grid_table_docview_inspect_button'; import { DataGridFlyout } from './data_grid_table_flyout'; 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 { - DOC_HIDE_TIME_COLUMN_SETTING, - SAMPLE_SIZE_SETTING, - SORT_DEFAULT_ORDER_SETTING, -} from '../../../../common'; -import { UI_SETTINGS } from '../../../../../data/common'; -import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table'; +import { DefaultDiscoverTable } from '../default_discover_table/default_discover_table'; +import { DataGrid } from './data_grid'; import { getNewDiscoverSetting } from '../utils/local_storage'; -import { SortDirection, SortOrder } from '../../../saved_searches/types'; -import { useToolbarOptions } from './data_grid_toolbar'; +import { SortOrder } from '../../../saved_searches/types'; export interface DataGridTableProps { columns: string[]; @@ -39,7 +29,6 @@ export interface DataGridTableProps { rows: OpenSearchSearchHit[]; onSetColumns: (columns: string[]) => void; sort: SortOrder[]; - displayTimeColumn: boolean; title?: string; description?: string; isToolbarVisible?: boolean; @@ -61,7 +50,6 @@ export const DataGridTable = ({ sort, hits, rows, - displayTimeColumn, title = '', description = '', isToolbarVisible = true, @@ -72,20 +60,9 @@ export const DataGridTable = ({ }: DataGridTableProps) => { const services = getServices(); const [inspectedHit, setInspectedHit] = useState(); - const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]); - const { toolbarOptions, lineCount } = useToolbarOptions(); - const [pageSizeLimit, isShortDots, hideTimeColumn, defaultSortOrder] = useMemo(() => { - return [ - services.uiSettings.get(SAMPLE_SIZE_SETTING), - services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE), - services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING), - services.uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') as SortDirection, - ]; - }, [services.uiSettings]); - const pagination = usePagination({ rowCount, pageSizeLimit }); let adjustedColumns = buildColumns(columns); - // handle case where the user removes selected filed and leaves only time column + // Handle the case where all fields/columns are removed except the time-field one if ( adjustedColumns.length === 1 && indexPattern && @@ -94,162 +71,44 @@ export const DataGridTable = ({ adjustedColumns = [...adjustedColumns, '_source']; } - const includeSourceInColumns = adjustedColumns.includes('_source'); - const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]); - const rowHeightsOptions = useMemo( - () => ({ - defaultHeight: { - lineCount: lineCount || (includeSourceInColumns ? 3 : 1), - }, - }), - [includeSourceInColumns, lineCount] - ); - - const onColumnSort = useCallback( - (cols: EuiDataGridSorting['columns']) => { - onSort(cols.map(({ id, direction }) => [id, direction])); - }, - [onSort] - ); - - const renderCellValue = useMemo(() => fetchTableDataCell(indexPattern, rows, isShortDots), [ - indexPattern, - isShortDots, - rows, - ]); - - const displayedTableColumns = useMemo( - () => - buildDataGridColumns( - adjustedColumns, - indexPattern, - displayTimeColumn, - includeSourceInColumns, - isContextView - ), - [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView] - ); - - const dataGridTableColumnsVisibility = useMemo( - () => ({ - visibleColumns: computeVisibleColumns( - adjustedColumns, - indexPattern, - displayTimeColumn - ) as string[], - setVisibleColumns: (cols: string[]) => { - onSetColumns(cols); - }, - }), - [adjustedColumns, indexPattern, displayTimeColumn, onSetColumns] - ); - - const sorting: EuiDataGridSorting = useMemo( - () => ({ columns: sortingColumns, onSort: onColumnSort }), - [sortingColumns, onColumnSort] - ); - - const leadingControlColumns = useMemo(() => { - return [ - { - id: 'inspectCollapseColumn', - headerCellRender: () => null, - rowCellRender: DocViewInspectButton, - width: 40, - }, - ]; - }, []); - const newDiscoverEnabled = getNewDiscoverSetting(services.storage); - const legacyDiscoverTable = useMemo( - () => ( - setInspectedHit(undefined)} - sampleSize={pageSizeLimit} - showPagination={showPagination} - isShortDots={isShortDots} - hideTimeColumn={hideTimeColumn} - defaultSortOrder={defaultSortOrder} - scrollToTop={scrollToTop} - /> - ), - [ - adjustedColumns, - hits, - rows, - indexPattern, - sort, - onSort, - onRemoveColumn, - onMoveColumn, - onAddColumn, - onFilter, - pageSizeLimit, - showPagination, - defaultSortOrder, - hideTimeColumn, - isShortDots, - scrollToTop, - ] - ); - - const dataGridTable = useMemo( - () => ( - - ), - [ - displayedTableColumns, - dataGridTableColumnsVisibility, - leadingControlColumns, - pagination, - renderCellValue, - rowCount, - sorting, - isToolbarVisible, - toolbarOptions, - rowHeightsOptions, - ] + const panelContent = newDiscoverEnabled ? ( + + ) : ( + setInspectedHit(undefined)} + showPagination={showPagination} + scrollToTop={scrollToTop} + /> ); - const tablePanelProps = newDiscoverEnabled - ? { - paddingSize: 'none' as const, - style: { - margin: '8px', - }, - color: 'transparent' as const, - } - : { - paddingSize: 'none' as const, - style: { - margin: '0px', - }, - color: 'transparent' as const, - }; + const tablePanelProps = { + paddingSize: 'none' as const, + style: { + margin: newDiscoverEnabled ? '8px' : '0px', + }, + color: 'transparent' as const, + }; return ( - {newDiscoverEnabled ? dataGridTable : legacyDiscoverTable} + {panelContent} {newDiscoverEnabled && inspectedHit && ( void; onAddColumn: (column: string) => void; onFilter: DocViewFilterFn; - onClose: () => void; - sampleSize: number; - isShortDots: boolean; - hideTimeColumn: boolean; - defaultSortOrder: SortDirection; + onClose?: () => void; showPagination?: boolean; scrollToTop?: () => void; } -export const LegacyDiscoverTable = ({ +const DefaultDiscoverTableUI = ({ columns, hits, rows, @@ -48,13 +50,19 @@ export const LegacyDiscoverTable = ({ onAddColumn, onFilter, onClose, - sampleSize, - isShortDots, - hideTimeColumn, - defaultSortOrder, showPagination, scrollToTop, }: DefaultDiscoverTableProps) => { + const services = getServices(); + const [sampleSize, isShortDots, hideTimeColumn, defaultSortOrder] = useMemo(() => { + return [ + services.uiSettings.get(SAMPLE_SIZE_SETTING), + services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE), + services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING), + services.uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') as SortDirection, + ]; + }, [services.uiSettings]); + const displayedColumns = getLegacyDisplayedColumns( columns, indexPattern, @@ -62,8 +70,8 @@ export const LegacyDiscoverTable = ({ isShortDots ); const displayedColumnNames = displayedColumns.map((column) => column.name); - const pageSize = 50; - const [renderedRowCount, setRenderedRowCount] = useState(50); // Start with 50 rows + const pageSize = 10; + const [renderedRowCount, setRenderedRowCount] = useState(pageSize); // Start with 10 rows const [displayedRows, setDisplayedRows] = useState(rows.slice(0, pageSize)); const [currentRowCounts, setCurrentRowCounts] = useState({ startRow: 0, @@ -71,7 +79,7 @@ export const LegacyDiscoverTable = ({ }); const observerRef = useRef(null); const [sentinelEle, setSentinelEle] = useState(); - // Need a callback ref since the element isnt set on the first render. + // Need a callback ref since the element isn't set on the first render. const sentinelRef = useCallback((node: HTMLDivElement | null) => { if (node !== null) { setSentinelEle(node); @@ -83,7 +91,7 @@ export const LegacyDiscoverTable = ({ observerRef.current = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { - setRenderedRowCount((prevRowCount) => prevRowCount + 50); // Load 50 more rows + setRenderedRowCount((prevRowCount) => prevRowCount + pageSize); // Load 50 more rows } }, { threshold: 1.0 } @@ -196,3 +204,5 @@ export const LegacyDiscoverTable = ({ ) ); }; + +export const DefaultDiscoverTable = React.memo(DefaultDiscoverTableUI); diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx index a542e70ff646..faebb3f78fd2 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx @@ -19,13 +19,13 @@ import { DocViewFilterFn } from '../../doc_views/doc_views_types'; export interface TableCellProps { columnId: string; isTimeField?: boolean; - onFilter: DocViewFilterFn; + onFilter?: DocViewFilterFn; filterable?: boolean; fieldMapping?: any; sanitizedCellValue: string; } -export const TableCell = ({ +const TableCellUI = ({ columnId, isTimeField, onFilter, @@ -43,7 +43,7 @@ export const TableCell = ({ })} > onFilter(columnId, fieldMapping, '+')} + onClick={() => onFilter?.(columnId, fieldMapping, '+')} iconType="plusInCircle" aria-label={i18n.translate('discover.filterForValueLabel', { defaultMessage: 'Filter for value', @@ -58,7 +58,7 @@ export const TableCell = ({ })} > onFilter(columnId, fieldMapping, '-')} + onClick={() => onFilter?.(columnId, fieldMapping, '-')} iconType="minusInCircle" aria-label={i18n.translate('discover.filterOutValueLabel', { defaultMessage: 'Filter out value', @@ -84,3 +84,5 @@ export const TableCell = ({ ); }; + +export const TableCell = React.memo(TableCellUI); diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx similarity index 90% rename from src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx rename to src/plugins/discover/public/application/components/default_discover_table/table_row.tsx index cb2767afd801..e9ae1d11e976 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx @@ -9,7 +9,7 @@ * GitHub history for details. */ -import React, { useState } from 'react'; +import React, { useState, useCallback } from 'react'; import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; import dompurify from 'dompurify'; import { TableCell } from './table_cell'; @@ -23,10 +23,10 @@ export interface TableRowProps { row: OpenSearchSearchHit; columns: string[]; indexPattern: IndexPattern; - onRemoveColumn: (column: string) => void; - onAddColumn: (column: string) => void; - onFilter: DocViewFilterFn; - onClose: () => void; + onRemoveColumn?: (column: string) => void; + onAddColumn?: (column: string) => void; + onFilter?: DocViewFilterFn; + onClose?: () => void; isShortDots: boolean; } @@ -42,12 +42,16 @@ export const TableRow = ({ }: TableRowProps) => { const flattened = indexPattern.flattenHit(row); const [isExpanded, setIsExpanded] = useState(false); + const handleExpanding = useCallback(() => setIsExpanded((prevState) => !prevState), [ + setIsExpanded, + ]); + const tableRow = ( setIsExpanded(!isExpanded)} + onClick={handleExpanding} iconType={isExpanded ? 'arrowDown' : 'arrowRight'} aria-label="Next" data-test-subj="docTableExpandToggleColumn" @@ -156,16 +160,16 @@ export const TableRow = ({ columns={columns} indexPattern={indexPattern} onRemoveColumn={(columnName: string) => { - onRemoveColumn(columnName); - onClose(); + onRemoveColumn?.(columnName); + onClose?.(); }} onAddColumn={(columnName: string) => { - onAddColumn(columnName); - onClose(); + onAddColumn?.(columnName); + onClose?.(); }} filter={(mapping, value, mode) => { - onFilter(mapping, value, mode); - onClose(); + onFilter?.(mapping, value, mode); + onClose?.(); }} /> 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 c3a6da2d8cef..da06db6417b6 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 @@ -6,7 +6,7 @@ import React, { useMemo, useCallback } from 'react'; import { SurrDocType } from './context/api/context'; import { ActionBar } from './context/components/action_bar/action_bar'; -import { CONTEXT_STEP_SETTING, DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common'; +import { CONTEXT_STEP_SETTING } from '../../../../common'; import { DiscoverViewServices } from '../../../build_services'; import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public'; import { LOADING_STATUS } from './context/utils/context_query_state'; @@ -77,11 +77,6 @@ export function ContextApp({ return [[indexPattern.timeFieldName!, SortDirection.desc]]; }, [indexPattern]); - const displayTimeColumn = useMemo( - () => !uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased(), - [indexPattern, uiSettings] - ); - return ( <> {}} sort={sort} rows={rows} - displayTimeColumn={displayTimeColumn} isToolbarVisible={false} isContextView={true} /> 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 ccf82e4ccba0..0fb2f80b7960 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 } from 'react'; +import React, { useCallback } from 'react'; import { DiscoverViewServices } from '../../../build_services'; import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public'; import { DataGridTable } from '../../components/data_grid/data_grid_table'; @@ -20,7 +20,6 @@ import { import { IndexPatternField, opensearchFilters } from '../../../../../data/public'; import { DocViewFilterFn } from '../../doc_views/doc_views_types'; import { SortOrder } from '../../../saved_searches/types'; -import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common'; import { OpenSearchSearchHit } from '../../doc_views/doc_views_types'; import { popularizeField } from '../../helpers/popularize_field'; @@ -32,7 +31,6 @@ interface Props { export const DiscoverTable = ({ rows, scrollToTop }: Props) => { const { services } = useOpenSearchDashboards(); const { - uiSettings, data: { query: { filterManager }, }, @@ -85,10 +83,6 @@ export const DiscoverTable = ({ rows, scrollToTop }: Props) => { }, [filterManager, indexPattern] ); - const displayTimeColumn = useMemo( - () => !!(!uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased()), - [indexPattern, uiSettings] - ); if (indexPattern === undefined) { // TODO: handle better @@ -112,7 +106,6 @@ export const DiscoverTable = ({ rows, scrollToTop }: Props) => { onSort={onSetSort} sort={sort} rows={rows} - displayTimeColumn={displayTimeColumn} title={savedSearch?.id ? savedSearch.title : ''} description={savedSearch?.id ? savedSearch.description : ''} scrollToTop={scrollToTop} diff --git a/test/functional/apps/dashboard/dashboard_time_picker.js b/test/functional/apps/dashboard/dashboard_time_picker.js index e5da381ec06e..bc2add60a33f 100644 --- a/test/functional/apps/dashboard/dashboard_time_picker.js +++ b/test/functional/apps/dashboard/dashboard_time_picker.js @@ -67,15 +67,15 @@ export default function ({ getService, getPageObjects }) { name: 'saved search', fields: ['bytes', 'agent'], }); - // Current data grid loads 100 rows per page by default with inspect button and time range - await dashboardExpect.savedSearchRowCountFromLegacyTable(100); + // DefaultDiscoverTable loads 10 rows initially + await dashboardExpect.rowCountFromDefaultDiscoverTable(10); // Set to time range with no data await PageObjects.timePicker.setAbsoluteRange( 'Jan 1, 2000 @ 00:00:00.000', 'Jan 1, 2000 @ 01:00:00.000' ); - await dashboardExpect.savedSearchRowCountFromLegacyTable(0); + await dashboardExpect.rowCountFromDefaultDiscoverTable(0); }); it('Timepicker start, end, interval values are set by url', async () => { diff --git a/test/functional/apps/home/_sample_data.ts b/test/functional/apps/home/_sample_data.ts index a790a884ccbe..20419a4730f5 100644 --- a/test/functional/apps/home/_sample_data.ts +++ b/test/functional/apps/home/_sample_data.ts @@ -126,7 +126,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { log.debug('Checking area, bar and heatmap charts rendered'); await dashboardExpect.seriesElementCount(15); log.debug('Checking saved searches rendered'); - await dashboardExpect.savedSearchRowCountFromLegacyTable(100); + await dashboardExpect.rowCountFromDefaultDiscoverTable(10); log.debug('Checking input controls rendered'); await dashboardExpect.inputControlItemCount(3); log.debug('Checking tag cloud rendered'); diff --git a/test/functional/services/dashboard/expectations.ts b/test/functional/services/dashboard/expectations.ts index 266517045747..daae5b623694 100644 --- a/test/functional/services/dashboard/expectations.ts +++ b/test/functional/services/dashboard/expectations.ts @@ -240,14 +240,15 @@ export function DashboardExpectProvider({ getService, getPageObjects }: FtrProvi }); } - async savedSearchRowCountFromLegacyTable(expectedCount: number) { - log.debug(`DashboardExpect.savedSearchRowCount(${expectedCount})`); + async rowCountFromDefaultDiscoverTable(expectedCount: number) { + log.debug(`DashboardExpect.rowCountFromDefaultDiscoverTable(${expectedCount})`); + // Rows have no identifiers but we can count using the identifiers of the first cells in each data row await retry.try(async () => { - const savedSearchRows = await testSubjects.findAll( - 'docTableExpandToggleColumn', + const firstCells = await find.allByCssSelector( + 'td[data-test-subj="docTableExpandToggleColumn"]', findTimeout ); - expect(savedSearchRows.length).to.be(expectedCount); + expect(firstCells.length).to.be(expectedCount); }); } diff --git a/yarn.lock b/yarn.lock index 1e6f3635138d..d59c13e05c7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3244,10 +3244,10 @@ resolved "https://registry.yarnpkg.com/@types/delete-empty/-/delete-empty-2.0.0.tgz#1647ae9e68f708a6ba778531af667ec55bc61964" integrity sha512-sq+kwx8zA9BSugT9N+Jr8/uWjbHMZ+N/meJEzRyT3gmLq/WMtx/iSIpvdpmBUi/cvXl6Kzpvve8G2ESkabFwmg== -"@types/dompurify@^2.3.3": - version "2.4.0" - resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.4.0.tgz#fd9706392a88e0e0e6d367f3588482d817df0ab9" - integrity sha512-IDBwO5IZhrKvHFUl+clZxgf3hn2b/lU6H1KaBShPkQyGJUQ0xwebezIPSuiyGwfz1UzJWQl4M7BDxtHtCCPlTg== +"@types/dompurify@^3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.0.5.tgz#02069a2fcb89a163bacf1a788f73cb415dd75cb7" + integrity sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg== dependencies: "@types/trusted-types" "*" @@ -7706,10 +7706,10 @@ domhandler@^4.0, domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhan dependencies: domelementtype "^2.2.0" -dompurify@^2.4.1: - version "2.4.1" - resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.1.tgz#f9cb1a275fde9af6f2d0a2644ef648dd6847b631" - integrity sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA== +dompurify@^3.0.11: + version "3.0.11" + resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.11.tgz#c163f5816eaac6aeef35dae2b77fca0504564efe" + integrity sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg== domutils@1.5.1: version "1.5.1"