Prefill SLO edit form on error

elastic · Oct 12, 2023 · 1c69e6a · 1c69e6a
1 parent 668aa9c
commit 1c69e6a
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 12 deletions.
diff --git a/x-pack/plugins/observability/public/hooks/slo/use_fetch_slo_details.ts b/x-pack/plugins/observability/public/hooks/slo/use_fetch_slo_details.ts
@@ -11,7 +11,7 @@ import {
   RefetchQueryFilters,
   useQuery,
 } from '@tanstack/react-query';
-import { ALL_VALUE, GetSLOResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
+import { ALL_VALUE, GetSLOResponse } from '@kbn/slo-schema';
 import { useKibana } from '../../utils/kibana_react';
 import { sloKeys } from './query_key_factory';
 
@@ -21,7 +21,7 @@ export interface UseFetchSloDetailsResponse {
   isRefetching: boolean;
   isSuccess: boolean;
   isError: boolean;
-  slo: SLOWithSummaryResponse | undefined;
+  slo: GetSLOResponse | undefined;
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<GetSLOResponse | undefined, unknown>>;

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/slo_edit_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/slo_edit_form.tsx
@@ -15,7 +15,8 @@ import {
   EuiSteps,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import type { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import type { GetSLOResponse } from '@kbn/slo-schema';
+import deepmerge from 'deepmerge';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { sloFeatureId } from '../../../../common';
@@ -45,7 +46,7 @@ import { SloEditFormIndicatorSection } from './slo_edit_form_indicator_section';
 import { SloEditFormObjectiveSection } from './slo_edit_form_objective_section';
 
 export interface Props {
-  slo: SLOWithSummaryResponse | undefined;
+  slo?: GetSLOResponse;
 }
 
 export const maxWidth = 775;
@@ -63,6 +64,8 @@ export function SloEditForm({ slo }: Props) {
   });
 
   const sloFormValuesFromUrlState = useParseUrlState();
+  const sloFormValuesFromSloResponse = transformSloResponseToCreateSloForm(slo);
+
   const isAddRuleFlyoutOpen = useAddRuleFlyoutState(isEditMode);
   const [isCreateRuleCheckboxChecked, setIsCreateRuleCheckboxChecked] = useState(true);
 
@@ -73,8 +76,13 @@ export function SloEditForm({ slo }: Props) {
   }, [isEditMode, rules, slo]);
 
   const methods = useForm<CreateSLOForm>({
-    defaultValues: Object.assign({}, SLO_EDIT_FORM_DEFAULT_VALUES, sloFormValuesFromUrlState),
-    values: transformSloResponseToCreateSloForm(slo),
+    defaultValues: SLO_EDIT_FORM_DEFAULT_VALUES,
+    values:
+      sloFormValuesFromSloResponse && sloFormValuesFromUrlState
+        ? deepmerge(sloFormValuesFromSloResponse, sloFormValuesFromUrlState)
+        : sloFormValuesFromUrlState
+        ? deepmerge(SLO_EDIT_FORM_DEFAULT_VALUES, sloFormValuesFromUrlState)
+        : sloFormValuesFromSloResponse,
     mode: 'all',
   });
   const { watch, getFieldState, getValues, formState, trigger } = methods;

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/helpers/process_slo_form_values.ts b/x-pack/plugins/observability/public/pages/slo_edit/helpers/process_slo_form_values.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { CreateSLOInput, Indicator, SLOWithSummaryResponse, UpdateSLOInput } from '@kbn/slo-schema';
+import { CreateSLOInput, GetSLOResponse, Indicator, UpdateSLOInput } from '@kbn/slo-schema';
 import { assertNever } from '@kbn/std';
 import { RecursivePartial } from '@kbn/utility-types';
 import { toDuration } from '../../../utils/slo/duration';
@@ -19,7 +19,7 @@ import {
 import { CreateSLOForm } from '../types';
 
 export function transformSloResponseToCreateSloForm(
-  values: SLOWithSummaryResponse | undefined
+  values: GetSLOResponse | undefined
 ): CreateSLOForm | undefined {
   if (!values) return undefined;
 
@@ -138,12 +138,51 @@ function transformPartialIndicatorState(
 }
 
 export function transformPartialUrlStateToFormState(
-  values: RecursivePartial<Pick<CreateSLOInput, 'indicator'>>
+  values: RecursivePartial<CreateSLOInput>
 ): Partial<CreateSLOForm> | {} {
   const state: Partial<CreateSLOForm> = {};
 
   const parsedIndicator = transformPartialIndicatorState(values.indicator);
-  if (parsedIndicator !== undefined) state.indicator = parsedIndicator;
+  if (parsedIndicator !== undefined) {
+    state.indicator = parsedIndicator;
+  }
+
+  if (values.name) {
+    state.name = values.name;
+  }
+  if (values.description) {
+    state.description = values.description;
+  }
+  if (!!values.tags) {
+    state.tags = values.tags as string[];
+  }
+
+  if (values.objective) {
+    if (values.objective.target) {
+      state.objective = {
+        target: values.objective.target * 100,
+      };
+
+      if (values.objective.timesliceTarget && values.objective.timesliceWindow) {
+        state.objective.timesliceTarget = values.objective.timesliceTarget * 100;
+        state.objective.timesliceWindow = String(
+          toDuration(values.objective.timesliceWindow).value
+        );
+      }
+    }
+  }
+
+  if (values.budgetingMethod) {
+    state.budgetingMethod = values.budgetingMethod;
+  }
+
+  if (values.groupBy) {
+    state.groupBy = values.groupBy;
+  }
+
+  if (values.timeWindow?.duration && values.timeWindow.type) {
+    state.timeWindow = { duration: values.timeWindow.duration, type: values.timeWindow.type };
+  }
 
   return state;
 }
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/hooks/use_parse_url_state.ts b/x-pack/plugins/observability/public/pages/slo_edit/hooks/use_parse_url_state.ts
@@ -12,7 +12,7 @@ import { useHistory } from 'react-router-dom';
 import { transformPartialUrlStateToFormState } from '../helpers/process_slo_form_values';
 import { CreateSLOForm } from '../types';
 
-export function useParseUrlState(): Partial<CreateSLOForm> | null {
+export function useParseUrlState(): Partial<CreateSLOForm> | undefined {
   const history = useHistory();
   const urlStateStorage = createKbnUrlStateStorage({
     history,
@@ -22,5 +22,5 @@ export function useParseUrlState(): Partial<CreateSLOForm> | null {
 
   const urlParams = urlStateStorage.get<RecursivePartial<CreateSLOInput>>('_a');
 
-  return !!urlParams ? transformPartialUrlStateToFormState(urlParams) : null;
+  return !!urlParams ? transformPartialUrlStateToFormState(urlParams) : undefined;
 }