diff --git a/x-pack/packages/ml/data_grid/hooks/use_data_grid.tsx b/x-pack/packages/ml/data_grid/hooks/use_data_grid.tsx index dc87c68cc9b7c..f5ddb45642985 100644 --- a/x-pack/packages/ml/data_grid/hooks/use_data_grid.tsx +++ b/x-pack/packages/ml/data_grid/hooks/use_data_grid.tsx @@ -14,7 +14,7 @@ import { ES_CLIENT_TOTAL_HITS_RELATION } from '@kbn/ml-query-utils'; import { INDEX_STATUS } from '../lib/common'; import type { ChartData } from '../lib/field_histograms'; import { ColumnChart } from '../components/column_chart'; -import { COLUMN_CHART_DEFAULT_VISIBILITY_ROWS_THRESHOLD, INIT_MAX_COLUMNS } from '../lib/common'; +import { MAX_ROW_COUNT, INIT_MAX_COLUMNS } from '../lib/common'; import type { ChartsVisible, ColumnId, @@ -62,6 +62,11 @@ export const useDataGrid = ( const { rowCount, rowCountRelation } = rowCountInfo; + const setLimitedRowCountInfo = useCallback((info: RowCountInfo) => { + const limitedRowCount = Math.min(info.rowCount, MAX_ROW_COUNT); + setRowCountInfo({ rowCount: limitedRowCount, rowCountRelation: info.rowCountRelation }); + }, []); + const toggleChartVisibility = () => { if (chartsVisible !== undefined) { setChartsVisible(!chartsVisible); @@ -161,10 +166,7 @@ export const useDataGrid = ( // we decide whether to show or hide the charts by default. useEffect(() => { if (chartsVisible === undefined && rowCount > 0 && rowCountRelation !== undefined) { - setChartsVisible( - rowCount <= COLUMN_CHART_DEFAULT_VISIBILITY_ROWS_THRESHOLD && - rowCountRelation !== ES_CLIENT_TOTAL_HITS_RELATION.GTE - ); + setChartsVisible(rowCountRelation !== ES_CLIENT_TOTAL_HITS_RELATION.GTE); } }, [chartsVisible, rowCount, rowCountRelation]); @@ -189,7 +191,7 @@ export const useDataGrid = ( setErrorMessage, setNoDataMessage, setPagination, - setRowCountInfo, + setRowCountInfo: setLimitedRowCountInfo, setSortingColumns, setStatus, setTableItems, diff --git a/x-pack/packages/ml/data_grid/lib/common.ts b/x-pack/packages/ml/data_grid/lib/common.ts index 82c6cfa618174..bb20c8465dd4a 100644 --- a/x-pack/packages/ml/data_grid/lib/common.ts +++ b/x-pack/packages/ml/data_grid/lib/common.ts @@ -42,9 +42,9 @@ import type { DataGridItem, IndexPagination, RenderCellValue } from './types'; export const INIT_MAX_COLUMNS = 10; /** - * The default threshold value for the number of rows at which the column chart visibility is set to true. + * The default maximum row count value, set to 10000 due to ES limitations. */ -export const COLUMN_CHART_DEFAULT_VISIBILITY_ROWS_THRESHOLD = 10000; +export const MAX_ROW_COUNT = 10000; /** * Enum for index status diff --git a/x-pack/packages/ml/data_grid/lib/types.ts b/x-pack/packages/ml/data_grid/lib/types.ts index 4475d8572bcc8..a652e92d4c522 100644 --- a/x-pack/packages/ml/data_grid/lib/types.ts +++ b/x-pack/packages/ml/data_grid/lib/types.ts @@ -250,7 +250,7 @@ export interface UseDataGridReturnType { /** * Setter function for the row count info. */ - setRowCountInfo: Dispatch>; + setRowCountInfo: (info: RowCountInfo) => void; /** * Setter function for the sorting columns. */ diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx index bcee389d1d91b..92300d5580cbb 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx @@ -37,6 +37,8 @@ import { useStorage } from '@kbn/ml-local-storage'; import { useUrlState } from '@kbn/ml-url-state'; import { useFieldStatsFlyoutContext } from '@kbn/ml-field-stats-flyout'; +import { MAX_ROW_COUNT } from '@kbn/ml-data-grid/lib/common'; +import { FormattedMessage } from '@kbn/i18n-react'; import type { PivotAggDict } from '../../../../../../common/types/pivot_aggs'; import type { PivotGroupByDict } from '../../../../../../common/types/pivot_group_by'; import { TRANSFORM_FUNCTION } from '../../../../../../common/constants'; @@ -288,6 +290,14 @@ export const StepDefineForm: FC = React.memo((props) => { }; }); + const rowCountInfoLabel = ( + + ); + return (
@@ -467,6 +477,11 @@ export const StepDefineForm: FC = React.memo((props) => { label={i18n.translate('xpack.transform.stepDefineForm.dataGridLabel', { defaultMessage: 'Source documents', })} + labelAppend={ + indexPreviewProps.rowCount === MAX_ROW_COUNT && ( + {rowCountInfoLabel} + ) + } > @@ -503,6 +518,11 @@ export const StepDefineForm: FC = React.memo((props) => { label={i18n.translate('xpack.transform.stepDefineForm.previewLabel', { defaultMessage: 'Preview', })} + labelAppend={ + previewProps.rowCount === MAX_ROW_COUNT && ( + {rowCountInfoLabel} + ) + } > <> diff --git a/x-pack/test/functional/apps/transform/creation/runtime_mappings_saved_search/creation_runtime_mappings.ts b/x-pack/test/functional/apps/transform/creation/runtime_mappings_saved_search/creation_runtime_mappings.ts index bbdf53b3eda5c..dc9c74dfa07a5 100644 --- a/x-pack/test/functional/apps/transform/creation/runtime_mappings_saved_search/creation_runtime_mappings.ts +++ b/x-pack/test/functional/apps/transform/creation/runtime_mappings_saved_search/creation_runtime_mappings.ts @@ -326,7 +326,7 @@ export default function ({ getService }: FtrProviderContext) { await transform.wizard.assertAdvancedQueryEditorSwitchCheckState(false); await transform.testExecution.logTestStep('enables the index preview histogram charts'); - await transform.wizard.enableIndexPreviewHistogramCharts(false); + await transform.wizard.enableIndexPreviewHistogramCharts(true); await transform.testExecution.logTestStep('displays the index preview histogram charts'); await transform.wizard.assertIndexPreviewHistogramCharts( testData.expected.histogramCharts