[7.7] [Metrics UI]Fix editing alert filter query

elastic · May 4, 2020 · 5ae7295 · 5ae7295
1 parent 2f74672
commit 5ae7295
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
@@ -135,7 +135,7 @@ export const Expressions: React.FC<Props> = props => {
     [setAlertParams, alertParams.criteria]
   );
 
-  const onFilterQuerySubmit = useCallback(
+  const onFilterChange = useCallback(
     (filter: any) => {
       setAlertParams('filterQuery', filter);
     },
@@ -222,8 +222,8 @@ export const Expressions: React.FC<Props> = props => {
   }, [alertsContext.metadata, defaultExpression, source]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleFieldSearchChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => onFilterQuerySubmit(e.target.value),
-    [onFilterQuerySubmit]
+    (e: ChangeEvent<HTMLInputElement>) => onFilterChange(e.target.value),
+    [onFilterChange]
   );
 
   return (
@@ -293,7 +293,8 @@ export const Expressions: React.FC<Props> = props => {
         {(alertsContext.metadata && (
           <MetricsExplorerKueryBar
             derivedIndexPattern={derivedIndexPattern}
-            onSubmit={onFilterQuerySubmit}
+            onChange={onFilterChange}
+            onSubmit={onFilterChange}
             value={alertParams.filterQuery}
           />
         )) || (

diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/kuery_bar.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/kuery_bar.tsx
@@ -14,6 +14,7 @@ import { esKuery, IIndexPattern } from '../../../../../../src/plugins/data/publi
 interface Props {
   derivedIndexPattern: IIndexPattern;
   onSubmit: (query: string) => void;
+  onChange?: (query: string) => void;
   value?: string | null;
   placeholder?: string;
 }
@@ -30,6 +31,7 @@ function validateQuery(query: string) {
 export const MetricsExplorerKueryBar = ({
   derivedIndexPattern,
   onSubmit,
+  onChange,
   value,
   placeholder,
 }: Props) => {
@@ -46,6 +48,9 @@ export const MetricsExplorerKueryBar = ({
   const handleChange = (query: string) => {
     setValidation(validateQuery(query));
     setDraftQuery(query);
+    if (onChange) {
+      onChange(query);
+    }
   };
 
   const filteredDerivedIndexPattern = {