[SLO] Add/edit form mark optional fields (elastic#175807)

## Summary Fixes elastic/observability-dev#3049 Add/edit form mark optional fields !! <img width="593" alt="image" src="https://github.com/elastic/kibana/assets/3505601/909155f4-4b8a-4444-a2ad-ac0770c56929">
gbamparop · Jan 31, 2024 · 9ee7b79 · 9ee7b79
1 parent 399a3c4
commit 9ee7b79
Show file tree

Hide file tree

Showing 13 changed files with 149 additions and 361 deletions.
diff --git a/x-pack/plugins/observability/public/hooks/slo/use_fetch_index_pattern_fields.ts b/x-pack/plugins/observability/public/hooks/slo/use_fetch_index_pattern_fields.ts
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
@@ -5,18 +5,16 @@
  * 2.0.
  */
 
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { ALL_VALUE } from '@kbn/slo-schema/src/schema/common';
 import React, { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { useFetchGroupByCardinality } from '../../../../hooks/slo/use_fetch_group_by_cardinality';
+import { useCreateDataView } from '../../../../hooks/use_create_data_view';
+import { GroupByField } from '../common/group_by_field';
 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';
 import { DataPreviewChart } from '../common/data_preview_chart';
-import { IndexFieldSelector } from '../common/index_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 
 export function ApmAvailabilityIndicatorTypeForm() {
@@ -28,15 +26,10 @@ export function ApmAvailabilityIndicatorTypeForm() {
       setValue('indicator.params.index', apmIndex);
     }
   }, [setValue, apmIndex]);
-  const timestampField = watch('indicator.params.timestampField');
-  const groupByField = watch('groupBy');
 
-  const { isLoading: isIndexFieldsLoading, data: indexFields = [] } =
-    useFetchIndexPatternFields(apmIndex);
-
-  const { isLoading: isGroupByCardinalityLoading, data: groupByCardinality } =
-    useFetchGroupByCardinality(apmIndex, timestampField, groupByField);
-  const groupByFields = indexFields.filter((field) => field.aggregatable);
+  const { dataView, loading: isIndexFieldsLoading } = useCreateDataView({
+    indexPatternString: apmIndex,
+  });
 
   return (
     <EuiFlexGroup direction="column" gutterSize="l">
@@ -140,42 +133,7 @@ export function ApmAvailabilityIndicatorTypeForm() {
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <IndexFieldSelector
-        indexFields={groupByFields}
-        name="groupBy"
-        defaultValue={ALL_VALUE}
-        label={
-          <span>
-            {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
-              defaultMessage: 'Group by',
-            })}{' '}
-            <EuiIconTip
-              content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
-                defaultMessage: 'Create individual SLOs for each value of the selected field.',
-              })}
-              position="top"
-            />
-          </span>
-        }
-        placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
-          defaultMessage: 'Select an optional field to group by',
-        })}
-        isLoading={!!apmIndex && isIndexFieldsLoading}
-        isDisabled={!apmIndex}
-      />
-
-      {!isGroupByCardinalityLoading && !!groupByCardinality && (
-        <EuiCallOut
-          size="s"
-          iconType={groupByCardinality.isHighCardinality ? 'warning' : ''}
-          color={groupByCardinality.isHighCardinality ? 'warning' : 'primary'}
-          title={i18n.translate('xpack.observability.slo.sloEdit.groupBy.cardinalityInfo', {
-            defaultMessage:
-              "Selected group by field '{groupBy}' will generate at least {card} SLO instances based on the last 24h sample data.",
-            values: { card: groupByCardinality.cardinality, groupBy: groupByField },
-          })}
-        />
-      )}
+      <GroupByField dataView={dataView} isLoading={isIndexFieldsLoading} />
 
       <DataPreviewChart />
     </EuiFlexGroup>

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
@@ -5,25 +5,16 @@
  * 2.0.
  */
 
-import {
-  EuiCallOut,
-  EuiFieldNumber,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiIconTip,
-} from '@elastic/eui';
+import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { ALL_VALUE } from '@kbn/slo-schema/src/schema/common';
 import React, { useEffect } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { useFetchGroupByCardinality } from '../../../../hooks/slo/use_fetch_group_by_cardinality';
+import { GroupByField } from '../common/group_by_field';
+import { useCreateDataView } from '../../../../hooks/use_create_data_view';
 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';
 import { DataPreviewChart } from '../common/data_preview_chart';
-import { IndexFieldSelector } from '../common/index_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 
 export function ApmLatencyIndicatorTypeForm() {
@@ -36,15 +27,9 @@ export function ApmLatencyIndicatorTypeForm() {
     }
   }, [setValue, apmIndex]);
 
-  const timestampField = watch('indicator.params.timestampField');
-  const groupByField = watch('groupBy');
-
-  const { isLoading: isIndexFieldsLoading, data: indexFields = [] } =
-    useFetchIndexPatternFields(apmIndex);
-
-  const { isLoading: isGroupByCardinalityLoading, data: groupByCardinality } =
-    useFetchGroupByCardinality(apmIndex, timestampField, groupByField);
-  const groupByFields = indexFields.filter((field) => field.aggregatable);
+  const { dataView, loading: isIndexFieldsLoading } = useCreateDataView({
+    indexPatternString: apmIndex,
+  });
 
   return (
     <EuiFlexGroup direction="column" gutterSize="l">
@@ -191,42 +176,7 @@ export function ApmLatencyIndicatorTypeForm() {
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <IndexFieldSelector
-        indexFields={groupByFields}
-        name="groupBy"
-        defaultValue={ALL_VALUE}
-        label={
-          <span>
-            {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
-              defaultMessage: 'Group by',
-            })}{' '}
-            <EuiIconTip
-              content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
-                defaultMessage: 'Create individual SLOs for each value of the selected field.',
-              })}
-              position="top"
-            />
-          </span>
-        }
-        placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
-          defaultMessage: 'Select an optional field to group by',
-        })}
-        isLoading={!!apmIndex && isIndexFieldsLoading}
-        isDisabled={!apmIndex}
-      />
-
-      {!isGroupByCardinalityLoading && !!groupByCardinality && (
-        <EuiCallOut
-          size="s"
-          iconType={groupByCardinality.isHighCardinality ? 'warning' : ''}
-          color={groupByCardinality.isHighCardinality ? 'warning' : 'primary'}
-          title={i18n.translate('xpack.observability.slo.sloEdit.groupBy.cardinalityInfo', {
-            defaultMessage:
-              "Selected group by field '{groupBy}' will generate at least {card} SLO instances based on the last 24h sample data.",
-            values: { card: groupByCardinality.cardinality, groupBy: groupByField },
-          })}
-        />
-      )}
+      <GroupByField dataView={dataView} isLoading={isIndexFieldsLoading} />
 
       <DataPreviewChart />
     </EuiFlexGroup>

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/group_by_field.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/group_by_field.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { ALL_VALUE } from '@kbn/slo-schema';
+import { i18n } from '@kbn/i18n';
+import { EuiCallOut, EuiIconTip } from '@elastic/eui';
+import React from 'react';
+import { DataView } from '@kbn/data-views-plugin/common';
+import { useFormContext } from 'react-hook-form';
+import { OptionalText } from './optional_text';
+import { useFetchGroupByCardinality } from '../../../../hooks/slo/use_fetch_group_by_cardinality';
+import { CreateSLOForm } from '../../types';
+import { IndexFieldSelector } from './index_field_selector';
+
+export function GroupByField({ dataView, isLoading }: { dataView?: DataView; isLoading: boolean }) {
+  const { watch } = useFormContext<CreateSLOForm>();
+
+  const groupByFields = dataView?.fields?.filter((field) => field.aggregatable) ?? [];
+  const index = watch('indicator.params.index');
+  const timestampField = watch('indicator.params.timestampField');
+  const groupByField = watch('groupBy');
+
+  const { isLoading: isGroupByCardinalityLoading, data: groupByCardinality } =
+    useFetchGroupByCardinality(index, timestampField, groupByField);
+
+  return (
+    <>
+      <IndexFieldSelector
+        indexFields={groupByFields}
+        name="groupBy"
+        defaultValue={ALL_VALUE}
+        label={
+          <span>
+            {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
+              defaultMessage: 'Group by',
+            })}{' '}
+            <EuiIconTip
+              content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
+                defaultMessage: 'Create individual SLOs for each value of the selected field.',
+              })}
+              position="top"
+            />
+          </span>
+        }
+        labelAppend={<OptionalText />}
+        placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
+          defaultMessage: 'Select an optional field to group by',
+        })}
+        isLoading={!!index && isLoading}
+        isDisabled={!index}
+      />
+      {!isGroupByCardinalityLoading && !!groupByCardinality && (
+        <EuiCallOut
+          size="s"
+          iconType={groupByCardinality.isHighCardinality ? 'warning' : ''}
+          color={groupByCardinality.isHighCardinality ? 'warning' : 'primary'}
+          title={i18n.translate('xpack.observability.slo.sloEdit.groupBy.cardinalityInfo', {
+            defaultMessage:
+              "Selected group by field '{groupBy}' will generate at least {card} SLO instances based on the last 24h sample data.",
+            values: { card: groupByCardinality.cardinality, groupBy: groupByField },
+          })}
+        />
+      )}
+    </>
+  );
+}
diff --git a/...ck/plugins/observability/public/pages/slo_edit/components/common/index_field_selector.tsx b/...ck/plugins/observability/public/pages/slo_edit/components/common/index_field_selector.tsx
@@ -21,11 +21,13 @@ interface Props {
   isLoading: boolean;
   isRequired?: boolean;
   defaultValue?: string;
+  labelAppend?: ReactNode;
 }
 export function IndexFieldSelector({
   indexFields,
   name,
   label,
+  labelAppend,
   placeholder,
   isDisabled,
   isLoading,
@@ -41,7 +43,7 @@ export function IndexFieldSelector({
 
   return (
     <EuiFlexItem>
-      <EuiFormRow label={label} isInvalid={getFieldState(name).invalid}>
+      <EuiFormRow label={label} isInvalid={getFieldState(name).invalid} labelAppend={labelAppend}>
         <Controller
           defaultValue={defaultValue}
           name={name}

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/optional_text.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/optional_text.tsx
@@ -0,0 +1,20 @@
+/*
+ * 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 { EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+export function OptionalText() {
+  return (
+    <EuiText size="xs" color="subdued">
+      {i18n.translate('xpack.observability.slo.sloEdit.optionalLabel', {
+        defaultMessage: 'Optional',
+      })}
+    </EuiText>
+  );
+}
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
@@ -11,6 +11,7 @@ import { Controller, FieldPath, useFormContext } from 'react-hook-form';
 import { useCreateDataView } from '../../../../hooks/use_create_data_view';
 import { useKibana } from '../../../../utils/kibana_react';
 import { CreateSLOForm } from '../../types';
+import { OptionalText } from './optional_text';
 
 export interface Props {
   dataTestSubj: string;
@@ -54,6 +55,7 @@ export function QueryBuilder({
           label
         )
       }
+      labelAppend={!required ? <OptionalText /> : undefined}
       isInvalid={getFieldState(name).invalid}
       fullWidth
     >
@@ -62,14 +64,12 @@ export function QueryBuilder({
         name={name}
         control={control}
         rules={{
-          required: Boolean(required),
+          required: Boolean(required) && Boolean(dataView),
         }}
         render={({ field, fieldState }) => (
           <QueryStringInput
             appName="Observability"
-            bubbleSubmitEvent={false}
             dataTestSubj={dataTestSubj}
-            disableAutoFocus
             disableLanguageSwitcher
             indexPatterns={dataView ? [dataView] : []}
             isDisabled={!dataView}