[ML] validation, get es config

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

@@ -108,7 +108,7 @@ export function getAggConfigFromEsAgg(esAggDefinition: Record<string, any>, 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<string, any>, aggN
 
 export interface PivotAggsConfigWithUiBase extends PivotAggsConfigBase {
   field: EsFieldName;
+  /** Indicates if the configuration is valid */
+  isValid?: () => boolean;
 }
 
 export interface PivotAggsConfigWithExtra<T> extends PivotAggsConfigWithUiBase {
@@ -136,15 +138,12 @@ export interface PivotAggsConfigWithExtra<T> extends PivotAggsConfigWithUiBase {
   }>;
   /** Aggregation specific configuration */
   aggConfig: Partial<T>;
-  /**
-   * 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<T>) => 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,15 +195,19 @@ export type PivotAggsConfigDict = Dictionary<PivotAggsConfig>;
  */
 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;
   delete esAgg.dropDownName;
 
   if (isPivotAggsWithExtendedForm(pivotAggsConfig)) {
     esAgg = pivotAggsConfig.getEsAggConfig();
+
+    if (esAgg === null) {
+      return null;
+    }
   }
 
   return {

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;

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<Props> = ({
   options,
 }) => {
   const [isPopoverVisible, setPopoverVisibility] = useState(
-    isPivotAggsConfigWithUiSupport(item) ? item.forceEdit : false
+    isPivotAggsConfigWithUiSupport(item) && item.isValid!() === false
   );
 
   function update(updateItem: PivotAggsConfig) {

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<Props> = ({ 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<Props> = ({ 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<Props> = ({ defaultData, otherAggNames, onCha
 
   function getUpdatedItem(): PivotAggsConfig {
     let updatedItem: PivotAggsConfig;
-
     if (agg !== PIVOT_SUPPORTED_AGGS.PERCENTILES) {
       updatedItem = {
         ...aggConfigDef,

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'] = ({
       </EuiFormRow>
       {aggConfig.filterAgg && (
         <filterAggTypeConfig.FilterAggFormComponent
-          config={aggConfig.aggTypeConfig?.filterAggConfig}
+          config={filterAggTypeConfig?.filterAggConfig}
           onChange={(update: any) => {
             onChange({
               ...aggConfig,
-              validationResult: update.validationResult,
               aggTypeConfig: {
                 ...filterAggTypeConfig,
                 filterAggConfig: update.config,

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx

@@ -4,21 +4,20 @@
  * 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';
 
 /**
  * Form component for the term filter aggregation.
  */
 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 (
     <EuiFormRow
       label={
@@ -98,7 +111,6 @@ export const FilterTermForm: FilterAggConfigTerm['aggTypeConfig']['FilterAggForm
             config: {
               value: selected[0].label,
             },
-            validationResult: validators(selected[0].label),
           });
         }}
         onSearchChange={debounce(onSearchChange, 600)}

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/config.ts

@@ -11,7 +11,6 @@ import {
   FilterAggConfigRange,
   FilterAggConfigTerm,
   FilterAggConfigUnion,
-  isPivotAggsConfigFilter,
   PivotAggsConfigFilterInit,
 } from './types';
 
@@ -25,13 +24,10 @@ export function getFilterAggConfig(
     ...commonConfig,
     AggFormComponent: FilterAggForm,
     aggConfig: {},
-    forceEdit: true,
     getEsAggConfig() {
       // ensure the configuration has been completed
-      if (!isPivotAggsConfigFilter(this)) {
-        // eslint-disable-next-line no-console
-        console.warn('Config is not ready yet');
-        return {};
+      if (!this.isValid!()) {
+        return null;
       }
       const esAgg = this.aggConfig.aggTypeConfig?.getEsAggConfig(this.field);
       return {
@@ -49,6 +45,15 @@ export function getFilterAggConfig(
         aggTypeConfig,
       };
     },
+    updateAggConfig(update) {
+      this.aggConfig = {
+        ...this.aggConfig,
+        ...update,
+      };
+    },
+    isValid() {
+      return this.aggConfig.filterAgg !== undefined && this.aggConfig.aggTypeConfig.isValid();
+    },
   };
 }
 
@@ -61,7 +66,7 @@ export function getFilterAggTypeConfig(
 ): FilterAggConfigUnion['aggTypeConfig'] {
   switch (filterAggType) {
     case FILTERS.TERM:
-      const value = typeof config === 'object' ? Object.values(config)[0] : '';
+      const value = typeof config === 'object' ? Object.values(config)[0] : undefined;
 
       return {
         FilterAggFormComponent: FilterTermForm,
@@ -77,6 +82,9 @@ export function getFilterAggTypeConfig(
             [fieldName]: this.filterAggConfig.value,
           };
         },
+        isValid() {
+          return this.filterAggConfig?.value !== undefined;
+        },
       } as FilterAggConfigTerm['aggTypeConfig'];
     case FILTERS.RANGE:
       return {

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/types.ts

@@ -16,7 +16,6 @@ type FilterAggForm<T> = FC<{
   onChange: (arg: Partial<{ config: Partial<T>; validationResult: ValidationResult }>) => void;
   /** Selected field for the aggregation */
   selectedField?: string;
-  validationResult?: ValidationResult;
 }>;
 
 interface FilterAggTypeConfig<U> {
@@ -30,6 +29,7 @@ interface FilterAggTypeConfig<U> {
   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<K extends FilterAggType, U> {
   filterAgg: K;
   /** Definition of the filter agg config */
   aggTypeConfig: FilterAggTypeConfig<U>;
-  /** Validation result of the entire filter aggregation form */
-  validationResult?: ValidationResult;
 }
 
 /** Filter term agg */

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;
   }
 }