[8.13] [SLOs] Add/Edit form KQL Validation (#174465) (#177177)

# Backport

This will backport the following commits from `main` to `8.13`:
- [[SLOs] Add/Edit form KQL Validation
(#174465)](#174465)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-02-19T10:43:37Z","message":"[SLOs]
Add/Edit form KQL Validation (#174465)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/160390\r\n\r\nAdd/Edit form KQL
Validation !!\r\n\r\n<img width=\"1020\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/3505601/30ecaba5-e567-4964-acb2-5d687f8a2e55\">","sha":"f4fb1e8d9020c5e61f08fab84a3e3b0805525b1e","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:prev-minor","Team:obs-ux-management","v8.14.0"],"number":174465,"url":"https://github.com/elastic/kibana/pull/174465","mergeCommit":{"message":"[SLOs]
Add/Edit form KQL Validation (#174465)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/160390\r\n\r\nAdd/Edit form KQL
Validation !!\r\n\r\n<img width=\"1020\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/3505601/30ecaba5-e567-4964-acb2-5d687f8a2e55\">","sha":"f4fb1e8d9020c5e61f08fab84a3e3b0805525b1e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.14.0","labelRegex":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/174465","number":174465,"mergeCommit":{"message":"[SLOs]
Add/Edit form KQL Validation (#174465)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/160390\r\n\r\nAdd/Edit form KQL
Validation !!\r\n\r\n<img width=\"1020\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/3505601/30ecaba5-e567-4964-acb2-5d687f8a2e55\">","sha":"f4fb1e8d9020c5e61f08fab84a3e3b0805525b1e"}}]}]
BACKPORT-->

x-pack/plugins/observability/public/pages/slo_edit/components/common/query_builder.tsx

@@ -8,6 +8,7 @@
 import { EuiFormRow } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 import { Controller, FieldPath, useFormContext } from 'react-hook-form';
+import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
 import styled from 'styled-components';
 import { kqlQuerySchema } from '@kbn/slo-schema';
 import { useCreateDataView } from '../../../../hooks/use_create_data_view';
@@ -59,6 +60,7 @@ export function QueryBuilder({
       }
       labelAppend={!required ? <OptionalText /> : undefined}
       isInvalid={getFieldState(name).invalid}
+      error={getFieldState(name).error?.message}
       fullWidth
     >
       <Controller
@@ -67,6 +69,15 @@ export function QueryBuilder({
         control={control}
         rules={{
           required: Boolean(required) && Boolean(dataView),
+          validate: (value) => {
+            try {
+              if (!dataView) return;
+              const ast = fromKueryExpression(String(value));
+              toElasticsearchQuery(ast, dataView);
+            } catch (e) {
+              return e.message;
+            }
+          },
         }}
         render={({ field, fieldState }) => (
           <Container>

x-pack/plugins/observability/public/pages/slo_edit/components/custom_common/index_selection.tsx

@@ -80,7 +80,7 @@ export function IndexSelection() {
             trigger={{
               label: field.value || SELECT_DATA_VIEW,
               fullWidth: true,
-              color: 'text',
+              color: fieldState.invalid ? 'danger' : 'text',
               isLoading: isDataViewsLoading,
               'data-test-subj': 'indexSelection',
             }}