[OBX-UX-MGMT][ALERTING] Fix APM rule error msg when KQL filter is inv…

…alid (elastic#203096) ## Summary It fixes elastic#199273 by validating the query before passing it to the preview chart
SoniaSanzV · Dec 9, 2024 · 368a970 · 368a970
1 parent 76a250e
commit 368a970
Showing 1 changed file with 33 additions and 21 deletions.
diff --git a/...ity_solution/apm/public/components/alerting/ui_components/apm_rule_unified_search_bar.tsx b/...ity_solution/apm/public/components/alerting/ui_components/apm_rule_unified_search_bar.tsx
@@ -6,7 +6,8 @@
  */
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { Query } from '@kbn/es-query';
+import { EuiFormErrorText } from '@elastic/eui';
+import { Query, fromKueryExpression } from '@kbn/es-query';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { useAdHocApmDataView } from '../../../hooks/use_adhoc_apm_data_view';
@@ -26,7 +27,7 @@ export function ApmRuleUnifiedSearchBar({
   setRuleParams: (key: string, value: any) => void;
 }) {
   const { services } = useKibana<ApmPluginStartDeps>();
-
+  const [queryError, setQueryError] = React.useState<string>();
   const {
     unifiedSearch: {
       ui: { SearchBar },
@@ -38,27 +39,38 @@ export function ApmRuleUnifiedSearchBar({
 
   const handleSubmit = (payload: { query?: Query }) => {
     const { query } = payload;
-    setRuleParams('searchConfiguration', { query });
+    try {
+      setQueryError(undefined);
+      fromKueryExpression(query?.query as string);
+      setRuleParams('searchConfiguration', { query });
+    } catch (e) {
+      setQueryError(e.message);
+    }
   };
 
   return (
-    <SearchBar
-      appName={i18n.translate('xpack.apm.appName', {
-        defaultMessage: 'APM',
-      })}
-      iconType="search"
-      placeholder={placeholder || searchbarPlaceholder}
-      indexPatterns={dataView ? [dataView] : undefined}
-      showQueryInput={true}
-      showQueryMenu={false}
-      showFilterBar={false}
-      showDatePicker={false}
-      showSubmitButton={false}
-      displayStyle="inPage"
-      onQueryChange={handleSubmit}
-      onQuerySubmit={handleSubmit}
-      dataTestSubj="apmRuleUnifiedSearchBar"
-      query={ruleParams.searchConfiguration?.query}
-    />
+    <>
+      <SearchBar
+        appName={i18n.translate('xpack.apm.appName', {
+          defaultMessage: 'APM',
+        })}
+        iconType="search"
+        placeholder={placeholder || searchbarPlaceholder}
+        indexPatterns={dataView ? [dataView] : undefined}
+        showQueryInput={true}
+        showQueryMenu={false}
+        showFilterBar={false}
+        showDatePicker={false}
+        showSubmitButton={false}
+        displayStyle="inPage"
+        onQueryChange={handleSubmit}
+        onQuerySubmit={handleSubmit}
+        dataTestSubj="apmRuleUnifiedSearchBar"
+        query={ruleParams.searchConfiguration?.query}
+      />
+      {queryError && (
+        <EuiFormErrorText data-test-subj="apmSearchBarErrorCallout">{queryError}</EuiFormErrorText>
+      )}
+    </>
   );
 }