From cfae808b763e1b375ca4b4170e09cc1bac663b51 Mon Sep 17 00:00:00 2001
From: Kevin Delemme <kevin.delemme@elastic.co>
Date: Fri, 29 Sep 2023 09:12:12 -0400
Subject: [PATCH] Fetch APM index when the form is rendered

---
 .../apm_availability_indicator_type_form.tsx  | 20 +++++++++++++------
 .../apm_latency_indicator_type_form.tsx       | 20 +++++++++++++------
 .../slo_edit/hooks/use_unregister_fields.ts   |  2 +-
 3 files changed, 29 insertions(+), 13 deletions(-)

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<CreateSLOForm>();
-  const index = watch('indicator.params.index');
+  const { watch, setValue } = useFormContext<CreateSLOForm>();
+  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}
       />
 
       <DataPreviewChart />
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<CreateSLOForm>();
-  const index = watch('indicator.params.index');
+  const { control, watch, getFieldState, setValue } = useFormContext<CreateSLOForm>();
+  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}
       />
 
       <DataPreviewChart />
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<IndicatorType>(
     watch('indicator.type')
   );
-  const indicatorType = watch('indicator.type');
 
+  const indicatorType = watch('indicator.type');
   useEffect(() => {
     if (indicatorType !== indicatorTypeState && !isEditMode) {
       setIndicatorTypeState(indicatorType);