Merge pull request #3867 from bluewave-labs/feat/proxy-frontend

feat: proxy frontend

client/src/Components/inputs/Select.tsx

@@ -11,10 +11,11 @@ interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
 	fieldLabel?: string;
 	required?: boolean;
 	placeholder?: string;
+	helperText?: string;
 }
 
 const SelectInputInner = <T,>(
-	{ fieldLabel, required, placeholder, ...props }: SelectInputProps<T>,
+	{ fieldLabel, required, placeholder, helperText, ...props }: SelectInputProps<T>,
 	ref: React.ForwardedRef<HTMLDivElement>
 ) => {
 	const theme = useTheme();
@@ -27,7 +28,7 @@ const SelectInputInner = <T,>(
 			: selected === undefined || selected === null || selected === "";
 
 		if (isEmpty && placeholder) {
-			return <Typography sx={{ color: emptyPlaceholderColor }}>{placeholder}</Typography>;
+			return <Typography color={emptyPlaceholderColor}>{placeholder}</Typography>;
 		}
 
 		if (isMultiple) {
@@ -92,11 +93,21 @@ const SelectInputInner = <T,>(
 		/>
 	);
 
-	if (fieldLabel) {
+	const helper = helperText ? (
+		<Typography
+			variant="caption"
+			color={props.error ? theme.palette.error.main : theme.palette.text.secondary}
+		>
+			{helperText}
+		</Typography>
+	) : null;
+
+	if (fieldLabel || helper) {
 		return (
 			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
 				{select}
+				{helper}
 			</Stack>
 		);
 	}

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

@@ -8,6 +8,7 @@ import {
 } from "react-hook-form";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { RadioWithDescription } from "@/Components/inputs/Radio";
+import { FieldLabel } from "@/Components/inputs/FieldLabel";
 export interface FormRadioOption {
 	value: string;
 	label: string;
@@ -17,10 +18,12 @@ export interface FormRadioOption {
 interface FormRadioGroupProps<T extends FieldValues> {
 	name: FieldPath<T>;
 	options: FormRadioOption[];
+	fieldLabel?: string;
 }
 export const FormRadioGroup = <T extends FieldValues>({
 	name,
 	options,
+	fieldLabel,
 }: FormRadioGroupProps<T>) => {
 	const { control } = useFormContext<T>();
 	const theme = useTheme();
@@ -30,6 +33,7 @@ export const FormRadioGroup = <T extends FieldValues>({
 			control={control}
 			render={({ field, fieldState }) => (
 				<FormControl error={!!fieldState.error}>
+					{fieldLabel && <FieldLabel>{fieldLabel}</FieldLabel>}
 					<RadioGroup
 						{...field}
 						sx={{ gap: theme.spacing(LAYOUT.MD) }}

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

@@ -44,6 +44,7 @@ export const FormSelectField = <T extends FieldValues>({
 					}}
 					error={!!fieldState.error}
 					{...rest}
+					helperText={fieldState.error?.message ?? rest.helperText}
 				>
 					{options.map((option) => (
 						<MenuItem

client/src/Components/sidebar/Menu.tsx

@@ -18,8 +18,8 @@ import {
 	Lock,
 	Users,
 	Tag,
+	Waypoints,
 } from "lucide-react";
-
 export const getMenu = (t: Function) => {
 	return [
 		{
@@ -47,6 +47,11 @@ export const getMenu = (t: Function) => {
 			path: "tags",
 			icon: <Icon icon={Tag} />,
 		},
+		{
+			name: t("components.sidebar.menu.proxies"),
+			path: "proxies",
+			icon: <Icon icon={Waypoints} />,
+		},
 		{
 			name: t("components.sidebar.menu.checks"),
 			path: "checks",

client/src/Hooks/useMonitorForm.ts

@@ -4,6 +4,7 @@ import {
 	DefaultHttpMethod,
 	DefaultMonitorMatchMethod,
 	DefaultPageSpeedStrategy,
+	DefaultProxyMode,
 } from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
@@ -46,6 +47,8 @@ export const getMonitorDefaults = (
 				url: data?.url || "",
 				method: data?.method ?? DefaultHttpMethod,
 				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				proxyMode: data?.proxyMode ?? DefaultProxyMode,
+				proxyId: data?.proxyId || "",
 				useAdvancedMatching: data?.useAdvancedMatching || false,
 				matchMethod: data?.matchMethod || DefaultMonitorMatchMethod,
 				expectedValue: data?.expectedValue || "",
@@ -141,6 +144,8 @@ export const getMonitorDefaults = (
 				url: "",
 				method: DefaultHttpMethod,
 				ignoreTlsErrors: false,
+				proxyMode: DefaultProxyMode,
+				proxyId: "",
 				useAdvancedMatching: false,
 				matchMethod: DefaultMonitorMatchMethod,
 				expectedValue: "",

client/src/Hooks/useProxiesForm.ts

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { proxySchema, type ProxyFormData } from "@/Validation/proxy";
+import type { ProxyResponse } from "@/Types/Proxy";
+
+interface UseProxiesFormOptions {
+	data?: ProxyResponse | null;
+}
+
+export const useProxiesForm = ({ data }: UseProxiesFormOptions) => {
+	return useMemo(() => {
+		const defaults: ProxyFormData = {
+			name: data?.name ?? "",
+			protocol: data?.protocol ?? "http",
+			host: data?.host ?? "",
+			port: data?.port ?? 8080,
+			username: "",
+			password: "",
+		};
+
+		return { schema: proxySchema, defaults };
+	}, [data]);
+};

client/src/Pages/CreateMonitor/index.tsx

@@ -41,9 +41,12 @@ import {
 	DefaultMonitorMatchMethod,
 	MonitorMatchMethods,
 	GeoCheckIntervalOptions,
+	ProxyModes,
+	type ProxyMode,
 } from "@/Types/Monitor";
 import type { Notification } from "@/Types/Notification";
 import type { Tag } from "@/Types/Tag";
+import type { AppSettingsResponse } from "@/Types/Settings";
 import {
 	stepFieldsFor,
 	monitorStepCount,
@@ -56,6 +59,7 @@ import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectF
 import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
 import { FormSliderField } from "@/Components/inputs/forms/FormSliderField";
 import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
+import type { ProxyResponse } from "@/Types/Proxy";
 
 const httpMethodOptions = HttpMethods.map((method) => ({
 	value: method,
@@ -67,6 +71,7 @@ interface GeneralSettingsConfig {
 	urlPlaceholder: string;
 	namePlaceholder: string;
 	showUrl: boolean;
+	showProxy: boolean;
 	showPort: boolean;
 	showGameSelect: boolean;
 	showSecret: boolean;
@@ -87,6 +92,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: true,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -101,6 +107,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.host.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -115,6 +122,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.container.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -129,6 +137,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: true,
 			showGameSelect: false,
 			showSecret: false,
@@ -143,6 +152,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: true,
 			showGameSelect: true,
 			showSecret: false,
@@ -157,6 +167,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.host.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: true,
 			showGameSelect: false,
 			showSecret: false,
@@ -171,6 +182,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -185,6 +197,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.captureUrl.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: true,
@@ -199,6 +212,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.wsUrl.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -213,6 +227,7 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
+			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -258,6 +273,8 @@ const CreateMonitorPage = () => {
 	const { data: notifications } = useGet<Notification[]>("/notifications/team");
 	const { data: games } = useGet<GamesMap>("/monitors/games");
 	const { data: tags } = useGet<Tag[]>("/tags/team");
+	const { data: proxies } = useGet<ProxyResponse[]>("/proxies/team");
+	const { data: appSettings } = useGet<AppSettingsResponse>("/settings");
 
 	const { schema, defaults } = useMonitorForm({
 		data: existingMonitor ?? null,
@@ -281,6 +298,7 @@ const CreateMonitorPage = () => {
 
 	const watchedType = watch("type") as MonitorType;
 	const watchedMethod = watch("method") as HttpMethod | undefined;
+	const watchedProxyMode = watch("proxyMode") as ProxyMode | undefined;
 	const watchedUseAdvancedMatching = watch("useAdvancedMatching") as boolean;
 	const watchGeoCheckEnabled = watch("geoCheckEnabled") as boolean;
 
@@ -466,6 +484,41 @@ const CreateMonitorPage = () => {
 			})),
 		[t]
 	);
+	const globalProxyName =
+		appSettings?.settings?.globalProxyEnabled === true
+			? proxies?.find((proxy) => proxy.id === appSettings?.settings?.globalProxyId)?.name
+			: undefined;
+
+	const proxyModeOptions = useMemo(
+		() =>
+			ProxyModes.map((mode) => {
+				const key =
+					mode === "inherit"
+						? globalProxyName
+							? "inheritGlobal"
+							: "inheritDirect"
+						: mode;
+				return {
+					value: mode,
+					label: t(`pages.createMonitor.form.general.option.proxyMode.value.${key}`, {
+						name: globalProxyName,
+					}),
+					description: t(
+						`pages.createMonitor.form.general.option.proxyMode.description.${key}`
+					),
+				};
+			}),
+		[t, globalProxyName]
+	);
+
+	const proxyOptions = useMemo(
+		() =>
+			(proxies ?? []).map((proxy) => ({
+				value: proxy.id,
+				label: `${proxy.name} (${proxy.host}:${proxy.port})`,
+			})),
+		[proxies]
+	);
 
 	return (
 		<FormProvider {...form}>
@@ -518,6 +571,11 @@ const CreateMonitorPage = () => {
 						}
 						rightContent={
 							<Stack spacing={theme.spacing(LAYOUT.MD)}>
+								<FormTextField
+									name="name"
+									fieldLabel={t("pages.createMonitor.form.general.option.name.label")}
+									placeholder={generalSettingsConfig.namePlaceholder}
+								/>
 								{/* URL/Host/Container field - not shown for hardware */}
 								{generalSettingsConfig.showUrl && (
 									<FormTextField
@@ -527,6 +585,27 @@ const CreateMonitorPage = () => {
 										disabled={isEditMode}
 									/>
 								)}
+								{/* Proxy fields - only shown for HTTP */}
+								{generalSettingsConfig.showProxy && (
+									<>
+										<FormRadioGroup
+											name="proxyMode"
+											options={proxyModeOptions}
+											fieldLabel={t(
+												"pages.createMonitor.form.general.option.proxyMode.label"
+											)}
+										/>
+										{watchedProxyMode === "custom" && (
+											<FormSelectField
+												name="proxyId"
+												fieldLabel={t(
+													"pages.createMonitor.form.general.option.proxy.label"
+												)}
+												options={proxyOptions}
+											/>
+										)}
+									</>
+								)}
 
 								{/* Strategy field - only for pagespeed type */}
 								{generalSettingsConfig.showStrategy && (
@@ -603,11 +682,6 @@ const CreateMonitorPage = () => {
 										options={dnsRecordTypeOptions}
 									/>
 								)}
-								<FormTextField
-									name="name"
-									fieldLabel={t("pages.createMonitor.form.general.option.name.label")}
-									placeholder={generalSettingsConfig.namePlaceholder}
-								/>
 							</Stack>
 						}
 					/>

client/src/Pages/Proxies/components/ProxiesTable.tsx

@@ -0,0 +1,103 @@
+import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
+import Typography from "@mui/material/Typography";
+import type { Header } from "@/Components/design-elements/Table";
+import { Table } from "@/Components/design-elements";
+import { Pagination } from "@/Components/design-elements/Table";
+import { useClientPagination } from "@/Hooks/useClientPagination";
+
+import type { ProxyResponse } from "@/Types/Proxy";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
+
+interface ProxiesTableProps {
+	proxies: ProxyResponse[];
+	setSelectedProxy: Function;
+}
+
+export const ProxiesTable = ({ proxies, setSelectedProxy }: ProxiesTableProps) => {
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const { pagedRows, paginationProps } = useClientPagination(proxies);
+
+	const getActions = (proxy: ProxyResponse): ActionMenuItem[] => {
+		return [
+			{
+				id: 1,
+				label: t("pages.common.monitors.actions.configure"),
+				action: () => {
+					navigate(`/proxies/configure/${proxy.id}`);
+				},
+				closeMenu: true,
+			},
+
+			{
+				id: 2,
+				label: (
+					<Typography color={theme.palette.error.main}>
+						{t("pages.common.monitors.actions.delete")}
+					</Typography>
+				),
+				action: async () => {
+					setSelectedProxy(proxy);
+				},
+				closeMenu: true,
+			},
+		];
+	};
+
+	const getHeaders = () => {
+		const headers: Header<ProxyResponse>[] = [
+			{
+				id: "name",
+				content: t("common.table.headers.name"),
+				render: (row) => {
+					return <Typography>{row?.name}</Typography>;
+				},
+			},
+			{
+				id: "protocol",
+				content: t("pages.proxies.table.headers.protocol"),
+				render: (row) => {
+					return <Typography>{row?.protocol}</Typography>;
+				},
+			},
+			{
+				id: "host",
+				content: t("pages.proxies.table.headers.host"),
+				render: (row) => {
+					return <Typography>{row?.host}</Typography>;
+				},
+			},
+			{
+				id: "port",
+				content: t("pages.proxies.table.headers.port"),
+				render: (row) => {
+					return <Typography>{row?.port}</Typography>;
+				},
+			},
+			{
+				id: "actions",
+				content: t("common.table.headers.actions"),
+				render: (row) => {
+					return <ActionsMenu items={getActions(row)} />;
+				},
+			},
+		];
+		return headers;
+	};
+
+	return (
+		<>
+			<Table
+				headers={getHeaders()}
+				data={pagedRows}
+				onRowClick={(row) => {
+					navigate(`/proxies/configure/${row.id}`);
+				}}
+			/>
+			{proxies.length > 0 && <Pagination {...paginationProps} />}
+		</>
+	);
+};

client/src/Pages/Proxies/create/index.tsx

@@ -0,0 +1,213 @@
+import { BasePage, ConfigBox } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { Button, FieldLabel } from "@/Components/inputs";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { mutate } from "swr";
+import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
+import type { ProxyFormData } from "@/Validation/proxy";
+import { ProxyProtocols, type ProxyResponse } from "@/Types/Proxy";
+import { useTranslation } from "react-i18next";
+import { useProxiesForm } from "@/Hooks/useProxiesForm";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
+import { useMemo } from "react";
+import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
+const ProxiesCreatePage = () => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const navigate = useNavigate();
+	const { proxyId } = useParams<{ proxyId: string }>();
+	const isEditMode = Boolean(proxyId);
+
+	const { data: existingProxy } = useGet<ProxyResponse>(
+		isEditMode ? `/proxies/${proxyId}` : null
+	);
+
+	const { post, loading: isSubmitting } = usePost<ProxyFormData, ProxyResponse>();
+	const { patch, loading: isPatching } = usePatch<ProxyFormData, ProxyResponse>();
+
+	const { schema, defaults } = useProxiesForm({ data: existingProxy });
+
+	const form = useForm<ProxyFormData>({
+		resolver: zodResolver(schema),
+		defaultValues: defaults,
+	});
+
+	const { reset, handleSubmit } = form;
+
+	const isPasswordSet = existingProxy?.hasPassword ?? false;
+	const [passwordHasBeenReset, setPasswordHasBeenReset] = useState(false);
+
+	const handleResetPassword = () => {
+		form.setValue("password", "");
+		setPasswordHasBeenReset(true);
+	};
+
+	const isUsernameSet = Boolean(existingProxy?.username);
+	const [usernameHasBeenReset, setUsernameHasBeenReset] = useState(false);
+
+	const handleResetUsername = () => {
+		form.setValue("username", "");
+		setUsernameHasBeenReset(true);
+	};
+
+	const protocolOptions = useMemo(
+		() =>
+			ProxyProtocols.map((protocol) => ({
+				value: protocol,
+				label: protocol,
+			})),
+		[]
+	);
+
+	useEffect(() => {
+		reset(defaults);
+	}, [defaults, reset]);
+
+	const onSubmit = async (data: ProxyFormData) => {
+		const payload: ProxyFormData & { clearPassword?: boolean; clearUsername?: boolean } =
+			{
+				...data,
+			};
+		// Don't send password/username if one is set and the user hasn't clicked reset
+		if (isPasswordSet && !passwordHasBeenReset) {
+			delete payload.password;
+		} else if (passwordHasBeenReset && !payload.password) {
+			payload.clearPassword = true;
+		}
+		if (isUsernameSet && !usernameHasBeenReset) {
+			delete payload.username;
+		} else if (usernameHasBeenReset && !payload.username) {
+			payload.clearUsername = true;
+		}
+		const result = isEditMode
+			? await patch(`/proxies/${proxyId}`, payload)
+			: await post("/proxies", payload);
+		if (result?.success) {
+			await mutate((key) => typeof key === "string" && key.startsWith("/proxies"));
+			navigate("/proxies");
+		}
+	};
+
+	return (
+		<FormProvider {...form}>
+			<BasePage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+			>
+				<ConfigBox
+					title={t("pages.proxies.form.name.title")}
+					subtitle={t("pages.proxies.form.name.description")}
+					rightContent={
+						<FormTextField
+							name="name"
+							fieldLabel={t("pages.proxies.form.name.optionName")}
+							placeholder={t("pages.proxies.form.name.placeholder")}
+						/>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.proxies.form.server.title")}
+					subtitle={t("pages.proxies.form.server.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							<FormSelectField
+								name="protocol"
+								fieldLabel={t("pages.proxies.form.server.option.protocol.label")}
+								options={protocolOptions}
+							/>
+							<FormTextField
+								name="host"
+								fieldLabel={t("pages.proxies.form.server.option.host.label")}
+								placeholder={t("pages.proxies.form.server.option.host.placeholder")}
+							/>
+							<FormNumberField
+								name="port"
+								fieldLabel={t("pages.proxies.form.server.option.port.label")}
+							/>
+						</Stack>
+					}
+				/>
+
+				<ConfigBox
+					title={t("pages.proxies.form.auth.title")}
+					subtitle={t("pages.proxies.form.auth.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							{(isUsernameSet === false || usernameHasBeenReset === true) && (
+								<FormTextField
+									name="username"
+									fieldLabel={t("pages.proxies.form.auth.option.username.label")}
+									placeholder={t("pages.proxies.form.auth.option.username.placeholder")}
+								/>
+							)}
+
+							{isUsernameSet === true && usernameHasBeenReset === false && (
+								<Box>
+									<FieldLabel>
+										{t("pages.proxies.form.auth.option.username.labelSet")}
+									</FieldLabel>
+									<Button
+										onClick={handleResetUsername}
+										variant="contained"
+										color="error"
+									>
+										{t("common.buttons.reset")}
+									</Button>
+								</Box>
+							)}
+
+							{(isPasswordSet === false || passwordHasBeenReset === true) && (
+								<FormTextField
+									name="password"
+									type="password"
+									fieldLabel={t("pages.proxies.form.auth.option.password.label")}
+								/>
+							)}
+
+							{isPasswordSet === true && passwordHasBeenReset === false && (
+								<Box>
+									<FieldLabel>
+										{t("pages.proxies.form.auth.option.password.labelSet")}
+									</FieldLabel>
+									<Button
+										onClick={handleResetPassword}
+										variant="contained"
+										color="error"
+									>
+										{t("common.buttons.reset")}
+									</Button>
+								</Box>
+							)}
+						</Stack>
+					}
+				/>
+
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+					spacing={theme.spacing(2)}
+				>
+					<Button
+						loading={isSubmitting || isPatching}
+						type="submit"
+						variant="contained"
+						color="primary"
+					>
+						{t("common.buttons.save")}
+					</Button>
+				</Stack>
+			</BasePage>
+		</FormProvider>
+	);
+};
+
+export default ProxiesCreatePage;

client/src/Pages/Proxies/index.tsx

@@ -0,0 +1,72 @@
+import { BasePageWithStates } from "@/Components/design-elements";
+import { ProxiesTable } from "@/Pages/Proxies/components/ProxiesTable";
+import { Dialog } from "@/Components/inputs";
+import { HeaderCreate } from "@/Components/common";
+
+import { useState } from "react";
+import { useGet, useDelete } from "@/Hooks/UseApi";
+import { useTranslation } from "react-i18next";
+import type { ProxyResponse } from "@/Types/Proxy";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+
+const ProxiesPage = () => {
+	const { t } = useTranslation();
+	const isAdmin = useIsAdmin();
+
+	const [selectedProxy, setSelectedProxy] = useState<ProxyResponse | null>(null);
+	const isDialogOpen = Boolean(selectedProxy);
+
+	const {
+		data: proxies,
+		isLoading,
+		isValidating,
+		error,
+		refetch,
+	} = useGet<ProxyResponse[]>("/proxies/team", {}, { keepPreviousData: true });
+
+	const { deleteFn, loading: isDeleting } = useDelete();
+
+	const handleConfirm = async () => {
+		if (!selectedProxy) return;
+		await deleteFn(`/proxies/${selectedProxy.id}`);
+		setSelectedProxy(null);
+		refetch();
+	};
+
+	const handleCancel = () => {
+		setSelectedProxy(null);
+	};
+
+	return (
+		<BasePageWithStates
+			headerKey="proxies"
+			page={t("pages.proxies.fallback.title")}
+			description={t("pages.proxies.fallback.description")}
+			loading={isLoading || isValidating}
+			error={!!error}
+			totalCount={proxies?.length ?? 0}
+			actionButtonText={t("pages.proxies.fallback.actionButton")}
+			actionLink="/proxies/create"
+		>
+			<HeaderCreate
+				path="/proxies/create"
+				isLoading={isLoading || isValidating}
+				isAdmin={isAdmin}
+			/>
+			<ProxiesTable
+				proxies={proxies ?? []}
+				setSelectedProxy={setSelectedProxy}
+			/>
+			<Dialog
+				open={isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={isDeleting}
+			/>
+		</BasePageWithStates>
+	);
+};
+
+export default ProxiesPage;

client/src/Routes/index.tsx

@@ -39,11 +39,14 @@ import CreateNotifications from "@/Pages/Notifications/create";
 import Tags from "@/Pages/Tags";
 import CreateTags from "@/Pages/Tags/create";
 
+// Proxies
+import Proxies from "@/Pages/Proxies";
+import CreateProxies from "@/Pages/Proxies/create";
+
 // Settings
 import Account from "@/Pages/Account";
 import EditUser from "@/Pages/Account/EditUser";
 import Settings from "@/Pages/Settings";
-
 import Maintenance from "@/Pages/Maintenance";
 import CreateNewMaintenanceWindow from "@/Pages/Maintenance/create";
 
@@ -52,10 +55,8 @@ import Logs from "@/Pages/Logs";
 
 // Routing
 import { ProtectedRoute, RoleProtectedRoute } from "@/Components/routing/RouteProtected";
-
 import CreateMonitor from "@/Pages/CreateMonitor";
 import { isCustomDomainHost } from "@/Utils/statusPageUrl";
-
 const Routes = () => {
 	if (isCustomDomainHost()) {
 		return (
@@ -188,12 +189,24 @@ const Routes = () => {
 					path="tags/create"
 					element={<CreateTags />}
 				/>
-
 				<Route
 					path="tags/configure/:tagId"
 					element={<CreateTags />}
 				/>
 
+				<Route
+					path="proxies"
+					element={<Proxies />}
+				/>
+				<Route
+					path="proxies/create"
+					element={<CreateProxies />}
+				/>
+				<Route
+					path="proxies/configure/:proxyId"
+					element={<CreateProxies />}
+				/>
+
 				<Route
 					path="maintenance"
 					element={<Maintenance />}

client/src/Types/Monitor.ts

@@ -109,6 +109,10 @@ export const HttpMethods = ["GET", "HEAD"] as const;
 export type HttpMethod = (typeof HttpMethods)[number];
 export const DefaultHttpMethod: HttpMethod = "GET";
 
+export const ProxyModes = ["inherit", "none", "custom"] as const;
+export type ProxyMode = (typeof ProxyModes)[number];
+export const DefaultProxyMode: ProxyMode = "inherit";
+
 export interface Monitor {
 	id: string;
 	userId: string;
@@ -121,6 +125,8 @@ export interface Monitor {
 	statusWindowThreshold: number;
 	type: MonitorType;
 	ignoreTlsErrors: boolean;
+	proxyMode: ProxyMode;
+	proxyId?: string;
 	useAdvancedMatching: boolean;
 	jsonPath?: string;
 	expectedValue?: string;

client/src/Types/Proxy.ts

@@ -0,0 +1,17 @@
+export const ProxyProtocols = ["http", "https"] as const;
+export type ProxyProtocol = (typeof ProxyProtocols)[number];
+
+export interface Proxy {
+	id: string;
+	teamId: string;
+	name: string;
+	protocol: ProxyProtocol;
+	host: string;
+	port: number;
+	username?: string;
+	password?: string;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export type ProxyResponse = Omit<Proxy, "password"> & { hasPassword: boolean };

client/src/Types/Settings.ts

@@ -24,6 +24,8 @@ export interface Settings {
 	showURL: boolean;
 	singleton: boolean;
 	globalThresholds?: SettingsThresholds;
+	globalProxyEnabled: boolean;
+	globalProxyId?: string | null;
 	createdAt: string;
 	updatedAt: string;
 }

client/src/Validation/monitor.ts

@@ -5,6 +5,7 @@ import {
 	DnsRecordTypes,
 	HttpMethods,
 	PageSpeedStrategies,
+	ProxyModes,
 	type MonitorType,
 } from "@/Types/Monitor";
 import { ALL_HTTP_STATUS_CODES } from "@/Utils/statusCode";
@@ -67,6 +68,8 @@ const httpStatusCode = z.number().refine((code) => httpStatusCodeSet.has(code),
 const httpSchema = baseSchema.extend({
 	type: z.literal("http"),
 	url: urlSchema,
+	proxyMode: z.enum(ProxyModes),
+	proxyId: z.string().optional(),
 	method: z.enum(HttpMethods).optional().register(monitorStepRegistry, { step: 2 }),
 	ignoreTlsErrors: z.boolean().register(monitorStepRegistry, { step: 2 }),
 	useAdvancedMatching: z.boolean().register(monitorStepRegistry, { step: 2 }),
@@ -195,7 +198,7 @@ const dnsSchema = baseSchema.extend({
 });
 
 // Discriminated union of all monitor types
-export const monitorSchema = z.discriminatedUnion("type", [
+const monitorSchemaUnion = z.discriminatedUnion("type", [
 	httpSchema,
 	pingSchema,
 	portSchema,
@@ -208,10 +211,21 @@ export const monitorSchema = z.discriminatedUnion("type", [
 	dnsSchema,
 ]);
 
+// Mirrors the server's refineProxySelection (monitorValidation.ts)
+export const monitorSchema = monitorSchemaUnion.superRefine((data, ctx) => {
+	if (data.type === "http" && data.proxyMode === "custom" && !data.proxyId) {
+		ctx.addIssue({
+			code: "custom",
+			path: ["proxyId"],
+			message: "A proxy must be selected when proxy mode is custom",
+		});
+	}
+});
+
 export type MonitorFormData = z.infer<typeof monitorSchema>;
 
 const optionForType = (type: MonitorType) =>
-	monitorSchema.options.find((o) => o.shape.type.value === type);
+	monitorSchemaUnion.options.find((o) => o.shape.type.value === type);
 
 // The step each field of a type is validated on, from the per-field
 // `monitorStepRegistry` metadata (unannotated fields default to step 0).

client/src/Validation/proxy.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+import { ProxyProtocols } from "@/Types/Proxy";
+
+export const proxySchema = z.object({
+	name: z.string().min(1, "Proxy name is required"),
+	protocol: z.enum(ProxyProtocols, "Invalid proxy protocol"),
+	host: z.string().min(1, "Proxy host is required"),
+	port: z
+		.number()
+		.int()
+		.min(1, "Proxy port is required")
+		.max(65535, "Proxy port must be between 1 and 65535"),
+	username: z.string().optional(),
+	password: z.string().optional(),
+});
+
+export type ProxyFormData = z.infer<typeof proxySchema>;

client/src/locales/en.json

@@ -205,6 +205,7 @@
 				"infrastructure": "Infrastructure",
 				"notifications": "Notifications",
 				"tags": "Tags",
+				"proxies": "Proxies",
 				"checks": "Checks",
 				"incidents": "Incidents",
 				"statusPages": "Status pages",
@@ -244,6 +245,63 @@
 		}
 	},
 	"pages": {
+		"proxies": {
+			"header": {
+				"title": "Proxies",
+				"description": "Manage your proxy servers for routing HTTP monitoring traffic."
+			},
+			"fallback": {
+				"title": "No proxies yet",
+				"description": "Route HTTP monitor checks through a proxy server. Once you create a proxy, you can select it on individual monitors or set it as the global default in Settings.",
+				"actionButton": "Create a proxy"
+			},
+			"form": {
+				"name": {
+					"title": "Proxy name",
+					"description": "A friendly name to identify this proxy",
+					"optionName": "Proxy name",
+					"placeholder": "My proxy"
+				},
+				"server": {
+					"title": "Proxy server",
+					"description": "Where the proxy server is reachable. Set the protocol Checkmate uses to connect to it, its hostname or IP address, and the port it listens on.",
+					"option": {
+						"protocol": {
+							"label": "Protocol"
+						},
+						"host": {
+							"label": "Hostname / IP Address",
+							"placeholder": "proxy.example.com"
+						},
+						"port": {
+							"label": "Port"
+						}
+					}
+				},
+				"auth": {
+					"title": "Authentication",
+					"description": "Optional. Only needed if the proxy server requires basic authentication.",
+					"option": {
+						"username": {
+							"label": "Username",
+							"placeholder": "Proxy username",
+							"labelSet": "Username is set. Click Reset to change it."
+						},
+						"password": {
+							"label": "Password",
+							"labelSet": "Password is set. Click Reset to change it."
+						}
+					}
+				}
+			},
+			"table": {
+				"headers": {
+					"protocol": "Protocol",
+					"host": "Host",
+					"port": "Port"
+				}
+			}
+		},
 		"notFound": {
 			"title": "Oh no!  You dropped your sushi!",
 			"subtitle": "Either the URL doesn’t exist, or you don’t have access to it."
@@ -581,6 +639,24 @@
 							"label": "URL",
 							"placeholder": "https://www.google.com"
 						},
+						"proxyMode": {
+							"label": "Proxy",
+							"value": {
+								"inheritDirect": "Default (direct connection)",
+								"inheritGlobal": "Default (global proxy: {{name}})",
+								"none": "Never use a proxy",
+								"custom": "Custom proxy"
+							},
+							"description": {
+								"inheritDirect": "No global proxy is configured, connect directly. If a global proxy is later configured, this monitor will use it.",
+								"inheritGlobal": "Follows the global proxy setting — changing it in Settings also changes this monitor's connection.",
+								"none": "Always connects directly even if a global proxy is enabled later.",
+								"custom": "Route this monitor's checks through a specific proxy. Overrides global proxy"
+							}
+						},
+						"proxy": {
+							"label": "Proxy server"
+						},
 						"game": {
 							"label": "Choose game",
 							"placeholder": "Select a game"
@@ -624,7 +700,7 @@
 					},
 					"title": "General settings",
 					"description": {
-						"http": "Enter the URL or IP to monitor (e.g., https://example.com/ or 192.168.1.100) and add a clear display name that appears on the dashboard.",
+						"http": "Enter the URL or IP to monitor (e.g., https://example.com/ or 192.168.1.100) and add a clear display name that appears on the dashboard.  Set an optional proxy server to connect through.",
 						"ping": "Enter the IP address or hostname to ping (e.g., 192.168.1.100 or example.com) and add a clear display name that appears on the dashboard.",
 						"port": "Enter the URL or IP of the server, the port number and a clear display name that appears on the dashboard.",
 						"docker": "Enter the Docker container name or ID. You can use either the container name (e.g., my-app) or the container ID (full 64-char ID or short ID).",