pass locale to formatting

Add custom monitor interval options

client/src/Components/design-elements/MonitorStatus.tsx

@@ -8,8 +8,11 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { formatDuration } from "@/Utils/TimeUtils";
+import { useTranslation } from "react-i18next";
+
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
+	const { t, i18n } = useTranslation();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 
 	if (!monitor) {
@@ -52,7 +55,12 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 					<>
 						<Dot />
 						<Typography>
-							Checking every {formatDuration(monitor?.interval, true)}
+							{t("pages.common.monitors.statBoxes.checkingEvery", {
+								interval: formatDuration(monitor.interval, {
+									long: true,
+									locale: i18n.resolvedLanguage,
+								}),
+							})}
 						</Typography>
 					</>
 				)}

client/src/Components/inputs/forms/FormAutoCompleteField.tsx

@@ -5,9 +5,10 @@ import {
 	type FieldValues,
 } from "react-hook-form";
 import { Autocomplete } from "@/Components/inputs";
+import type { AutocompleteProps } from "@mui/material/Autocomplete";
 
 export interface AutocompleteOption {
-	id: string;
+	id: string | number;
 	name: string;
 }
 
@@ -16,6 +17,9 @@ interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOpt
 	options: O[];
 	fieldLabel?: string;
 	placeholder?: string;
+	filterOptions?: AutocompleteProps<O, false, false, false>["filterOptions"];
+	getOptionDisabled?: AutocompleteProps<O, false, false, false>["getOptionDisabled"];
+	disableClearable?: boolean;
 }
 
 export const FormAutocompleteField = <
@@ -26,6 +30,9 @@ export const FormAutocompleteField = <
 	options,
 	fieldLabel,
 	placeholder,
+	filterOptions,
+	getOptionDisabled,
+	disableClearable,
 }: FormAutocompleteProps<T, O>) => {
 	const { control } = useFormContext<T>();
 	return (
@@ -39,10 +46,14 @@ export const FormAutocompleteField = <
 					isOptionEqualToValue={(option, value) => option.id === value.id}
 					value={options.find((o) => o.id === field.value) ?? null}
 					onChange={(_: unknown, newValue: O | null) => {
+						if (newValue === null && disableClearable) return;
 						field.onChange(newValue?.id ?? "");
 					}}
 					fieldLabel={fieldLabel}
 					placeholder={placeholder}
+					filterOptions={filterOptions}
+					getOptionDisabled={getOptionDisabled}
+					disableClearable={disableClearable}
 					error={!!fieldState.error}
 					helperText={fieldState.error?.message ?? ""}
 				/>

client/src/Components/monitors/MonitorStatBoxes.tsx

@@ -21,7 +21,7 @@ export const MonitorStatBoxes = ({
 	domainExpiry,
 }: MonitorStatBoxesProps) => {
 	const theme = useTheme();
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation();
 	if (!monitorStats || !monitor) {
 		return null;
 	}
@@ -29,13 +29,16 @@ export const MonitorStatBoxes = ({
 	const timeOfLastFailure = monitorStats?.timeOfLastFailure || 0;
 	const timeSinceLastFailure = timeOfLastFailure > 0 ? Date.now() - timeOfLastFailure : 0;
 
-	// Determine time since last check
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
-	const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
 
 	const streakTime = formatDuration(timeSinceLastFailure);
-
-	const lastCheckTime = formatDuration(timeSinceLastCheck);
+	const lastCheckTime = timeOfLastCheck
+		? formatDuration(Date.now() - timeOfLastCheck, {
+				long: true,
+				relative: true,
+				locale: i18n.resolvedLanguage,
+			})
+		: t("common.labels.na");
 	const isActive =
 		monitor?.status === "up" ||
 		monitor?.status === "paused" ||

client/src/Pages/CreateMonitor/index.tsx

@@ -38,6 +38,7 @@ import {
 	PageSpeedStrategies,
 	DnsRecordTypes,
 	MonitorIntervalOptions,
+	MIN_MONITOR_INTERVAL_MS,
 	DefaultMonitorMatchMethod,
 	MonitorMatchMethods,
 	GeoCheckIntervalOptions,
@@ -58,9 +59,14 @@ import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 import { FormRadioGroup } from "@/Components/inputs/forms/FormRadioGroupField";
 import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
 import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
+import {
+	FormAutocompleteField,
+	type AutocompleteOption,
+} from "@/Components/inputs/forms/FormAutoCompleteField";
 import { FormSliderField } from "@/Components/inputs/forms/FormSliderField";
 import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
 import type { ProxyResponse } from "@/Types/Proxy";
+import { formatDuration } from "@/Utils/TimeUtils";
 
 const httpMethodOptions = HttpMethods.map((method) => ({
 	value: method,
@@ -75,6 +81,40 @@ const maskedInputSx = {
 	"&:not(.Mui-focused) textarea": { WebkitTextSecurity: "disc" },
 };
 
+interface IntervalOption extends AutocompleteOption {
+	id: number;
+}
+
+const INTERVAL_UNIT_MULTIPLIERS = [1000, 60000, 3600000, 86400000] as const;
+
+const toIntervalOption = (
+	intervalMs: number,
+	locale: string | undefined
+): IntervalOption => ({
+	id: intervalMs,
+	name: formatDuration(intervalMs, { long: true, locale }),
+});
+
+const filterIntervalOptions = (
+	options: IntervalOption[],
+	inputValue: string,
+	locale: string | undefined
+): IntervalOption[] => {
+	const input = inputValue.trim();
+	if (input === "" || options.some((option) => option.name === input)) {
+		return options;
+	}
+
+	const amount = Number(input);
+	if (!Number.isFinite(amount) || amount <= 0) {
+		return [];
+	}
+
+	return INTERVAL_UNIT_MULTIPLIERS.map((multiplier) => amount * multiplier)
+		.filter(Number.isSafeInteger)
+		.map((ms) => toIntervalOption(ms, locale));
+};
+
 interface GeneralSettingsConfig {
 	urlLabel: string;
 	urlPlaceholder: string;
@@ -252,7 +292,7 @@ const getGeneralSettingsConfig = (
 
 const CreateMonitorPage = () => {
 	const theme = useTheme();
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation();
 	const { monitorId } = useParams();
 	const location = useLocation();
 	const navigate = useNavigate();
@@ -314,6 +354,7 @@ const CreateMonitorPage = () => {
 	const watchedProxyMode = watch("proxyMode") as ProxyMode | undefined;
 	const watchedUseAdvancedMatching = watch("useAdvancedMatching") as boolean;
 	const watchGeoCheckEnabled = watch("geoCheckEnabled") as boolean;
+	const watchedInterval = watch("interval");
 
 	// Steps without an advanced section drop it, so the last step is the form's.
 	const totalSteps = monitorStepCount(watchedType);
@@ -471,16 +512,18 @@ const CreateMonitorPage = () => {
 		[t]
 	);
 
-	const intervalOptions = useMemo(
-		() =>
-			MonitorIntervalOptions.map((option) => ({
-				value: option.value,
-				label: t(
-					`pages.createMonitor.form.frequency.option.frequency.value.${option.labelKey}`
-				),
-			})),
-		[t]
-	);
+	const intervalOptions = useMemo(() => {
+		const options = MonitorIntervalOptions.map(({ value }) =>
+			toIntervalOption(value, i18n.resolvedLanguage)
+		);
+		if (
+			typeof watchedInterval === "number" &&
+			!options.some((option) => option.id === watchedInterval)
+		) {
+			options.push(toIntervalOption(watchedInterval, i18n.resolvedLanguage));
+		}
+		return options;
+	}, [watchedInterval, i18n.resolvedLanguage]);
 
 	const matchMethodOptions = useMemo(
 		() =>
@@ -764,12 +807,17 @@ const CreateMonitorPage = () => {
 						title={t("pages.createMonitor.form.frequency.title")}
 						subtitle={t("pages.createMonitor.form.frequency.description")}
 						rightContent={
-							<FormSelectField
+							<FormAutocompleteField
 								name="interval"
 								fieldLabel={t(
 									"pages.createMonitor.form.frequency.option.frequency.label"
 								)}
 								options={intervalOptions}
+								filterOptions={(options, { inputValue }) =>
+									filterIntervalOptions(options, inputValue, i18n.resolvedLanguage)
+								}
+								getOptionDisabled={(option) => option.id < MIN_MONITOR_INTERVAL_MS}
+								disableClearable
 							/>
 						}
 					/>

client/src/Types/Monitor.ts

@@ -60,6 +60,8 @@ export const monitorTypeLabelKey: Record<SelectableMonitorType, string> &
 	pagespeed: "optionPagespeed",
 };
 
+export const MIN_MONITOR_INTERVAL_MS = 10000;
+
 export const MonitorIntervalOptions = [
 	{ value: 15000, labelKey: "fifteenSeconds" },
 	{ value: 30000, labelKey: "thirtySeconds" },

client/src/Utils/TimeUtils.ts

@@ -104,9 +104,52 @@ export const formatMs = (ms: number, hasSpace: boolean = true): string => {
 	return formatted;
 };
 
-export const formatDuration = (ms: number, verbose: boolean = false, hasSpace = true) => {
-	if (verbose) {
-		return prettyMilliseconds(ms, { verbose: true });
+type DurationUnit = "day" | "hour" | "minute" | "second";
+
+interface FormatDurationOptions {
+	long?: boolean;
+	relative?: boolean;
+	hasSpace?: boolean;
+	locale?: string;
+}
+
+const DURATION_UNITS: Array<{ unit: DurationUnit; milliseconds: number }> = [
+	{ unit: "day", milliseconds: MS_PER_DAY },
+	{ unit: "hour", milliseconds: MS_PER_HOUR },
+	{ unit: "minute", milliseconds: MS_PER_MINUTE },
+	{ unit: "second", milliseconds: MS_PER_SECOND },
+];
+
+const FALLBACK_DURATION_UNIT = DURATION_UNITS[DURATION_UNITS.length - 1];
+
+const getDurationUnit = (ms: number) =>
+	DURATION_UNITS.find(({ milliseconds }) => Math.abs(ms) >= milliseconds) ??
+	FALLBACK_DURATION_UNIT;
+
+const getExactDurationUnit = (ms: number) =>
+	DURATION_UNITS.find(({ milliseconds }) => ms !== 0 && ms % milliseconds === 0) ??
+	FALLBACK_DURATION_UNIT;
+
+export const formatDuration = (
+	ms: number,
+	{ long = false, relative = false, hasSpace = true, locale }: FormatDurationOptions = {}
+): string => {
+	if (relative) {
+		const { unit, milliseconds } = getDurationUnit(ms);
+		const value = Math.sign(ms) * Math.floor(Math.abs(ms) / milliseconds);
+		return new Intl.RelativeTimeFormat(locale, {
+			numeric: "always",
+			style: long ? "long" : "narrow",
+		}).format(-value, unit);
+	}
+
+	if (long) {
+		const { unit, milliseconds } = getExactDurationUnit(ms);
+		return new Intl.NumberFormat(locale, {
+			style: "unit",
+			unit,
+			unitDisplay: "long",
+		}).format(ms / milliseconds);
 	}
 
 	const formatted = prettyMilliseconds(ms, {

client/src/Validation/monitor.ts

@@ -6,6 +6,7 @@ import {
 	HttpMethods,
 	PageSpeedStrategies,
 	ProxyModes,
+	MIN_MONITOR_INTERVAL_MS,
 	type MonitorType,
 } from "@/Types/Monitor";
 import { ALL_HTTP_STATUS_CODES } from "@/Utils/statusCode";
@@ -27,7 +28,8 @@ const baseSchema = z.object({
 	description: z.string().optional(),
 	interval: z
 		.number()
-		.min(15000, "Interval must be at least 15 seconds")
+		.int("Interval must be a whole number of milliseconds")
+		.min(MIN_MONITOR_INTERVAL_MS, "Interval must be at least 10 seconds")
 		.register(monitorStepRegistry, { step: 1 }),
 	notifications: z.array(z.string()).register(monitorStepRegistry, { step: 1 }),
 	tags: z.array(z.string()).register(monitorStepRegistry, { step: 1 }),

client/src/locales/de.json

@@ -448,6 +448,7 @@
 				},
 				"statBoxes": {
 					"activeFor": "Aktiv seit",
+					"checkingEvery": "Check alle {{interval}}",
 					"certificateExpiry": "Zertifikatablauf",
 					"lastCheck": "Letzter Check",
 					"lastResponseTime": "Letzte Antwortzeit",

client/src/locales/en.json

@@ -547,6 +547,7 @@
 				},
 				"statBoxes": {
 					"activeFor": "Active for",
+					"checkingEvery": "Checking every {{interval}}",
 					"certificateExpiry": "Certificate expiry",
 					"domainExpiry": "Domain expiry",
 					"lastCheck": "Last check",

server/test/unit/services/jobScheduler.test.ts

@@ -143,6 +143,21 @@ describe("JobScheduler", () => {
 		});
 	});
 
+	describe("addJob", () => {
+		it("preserves an arbitrary monitor interval in the scheduled job", async () => {
+			const { scheduler, mocks } = createScheduler();
+
+			await scheduler.addJob("m1", makeMonitor({ interval: 75000 }));
+
+			expect(mocks.jobsRepository.upsertJob).toHaveBeenCalledWith(
+				expect.objectContaining({
+					id: "check:m1",
+					intervalMs: 75000,
+				})
+			);
+		});
+	});
+
 	// Regression: a heartbeat upsert racing shutdown's deleteById could resurrect the
 	// registry row, leaving a ghost worker that inflates the alive count until TTL.
 	// shutdown() must await the in-flight beat and issue the delete as the LAST write.