From adbb928792509c5383debde22fa9e4a39f99eaf8 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Tue, 31 Mar 2020 17:25:03 +0200 Subject: [PATCH 1/2] [ML] Fix maximum default enabled columns for data grid. --- .../hooks/use_explore_data/use_explore_data.ts | 3 ++- .../plugins/transform/public/app/common/data_grid.ts | 2 ++ x-pack/plugins/transform/public/app/common/index.ts | 2 +- .../app/components/pivot_preview/pivot_preview.tsx | 7 ++++--- .../source_index_preview/source_index_preview.tsx | 10 ++++++++-- 5 files changed, 17 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/hooks/use_explore_data/use_explore_data.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/hooks/use_explore_data/use_explore_data.ts index 30f2139a263f7..a0a9eb8312499 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/hooks/use_explore_data/use_explore_data.ts +++ b/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. diff --git a/x-pack/plugins/transform/public/app/common/data_grid.ts b/x-pack/plugins/transform/public/app/common/data_grid.ts index 0783839afee83..0e9cceefb3156 100644 --- a/x-pack/plugins/transform/public/app/common/data_grid.ts +++ b/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', diff --git a/x-pack/plugins/transform/public/app/common/index.ts b/x-pack/plugins/transform/public/app/common/index.ts index f2b31bb5da865..daeddaa801828 100644 --- a/x-pack/plugins/transform/public/app/common/index.ts +++ b/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, diff --git a/x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.tsx b/x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.tsx index 7965eeb779a3f..c0c85f74418fc 100644 --- a/x-pack/plugins/transform/public/app/components/pivot_preview/pivot_preview.tsx +++ b/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 = React.memo( columnKeys.sort(sortColumns(groupByArr)); // Column visibility - const [visibleColumns, setVisibleColumns] = useState(columnKeys); + const [visibleColumns, setVisibleColumns] = useState([]); 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); diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.tsx index 06ae4c81efa18..c56263b721032 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.tsx +++ b/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 = React.memo(({ indexPattern, q }); // Column visibility - const [visibleColumns, setVisibleColumns] = useState(indexPatternFields); + const [visibleColumns, setVisibleColumns] = useState([]); + + useEffect(() => { + setVisibleColumns(indexPatternFields.splice(0, INIT_MAX_COLUMNS)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [indexPatternFields.join()]); const { errorMessage, From f410799cc976acf2574f4c50b8acd249a51c40e7 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Wed, 1 Apr 2020 09:11:59 +0200 Subject: [PATCH 2/2] [ML] Adapt functional test to reflect max column count. --- .../test/functional/apps/transform/creation_index_pattern.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/test/functional/apps/transform/creation_index_pattern.ts b/x-pack/test/functional/apps/transform/creation_index_pattern.ts index ae3617db9e517..f3cc4ab8d7601 100644 --- a/x-pack/test/functional/apps/transform/creation_index_pattern.ts +++ b/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, }, },