From 74df543786113b12ebc62247f870322a78e5d550 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 10 Dec 2024 04:47:14 +1100
Subject: [PATCH] [8.15] [OBX-UX-MGMT][ALERTING] Fix APM rule error msg when
 KQL filter is invalid (#203096) (#203466)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[OBX-UX-MGMT][ALERTING] Fix APM rule error msg when KQL filter is
invalid (#203096)](https://github.com/elastic/kibana/pull/203096)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Faisal
Kanout","email":"faisal.kanout@elastic.co"},"sourceCommit":{"committedDate":"2024-12-05T16:07:58Z","message":"[OBX-UX-MGMT][ALERTING]
Fix APM rule error msg when KQL filter is invalid (#203096)\n\n##
Summary\r\n\r\nIt fixes https://github.com/elastic/kibana/issues/199273
by validating\r\nthe query before passing it to the preview
chart","sha":"f1109cfccedfd386263a00207df81c766cfaf6e4","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","v9.0.0","backport:prev-minor","backport:prev-major","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","v8.18.0"],"title":"[OBX-UX-MGMT][ALERTING]
Fix APM rule error msg when KQL filter is
invalid","number":203096,"url":"https://github.com/elastic/kibana/pull/203096","mergeCommit":{"message":"[OBX-UX-MGMT][ALERTING]
Fix APM rule error msg when KQL filter is invalid (#203096)\n\n##
Summary\r\n\r\nIt fixes https://github.com/elastic/kibana/issues/199273
by validating\r\nthe query before passing it to the preview
chart","sha":"f1109cfccedfd386263a00207df81c766cfaf6e4"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203096","number":203096,"mergeCommit":{"message":"[OBX-UX-MGMT][ALERTING]
Fix APM rule error msg when KQL filter is invalid (#203096)\n\n##
Summary\r\n\r\nIt fixes https://github.com/elastic/kibana/issues/199273
by validating\r\nthe query before passing it to the preview
chart","sha":"f1109cfccedfd386263a00207df81c766cfaf6e4"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/203134","number":203134,"state":"MERGED","mergeCommit":{"sha":"a70bdf01cd8208c0f2358a98f5fcc5d10ac0a7d6","message":"[8.x]
[OBX-UX-MGMT][ALERTING] Fix APM rule error msg when KQL filter is
invalid (#203096) (#203134)\n\n# Backport\n\nThis will backport the
following commits from `main` to `8.x`:\n- [[OBX-UX-MGMT][ALERTING] Fix
APM rule error msg when KQL filter is\ninvalid
(#203096)](https://github.com/elastic/kibana/pull/203096)\n\n<!---
Backport version: 9.4.3 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT
[{\"author\":{\"name\":\"Faisal\nKanout\",\"email\":\"faisal.kanout@elastic.co\"},\"sourceCommit\":{\"committedDate\":\"2024-12-05T16:07:58Z\",\"message\":\"[OBX-UX-MGMT][ALERTING]\nFix
APM rule error msg when KQL filter is invalid
(#203096)\\n\\n##\nSummary\\r\\n\\r\\nIt fixes
https://github.com/elastic/kibana/issues/199273\nby validating\\r\\nthe
query before passing it to the
preview\nchart\",\"sha\":\"f1109cfccedfd386263a00207df81c766cfaf6e4\",\"branchLabelMapping\":{\"^v9.0.0$\":\"main\",\"^v8.18.0$\":\"8.x\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"bug\",\"release_note:fix\",\"v9.0.0\",\"backport:prev-minor\",\"ci:project-deploy-observability\",\"Team:obs-ux-infra_services\",\"Team:obs-ux-management\"],\"title\":\"[OBX-UX-MGMT][ALERTING]\nFix
APM rule error msg when KQL filter
is\ninvalid\",\"number\":203096,\"url\":\"https://github.com/elastic/kibana/pull/203096\",\"mergeCommit\":{\"message\":\"[OBX-UX-MGMT][ALERTING]\nFix
APM rule error msg when KQL filter is invalid
(#203096)\\n\\n##\nSummary\\r\\n\\r\\nIt fixes
https://github.com/elastic/kibana/issues/199273\nby validating\\r\\nthe
query before passing it to the
preview\nchart\",\"sha\":\"f1109cfccedfd386263a00207df81c766cfaf6e4\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v9.0.0\",\"branchLabelMappingKey\":\"^v9.0.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/203096\",\"number\":203096,\"mergeCommit\":{\"message\":\"[OBX-UX-MGMT][ALERTING]\nFix
APM rule error msg when KQL filter is invalid
(#203096)\\n\\n##\nSummary\\r\\n\\r\\nIt fixes
https://github.com/elastic/kibana/issues/199273\nby validating\\r\\nthe
query before passing it to the
preview\nchart\",\"sha\":\"f1109cfccedfd386263a00207df81c766cfaf6e4\"}}]}]
BACKPORT-->\n\nCo-authored-by: Faisal Kanout
<faisal.kanout@elastic.co>"}}]}] BACKPORT-->

Co-authored-by: Faisal Kanout <faisal.kanout@elastic.co>
---
 .../apm_rule_unified_search_bar.tsx           | 54 +++++++++++--------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/apm_rule_unified_search_bar.tsx b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/apm_rule_unified_search_bar.tsx
index d91807ec08462..393492cfae9a0 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/apm_rule_unified_search_bar.tsx
+++ b/x-pack/plugins/observability_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>
+      )}
+    </>
   );
 }