[ML] Transforms: Support sub-aggregations

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 = 2;
+
 // 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}
     />
   );
 };

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

@@ -10,10 +10,16 @@ import { i18n } from '@kbn/i18n';
 
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiTextColor } from '@elastic/eui';
 
-import { AggName, PivotAggsConfig, PivotAggsConfigWithUiSupportDict } from '../../../../common';
+import {
+  AggName,
+  isPivotAggsConfigWithUiSupport,
+  PivotAggsConfig,
+  PivotAggsConfigWithUiSupportDict,
+} from '../../../../common';
 
 import { PopoverForm } from './popover_form';
 import { isPivotAggsWithExtendedForm } from '../../../../common/pivot_aggs';
+import { SubAggsSection } from './sub_aggs_section';
 
 interface Props {
   item: PivotAggsConfig;
@@ -41,61 +47,70 @@ export const AggLabelForm: React.FC<Props> = ({
 
   const helperText = isPivotAggsWithExtendedForm(item) && item.helperText && item.helperText();
 
+  const isSubAggSupported =
+    isPivotAggsConfigWithUiSupport(item) &&
+    item.isSubAggsSupported &&
+    (isPivotAggsWithExtendedForm(item) ? item.isValid() : true);
+
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-      <EuiFlexItem className="transform__AggregationLabel--text">
-        <span className="eui-textTruncate" data-test-subj="transformAggregationEntryLabel">
-          {item.aggName}
-        </span>
-      </EuiFlexItem>
-      {helperText && (
-        <EuiFlexItem grow={false}>
-          <EuiTextColor
-            color="subdued"
-            className="eui-textTruncate"
-            data-test-subj="transformAggHelperText"
-          >
-            {helperText}
-          </EuiTextColor>
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+        <EuiFlexItem className="transform__AggregationLabel--text">
+          <span className="eui-textTruncate" data-test-subj="transformAggregationEntryLabel">
+            {item.aggName}
+          </span>
         </EuiFlexItem>
-      )}
-      <EuiFlexItem grow={false} className="transform__GroupByLabel--button">
-        <EuiPopover
-          id="transformFormPopover"
-          ownFocus
-          button={
-            <EuiButtonIcon
-              aria-label={i18n.translate('xpack.transform.aggLabelForm.editAggAriaLabel', {
-                defaultMessage: 'Edit aggregation',
-              })}
-              size="s"
-              iconType="pencil"
-              onClick={() => setPopoverVisibility(!isPopoverVisible)}
-              data-test-subj="transformAggregationEntryEditButton"
+        {helperText && (
+          <EuiFlexItem grow={false}>
+            <EuiTextColor
+              color="subdued"
+              className="eui-textTruncate"
+              data-test-subj="transformAggHelperText"
+            >
+              {helperText}
+            </EuiTextColor>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem grow={false} className="transform__GroupByLabel--button">
+          <EuiPopover
+            id="transformFormPopover"
+            ownFocus
+            button={
+              <EuiButtonIcon
+                aria-label={i18n.translate('xpack.transform.aggLabelForm.editAggAriaLabel', {
+                  defaultMessage: 'Edit aggregation',
+                })}
+                size="s"
+                iconType="pencil"
+                onClick={() => setPopoverVisibility(!isPopoverVisible)}
+                data-test-subj="transformAggregationEntryEditButton"
+              />
+            }
+            isOpen={isPopoverVisible}
+            closePopover={() => setPopoverVisibility(false)}
+          >
+            <PopoverForm
+              defaultData={item}
+              onChange={update}
+              otherAggNames={otherAggNames}
+              options={options}
             />
-          }
-          isOpen={isPopoverVisible}
-          closePopover={() => setPopoverVisibility(false)}
-        >
-          <PopoverForm
-            defaultData={item}
-            onChange={update}
-            otherAggNames={otherAggNames}
-            options={options}
+          </EuiPopover>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} className="transform__GroupByLabel--button">
+          <EuiButtonIcon
+            aria-label={i18n.translate('xpack.transform.aggLabelForm.deleteItemAriaLabel', {
+              defaultMessage: 'Delete item',
+            })}
+            size="s"
+            iconType="cross"
+            onClick={() => deleteHandler(item.aggName)}
+            data-test-subj="transformAggregationEntryDeleteButton"
           />
-        </EuiPopover>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} className="transform__GroupByLabel--button">
-        <EuiButtonIcon
-          aria-label={i18n.translate('xpack.transform.aggLabelForm.deleteItemAriaLabel', {
-            defaultMessage: 'Delete item',
-          })}
-          size="s"
-          iconType="cross"
-          onClick={() => deleteHandler(item.aggName)}
-          data-test-subj="transformAggregationEntryDeleteButton"
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {isSubAggSupported && <SubAggsSection item={item} />}
+    </>
   );
 };