diff --git a/x-pack/plugins/transform/public/app/common/pivot_aggs.ts b/x-pack/plugins/transform/public/app/common/pivot_aggs.ts index f87fc7b44939fee..28c4541d60154ed 100644 --- a/x-pack/plugins/transform/public/app/common/pivot_aggs.ts +++ b/x-pack/plugins/transform/public/app/common/pivot_aggs.ts @@ -108,7 +108,7 @@ export function getAggConfigFromEsAgg(esAggDefinition: Record, aggN const config = getAggFormConfig(agg, commonConfig); - if (aggKeys.includes('agg')) { + if (aggKeys.includes('aggs')) { // TODO process sub-aggregation } @@ -123,6 +123,8 @@ export function getAggConfigFromEsAgg(esAggDefinition: Record, aggN export interface PivotAggsConfigWithUiBase extends PivotAggsConfigBase { field: EsFieldName; + /** Indicates if the configuration is valid */ + isValid?: () => boolean; } export interface PivotAggsConfigWithExtra extends PivotAggsConfigWithUiBase { @@ -136,15 +138,12 @@ export interface PivotAggsConfigWithExtra extends PivotAggsConfigWithUiBase { }>; /** Aggregation specific configuration */ aggConfig: Partial; - /** - * Indicates if the user's input is required after quick adding of the aggregation - * from the suggestions. - */ - forceEdit?: boolean; /** Set UI configuration from ES aggregation definition */ setUiConfigFromEs: (arg: { [key: string]: any }) => void; /** Converts UI agg config form to ES agg request object */ - getEsAggConfig: () => { [key: string]: any }; + getEsAggConfig: () => { [key: string]: any } | null; + /** Updates agg config*/ + updateAggConfig?: (update: Partial) => void; } interface PivotAggsConfigPercentiles extends PivotAggsConfigWithUiBase { @@ -163,7 +162,7 @@ export function isPivotAggsConfigWithUiSupport(arg: any): arg is PivotAggsConfig arg.hasOwnProperty('aggName') && arg.hasOwnProperty('dropDownName') && arg.hasOwnProperty('field') && - Object.values(PIVOT_SUPPORTED_AGGS).includes(arg.agg) + isPivotSupportedAggs(arg.agg) ); } @@ -196,8 +195,8 @@ export type PivotAggsConfigDict = Dictionary; */ export function getEsAggFromAggConfig( pivotAggsConfig: PivotAggsConfigBase | PivotAggsConfigWithExtendedForm -): PivotAgg { - let esAgg: { [key: string]: any } = { ...pivotAggsConfig }; +): PivotAgg | null { + let esAgg: { [key: string]: any } | null = { ...pivotAggsConfig }; delete esAgg.agg; delete esAgg.aggName; @@ -205,6 +204,10 @@ export function getEsAggFromAggConfig( if (isPivotAggsWithExtendedForm(pivotAggsConfig)) { esAgg = pivotAggsConfig.getEsAggConfig(); + + if (esAgg === null) { + return null; + } } return { diff --git a/x-pack/plugins/transform/public/app/common/request.ts b/x-pack/plugins/transform/public/app/common/request.ts index 99c68cf37b44c26..9a0084c2ebffb29 100644 --- a/x-pack/plugins/transform/public/app/common/request.ts +++ b/x-pack/plugins/transform/public/app/common/request.ts @@ -115,7 +115,11 @@ export function getPreviewRequestBody( }); aggs.forEach((agg) => { - request.pivot.aggregations[agg.aggName] = getEsAggFromAggConfig(agg); + const result = getEsAggFromAggConfig(agg); + if (result === null) { + return; + } + request.pivot.aggregations[agg.aggName] = result; }); return request; diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx index ca4be57ed267409..7048797ee414fb0 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx @@ -35,7 +35,7 @@ export const AggLabelForm: React.FC = ({ options, }) => { const [isPopoverVisible, setPopoverVisibility] = useState( - isPivotAggsConfigWithUiSupport(item) ? item.forceEdit : false + isPivotAggsConfigWithUiSupport(item) && item.isValid!() === false ); function update(updateItem: PivotAggsConfig) { diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx index ceb1b70068cc5e0..3235d59e606b97e 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx @@ -18,6 +18,7 @@ import { EuiSelectOption, } from '@elastic/eui'; +import { cloneDeep } from 'lodash'; import { dictionaryToArray } from '../../../../../../common/types/common'; import { @@ -69,7 +70,7 @@ function parsePercentsInput(inputValue: string | undefined) { } export const PopoverForm: React.FC = ({ defaultData, otherAggNames, onChange, options }) => { - const [aggConfigDef, setAggConfigDef] = useState(defaultData); + const [aggConfigDef, setAggConfigDef] = useState(cloneDeep(defaultData)); const [aggName, setAggName] = useState(defaultData.aggName); const [agg, setAgg] = useState(defaultData.agg); @@ -90,9 +91,9 @@ export const PopoverForm: React.FC = ({ defaultData, otherAggNames, onCha dropDownName: aggName, field, }); - if (config === undefined) return; setAggConfigDef(config); - }, [agg, aggConfigDef.agg, aggName, field]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [agg]); const availableFields: EuiSelectOption[] = []; const availableAggs: EuiSelectOption[] = []; @@ -110,7 +111,6 @@ export const PopoverForm: React.FC = ({ defaultData, otherAggNames, onCha function getUpdatedItem(): PivotAggsConfig { let updatedItem: PivotAggsConfig; - if (agg !== PIVOT_SUPPORTED_AGGS.PERCENTILES) { updatedItem = { ...aggConfigDef, diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_agg_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_agg_form.tsx index 9da04cae545487f..6565ad7103f8630 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_agg_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_agg_form.tsx @@ -69,11 +69,10 @@ export const FilterAggForm: PivotAggsConfigFilter['AggFormComponent'] = ({ {aggConfig.filterAgg && ( { onChange({ ...aggConfig, - validationResult: update.validationResult, aggTypeConfig: { ...filterAggTypeConfig, filterAggConfig: update.config, diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx index 0fee2cc8bbffdb3..a06fc064852d3cb 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx @@ -4,13 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useState } from 'react'; import { EuiComboBox, EuiFormRow } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { debounce } from 'lodash'; +import { useUpdateEffect } from 'react-use'; import { useApi } from '../../../../../../../hooks'; import { CreateTransformWizardContext } from '../../../../wizard/wizard'; -import { requiredValidator } from '../../../../../../../../../../ml/common/util/validators'; import { FilterAggConfigTerm } from '../types'; /** @@ -18,7 +18,6 @@ import { FilterAggConfigTerm } from '../types'; */ export const FilterTermForm: FilterAggConfigTerm['aggTypeConfig']['FilterAggFormComponent'] = ({ config, - validationResult, onChange, selectedField, }) => { @@ -28,10 +27,10 @@ export const FilterTermForm: FilterAggConfigTerm['aggTypeConfig']['FilterAggForm const [options, setOptions] = useState([]); const [isLoading, setIsLoading] = useState(true); - const validators = useMemo(() => requiredValidator(), []); - const onSearchChange = useCallback( (searchValue) => { + if (selectedField === undefined) return; + setIsLoading(true); setOptions([]); @@ -40,7 +39,7 @@ export const FilterTermForm: FilterAggConfigTerm['aggTypeConfig']['FilterAggForm body: { query: { wildcard: { - region: { + [selectedField]: { value: `*${searchValue}*`, }, }, @@ -72,10 +71,24 @@ export const FilterTermForm: FilterAggConfigTerm['aggTypeConfig']['FilterAggForm useEffect(() => { // Simulate initial load. onSearchChange(''); - }, [onSearchChange]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + useUpdateEffect(() => { + // Reset value control on field change + if (!selectedField) return; + onChange({ + config: { + value: undefined, + }, + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedField]); const selectedOptions = config?.value ? [{ label: config.value }] : undefined; + if (selectedField === undefined) return null; + return ( = FC<{ onChange: (arg: Partial<{ config: Partial; validationResult: ValidationResult }>) => void; /** Selected field for the aggregation */ selectedField?: string; - validationResult?: ValidationResult; }>; interface FilterAggTypeConfig { @@ -30,6 +29,7 @@ interface FilterAggTypeConfig { setUiConfigFromEs: (arg: { [key: string]: any }) => any; /** Converts UI agg config form to ES agg request object */ getEsAggConfig: (field?: string) => { [key: string]: any }; + isValid?: () => boolean; } /** Filter agg type definition */ @@ -38,8 +38,6 @@ interface FilterAggProps { filterAgg: K; /** Definition of the filter agg config */ aggTypeConfig: FilterAggTypeConfig; - /** Validation result of the entire filter aggregation form */ - validationResult?: ValidationResult; } /** Filter term agg */ diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/get_agg_form_config.ts b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/get_agg_form_config.ts index 1ca0ec7ff27b128..8261cab6ab2172f 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/get_agg_form_config.ts +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/get_agg_form_config.ts @@ -22,6 +22,6 @@ export function getAggFormConfig( case PIVOT_SUPPORTED_AGGS.FILTER: return getFilterAggConfig(commonConfig); default: - return; + return commonConfig; } }