[8.16] [ML] Transforms: Limit the data grid result window (#196510)

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,

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

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<SetStateAction<RowCountInfo>>;
+  setRowCountInfo: (info: RowCountInfo) => void;
   /**
    * Setter function for the sorting columns.
    */

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<StepDefineFormProps> = React.memo((props) => {
     };
   });
 
+  const rowCountInfoLabel = (
+    <FormattedMessage
+      id="xpack.transform.stepDefineForm.rowCountInfoLabel"
+      defaultMessage="Results are limited to a maximum of {maxRowCount} for preview purposes"
+      values={{ maxRowCount: MAX_ROW_COUNT }}
+    />
+  );
+
   return (
     <div data-test-subj="transformStepDefineForm">
       <EuiForm>
@@ -467,6 +477,11 @@ export const StepDefineForm: FC<StepDefineFormProps> = React.memo((props) => {
               label={i18n.translate('xpack.transform.stepDefineForm.dataGridLabel', {
                 defaultMessage: 'Source documents',
               })}
+              labelAppend={
+                indexPreviewProps.rowCount === MAX_ROW_COUNT && (
+                  <EuiText size="xs">{rowCountInfoLabel}</EuiText>
+                )
+              }
             >
               <DataGrid {...indexPreviewProps} />
             </EuiFormRow>
@@ -503,6 +518,11 @@ export const StepDefineForm: FC<StepDefineFormProps> = React.memo((props) => {
           label={i18n.translate('xpack.transform.stepDefineForm.previewLabel', {
             defaultMessage: 'Preview',
           })}
+          labelAppend={
+            previewProps.rowCount === MAX_ROW_COUNT && (
+              <EuiText size="xs">{rowCountInfoLabel}</EuiText>
+            )
+          }
         >
           <>
             <DataGrid {...previewProps} />

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