[Metrics UI] Limit group by selector to only 2 fields (#56800) (#57103)

* [Metrics UI] Limit group by selector to only 2 fields * Removing unused variable * Removing unused import Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Feb 7, 2020 · 612a3a5 · 612a3a5
1 parent 0d11a76
commit 612a3a5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/custom_field_panel.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/custom_field_panel.tsx
@@ -8,10 +8,12 @@ import { EuiButton, EuiComboBox, EuiForm, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { IFieldType } from 'src/plugins/data/public';
+import { InfraGroupByOptions } from '../../lib/lib';
 
 interface Props {
   onSubmit: (field: string) => void;
   fields: IFieldType[];
+  currentOptions: InfraGroupByOptions[];
 }
 
 interface SelectedOption {
@@ -28,10 +30,16 @@ export const CustomFieldPanel = class extends React.PureComponent<Props, State>
   public static displayName = 'CustomFieldPanel';
   public readonly state: State = initialState;
   public render() {
-    const { fields } = this.props;
+    const { fields, currentOptions } = this.props;
     const options = fields
-      .filter(f => f.aggregatable && f.type === 'string')
+      .filter(
+        f =>
+          f.aggregatable &&
+          f.type === 'string' &&
+          !(currentOptions && currentOptions.some(o => o.field === f.name))
+      )
       .map(f => ({ label: f.name }));
+    const isSubmitDisabled = !this.state.selectedOptions.length;
     return (
       <div style={{ padding: 16 }}>
         <EuiForm>
@@ -57,7 +65,7 @@ export const CustomFieldPanel = class extends React.PureComponent<Props, State>
             />
           </EuiFormRow>
           <EuiButton
-            disabled={!this.state.selectedOptions.length}
+            disabled={isSubmitDisabled}
             type="submit"
             size="s"
             fill

diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx
@@ -61,6 +61,10 @@ export const WaffleGroupByControls = class extends React.PureComponent<Props, St
         })
       );
     }
+    const isMaxGroupingsSelected = groupBy.length >= 2;
+    const maxGroupByTooltip = i18n.translate('xpack.infra.waffle.maxGroupByTooltip', {
+      defaultMessage: 'Only two groupings can be selected at a time',
+    });
     const panels: EuiContextMenuPanelDescriptor[] = [
       {
         id: 'firstPanel',
@@ -72,6 +76,8 @@ export const WaffleGroupByControls = class extends React.PureComponent<Props, St
             name: i18n.translate('xpack.infra.waffle.customGroupByOptionName', {
               defaultMessage: 'Custom field',
             }),
+            disabled: isMaxGroupingsSelected,
+            toolTipContent: isMaxGroupingsSelected ? maxGroupByTooltip : null,
             icon: 'empty',
             panel: 'customPanel',
           },
@@ -85,6 +91,10 @@ export const WaffleGroupByControls = class extends React.PureComponent<Props, St
             if (o.toolTipContent) {
               panel.toolTipContent = o.toolTipContent;
             }
+            if (isMaxGroupingsSelected && icon === 'empty') {
+              panel.toolTipContent = maxGroupByTooltip;
+              panel.disabled = true;
+            }
             return panel;
           }),
         ],
@@ -94,7 +104,13 @@ export const WaffleGroupByControls = class extends React.PureComponent<Props, St
         title: i18n.translate('xpack.infra.waffle.customGroupByPanelTitle', {
           defaultMessage: 'Group By Custom Field',
         }),
-        content: <CustomFieldPanel onSubmit={this.handleCustomField} fields={this.props.fields} />,
+        content: (
+          <CustomFieldPanel
+            currentOptions={this.props.customOptions}
+            onSubmit={this.handleCustomField}
+            fields={this.props.fields}
+          />
+        ),
       },
     ];
     const buttonBody =
@@ -167,8 +183,8 @@ export const WaffleGroupByControls = class extends React.PureComponent<Props, St
       this.handleRemove(field)();
     } else if (this.props.groupBy.length < 2) {
       this.props.onChange([...groupBy, { field }]);
-      this.handleClose();
     }
+    this.handleClose();
   };
 };