Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Feb 7, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a0f5987
[Metrics UI] Limit group by selector to only 2 fields
simianhacker Feb 4, 2020
1f696c0
Removing unused variable
simianhacker Feb 5, 2020
da42556
Removing unused import
simianhacker Feb 5, 2020
7721015
Merge branch 'master' into issue-49857-duplicate-custom-group-by
elasticmachine Feb 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions x-pack/legacy/plugins/infra/public/components/waffle/custom_field_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>
Expand All @@ -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
Expand Down
20 changes: 18 additions & 2 deletions x-pack/legacy/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
},
Expand All @@ -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;
}),
],
Expand All @@ -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}
Copy link
Contributor

@afgomez afgomez Feb 6, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't this be this.props.currentOptions ?

Edit: nevermind. I see the currentOptions prop was added in a different file.

onSubmit={this.handleCustomField}
fields={this.props.fields}
/>
),
},
];
const buttonBody =
Expand Down Expand Up @@ -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();
};
};

Expand Down