forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Logs UI] [Alerting] "Group by" functionality (elastic#68250)
- Add "group by" functionality to logs alerts
- Loading branch information
Showing
10 changed files
with
918 additions
and
246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
x-pack/plugins/infra/common/utils/elasticsearch_runtime_types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import * as rt from 'io-ts'; | ||
|
|
||
| export const commonSearchSuccessResponseFieldsRT = rt.type({ | ||
| _shards: rt.type({ | ||
| total: rt.number, | ||
| successful: rt.number, | ||
| skipped: rt.number, | ||
| failed: rt.number, | ||
| }), | ||
| timed_out: rt.boolean, | ||
| took: rt.number, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
...ugins/infra/public/components/alerting/shared/group_by_expression/group_by_expression.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React, { useState, useMemo } from 'react'; | ||
| import { IFieldType } from 'src/plugins/data/public'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { | ||
| EuiPopoverTitle, | ||
| EuiFlexItem, | ||
| EuiFlexGroup, | ||
| EuiPopover, | ||
| EuiExpression, | ||
| } from '@elastic/eui'; | ||
| import { GroupBySelector } from './selector'; | ||
|
|
||
| interface Props { | ||
| selectedGroups?: string[]; | ||
| fields: IFieldType[]; | ||
| onChange: (groupBy: string[]) => void; | ||
| label?: string; | ||
| } | ||
|
|
||
| const DEFAULT_GROUP_BY_LABEL = i18n.translate('xpack.infra.alerting.alertFlyout.groupByLabel', { | ||
| defaultMessage: 'Group By', | ||
| }); | ||
|
|
||
| const EVERYTHING_PLACEHOLDER = i18n.translate( | ||
| 'xpack.infra.alerting.alertFlyout.groupBy.placeholder', | ||
| { | ||
| defaultMessage: 'Nothing (ungrouped)', | ||
| } | ||
| ); | ||
|
|
||
| export const GroupByExpression: React.FC<Props> = ({ | ||
| selectedGroups = [], | ||
| fields, | ||
| label, | ||
| onChange, | ||
| }) => { | ||
| const [isPopoverOpen, setIsPopoverOpen] = useState(false); | ||
|
|
||
| const expressionValue = useMemo(() => { | ||
| return selectedGroups.length > 0 ? selectedGroups.join(', ') : EVERYTHING_PLACEHOLDER; | ||
| }, [selectedGroups]); | ||
|
|
||
| const labelProp = label ?? DEFAULT_GROUP_BY_LABEL; | ||
|
|
||
| return ( | ||
| <EuiFlexGroup gutterSize="s"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiPopover | ||
| id="groupByExpression" | ||
| button={ | ||
| <EuiExpression | ||
| description={labelProp} | ||
| uppercase={true} | ||
| value={expressionValue} | ||
| isActive={isPopoverOpen} | ||
| onClick={() => setIsPopoverOpen(true)} | ||
| /> | ||
| } | ||
| isOpen={isPopoverOpen} | ||
| closePopover={() => setIsPopoverOpen(false)} | ||
| ownFocus | ||
| panelPaddingSize="s" | ||
| anchorPosition="downLeft" | ||
| > | ||
| <div style={{ zIndex: 11000 }}> | ||
| <EuiPopoverTitle>{labelProp}</EuiPopoverTitle> | ||
| <GroupBySelector | ||
| selectedGroups={selectedGroups} | ||
| onChange={onChange} | ||
| fields={fields} | ||
| label={labelProp} | ||
| placeholder={EVERYTHING_PLACEHOLDER} | ||
| /> | ||
| </div> | ||
| </EuiPopover> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| }; |
56 changes: 56 additions & 0 deletions
56
x-pack/plugins/infra/public/components/alerting/shared/group_by_expression/selector.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import { EuiComboBox } from '@elastic/eui'; | ||
| import React, { useCallback, useMemo } from 'react'; | ||
| import { IFieldType } from 'src/plugins/data/public'; | ||
|
|
||
| interface Props { | ||
| selectedGroups?: string[]; | ||
| onChange: (groupBy: string[]) => void; | ||
| fields: IFieldType[]; | ||
| label: string; | ||
| placeholder: string; | ||
| } | ||
|
|
||
| export const GroupBySelector = ({ | ||
| onChange, | ||
| fields, | ||
| selectedGroups = [], | ||
| label, | ||
| placeholder, | ||
| }: Props) => { | ||
| const handleChange = useCallback( | ||
| (selectedOptions: Array<{ label: string }>) => { | ||
| const groupBy = selectedOptions.map((option) => option.label); | ||
| onChange(groupBy); | ||
| }, | ||
| [onChange] | ||
| ); | ||
|
|
||
| const formattedSelectedGroups = useMemo(() => { | ||
| return selectedGroups.map((group) => ({ label: group })); | ||
| }, [selectedGroups]); | ||
|
|
||
| const options = useMemo(() => { | ||
| return fields.filter((field) => field.aggregatable).map((field) => ({ label: field.name })); | ||
| }, [fields]); | ||
|
|
||
| return ( | ||
| <div style={{ minWidth: '300px' }}> | ||
| <EuiComboBox | ||
| placeholder={placeholder} | ||
| aria-label={label} | ||
| fullWidth | ||
| singleSelection={false} | ||
| selectedOptions={formattedSelectedGroups} | ||
| options={options} | ||
| onChange={handleChange} | ||
| isClearable={true} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.