diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx index cdefffeb35c156..d4d53b81109c61 100644 --- a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx +++ b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx @@ -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 => { const onGroupByChange = useCallback( (group: string | null) => { - setAlertParams('groupBy', group || undefined); + setAlertParams('groupBy', group || ''); }, [setAlertParams] ); @@ -215,10 +216,20 @@ export const Expressions: React.FC = 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) => onFilterQuerySubmit(e.target.value), + [onFilterQuerySubmit] + ); + return ( <> @@ -273,48 +284,52 @@ export const Expressions: React.FC = props => { - {alertsContext.metadata && ( - <> - - - - - - + {(alertsContext.metadata && ( + + )) || ( + - - - - )} + /> + )} + + + + + + ); };