diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx index bfb629f3c8071..d22509da43599 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx @@ -7,8 +7,9 @@ import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React from 'react'; +import React, { useEffect } from 'react'; import { useFormContext } from 'react-hook-form'; +import { useFetchApmIndex } from '../../../../hooks/slo/use_fetch_apm_indices'; import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields'; import { CreateSLOForm } from '../../types'; import { FieldSelector } from '../apm_common/field_selector'; @@ -17,10 +18,17 @@ import { IndexFieldSelector } from '../common/index_field_selector'; import { QueryBuilder } from '../common/query_builder'; export function ApmAvailabilityIndicatorTypeForm() { - const { watch } = useFormContext(); - const index = watch('indicator.params.index'); + const { watch, setValue } = useFormContext(); + const { data: apmIndex } = useFetchApmIndex(); + + useEffect(() => { + if (apmIndex !== '') { + setValue('indicator.params.index', apmIndex); + } + }, [setValue, apmIndex]); + const { isLoading: isIndexFieldsLoading, data: indexFields = [] } = - useFetchIndexPatternFields(index); + useFetchIndexPatternFields(apmIndex); const partitionByFields = indexFields.filter((field) => field.aggregatable); return ( @@ -144,8 +152,8 @@ export function ApmAvailabilityIndicatorTypeForm() { placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', { defaultMessage: 'Select an optional field to partition by', })} - isLoading={!!index && isIndexFieldsLoading} - isDisabled={!index} + isLoading={!!apmIndex && isIndexFieldsLoading} + isDisabled={!apmIndex} /> diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx index 8d21a0c7d2546..af357ea0c18d1 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx @@ -7,8 +7,9 @@ import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiIconTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React from 'react'; +import React, { useEffect } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; +import { useFetchApmIndex } from '../../../../hooks/slo/use_fetch_apm_indices'; import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields'; import { CreateSLOForm } from '../../types'; import { FieldSelector } from '../apm_common/field_selector'; @@ -17,10 +18,17 @@ import { IndexFieldSelector } from '../common/index_field_selector'; import { QueryBuilder } from '../common/query_builder'; export function ApmLatencyIndicatorTypeForm() { - const { control, watch, getFieldState } = useFormContext(); - const index = watch('indicator.params.index'); + const { control, watch, getFieldState, setValue } = useFormContext(); + const { data: apmIndex } = useFetchApmIndex(); + + useEffect(() => { + if (apmIndex !== '') { + setValue('indicator.params.index', apmIndex); + } + }, [setValue, apmIndex]); + const { isLoading: isIndexFieldsLoading, data: indexFields = [] } = - useFetchIndexPatternFields(index); + useFetchIndexPatternFields(apmIndex); const partitionByFields = indexFields.filter((field) => field.aggregatable); return ( @@ -187,8 +195,8 @@ export function ApmLatencyIndicatorTypeForm() { placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', { defaultMessage: 'Select an optional field to partition by', })} - isLoading={!!index && isIndexFieldsLoading} - isDisabled={!index} + isLoading={!!apmIndex && isIndexFieldsLoading} + isDisabled={!apmIndex} /> diff --git a/x-pack/plugins/observability/public/pages/slo_edit/hooks/use_unregister_fields.ts b/x-pack/plugins/observability/public/pages/slo_edit/hooks/use_unregister_fields.ts index 973a023bdae77..c15b5cb7fbbfc 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/hooks/use_unregister_fields.ts +++ b/x-pack/plugins/observability/public/pages/slo_edit/hooks/use_unregister_fields.ts @@ -32,8 +32,8 @@ export function useUnregisterFields({ isEditMode }: { isEditMode: boolean }) { const [indicatorTypeState, setIndicatorTypeState] = useState( watch('indicator.type') ); - const indicatorType = watch('indicator.type'); + const indicatorType = watch('indicator.type'); useEffect(() => { if (indicatorType !== indicatorTypeState && !isEditMode) { setIndicatorTypeState(indicatorType);