[ML] Transforms: Support sub-aggregations (#68306) (#68655)

* [ML] WIP UI support for the sug-aggs

* [ML] extract sug-aggs from es config

* [ML] fix for range filter

* [ML] delete sub-aggregation

* [ML] isConfigInvalid

* [ML] fix actions, support parent agg

* [ML] update getAggConfigFromEsAgg

* [ML] unit tests

* [ML] SubAggsSection

* [ML] fix snapshot, add validation

* [ML] fix label capping

* [ML] rename Filter query label

* [ML] fix updateSubAggregation validation

* [ML] fix state update warning

* [ML] increase MAX_NESTING_SUB_AGGS

* [ML] functional tests for sub-aggregations

* [ML] change the tooltip message

* [ML] update functional tests

* [ML] fix typo

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

@@ -44,4 +44,29 @@ describe('getAggConfigFromEsAgg', () => {
       },
     });
   });
+
+  test('should resolve sub-aggregations', () => {
+    const esConfig = {
+      filter: {
+        term: { region: 'sa-west-1' },
+      },
+      aggs: {
+        test_avg: {
+          avg: {
+            field: 'test_field',
+          },
+        },
+      },
+    };
+
+    const result = getAggConfigFromEsAgg(esConfig, 'test_3');
+
+    expect(result.subAggs!.test_avg).toEqual({
+      agg: 'avg',
+      aggName: 'test_avg',
+      dropDownName: 'test_avg',
+      field: 'test_field',
+      parentAgg: result,
+    });
+  });
 });

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

@@ -79,17 +79,32 @@ export type PivotAggDict = {
   [key in AggName]: PivotAgg;
 };
 
+/**
+ * The maximum level of sub-aggregations
+ */
+export const MAX_NESTING_SUB_AGGS = 10;
+
 // The internal representation of an aggregation definition.
 export interface PivotAggsConfigBase {
   agg: PivotSupportedAggs;
   aggName: AggName;
   dropDownName: string;
+  /** Indicates if aggregation supports sub-aggregations */
+  isSubAggsSupported?: boolean;
+  /** Dictionary of the sub-aggregations */
+  subAggs?: PivotAggsConfigDict;
+  /** Reference to the parent aggregation */
+  parentAgg?: PivotAggsConfig;
 }
 
 /**
  * Resolves agg UI config from provided ES agg definition
  */
-export function getAggConfigFromEsAgg(esAggDefinition: Record<string, any>, aggName: string) {
+export function getAggConfigFromEsAgg(
+  esAggDefinition: Record<string, any>,
+  aggName: string,
+  parentRef?: PivotAggsConfig
+) {
   const aggKeys = Object.keys(esAggDefinition);
 
   // Find the main aggregation key
@@ -108,12 +123,21 @@ export function getAggConfigFromEsAgg(esAggDefinition: Record<string, any>, aggN
 
   const config = getAggFormConfig(agg, commonConfig);
 
+  if (parentRef) {
+    config.parentAgg = parentRef;
+  }
+
   if (isPivotAggsWithExtendedForm(config)) {
     config.setUiConfigFromEs(esAggDefinition[agg]);
   }
 
   if (aggKeys.includes('aggs')) {
-    // TODO process sub-aggregation
+    config.subAggs = {};
+    for (const [subAggName, subAggConfigs] of Object.entries(
+      esAggDefinition.aggs as Record<string, object>
+    )) {
+      config.subAggs[subAggName] = getAggConfigFromEsAgg(subAggConfigs, subAggName, config);
+    }
   }
 
   return config;
@@ -199,6 +223,7 @@ export function getEsAggFromAggConfig(
   delete esAgg.agg;
   delete esAgg.aggName;
   delete esAgg.dropDownName;
+  delete esAgg.parentAgg;
 
   if (isPivotAggsWithExtendedForm(pivotAggsConfig)) {
     esAgg = pivotAggsConfig.getEsAggConfig();
@@ -208,7 +233,20 @@ export function getEsAggFromAggConfig(
     }
   }
 
-  return {
+  const result = {
     [pivotAggsConfig.agg]: esAgg,
   };
+
+  if (
+    isPivotAggsConfigWithUiSupport(pivotAggsConfig) &&
+    pivotAggsConfig.subAggs !== undefined &&
+    Object.keys(pivotAggsConfig.subAggs).length > 0
+  ) {
+    result.aggs = {};
+    for (const subAggConfig of Object.values(pivotAggsConfig.subAggs)) {
+      result.aggs[subAggConfig.aggName] = getEsAggFromAggConfig(subAggConfig);
+    }
+  }
+
+  return result;
 }

x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts

@@ -31,12 +31,25 @@ import {
   PivotGroupByConfig,
   PivotQuery,
   PreviewMappings,
+  PivotAggsConfig,
 } from '../common';
 
 import { SearchItems } from './use_search_items';
 import { useApi } from './use_api';
 import { isPivotAggsWithExtendedForm } from '../common/pivot_aggs';
 
+/**
+ * Checks if the aggregations collection is invalid.
+ */
+function isConfigInvalid(aggsArray: PivotAggsConfig[]): boolean {
+  return aggsArray.some((agg) => {
+    return (
+      (isPivotAggsWithExtendedForm(agg) && !agg.isValid()) ||
+      (agg.subAggs && isConfigInvalid(Object.values(agg.subAggs)))
+    );
+  });
+}
+
 function sortColumns(groupByArr: PivotGroupByConfig[]) {
   return (a: string, b: string) => {
     // make sure groupBy fields are always most left columns
@@ -62,7 +75,7 @@ export const usePivotData = (
   const [previewMappings, setPreviewMappings] = useState<PreviewMappings>({ properties: {} });
   const api = useApi();
 
-  const aggsArr = dictionaryToArray(aggs);
+  const aggsArr = useMemo(() => dictionaryToArray(aggs), [aggs]);
   const groupByArr = dictionaryToArray(groupBy);
 
   // Filters mapping properties of type `object`, which get returned for nested field parents.
@@ -136,11 +149,7 @@ export const usePivotData = (
       return;
     }
 
-    const isConfigInvalid = aggsArr.some(
-      (agg) => isPivotAggsWithExtendedForm(agg) && !agg.isValid()
-    );
-
-    if (isConfigInvalid) {
+    if (isConfigInvalid(aggsArr)) {
       return;
     }
 
@@ -185,7 +194,7 @@ export const usePivotData = (
     /* eslint-disable react-hooks/exhaustive-deps */
   }, [
     indexPatternTitle,
-    JSON.stringify(aggsArr),
+    aggsArr,
     JSON.stringify(groupByArr),
     JSON.stringify(query),
     /* eslint-enable react-hooks/exhaustive-deps */

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

@@ -13,13 +13,15 @@ interface Props {
   placeholder?: string;
   changeHandler(d: EuiComboBoxOptionOption[]): void;
   testSubj?: string;
+  isDisabled?: boolean;
 }
 
 export const DropDown: React.FC<Props> = ({
   changeHandler,
   options,
   placeholder = 'Search ...',
   testSubj,
+  isDisabled,
 }) => {
   return (
     <EuiComboBox
@@ -31,6 +33,7 @@ export const DropDown: React.FC<Props> = ({
       onChange={changeHandler}
       isClearable={false}
       data-test-subj={testSubj}
+      isDisabled={isDisabled}
     />
   );
 };