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

## Summary

Fixes #160390

Add/Edit form KQL Validation !!

<img width="1020" alt="image"
src="https://github.com/elastic/kibana/assets/3505601/30ecaba5-e567-4964-acb2-5d687f8a2e55">

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',
             }}