[ML] Changes group-by and agg names. (#36686) (#36752)

So far the groupby/agg name shown in the dropdowns and the name used for the ES config agg name has been the same.

This PR changes the behaviour to the following:

- group_by aggregation names will be left as original e.g. clientip, timestamp
- agg functions will be added to the end as a nested object e.g. doc.bytes.sent.sum and doc.bytes.sent.avg and duration.max
- the drop down display labels in the pickers in the wizard will continue to use the sql-like notation e.g. date_histogram(timestamp), terms(clientip), sum(doc.bytes.sent), max(duration)
- when auto-generating aggregation names, unsupported characters ([]>) will be removed.

x-pack/plugins/ml/public/data_frame/common/pivot_aggs.ts

@@ -70,6 +70,7 @@ export interface PivotAggsConfig {
   agg: PIVOT_SUPPORTED_AGGS;
   field: FieldName;
   aggName: AggName;
+  dropDownName: string;
 }
 
 export type PivotAggsConfigDict = Dictionary<PivotAggsConfig>;

x-pack/plugins/ml/public/data_frame/common/pivot_group_by.ts

@@ -49,6 +49,7 @@ export const pivotGroupByFieldSupport = {
 interface GroupByConfigBase {
   field: FieldName;
   aggName: AggName;
+  dropDownName: string;
 }
 
 // Don't allow an interval of '0', but allow a float interval of '0.1' with a leading zero.

x-pack/plugins/ml/public/data_frame/common/request.test.ts

@@ -31,18 +31,24 @@ describe('Data Frame: Common', () => {
       {
         agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
         field: 'the-group-by-field',
-        aggName: 'the-group-by-label',
+        aggName: 'the-group-by-agg-name',
+        dropDownName: 'the-group-by-drop-down-name',
       },
     ];
     const aggs: PivotAggsConfig[] = [
-      { agg: PIVOT_SUPPORTED_AGGS.AVG, field: 'the-agg-field', aggName: 'the-agg-label' },
+      {
+        agg: PIVOT_SUPPORTED_AGGS.AVG,
+        field: 'the-agg-field',
+        aggName: 'the-agg-agg-name',
+        dropDownName: 'the-agg-drop-down-name',
+      },
     ];
     const request = getDataFramePreviewRequest('the-index-pattern-title', query, groupBy, aggs);
 
     expect(request).toEqual({
       pivot: {
-        aggregations: { 'the-agg-label': { avg: { field: 'the-agg-field' } } },
-        group_by: { 'the-group-by-label': { terms: { field: 'the-group-by-field' } } },
+        aggregations: { 'the-agg-agg-name': { avg: { field: 'the-agg-field' } } },
+        group_by: { 'the-group-by-agg-name': { terms: { field: 'the-group-by-field' } } },
       },
       source: {
         index: 'the-index-pattern-title',
@@ -55,12 +61,14 @@ describe('Data Frame: Common', () => {
     const groupBy: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const agg: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.AVG,
       field: 'the-agg-field',
-      aggName: 'the-agg-label',
+      aggName: 'the-agg-agg-name',
+      dropDownName: 'the-agg-drop-down-name',
     };
     const pivotState: DefinePivotExposedState = {
       aggList: { 'the-agg-name': agg },
@@ -81,8 +89,8 @@ describe('Data Frame: Common', () => {
     expect(request).toEqual({
       dest: { index: 'the-target-index' },
       pivot: {
-        aggregations: { 'the-agg-label': { avg: { field: 'the-agg-field' } } },
-        group_by: { 'the-group-by-label': { terms: { field: 'the-group-by-field' } } },
+        aggregations: { 'the-agg-agg-name': { avg: { field: 'the-agg-field' } } },
+        group_by: { 'the-group-by-agg-name': { terms: { field: 'the-group-by-field' } } },
       },
       source: {
         index: 'the-index-pattern-title',

x-pack/plugins/ml/public/data_frame/components/aggregation_list/__snapshots__/agg_label_form.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Data Frame: <AggLabelForm /> Date histogram aggregation 1`] = `
   gutterSize="s"
 >
   <EuiFlexItem>
-    the-group-by-label
+    the-group-by-agg-name
   </EuiFlexItem>
   <EuiFlexItem
     grow={false}
@@ -35,7 +35,8 @@ exports[`Data Frame: <AggLabelForm /> Date histogram aggregation 1`] = `
         defaultData={
           Object {
             "agg": "cardinality",
-            "aggName": "the-group-by-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-group-by-field",
           }
         }

x-pack/plugins/ml/public/data_frame/components/aggregation_list/__snapshots__/list_form.test.tsx.snap

@@ -14,7 +14,8 @@ exports[`Data Frame: <AggListForm /> Minimal initialization 1`] = `
           item={
             Object {
               "agg": "avg",
-              "aggName": "the-form-row-label",
+              "aggName": "the-group-by-agg-name",
+              "dropDownName": "the-group-by-drop-down-name",
               "field": "the-field",
             }
           }

x-pack/plugins/ml/public/data_frame/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`Data Frame: Aggregation <PopoverForm /> Minimal initialization 1`] = `
   >
     <EuiFieldText
       compressed={false}
-      defaultValue="the-agg-name"
+      defaultValue="the-group-by-agg-name"
       fullWidth={false}
       isInvalid={false}
       isLoading={false}

x-pack/plugins/ml/public/data_frame/components/aggregation_list/agg_label_form.test.tsx

@@ -16,7 +16,8 @@ describe('Data Frame: <AggLabelForm />', () => {
     const item: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.CARDINALITY,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props = {
       item,

x-pack/plugins/ml/public/data_frame/components/aggregation_list/list_form.test.tsx

@@ -16,7 +16,8 @@ describe('Data Frame: <AggListForm />', () => {
     const item: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.AVG,
       field: 'the-field',
-      aggName: 'the-form-row-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props: ListProps = {
       list: { 'the-agg': item },

x-pack/plugins/ml/public/data_frame/components/aggregation_list/list_summary.test.tsx

@@ -16,7 +16,8 @@ describe('Data Frame: <AggListSummary />', () => {
     const item: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.AVG,
       field: 'the-field',
-      aggName: 'the-form-row-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props: AggListSummaryProps = {
       list: { 'the-agg': item },

x-pack/plugins/ml/public/data_frame/components/aggregation_list/popover_form.test.tsx

@@ -15,7 +15,8 @@ describe('Data Frame: Aggregation <PopoverForm />', () => {
   test('Minimal initialization', () => {
     const defaultData: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.CARDINALITY,
-      aggName: 'the-agg-name',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
       field: 'the-field',
     };
     const otherAggNames: AggName[] = [];

x-pack/plugins/ml/public/data_frame/components/define_pivot/__snapshots__/define_pivot_summary.test.tsx.snap

@@ -20,7 +20,8 @@ exports[`Data Frame: <DefinePivotSummary /> Minimal initialization 1`] = `
         Object {
           "the-agg-name": Object {
             "agg": "avg",
-            "aggName": "the-agg-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-agg-field",
           },
         }
@@ -29,7 +30,8 @@ exports[`Data Frame: <DefinePivotSummary /> Minimal initialization 1`] = `
         Object {
           "the-group-by-name": Object {
             "agg": "terms",
-            "aggName": "the-group-by-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-group-by-field",
           },
         }

x-pack/plugins/ml/public/data_frame/components/define_pivot/__snapshots__/pivot_preview.test.tsx.snap

@@ -20,7 +20,8 @@ exports[`Data Frame: <PivotPreview /> Minimal initialization 1`] = `
         Object {
           "the-agg-name": Object {
             "agg": "avg",
-            "aggName": "the-agg-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-agg-field",
           },
         }
@@ -29,7 +30,8 @@ exports[`Data Frame: <PivotPreview /> Minimal initialization 1`] = `
         Object {
           "the-group-by-name": Object {
             "agg": "terms",
-            "aggName": "the-group-by-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-group-by-field",
           },
         }

x-pack/plugins/ml/public/data_frame/components/define_pivot/common.test.ts

@@ -19,9 +19,12 @@ import { getPivotPreviewDevConsoleStatement, getPivotDropdownOptions } from './c
 
 describe('Data Frame: Define Pivot Common', () => {
   test('getPivotDropdownOptions()', () => {
+    // The field name includes the characters []> which cannot be used for aggregation names.
+    // The test results verifies that the characters should still be present in field and dropDownName values,
+    // but should be stripped for aggName values.
     const indexPattern: StaticIndexPattern = {
       title: 'the-index-pattern-title',
-      fields: [{ name: 'the-field', type: 'number', aggregatable: true, searchable: true }],
+      fields: [{ name: 'the-f[i]e>ld', type: 'number', aggregatable: true, searchable: true }],
     };
 
     const options = getPivotDropdownOptions(indexPattern);
@@ -29,39 +32,62 @@ describe('Data Frame: Define Pivot Common', () => {
     expect(options).toEqual({
       aggOptions: [
         {
-          label: 'the-field',
+          label: 'the-f[i]e>ld',
           options: [
-            { label: 'avg(the-field)' },
-            { label: 'cardinality(the-field)' },
-            { label: 'max(the-field)' },
-            { label: 'min(the-field)' },
-            { label: 'sum(the-field)' },
-            { label: 'value_count(the-field)' },
+            { label: 'avg(the-f[i]e>ld)' },
+            { label: 'cardinality(the-f[i]e>ld)' },
+            { label: 'max(the-f[i]e>ld)' },
+            { label: 'min(the-f[i]e>ld)' },
+            { label: 'sum(the-f[i]e>ld)' },
+            { label: 'value_count(the-f[i]e>ld)' },
           ],
         },
       ],
       aggOptionsData: {
-        'avg(the-field)': { agg: 'avg', field: 'the-field', aggName: 'avg(the-field)' },
-        'cardinality(the-field)': {
-          agg: 'cardinality',
-          field: 'the-field',
-          aggName: 'cardinality(the-field)',
+        'avg(the-f[i]e>ld)': {
+          agg: 'avg',
+          field: 'the-f[i]e>ld',
+          aggName: 'the-field.avg',
+          dropDownName: 'avg(the-f[i]e>ld)',
         },
-        'max(the-field)': { agg: 'max', field: 'the-field', aggName: 'max(the-field)' },
-        'min(the-field)': { agg: 'min', field: 'the-field', aggName: 'min(the-field)' },
-        'sum(the-field)': { agg: 'sum', field: 'the-field', aggName: 'sum(the-field)' },
-        'value_count(the-field)': {
+        'cardinality(the-f[i]e>ld)': {
+          agg: 'cardinality',
+          field: 'the-f[i]e>ld',
+          aggName: 'the-field.cardinality',
+          dropDownName: 'cardinality(the-f[i]e>ld)',
+        },
+        'max(the-f[i]e>ld)': {
+          agg: 'max',
+          field: 'the-f[i]e>ld',
+          aggName: 'the-field.max',
+          dropDownName: 'max(the-f[i]e>ld)',
+        },
+        'min(the-f[i]e>ld)': {
+          agg: 'min',
+          field: 'the-f[i]e>ld',
+          aggName: 'the-field.min',
+          dropDownName: 'min(the-f[i]e>ld)',
+        },
+        'sum(the-f[i]e>ld)': {
+          agg: 'sum',
+          field: 'the-f[i]e>ld',
+          aggName: 'the-field.sum',
+          dropDownName: 'sum(the-f[i]e>ld)',
+        },
+        'value_count(the-f[i]e>ld)': {
           agg: 'value_count',
-          field: 'the-field',
-          aggName: 'value_count(the-field)',
+          field: 'the-f[i]e>ld',
+          aggName: 'the-field.value_count',
+          dropDownName: 'value_count(the-f[i]e>ld)',
         },
       },
-      groupByOptions: [{ label: 'histogram(the-field)' }],
+      groupByOptions: [{ label: 'histogram(the-f[i]e>ld)' }],
       groupByOptionsData: {
-        'histogram(the-field)': {
+        'histogram(the-f[i]e>ld)': {
           agg: 'histogram',
-          field: 'the-field',
-          aggName: 'histogram(the-field)',
+          field: 'the-f[i]e>ld',
+          aggName: 'the-field',
+          dropDownName: 'histogram(the-f[i]e>ld)',
           interval: '10',
         },
       },
@@ -78,12 +104,14 @@ describe('Data Frame: Define Pivot Common', () => {
     const groupBy: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const agg: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.AVG,
       field: 'the-agg-field',
-      aggName: 'the-agg-label',
+      aggName: 'the-agg-agg-name',
+      dropDownName: 'the-agg-drop-down-name',
     };
     const request = getDataFramePreviewRequest('the-index-pattern-title', query, [groupBy], [agg]);
     const pivotPreviewDevConsoleStatement = getPivotPreviewDevConsoleStatement(request);
@@ -101,14 +129,14 @@ describe('Data Frame: Define Pivot Common', () => {
   },
   "pivot": {
     "group_by": {
-      "the-group-by-label": {
+      "the-group-by-agg-name": {
         "terms": {
           "field": "the-group-by-field"
         }
       }
     },
     "aggregations": {
-      "the-agg-label": {
+      "the-agg-agg-name": {
         "avg": {
           "field": "the-agg-field"
         }

x-pack/plugins/ml/public/data_frame/components/define_pivot/common.ts

@@ -17,6 +17,7 @@ import {
   FieldName,
   PivotAggsConfigDict,
   pivotAggsFieldSupport,
+  PivotGroupByConfig,
   PivotGroupByConfigDict,
   pivotGroupByFieldSupport,
   PIVOT_SUPPORTED_GROUP_BY_AGGS,
@@ -29,20 +30,23 @@ export interface Field {
 
 function getDefaultGroupByConfig(
   aggName: string,
+  dropDownName: string,
   fieldName: FieldName,
   groupByAgg: PIVOT_SUPPORTED_GROUP_BY_AGGS
-) {
+): PivotGroupByConfig {
   switch (groupByAgg) {
     case PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS:
       return {
         agg: groupByAgg,
         aggName,
+        dropDownName,
         field: fieldName,
       };
     case PIVOT_SUPPORTED_GROUP_BY_AGGS.HISTOGRAM:
       return {
         agg: groupByAgg,
         aggName,
+        dropDownName,
         field: fieldName,
         interval: '10',
       };
@@ -50,12 +54,15 @@ function getDefaultGroupByConfig(
       return {
         agg: groupByAgg,
         aggName,
+        dropDownName,
         field: fieldName,
         interval: '1m',
       };
   }
 }
 
+const illegalEsAggNameChars = /[[\]>]/g;
+
 export function getPivotDropdownOptions(indexPattern: StaticIndexPattern) {
   // The available group by options
   const groupByOptions: EuiComboBoxOptionProps[] = [];
@@ -74,19 +81,30 @@ export function getPivotDropdownOptions(indexPattern: StaticIndexPattern) {
     // Group by
     const availableGroupByAggs = pivotGroupByFieldSupport[field.type];
     availableGroupByAggs.forEach(groupByAgg => {
-      const aggName = `${groupByAgg}(${field.name})`;
-      const groupByOption: DropDownLabel = { label: aggName };
+      // Aggregation name for the group-by is the plain field name. Illegal characters will be removed.
+      const aggName = field.name.replace(illegalEsAggNameChars, '');
+      // Option name in the dropdown for the group-by is in the form of `sum(fieldname)`.
+      const dropDownName = `${groupByAgg}(${field.name})`;
+      const groupByOption: DropDownLabel = { label: dropDownName };
       groupByOptions.push(groupByOption);
-      groupByOptionsData[aggName] = getDefaultGroupByConfig(aggName, field.name, groupByAgg);
+      groupByOptionsData[dropDownName] = getDefaultGroupByConfig(
+        aggName,
+        dropDownName,
+        field.name,
+        groupByAgg
+      );
     });
 
     // Aggregations
     const aggOption: DropDownOption = { label: field.name, options: [] };
     const availableAggs = pivotAggsFieldSupport[field.type];
     availableAggs.forEach(agg => {
-      const aggName = `${agg}(${field.name})`;
-      aggOption.options.push({ label: aggName });
-      aggOptionsData[aggName] = { agg, field: field.name, aggName };
+      // Aggregation name is formatted like `fieldname.sum`. Illegal characters will be removed.
+      const aggName = `${field.name.replace(illegalEsAggNameChars, '')}.${agg}`;
+      // Option name in the dropdown for the aggregation is in the form of `sum(fieldname)`.
+      const dropDownName = `${agg}(${field.name})`;
+      aggOption.options.push({ label: dropDownName });
+      aggOptionsData[dropDownName] = { agg, field: field.name, aggName, dropDownName };
     });
     aggOptions.push(aggOption);
   });

x-pack/plugins/ml/public/data_frame/components/define_pivot/define_pivot_form.tsx

@@ -102,14 +102,17 @@ export const DefinePivotForm: SFC<Props> = React.memo(({ overrides = {}, onChang
 
   const addGroupBy = (d: DropDownLabel[]) => {
     const label: AggName = d[0].label;
-    if (groupByList[label] === undefined) {
-      groupByList[label] = groupByOptionsData[label];
+    const config: PivotGroupByConfig = groupByOptionsData[label];
+    const aggName: AggName = config.aggName;
+
+    if (groupByList[aggName] === undefined) {
+      groupByList[aggName] = config;
       setGroupByList({ ...groupByList });
     } else {
       toastNotifications.addDanger(
         i18n.translate('xpack.ml.dataframe.definePivot.groupByExistsErrorMessage', {
-          defaultMessage: `A group by configuration with the name '{label}' already exists.`,
-          values: { label },
+          defaultMessage: `A group by configuration with the name '{aggName}' already exists.`,
+          values: { aggName },
         })
       );
     }
@@ -121,8 +124,8 @@ export const DefinePivotForm: SFC<Props> = React.memo(({ overrides = {}, onChang
     setGroupByList({ ...groupByList });
   };
 
-  const deleteGroupBy = (label: AggName) => {
-    delete groupByList[label];
+  const deleteGroupBy = (aggName: AggName) => {
+    delete groupByList[aggName];
     setGroupByList({ ...groupByList });
   };
 
@@ -131,14 +134,17 @@ export const DefinePivotForm: SFC<Props> = React.memo(({ overrides = {}, onChang
 
   const addAggregation = (d: DropDownLabel[]) => {
     const label: AggName = d[0].label;
-    if (aggList[label] === undefined) {
-      aggList[label] = aggOptionsData[label];
+    const config: PivotAggsConfig = aggOptionsData[label];
+    const aggName: AggName = config.aggName;
+
+    if (aggList[aggName] === undefined) {
+      aggList[aggName] = config;
       setAggList({ ...aggList });
     } else {
       toastNotifications.addDanger(
         i18n.translate('xpack.ml.dataframe.definePivot.aggExistsErrorMessage', {
-          defaultMessage: `An aggregation configuration with the name '{label}' already exists.`,
-          values: { label },
+          defaultMessage: `An aggregation configuration with the name '{aggName}' already exists.`,
+          values: { aggName },
         })
       );
     }
@@ -150,8 +156,8 @@ export const DefinePivotForm: SFC<Props> = React.memo(({ overrides = {}, onChang
     setAggList({ ...aggList });
   };
 
-  const deleteAggregation = (label: AggName) => {
-    delete aggList[label];
+  const deleteAggregation = (aggName: AggName) => {
+    delete aggList[aggName];
     setAggList({ ...aggList });
   };
 

x-pack/plugins/ml/public/data_frame/components/define_pivot/define_pivot_summary.test.tsx

@@ -34,12 +34,14 @@ describe('Data Frame: <DefinePivotSummary />', () => {
     const groupBy: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const agg: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.AVG,
       field: 'the-agg-field',
-      aggName: 'the-agg-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props: DefinePivotExposedState = {
       aggList: { 'the-agg-name': agg },

x-pack/plugins/ml/public/data_frame/components/define_pivot/define_pivot_summary.tsx

@@ -8,30 +8,13 @@ import React, { SFC, useContext } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
-import {
-  EuiComboBoxOptionProps,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiForm,
-  EuiFormRow,
-  EuiText,
-} from '@elastic/eui';
-
-import { KBN_FIELD_TYPES } from '../../../../common/constants/field_types';
+import { EuiFlexGroup, EuiFlexItem, EuiForm, EuiFormRow, EuiText } from '@elastic/eui';
 
 import { AggListSummary } from '../../components/aggregation_list';
 import { GroupByListSummary } from '../../components/group_by_list';
 import { PivotPreview } from './pivot_preview';
 
-import {
-  DropDownOption,
-  getPivotQuery,
-  isKibanaContext,
-  KibanaContext,
-  PivotAggsConfigDict,
-  pivotAggsFieldSupport,
-} from '../../common';
-import { Field } from './common';
+import { getPivotQuery, isKibanaContext, KibanaContext } from '../../common';
 import { DefinePivotExposedState } from './define_pivot_form';
 
 const defaultSearch = '*';
@@ -48,29 +31,6 @@ export const DefinePivotSummary: SFC<DefinePivotExposedState> = ({
     return null;
   }
 
-  const indexPattern = kibanaContext.currentIndexPattern;
-
-  const ignoreFieldNames = ['_id', '_index', '_type'];
-  const fields = indexPattern.fields
-    .filter(field => field.aggregatable === true && !ignoreFieldNames.includes(field.name))
-    .map((field): Field => ({ name: field.name, type: field.type as KBN_FIELD_TYPES }));
-
-  // The available aggregations
-  const aggOptions: EuiComboBoxOptionProps[] = [];
-  const aggOptionsData: PivotAggsConfigDict = {};
-
-  fields.forEach(field => {
-    // Aggregations
-    const aggOption: DropDownOption = { label: field.name, options: [] };
-    const availableAggs = pivotAggsFieldSupport[field.type];
-    availableAggs.forEach(agg => {
-      const aggName = `${agg}(${field.name})`;
-      aggOption.options.push({ label: aggName });
-      aggOptionsData[aggName] = { agg, field: field.name, aggName };
-    });
-    aggOptions.push(aggOption);
-  });
-
   const pivotQuery = getPivotQuery(search);
 
   const displaySearch = search === defaultSearch ? emptySearch : search;

x-pack/plugins/ml/public/data_frame/components/define_pivot/pivot_preview.test.tsx

@@ -34,12 +34,14 @@ describe('Data Frame: <PivotPreview />', () => {
     const groupBy: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const agg: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.AVG,
       field: 'the-agg-field',
-      aggName: 'the-agg-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props = {
       aggs: { 'the-agg-name': agg },

x-pack/plugins/ml/public/data_frame/components/group_by_list/__snapshots__/group_by_label_form.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Data Frame: <GroupByLabelForm /> Date histogram aggregation 1`] = `
     <span
       className="mlGroupByLabel__text"
     >
-      the-group-by-label
+      the-group-by-agg-name
     </span>
   </EuiFlexItem>
   <EuiFlexItem
@@ -54,7 +54,8 @@ exports[`Data Frame: <GroupByLabelForm /> Date histogram aggregation 1`] = `
         defaultData={
           Object {
             "agg": "date_histogram",
-            "aggName": "the-group-by-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-group-by-field",
             "interval": "10m",
           }
@@ -94,7 +95,7 @@ exports[`Data Frame: <GroupByLabelForm /> Histogram aggregation 1`] = `
     <span
       className="mlGroupByLabel__text"
     >
-      the-group-by-label
+      the-group-by-agg-name
     </span>
   </EuiFlexItem>
   <EuiFlexItem
@@ -136,7 +137,8 @@ exports[`Data Frame: <GroupByLabelForm /> Histogram aggregation 1`] = `
         defaultData={
           Object {
             "agg": "histogram",
-            "aggName": "the-group-by-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-group-by-field",
             "interval": "100",
           }
@@ -176,7 +178,7 @@ exports[`Data Frame: <GroupByLabelForm /> Terms aggregation 1`] = `
     <span
       className="mlGroupByLabel__text"
     >
-      the-group-by-label
+      the-group-by-agg-name
     </span>
   </EuiFlexItem>
   <EuiFlexItem
@@ -207,7 +209,8 @@ exports[`Data Frame: <GroupByLabelForm /> Terms aggregation 1`] = `
         defaultData={
           Object {
             "agg": "terms",
-            "aggName": "the-group-by-label",
+            "aggName": "the-group-by-agg-name",
+            "dropDownName": "the-group-by-drop-down-name",
             "field": "the-group-by-field",
           }
         }

x-pack/plugins/ml/public/data_frame/components/group_by_list/__snapshots__/list_form.test.tsx.snap

@@ -12,7 +12,8 @@ exports[`Data Frame: <GroupByListForm /> Minimal initialization 1`] = `
       item={
         Object {
           "agg": "terms",
-          "aggName": "the-group-by-label",
+          "aggName": "the-group-by-agg-name",
+          "dropDownName": "the-group-by-drop-down-name",
           "field": "the-group-by-field",
         }
       }

x-pack/plugins/ml/public/data_frame/components/group_by_list/__snapshots__/list_summary.test.tsx.snap

@@ -11,7 +11,8 @@ exports[`Data Frame: <GroupByListSummary /> Minimal initialization 1`] = `
       item={
         Object {
           "agg": "terms",
-          "aggName": "the-group-by-label",
+          "aggName": "the-group-by-agg-name",
+          "dropDownName": "the-group-by-drop-down-name",
           "field": "the-group-by-field",
         }
       }

x-pack/plugins/ml/public/data_frame/components/group_by_list/group_by_label_form.test.tsx

@@ -16,7 +16,8 @@ describe('Data Frame: <GroupByLabelForm />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.DATE_HISTOGRAM,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
       interval: '10m',
     };
     const props = {
@@ -36,7 +37,8 @@ describe('Data Frame: <GroupByLabelForm />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.HISTOGRAM,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
       interval: '100',
     };
     const props = {
@@ -56,7 +58,8 @@ describe('Data Frame: <GroupByLabelForm />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props = {
       item,

x-pack/plugins/ml/public/data_frame/components/group_by_list/group_by_label_summary.test.tsx

@@ -16,7 +16,8 @@ describe('Data Frame: <GroupByLabelSummary />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.DATE_HISTOGRAM,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
       interval: '10m',
     };
     const props = {
@@ -33,7 +34,8 @@ describe('Data Frame: <GroupByLabelSummary />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.HISTOGRAM,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
       interval: '100',
     };
     const props = {
@@ -50,7 +52,8 @@ describe('Data Frame: <GroupByLabelSummary />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props = {
       item,

x-pack/plugins/ml/public/data_frame/components/group_by_list/list_form.test.tsx

@@ -16,7 +16,8 @@ describe('Data Frame: <GroupByListForm />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props = {
       list: { 'the-options-data-id': item },

x-pack/plugins/ml/public/data_frame/components/group_by_list/list_summary.test.tsx

@@ -16,7 +16,8 @@ describe('Data Frame: <GroupByListSummary />', () => {
     const item: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
       field: 'the-group-by-field',
-      aggName: 'the-group-by-label',
+      aggName: 'the-group-by-agg-name',
+      dropDownName: 'the-group-by-drop-down-name',
     };
     const props = {
       list: { 'the-options-data-id': item },

x-pack/plugins/ml/public/data_frame/components/group_by_list/popover_form.test.tsx

@@ -78,6 +78,7 @@ describe('Data Frame: Group By <PopoverForm />', () => {
     const defaultData: PivotGroupByConfig = {
       agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.DATE_HISTOGRAM,
       aggName: 'the-agg-name',
+      dropDownName: 'the-drop-down-name',
       field: 'the-field',
       interval: '10m',
     };