maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Metrics UI] Fixes for editing alerts in alert management (#64597)

Browse source 
* [Metrics UI] Fixes for editing alerts in alert management

* Change EuiFieldSearch to use onChange instead of onSearch

* Fixing groupBy

* Fixing the correct groupBy
This commit is contained in:
Chris Cowan 2020-04-28 08:33:32 -07:00 committed by GitHub
parent f7f245f4bc
commit 4a04adf812
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useCallback, useMemo, useEffect, useState } from 'react';
import React, { ChangeEvent, useCallback, useMemo, useEffect, useState } from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
@ -13,6 +13,7 @@ import {
EuiText,
EuiFormRow,
EuiButtonEmpty,
EuiFieldSearch,
} from '@elastic/eui';
import { IFieldType } from 'src/plugins/data/public';
import { FormattedMessage } from '@kbn/i18n/react';
@ -147,7 +148,7 @@ export const Expressions: React.FC<Props> = props => {
const onGroupByChange = useCallback(
(group: string | null) => {
setAlertParams('groupBy', group || undefined);
setAlertParams('groupBy', group || '');
},
[setAlertParams]
);
@ -215,10 +216,20 @@ export const Expressions: React.FC<Props> = props => {
}
setAlertParams('sourceId', source?.id);
} else {
setAlertParams('criteria', [defaultExpression]);
if (!alertParams.criteria) {
setAlertParams('criteria', [defaultExpression]);
}
if (!alertParams.sourceId) {
setAlertParams('sourceId', source?.id || 'default');
}
}
}, [alertsContext.metadata, defaultExpression, source]); // eslint-disable-line react-hooks/exhaustive-deps
const handleFieldSearchChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => onFilterQuerySubmit(e.target.value),
[onFilterQuerySubmit]
);
return (
<>
<EuiSpacer size={'m'} />
@ -273,48 +284,52 @@ export const Expressions: React.FC<Props> = props => {
<EuiSpacer size={'m'} />
{alertsContext.metadata && (
<>
<EuiFormRow
label={i18n.translate('xpack.infra.metrics.alertFlyout.filterLabel', {
defaultMessage: 'Filter (optional)',
})}
helpText={i18n.translate('xpack.infra.metrics.alertFlyout.filterHelpText', {
defaultMessage: 'Use a KQL expression to limit the scope of your alert trigger.',
})}
<EuiFormRow
label={i18n.translate('xpack.infra.metrics.alertFlyout.filterLabel', {
defaultMessage: 'Filter (optional)',
})}
helpText={i18n.translate('xpack.infra.metrics.alertFlyout.filterHelpText', {
defaultMessage: 'Use a KQL expression to limit the scope of your alert trigger.',
})}
fullWidth
compressed
>
{(alertsContext.metadata && (
<MetricsExplorerKueryBar
derivedIndexPattern={derivedIndexPattern}
onSubmit={onFilterQuerySubmit}
value={alertParams.filterQuery}
/>
)) || (
<EuiFieldSearch
onChange={handleFieldSearchChange}
value={alertParams.filterQuery}
fullWidth
compressed
>
<MetricsExplorerKueryBar
derivedIndexPattern={derivedIndexPattern}
onSubmit={onFilterQuerySubmit}
value={alertParams.filterQuery}
/>
</EuiFormRow>
/>
)}
</EuiFormRow>
<EuiSpacer size={'m'} />
<EuiFormRow
label={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerText', {
defaultMessage: 'Create alert per (optional)',
})}
helpText={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerHelpText', {
defaultMessage:
'Create an alert for every unique value. For example: "host.id" or "cloud.region".',
})}
fullWidth
compressed
>
<MetricsExplorerGroupBy
onChange={onGroupByChange}
fields={derivedIndexPattern.fields}
options={{
...options,
groupBy: alertParams.groupBy || undefined,
}}
/>
</EuiFormRow>
</>
)}
<EuiSpacer size={'m'} />
<EuiFormRow
label={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerText', {
defaultMessage: 'Create alert per (optional)',
})}
helpText={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerHelpText', {
defaultMessage:
'Create an alert for every unique value. For example: "host.id" or "cloud.region".',
})}
fullWidth
compressed
>
<MetricsExplorerGroupBy
onChange={onGroupByChange}
fields={derivedIndexPattern.fields}
options={{
...options,
groupBy: alertParams.groupBy || undefined,
}}
/>
</EuiFormRow>
</>
);
};