[8.x] [ML] Transforms: Limit the data grid result window (#196510) (#197002)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Transforms: Limit the data grid result window (#196510)](https://github.com/elastic/kibana/pull/196510)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sqren/backport)\n\n\n\nCo-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-10-22 04:20:19 +11:00 · 2024-10-22 04:20:19 +11:00 · 740930048b
commit 740930048b
parent 6623f02f5a
5 changed files with 32 additions and 10 deletions
--- 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,
--- 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
--- 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<SetStateAction<RowCountInfo>>;
+  setRowCountInfo: (info: RowCountInfo) => void;
  /**
   * Setter function for the sorting columns.
   */
--- 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<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} />
--- 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