[SLO] Make good events required (#157515)

elastic · May 15, 2023 · c322ac5 · c322ac5
1 parent b542862
commit c322ac5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/query_builder.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/query_builder.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { ReactNode } from 'react';
-import { Control, Controller, FieldPath } from 'react-hook-form';
+import { Control, Controller, FieldPath, useFormContext } from 'react-hook-form';
 import { EuiFormRow } from '@elastic/eui';
 import { CreateSLOInput } from '@kbn/slo-schema';
 import { QueryStringInput } from '@kbn/unified-search-plugin/public';
@@ -20,6 +20,7 @@ export interface Props {
   label: string;
   name: FieldPath<CreateSLOInput>;
   placeholder: string;
+  required?: boolean;
   tooltip?: ReactNode;
 }
 
@@ -30,11 +31,14 @@ export function QueryBuilder({
   label,
   name,
   placeholder,
+  required,
   tooltip,
 }: Props) {
   const { data, dataViews, docLinks, http, notifications, storage, uiSettings, unifiedSearch } =
     useKibana().services;
 
+  const { getFieldState } = useFormContext();
+
   const { dataView } = useCreateDataView({ indexPatternString });
 
   return (
@@ -48,14 +52,18 @@ export function QueryBuilder({
           label
         )
       }
+      isInvalid={getFieldState(name).invalid}
       fullWidth
     >
       <Controller
         shouldUnregister
         defaultValue=""
         name={name}
         control={control}
-        render={({ field }) => (
+        rules={{
+          required: Boolean(required),
+        }}
+        render={({ field, fieldState }) => (
           <QueryStringInput
             appName="Observability"
             bubbleSubmitEvent={false}
@@ -74,6 +82,7 @@ export function QueryBuilder({
             disableLanguageSwitcher
             indexPatterns={dataView ? [dataView] : []}
             isDisabled={!indexPatternString}
+            isInvalid={fieldState.invalid}
             languageSwitcherPopoverAnchorPosition="rightDown"
             placeholder={placeholder}
             query={{ query: String(field.value), language: 'kuery' }}

diff --git a/...ervability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx b/...ervability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx
@@ -147,6 +147,7 @@ export function CustomKqlIndicatorTypeForm() {
               defaultMessage: 'Define the good events',
             }
           )}
+          required
           tooltip={
             <EuiIconTip
               content={i18n.translate(

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/slo_edit_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/slo_edit_form.tsx
@@ -25,7 +25,7 @@ import { useCreateSlo } from '../../../hooks/slo/use_create_slo';
 import { useUpdateSlo } from '../../../hooks/slo/use_update_slo';
 import { useShowSections } from '../hooks/use_show_sections';
 import { useFetchRulesForSlo } from '../../../hooks/slo/use_fetch_rules_for_slo';
-import { useSectionFormValidation } from '../helpers/use_section_form_validation';
+import { useSectionFormValidation } from '../hooks/use_section_form_validation';
 import { SloEditFormDescriptionSection } from './slo_edit_form_description_section';
 import { SloEditFormObjectiveSection } from './slo_edit_form_objective_section';
 import { SloEditFormIndicatorSection } from './slo_edit_form_indicator_section';

diff --git a/...it/helpers/use_section_form_validation.ts → ...edit/hooks/use_section_form_validation.ts b/...it/helpers/use_section_form_validation.ts → ...edit/hooks/use_section_form_validation.ts
@@ -25,14 +25,18 @@ export function useSectionFormValidation({ getFieldState, getValues, formState,
           [
             'indicator.params.index',
             'indicator.params.filter',
-            'indicator.params.good',
+
             'indicator.params.total',
             'indicator.params.timestampField',
           ] as const
         ).every((field) => !getFieldState(field).invalid) &&
-        (['indicator.params.index', 'indicator.params.timestampField'] as const).every(
-          (field) => !!getValues(field)
-        );
+        (
+          [
+            'indicator.params.good',
+            'indicator.params.index',
+            'indicator.params.timestampField',
+          ] as const
+        ).every((field) => !!getValues(field));
       break;
     case 'sli.apm.transactionDuration':
       isIndicatorSectionValid =