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(); - + const [queryError, setQueryError] = React.useState(); 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 ( - + <> + + {queryError && ( + {queryError} + )} + ); }