[ML] Fix maximum default enabled columns for data grid. (#62005)

UI Performance could degrade to make a page unusable if a dataset had a very much number of columns to be displayed in data grid (e.g. filebeat based date with 1000+ fields).
This PR fixes it by limiting the columns selected by default to a maximum number of 20. The fix gets applied to Transforms Source Table and Pivot Preview as well as the Analytics Outlier Results page.

Author: walterra

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/hooks/use_explore_data/use_explore_data.ts

@@ -27,6 +27,7 @@ import {
   DataFrameAnalyticsConfig,
   EsFieldName,
   INDEX_STATUS,
+  MAX_COLUMNS,
   defaultSearchQuery,
 } from '../../../../common';
 import { isKeywordAndTextType } from '../../../../common/fields';
@@ -198,7 +199,7 @@ export const useExploreData = (jobId: string): UseExploreDataReturnType => {
 
           if (selectedFields.length === 0) {
             const newSelectedFields = getDefaultSelectableFields(docs, resultsField);
-            setSelectedFields(newSelectedFields);
+            setSelectedFields(newSelectedFields.sort().splice(0, MAX_COLUMNS));
           }
 
           // Create a version of the doc's source with flattened field names.

x-pack/plugins/transform/public/app/common/data_grid.ts

@@ -6,6 +6,8 @@
 
 import { EuiDataGridStyle } from '@elastic/eui';
 
+export const INIT_MAX_COLUMNS = 20;
+
 export const euiDataGridStyle: EuiDataGridStyle = {
   border: 'all',
   fontSize: 's',

x-pack/plugins/transform/public/app/common/index.ts

@@ -5,7 +5,7 @@
  */
 
 export { AggName, isAggName } from './aggregations';
-export { euiDataGridStyle, euiDataGridToolbarSettings } from './data_grid';
+export { euiDataGridStyle, euiDataGridToolbarSettings, INIT_MAX_COLUMNS } from './data_grid';
 export {
   getDefaultSelectableFields,
   getFlattenedFields,

x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.tsx

@@ -37,6 +37,7 @@ import {
   PivotGroupByConfig,
   PivotGroupByConfigDict,
   PivotQuery,
+  INIT_MAX_COLUMNS,
 } from '../../common';
 import { SearchItems } from '../../hooks/use_search_items';
 
@@ -131,12 +132,12 @@ export const PivotPreview: FC<PivotPreviewProps> = React.memo(
     columnKeys.sort(sortColumns(groupByArr));
 
     // Column visibility
-    const [visibleColumns, setVisibleColumns] = useState<EsFieldName[]>(columnKeys);
+    const [visibleColumns, setVisibleColumns] = useState<EsFieldName[]>([]);
 
     useEffect(() => {
-      setVisibleColumns(columnKeys);
+      setVisibleColumns(columnKeys.splice(0, INIT_MAX_COLUMNS));
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [JSON.stringify(columnKeys)]);
+    }, [columnKeys.join()]);
 
     const [pagination, setPagination] = useState(defaultPagination);
 

x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.tsx

@@ -5,7 +5,7 @@
  */
 
 import moment from 'moment-timezone';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
@@ -32,6 +32,7 @@ import {
   euiDataGridToolbarSettings,
   EsFieldName,
   PivotQuery,
+  INIT_MAX_COLUMNS,
 } from '../../../../common';
 import { SearchItems } from '../../../../hooks/use_search_items';
 import { useToastNotifications } from '../../../../app_dependencies';
@@ -76,7 +77,12 @@ export const SourceIndexPreview: React.FC<Props> = React.memo(({ indexPattern, q
   });
 
   // Column visibility
-  const [visibleColumns, setVisibleColumns] = useState<EsFieldName[]>(indexPatternFields);
+  const [visibleColumns, setVisibleColumns] = useState<EsFieldName[]>([]);
+
+  useEffect(() => {
+    setVisibleColumns(indexPatternFields.splice(0, INIT_MAX_COLUMNS));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [indexPatternFields.join()]);
 
   const {
     errorMessage,

x-pack/test/functional/apps/transform/creation_index_pattern.ts

@@ -89,7 +89,7 @@ export default function({ getService }: FtrProviderContext) {
             progress: '100',
           },
           sourcePreview: {
-            columns: 45,
+            columns: 20,
             rows: 5,
           },
         },
@@ -143,7 +143,7 @@ export default function({ getService }: FtrProviderContext) {
             progress: '100',
           },
           sourcePreview: {
-            columns: 45,
+            columns: 20,
             rows: 5,
           },
         },