Fetch APM index when the form is rendered

elastic · Sep 29, 2023 · cfae808 · cfae808
1 parent 41f6315
commit cfae808
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/...ublic/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx b/...ublic/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/...vability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx b/...vability/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
@@ -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);