[SLOs] Slo form little things (elastic#193990)

## Summary Slo form little things !! Will auto add values for APM defaults to all instead of forcing user !! ### Changes Details | Before | After -- | -- | -- Data View component | <img width="1262" alt="image" src="https://github.com/user-attachments/assets/79a5cbcd-04e1-49e6-aa86-036b36c8a6e6"> | <img width="1391" alt="image" src="https://github.com/user-attachments/assets/973db8f5-179d-4f89-b57b-39c7b57eb360"> APM SLI | <img width="1183" alt="image" src="https://github.com/user-attachments/assets/a3e083fa-df13-408b-b02d-e26695398225"> | <img width="1158" alt="image" src="https://github.com/user-attachments/assets/a94cfe07-32b0-4367-95e8-ab10d232e98c">
kibanamachine · Sep 27, 2024 · c2a2042 · c2a2042
1 parent f4ca9e4
commit c2a2042
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 233 deletions.
diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx
@@ -238,7 +238,7 @@ export function ChangeDataView({
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={true}>
           <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
             <EuiFlexItem
               grow={false}
@@ -254,23 +254,25 @@ export function ChangeDataView({
                 defaultMessage: 'Data view',
               })}
             </EuiFlexItem>
-            <EuiPopover
-              panelClassName="changeDataViewPopover"
-              button={createTrigger()}
-              panelProps={{
-                ['data-test-subj']: 'changeDataViewPopover',
-              }}
-              isOpen={isPopoverOpen}
-              closePopover={() => setPopoverIsOpen(false)}
-              panelPaddingSize="none"
-              initialFocus={`[id="${searchListInputId}"]`}
-              display="block"
-              buffer={8}
-            >
-              <div css={styles.popoverContent}>
-                <EuiContextMenuPanel size="s" items={getPanelItems()} />
-              </div>
-            </EuiPopover>
+            <EuiFlexItem grow={true}>
+              <EuiPopover
+                panelClassName="changeDataViewPopover"
+                button={createTrigger()}
+                panelProps={{
+                  ['data-test-subj']: 'changeDataViewPopover',
+                }}
+                isOpen={isPopoverOpen}
+                closePopover={() => setPopoverIsOpen(false)}
+                panelPaddingSize="none"
+                initialFocus={`[id="${searchListInputId}"]`}
+                display="block"
+                buffer={8}
+              >
+                <div css={styles.popoverContent}>
+                  <EuiContextMenuPanel size="s" items={getPanelItems()} />
+                </div>
+              </EuiPopover>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       </>

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
@@ -8,8 +8,9 @@
 import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
 import { APMTransactionErrorRateIndicator } from '@kbn/slo-schema';
 import { i18n } from '@kbn/i18n';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useFormContext } from 'react-hook-form';
+import { useApmDefaultValues } from '../apm_common/use_apm_default_values';
 import { DATA_VIEW_FIELD } from '../custom_common/index_selection';
 import { useCreateDataView } from '../../../../hooks/use_create_data_view';
 import { GroupByField } from '../common/group_by_field';
@@ -22,7 +23,7 @@ import { formatAllFilters } from '../../helpers/format_filters';
 import { getGroupByCardinalityFilters } from '../apm_common/get_group_by_cardinality_filters';
 
 export function ApmAvailabilityIndicatorTypeForm() {
-  const { watch, setValue } = useFormContext<CreateSLOForm<APMTransactionErrorRateIndicator>>();
+  const { watch } = useFormContext<CreateSLOForm<APMTransactionErrorRateIndicator>>();
   const { data: apmIndex } = useFetchApmIndex();
   const dataViewId = watch(DATA_VIEW_FIELD);
 
@@ -47,11 +48,7 @@ export function ApmAvailabilityIndicatorTypeForm() {
   });
   const allFilters = formatAllFilters(globalFilters, indicatorParamsFilters);
 
-  useEffect(() => {
-    if (apmIndex !== '') {
-      setValue('indicator.params.index', apmIndex);
-    }
-  }, [setValue, apmIndex]);
+  useApmDefaultValues();
 
   const { dataView, loading: isIndexFieldsLoading } = useCreateDataView({
     indexPatternString: apmIndex,

diff --git a/...bility_solution/slo/public/pages/slo_edit/components/apm_common/use_apm_default_values.ts b/...bility_solution/slo/public/pages/slo_edit/components/apm_common/use_apm_default_values.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useFormContext } from 'react-hook-form';
+import { ALL_VALUE, APMTransactionErrorRateIndicator } from '@kbn/slo-schema';
+import { useEffect } from 'react';
+import { useFetchApmIndex } from '../../../../hooks/use_fetch_apm_indices';
+import { CreateSLOForm } from '../../types';
+
+export const useApmDefaultValues = () => {
+  const { watch, setValue } = useFormContext<CreateSLOForm<APMTransactionErrorRateIndicator>>();
+  const { data: apmIndex } = useFetchApmIndex();
+
+  const [serviceName = '', environment = '', transactionType = '', transactionName = ''] = watch([
+    'indicator.params.service',
+    'indicator.params.environment',
+    'indicator.params.transactionType',
+    'indicator.params.transactionName',
+  ]);
+
+  useEffect(() => {
+    if (apmIndex !== '') {
+      setValue('indicator.params.index', apmIndex);
+    }
+  }, [setValue, apmIndex]);
+
+  useEffect(() => {
+    if (serviceName) {
+      if (!environment) {
+        setValue('indicator.params.environment', ALL_VALUE);
+      }
+
+      if (!transactionType) {
+        setValue('indicator.params.transactionType', ALL_VALUE);
+      }
+
+      if (!transactionName) {
+        setValue('indicator.params.transactionName', ALL_VALUE);
+      }
+    }
+  }, [environment, serviceName, setValue, transactionName, transactionType]);
+};
diff --git a/...tion/slo/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx b/...tion/slo/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx
@@ -5,11 +5,12 @@
  * 2.0.
  */
 
-import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiIconTip } from '@elastic/eui';
+import { EuiFieldNumber, EuiFlexGroup, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { APMTransactionDurationIndicator } from '@kbn/slo-schema';
 import { i18n } from '@kbn/i18n';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
+import { useApmDefaultValues } from '../apm_common/use_apm_default_values';
 import { DATA_VIEW_FIELD } from '../custom_common/index_selection';
 import { GroupByField } from '../common/group_by_field';
 import { useCreateDataView } from '../../../../hooks/use_create_data_view';
@@ -22,7 +23,7 @@ import { formatAllFilters } from '../../helpers/format_filters';
 import { getGroupByCardinalityFilters } from '../apm_common/get_group_by_cardinality_filters';
 
 export function ApmLatencyIndicatorTypeForm() {
-  const { control, watch, getFieldState, setValue } =
+  const { control, watch, getFieldState } =
     useFormContext<CreateSLOForm<APMTransactionDurationIndicator>>();
   const { data: apmIndex } = useFetchApmIndex();
 
@@ -47,11 +48,7 @@ export function ApmLatencyIndicatorTypeForm() {
   });
   const allFilters = formatAllFilters(globalFilters, indicatorParamsFilters);
 
-  useEffect(() => {
-    if (apmIndex !== '') {
-      setValue('indicator.params.index', apmIndex);
-    }
-  }, [setValue, apmIndex]);
+  useApmDefaultValues();
 
   const dataViewId = watch(DATA_VIEW_FIELD);
 
@@ -124,70 +121,65 @@ export function ApmLatencyIndicatorTypeForm() {
         />
       </EuiFlexGroup>
 
-      <EuiFlexGroup direction="row" gutterSize="l">
-        <EuiFlexItem>
-          <EuiFormRow
-            label={
-              <span>
-                {i18n.translate('xpack.slo.sloEdit.apmLatency.threshold.placeholder', {
-                  defaultMessage: 'Threshold (ms)',
-                })}{' '}
-                <EuiIconTip
-                  content={i18n.translate('xpack.slo.sloEdit.apmLatency.threshold.tooltip', {
-                    defaultMessage:
-                      'Configure the threshold in milliseconds defining the "good" or "successful" requests for the SLO.',
-                  })}
-                  position="top"
-                />
-              </span>
-            }
-            isInvalid={getFieldState('indicator.params.threshold').invalid}
-          >
-            <Controller
-              name="indicator.params.threshold"
-              control={control}
-              defaultValue={250}
-              rules={{
-                required: true,
-                min: 0,
-              }}
-              render={({ field: { ref, ...field }, fieldState }) => (
-                <EuiFieldNumber
-                  {...field}
-                  required
-                  isInvalid={fieldState.invalid}
-                  value={String(field.value)}
-                  data-test-subj="apmLatencyThresholdInput"
-                  min={0}
-                  onChange={(event) => field.onChange(Number(event.target.value))}
-                />
-              )}
+      <EuiFormRow
+        label={
+          <span>
+            {i18n.translate('xpack.slo.sloEdit.apmLatency.threshold.placeholder', {
+              defaultMessage: 'Threshold (ms)',
+            })}{' '}
+            <EuiIconTip
+              content={i18n.translate('xpack.slo.sloEdit.apmLatency.threshold.tooltip', {
+                defaultMessage:
+                  'Configure the threshold in milliseconds defining the "good" or "successful" requests for the SLO.',
+              })}
+              position="top"
             />
-          </EuiFormRow>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <QueryBuilder
-            dataTestSubj="apmLatencyFilterInput"
-            dataView={dataView}
-            label={i18n.translate('xpack.slo.sloEdit.apmLatency.filter', {
-              defaultMessage: 'Query filter',
-            })}
-            name="indicator.params.filter"
-            placeholder={i18n.translate('xpack.slo.sloEdit.apmLatency.filter.placeholder', {
-              defaultMessage: 'Custom filter to apply on the index',
+          </span>
+        }
+        isInvalid={getFieldState('indicator.params.threshold').invalid}
+      >
+        <Controller
+          name="indicator.params.threshold"
+          control={control}
+          defaultValue={250}
+          rules={{
+            required: true,
+            min: 0,
+          }}
+          render={({ field: { ref, ...field }, fieldState }) => (
+            <EuiFieldNumber
+              {...field}
+              required
+              isInvalid={fieldState.invalid}
+              value={String(field.value)}
+              data-test-subj="apmLatencyThresholdInput"
+              min={0}
+              onChange={(event) => field.onChange(Number(event.target.value))}
+            />
+          )}
+        />
+      </EuiFormRow>
+
+      <QueryBuilder
+        dataTestSubj="apmLatencyFilterInput"
+        dataView={dataView}
+        label={i18n.translate('xpack.slo.sloEdit.apmLatency.filter', {
+          defaultMessage: 'Query filter',
+        })}
+        name="indicator.params.filter"
+        placeholder={i18n.translate('xpack.slo.sloEdit.apmLatency.filter.placeholder', {
+          defaultMessage: 'Custom filter to apply on the index',
+        })}
+        tooltip={
+          <EuiIconTip
+            content={i18n.translate('xpack.slo.sloEdit.apm.filter.tooltip', {
+              defaultMessage:
+                'This KQL query is used to filter the APM metrics on some relevant criteria for this SLO.',
             })}
-            tooltip={
-              <EuiIconTip
-                content={i18n.translate('xpack.slo.sloEdit.apm.filter.tooltip', {
-                  defaultMessage:
-                    'This KQL query is used to filter the APM metrics on some relevant criteria for this SLO.',
-                })}
-                position="top"
-              />
-            }
+            position="top"
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        }
+      />
 
       <GroupByField dataView={dataView} isLoading={isIndexFieldsLoading} filters={allFilters} />
 

diff --git a/...servability_solution/slo/public/pages/slo_edit/components/common/index_field_selector.tsx b/...servability_solution/slo/public/pages/slo_edit/components/common/index_field_selector.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiComboBox, EuiComboBoxOptionOption, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
 import React, { useEffect, useState, ReactNode } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { FieldSpec } from '@kbn/data-views-plugin/common';
@@ -53,45 +53,43 @@ export function IndexFieldSelector({
   };
 
   return (
-    <EuiFlexItem>
-      <EuiFormRow label={label} isInvalid={getFieldState(name).invalid} labelAppend={labelAppend}>
-        <Controller
-          defaultValue={[defaultValue].flat()}
-          name={name}
-          control={control}
-          rules={{ required: isRequired && !isDisabled }}
-          render={({ field, fieldState }) => {
-            return (
-              <EuiComboBox<string>
-                {...field}
-                async
-                placeholder={placeholder}
-                aria-label={placeholder}
-                isClearable
-                isDisabled={isLoading || isDisabled}
-                isInvalid={fieldState.invalid}
-                isLoading={isLoading}
-                onChange={(selected: EuiComboBoxOptionOption[]) => {
-                  if (selected.length) {
-                    return field.onChange(selected.map((selection) => selection.value));
-                  }
-
-                  field.onChange(defaultValue);
-                }}
-                options={options}
-                onSearchChange={(searchValue: string) => {
-                  setOptions(
-                    createOptionsFromFields(indexFields, ({ value }) => value.includes(searchValue))
-                  );
-                }}
-                selectedOptions={
-                  !!indexFields && !!field.value ? getSelectedItems(field.value, indexFields) : []
+    <EuiFormRow label={label} isInvalid={getFieldState(name).invalid} labelAppend={labelAppend}>
+      <Controller
+        defaultValue={[defaultValue].flat()}
+        name={name}
+        control={control}
+        rules={{ required: isRequired && !isDisabled }}
+        render={({ field, fieldState }) => {
+          return (
+            <EuiComboBox<string>
+              {...field}
+              async
+              placeholder={placeholder}
+              aria-label={placeholder}
+              isClearable
+              isDisabled={isLoading || isDisabled}
+              isInvalid={fieldState.invalid}
+              isLoading={isLoading}
+              onChange={(selected: EuiComboBoxOptionOption[]) => {
+                if (selected.length) {
+                  return field.onChange(selected.map((selection) => selection.value));
                 }
-              />
-            );
-          }}
-        />
-      </EuiFormRow>
-    </EuiFlexItem>
+
+                field.onChange(defaultValue);
+              }}
+              options={options}
+              onSearchChange={(searchValue: string) => {
+                setOptions(
+                  createOptionsFromFields(indexFields, ({ value }) => value.includes(searchValue))
+                );
+              }}
+              selectedOptions={
+                !!indexFields && !!field.value ? getSelectedItems(field.value, indexFields) : []
+              }
+            />
+          );
+        }}
+      />
+    </EuiFormRow>
   );
 }