feat(slo): allow configuration of advanced settings from UI

x-pack/packages/kbn-slo-schema/src/schema/slo.ts

@@ -27,16 +27,26 @@ const objectiveSchema = t.intersection([
   t.partial({ timesliceTarget: t.number, timesliceWindow: durationType }),
 ]);
 
-const settingsSchema = t.type({
+const settingsSchema = t.intersection([
+  t.type({
+    syncDelay: durationType,
+    frequency: durationType,
+    preventInitialBackfill: t.boolean,
+  }),
+  t.partial({ syncField: t.union([t.string, t.null]) }),
+]);
+
+const groupBySchema = allOrAnyStringOrArray;
+
+const optionalSettingsSchema = t.partial({
   syncDelay: durationType,
   frequency: durationType,
   preventInitialBackfill: t.boolean,
+  syncField: t.union([t.string, t.null]),
 });
 
-const groupBySchema = allOrAnyStringOrArray;
-
-const optionalSettingsSchema = t.partial({ ...settingsSchema.props });
 const tagsSchema = t.array(t.string);
+
 // id cannot contain special characters and spaces
 const sloIdSchema = new t.Type<string, string, unknown>(
   'sloIdSchema',

x-pack/plugins/observability_solution/slo/public/data/slo/slo.ts

@@ -39,6 +39,7 @@ const baseSlo: Omit<SLOWithSummaryResponse, 'id'> = {
       good: 'http_status: 2xx',
       total: 'a query',
       timestampField: 'custom_timestamp',
+      dataViewId: 'some-data-view-id',
     },
   },
   timeWindow: {

x-pack/plugins/observability_solution/slo/public/locators/slo_edit.test.ts

@@ -11,16 +11,21 @@ import { SloEditLocatorDefinition } from './slo_edit';
 describe('SloEditLocator', () => {
   const locator = new SloEditLocatorDefinition();
 
-  it('should return correct url when empty params are provided', async () => {
+  it('returns the correct url when empty params are provided', async () => {
     const location = await locator.getLocation({});
     expect(location.app).toEqual('slo');
     expect(location.path).toEqual('/create?_a=()');
   });
 
-  it('should return correct url when slo is provided', async () => {
-    const location = await locator.getLocation(buildSlo({ id: 'foo' }));
+  it('returns the correct url when slo id is provided', async () => {
+    const location = await locator.getLocation({ id: 'existing-slo-id' });
+    expect(location.path).toEqual('/edit/existing-slo-id');
+  });
+
+  it('returns the correct url when partial slo input is provided', async () => {
+    const location = await locator.getLocation(buildSlo({ id: undefined }));
     expect(location.path).toEqual(
-      "/edit/foo?_a=(budgetingMethod:occurrences,createdAt:'2022-12-29T10:11:12.000Z',description:'some%20description%20useful',enabled:!t,groupBy:'*',groupings:(),id:foo,indicator:(params:(filter:'baz:%20foo%20and%20bar%20%3E%202',good:'http_status:%202xx',index:some-index,timestampField:custom_timestamp,total:'a%20query'),type:sli.kql.custom),instanceId:'*',meta:(),name:'super%20important%20level%20service',objective:(target:0.98),revision:1,settings:(frequency:'1m',preventInitialBackfill:!f,syncDelay:'1m'),summary:(errorBudget:(consumed:0.064,initial:0.02,isEstimated:!f,remaining:0.936),fiveMinuteBurnRate:0,oneDayBurnRate:0,oneHourBurnRate:0,sliValue:0.99872,status:HEALTHY),tags:!(k8s,production,critical),timeWindow:(duration:'30d',type:rolling),updatedAt:'2022-12-29T10:11:12.000Z',version:2)"
+      "/create?_a=(budgetingMethod:occurrences,createdAt:'2022-12-29T10:11:12.000Z',description:'some%20description%20useful',enabled:!t,groupBy:'*',groupings:(),indicator:(params:(dataViewId:some-data-view-id,filter:'baz:%20foo%20and%20bar%20%3E%202',good:'http_status:%202xx',index:some-index,timestampField:custom_timestamp,total:'a%20query'),type:sli.kql.custom),instanceId:'*',meta:(),name:'super%20important%20level%20service',objective:(target:0.98),revision:1,settings:(frequency:'1m',preventInitialBackfill:!f,syncDelay:'1m'),summary:(errorBudget:(consumed:0.064,initial:0.02,isEstimated:!f,remaining:0.936),fiveMinuteBurnRate:0,oneDayBurnRate:0,oneHourBurnRate:0,sliValue:0.99872,status:HEALTHY),tags:!(k8s,production,critical),timeWindow:(duration:'30d',type:rolling),updatedAt:'2022-12-29T10:11:12.000Z',version:2)"
     );
   });
 });

x-pack/plugins/observability_solution/slo/public/locators/slo_edit.ts

@@ -5,31 +5,34 @@
  * 2.0.
  */
 
-import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import type { RecursivePartial } from '@elastic/charts';
-import type { SerializableRecord } from '@kbn/utility-types';
-import type { LocatorDefinition } from '@kbn/share-plugin/public';
+import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import { sloEditLocatorID } from '@kbn/observability-plugin/common';
-import type { CreateSLOForm } from '../pages/slo_edit/types';
+import type { LocatorDefinition } from '@kbn/share-plugin/public';
+import { CreateSLOInput } from '@kbn/slo-schema';
 import { SLO_CREATE_PATH } from '../../common/locators/paths';
 
-export type SloEditParams = RecursivePartial<CreateSLOForm>;
-
-export interface SloEditLocatorParams extends SloEditParams, SerializableRecord {}
+export type SloEditLocatorParams = RecursivePartial<CreateSLOInput>;
 
 export class SloEditLocatorDefinition implements LocatorDefinition<SloEditLocatorParams> {
   public readonly id = sloEditLocatorID;
 
   public readonly getLocation = async (slo: SloEditLocatorParams) => {
+    if (!!slo.id) {
+      return {
+        app: 'slo',
+        path: `/edit/${encodeURIComponent(slo.id)}`,
+        state: {},
+      };
+    }
+
     return {
       app: 'slo',
-      path: setStateToKbnUrl<SloEditParams>(
+      path: setStateToKbnUrl<RecursivePartial<CreateSLOInput>>(
         '_a',
-        {
-          ...slo,
-        },
+        slo,
         { useHash: false, storeInHashQuery: false },
-        slo.id ? `/edit/${encodeURIComponent(String(slo.id))}` : `${SLO_CREATE_PATH}`
+        SLO_CREATE_PATH
       ),
       state: {},
     };

x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/overview/overview.tsx

@@ -8,15 +8,14 @@
 import { EuiFlexGrid, EuiPanel, EuiText, useIsWithinBreakpoints } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
+import { TagsList } from '@kbn/observability-shared-plugin/public';
 import {
+  SLOWithSummaryResponse,
   occurrencesBudgetingMethodSchema,
   querySchema,
   rollingTimeWindowTypeSchema,
-  SLOWithSummaryResponse,
 } from '@kbn/slo-schema';
 import React from 'react';
-import { TagsList } from '@kbn/observability-shared-plugin/public';
-import { DisplayQuery } from './display_query';
 import { useKibana } from '../../../../hooks/use_kibana';
 import {
   BUDGETING_METHOD_OCCURRENCES,
@@ -26,9 +25,9 @@ import {
   toIndicatorTypeLabel,
 } from '../../../../utils/slo/labels';
 import { ApmIndicatorOverview } from './apm_indicator_overview';
-import { SyntheticsIndicatorOverview } from './synthetics_indicator_overview';
-
+import { DisplayQuery } from './display_query';
 import { OverviewItem } from './overview_item';
+import { SyntheticsIndicatorOverview } from './synthetics_indicator_overview';
 
 export interface Props {
   slo: SLOWithSummaryResponse;
@@ -170,6 +169,19 @@ export function Overview({ slo }: Props) {
             }
           />
         )}
+
+        <OverviewItem
+          title={i18n.translate('xpack.slo.sloDetails.overview.settings.syncDelay', {
+            defaultMessage: 'Sync delay',
+          })}
+          subtitle={slo.settings.syncDelay}
+        />
+        <OverviewItem
+          title={i18n.translate('xpack.slo.sloDetails.overview.settings.frequency', {
+            defaultMessage: 'Frequency',
+          })}
+          subtitle={slo.settings.frequency}
+        />
       </EuiFlexGrid>
     </EuiPanel>
   );

x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/indicator_section/advanced_settings/advanced_settings.tsx

@@ -0,0 +1,174 @@
+/*
+ * 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 {
+  EuiAccordion,
+  EuiCheckbox,
+  EuiFieldNumber,
+  EuiFlexGrid,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIcon,
+  EuiIconTip,
+  EuiTitle,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { CreateSLOForm } from '../../../types';
+import { SyncFieldSelector } from './sync_field_selector';
+
+export function AdvancedSettings() {
+  const { control, getFieldState } = useFormContext<CreateSLOForm>();
+  const preventBackfillCheckbox = useGeneratedHtmlId({ prefix: 'preventBackfill' });
+  const advancedSettingsAccordion = useGeneratedHtmlId({ prefix: 'advancedSettingsAccordion' });
+
+  return (
+    <EuiAccordion
+      paddingSize="s"
+      id={advancedSettingsAccordion}
+      buttonContent={
+        <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="controlsVertical" size="m" />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiTitle size="xxs">
+              <h3>
+                {i18n.translate('xpack.slo.sloEdit.settings.advancedSettingsLabel', {
+                  defaultMessage: 'Advanced settings',
+                })}
+              </h3>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+    >
+      <EuiFlexGroup direction="column" gutterSize="m">
+        <EuiFlexGrid columns={3} gutterSize="m">
+          <EuiFlexItem>
+            <SyncFieldSelector />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiFormRow
+              isInvalid={getFieldState('settings.syncDelay').invalid}
+              label={
+                <span>
+                  {i18n.translate('xpack.slo.sloEdit.settings.syncDelay.label', {
+                    defaultMessage: 'Sync delay (in minutes)',
+                  })}{' '}
+                  <EuiIconTip
+                    content={i18n.translate('xpack.slo.sloEdit.settings.syncDelay.tooltip', {
+                      defaultMessage:
+                        'The time delay in minutes between the current time and the latest source data time. Increasing the value will delay any alerting. The default value is 1 minute. The minimum value is 1m and the maximum is 359m. It should always be greater then source index refresh interval.',
+                    })}
+                    position="top"
+                  />
+                </span>
+              }
+            >
+              <Controller
+                name="settings.syncDelay"
+                defaultValue={1}
+                control={control}
+                rules={{ required: true, min: 1, max: 359 }}
+                render={({ field: { ref, onChange, ...field }, fieldState }) => (
+                  <EuiFieldNumber
+                    {...field}
+                    data-test-subj="sloAdvancedSettingsSyncDelay"
+                    isInvalid={fieldState.invalid}
+                    required
+                    value={field.value}
+                    min={1}
+                    max={359}
+                    step={1}
+                    onChange={(event) => onChange(event.target.value)}
+                  />
+                )}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiFormRow
+              isInvalid={getFieldState('settings.frequency').invalid}
+              label={
+                <span>
+                  {i18n.translate('xpack.slo.sloEdit.settings.frequency.label', {
+                    defaultMessage: 'Frequency (in minutes)',
+                  })}{' '}
+                  <EuiIconTip
+                    content={i18n.translate('xpack.slo.sloEdit.settings.frequency.tooltip', {
+                      defaultMessage:
+                        'The interval between checks for changes in the source data. The minimum value is 1m and the maximum is 59m. The default value is 1 minute.',
+                    })}
+                    position="top"
+                  />
+                </span>
+              }
+            >
+              <Controller
+                name="settings.frequency"
+                defaultValue={1}
+                control={control}
+                rules={{ required: true, min: 1, max: 59 }}
+                render={({ field: { ref, onChange, ...field }, fieldState }) => (
+                  <EuiFieldNumber
+                    {...field}
+                    data-test-subj="sloAdvancedSettingsFrequency"
+                    isInvalid={fieldState.invalid}
+                    required
+                    value={field.value}
+                    min={1}
+                    max={59}
+                    step={1}
+                    onChange={(event) => onChange(event.target.value)}
+                  />
+                )}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGrid>
+
+        <EuiFormRow isInvalid={getFieldState('settings.preventInitialBackfill').invalid}>
+          <Controller
+            name="settings.preventInitialBackfill"
+            control={control}
+            render={({ field: { ref, onChange, ...field } }) => (
+              <EuiCheckbox
+                id={preventBackfillCheckbox}
+                label={
+                  <span>
+                    {i18n.translate('xpack.slo.sloEdit.settings.preventInitialBackfill.label', {
+                      defaultMessage: 'Prevent initial backfill of data',
+                    })}{' '}
+                    <EuiIconTip
+                      content={i18n.translate(
+                        'xpack.slo.sloEdit.settings.preventInitialBackfill.tooltip',
+                        {
+                          defaultMessage:
+                            'Start aggregating data from the time the SLO is created, instead of backfilling data from the beginning of the time window.',
+                        }
+                      )}
+                      position="top"
+                    />
+                  </span>
+                }
+                checked={Boolean(field.value)}
+                onChange={(event: any) => onChange(event.target.checked)}
+              />
+            )}
+          />
+        </EuiFormRow>
+      </EuiFlexGroup>
+    </EuiAccordion>
+  );
+}