diff --git a/public/app/features/alerting/unified/AmRoutes.test.tsx b/public/app/features/alerting/unified/AmRoutes.test.tsx index 1157269c68d..e5960e83aed 100644 --- a/public/app/features/alerting/unified/AmRoutes.test.tsx +++ b/public/app/features/alerting/unified/AmRoutes.test.tsx @@ -646,6 +646,7 @@ const clickSelectOption = async (selectElement: HTMLElement, optionText: string) const updateTiming = async (selectElement: HTMLElement, value: string, timeUnit: string): Promise => { const input = byRole('textbox').get(selectElement); const select = byRole('combobox').get(selectElement); + await userEvent.clear(input); await userEvent.type(input, value); await userEvent.click(select); await selectOptionInTest(selectElement, timeUnit); diff --git a/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx b/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx index 3b5d417520f..5375476a99a 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx +++ b/public/app/features/alerting/unified/components/amroutes/AmRootRouteForm.tsx @@ -36,7 +36,7 @@ export const AmRootRouteForm: FC = ({ const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(routes.groupBy)); return ( -
+ {({ control, errors, setValue }) => ( <> @@ -111,12 +111,7 @@ export const AmRootRouteForm: FC = ({
( - + )} control={control} name="groupWaitValue" @@ -151,12 +146,7 @@ export const AmRootRouteForm: FC = ({
( - + )} control={control} name="groupIntervalValue" @@ -191,7 +181,7 @@ export const AmRootRouteForm: FC = ({
( - + )} control={control} name="repeatIntervalValue" diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx index 997db3f2d70..853b136c7fc 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx +++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesExpandedForm.tsx @@ -45,15 +45,12 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, const styles = useStyles2(getStyles); const formStyles = useStyles2(getFormStyles); const [overrideGrouping, setOverrideGrouping] = useState(routes.groupBy.length > 0); - const [overrideTimings, setOverrideTimings] = useState( - !!routes.groupWaitValue || !!routes.groupIntervalValue || !!routes.repeatIntervalValue - ); const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(routes.groupBy)); const muteTimingOptions = useMuteTimingOptions(); return ( - {({ control, register, errors, setValue }) => ( + {({ control, register, errors, setValue, watch }) => ( <> {/* @ts-ignore-check: react-hook-form made me do this */} @@ -169,7 +166,10 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, /> {overrideGrouping && ( - + ( = ({ onCancel, )} - setOverrideTimings((overrideTimings) => !overrideTimings)} - /> + - {overrideTimings && ( + {watch().overrideTimings && ( <> @@ -215,7 +211,6 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, {...field} className={formStyles.smallInput} invalid={invalid} - placeholder="Time" aria-label="Group wait value" /> )} @@ -243,7 +238,7 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, @@ -255,7 +250,6 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, {...field} className={formStyles.smallInput} invalid={invalid} - placeholder="Time" aria-label="Group interval value" /> )} @@ -295,7 +289,6 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, {...field} className={formStyles.smallInput} invalid={invalid} - placeholder="Time" aria-label="Repeat interval value" /> )} diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts index f9846440a5b..fc1fc6e72de 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts +++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts @@ -11,6 +11,7 @@ const defaultAmRoute: FormAmRoute = { continue: false, receiver: '', groupBy: [], + overrideTimings: false, groupWaitValue: '', groupWaitValueType: '', groupIntervalValue: '', diff --git a/public/app/features/alerting/unified/types/amroutes.ts b/public/app/features/alerting/unified/types/amroutes.ts index 1bb95ed5e6f..0e15feb8e77 100644 --- a/public/app/features/alerting/unified/types/amroutes.ts +++ b/public/app/features/alerting/unified/types/amroutes.ts @@ -6,6 +6,7 @@ export interface FormAmRoute { continue: boolean; receiver: string; groupBy: string[]; + overrideTimings: boolean; groupWaitValue: string; groupWaitValueType: string; groupIntervalValue: string; diff --git a/public/app/features/alerting/unified/utils/amroutes.ts b/public/app/features/alerting/unified/utils/amroutes.ts index 39f0a31089a..58102b86367 100644 --- a/public/app/features/alerting/unified/utils/amroutes.ts +++ b/public/app/features/alerting/unified/utils/amroutes.ts @@ -11,7 +11,7 @@ import { matcherToMatcherField, parseMatcher } from './alertmanager'; import { GRAFANA_RULES_SOURCE_NAME } from './datasource'; import { parseInterval, timeOptions } from './time'; -const defaultValueAndType: [string, string] = ['', timeOptions[0].value]; +const defaultValueAndType: [string, string] = ['', '']; const matchersToArrayFieldMatchers = ( matchers: Record | undefined, @@ -29,9 +29,12 @@ const matchersToArrayFieldMatchers = ( [] as MatcherFieldValue[] ); -const intervalToValueAndType = (strValue: string | undefined): [string, string] => { +const intervalToValueAndType = ( + strValue: string | undefined, + defaultValue?: typeof defaultValueAndType +): [string, string] => { if (!strValue) { - return defaultValueAndType; + return defaultValue ?? defaultValueAndType; } const [value, valueType] = strValue ? parseInterval(strValue) : [undefined, undefined]; @@ -63,6 +66,7 @@ export const emptyRoute: FormAmRoute = { routes: [], continue: false, receiver: '', + overrideTimings: false, groupWaitValue: '', groupWaitValueType: timeOptions[0].value, groupIntervalValue: '', @@ -78,9 +82,9 @@ export const amRouteToFormAmRoute = (route: Route | undefined): [FormAmRoute, Re return [emptyRoute, {}]; } - const [groupWaitValue, groupWaitValueType] = intervalToValueAndType(route.group_wait); - const [groupIntervalValue, groupIntervalValueType] = intervalToValueAndType(route.group_interval); - const [repeatIntervalValue, repeatIntervalValueType] = intervalToValueAndType(route.repeat_interval); + const [groupWaitValue, groupWaitValueType] = intervalToValueAndType(route.group_wait, ['', 's']); + const [groupIntervalValue, groupIntervalValueType] = intervalToValueAndType(route.group_interval, ['', 'm']); + const [repeatIntervalValue, repeatIntervalValueType] = intervalToValueAndType(route.repeat_interval, ['', 'h']); const id = String(Math.random()); const id2route = { @@ -111,6 +115,7 @@ export const amRouteToFormAmRoute = (route: Route | undefined): [FormAmRoute, Re continue: route.continue ?? false, receiver: route.receiver ?? '', groupBy: route.group_by ?? [], + overrideTimings: [groupWaitValue, groupIntervalValue, repeatIntervalValue].some(Boolean), groupWaitValue, groupWaitValueType, groupIntervalValue, @@ -130,6 +135,26 @@ export const formAmRouteToAmRoute = ( id2ExistingRoute: Record ): Route => { const existing: Route | undefined = id2ExistingRoute[formAmRoute.id]; + + const { + overrideTimings, + groupWaitValue, + groupWaitValueType, + groupIntervalValue, + groupIntervalValueType, + repeatIntervalValue, + repeatIntervalValueType, + } = formAmRoute; + + const overrideGroupWait = overrideTimings && groupWaitValue; + const group_wait = overrideGroupWait ? `${groupWaitValue}${groupWaitValueType}` : undefined; + + const overrideGroupInterval = overrideTimings && groupIntervalValue; + const group_interval = overrideGroupInterval ? `${groupIntervalValue}${groupIntervalValueType}` : undefined; + + const overrideRepeatInterval = overrideTimings && repeatIntervalValue; + const repeat_interval = overrideRepeatInterval ? `${repeatIntervalValue}${repeatIntervalValueType}` : undefined; + const amRoute: Route = { ...(existing ?? {}), continue: formAmRoute.continue, @@ -137,17 +162,11 @@ export const formAmRouteToAmRoute = ( object_matchers: formAmRoute.object_matchers.length ? formAmRoute.object_matchers.map((matcher) => [matcher.name, matcher.operator, matcher.value]) : undefined, - match: undefined, - match_re: undefined, - group_wait: formAmRoute.groupWaitValue - ? `${formAmRoute.groupWaitValue}${formAmRoute.groupWaitValueType}` - : undefined, - group_interval: formAmRoute.groupIntervalValue - ? `${formAmRoute.groupIntervalValue}${formAmRoute.groupIntervalValueType}` - : undefined, - repeat_interval: formAmRoute.repeatIntervalValue - ? `${formAmRoute.repeatIntervalValue}${formAmRoute.repeatIntervalValueType}` - : undefined, + match: undefined, // DEPRECATED: Use matchers + match_re: undefined, // DEPRECATED: Use matchers + group_wait, + group_interval, + repeat_interval, routes: formAmRoute.routes.map((subRoute) => formAmRouteToAmRoute(alertManagerSourceName, subRoute, id2ExistingRoute) ),