From 0263c17618b96ffa89f96c5b2ce45af1b5a6bd61 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 30 Jan 2026 19:54:44 +0000
Subject: [PATCH] advance dmatching section

---
 client/src/Pages/CreateMonitor/index.tsx | 102 +++++++++++++++++++++--
 client/src/locales/en.json               |  17 ++++
 2 files changed, 112 insertions(+), 7 deletions(-)

diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx
index 6c7aa1768..313b744cd 100644
--- a/client/src/Pages/CreateMonitor/index.tsx
+++ b/client/src/Pages/CreateMonitor/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useParams, useLocation, useNavigate } from "react-router";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -12,6 +12,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import { Trash2 } from "lucide-react";
 
 import { BasePage, ConfigBox } from "@/Components/v2/design-elements";
@@ -23,6 +24,7 @@ import {
 	Autocomplete,
 	SwitchComponent as Switch,
 	SliderWithLabel,
+	Checkbox,
 } from "@/Components/v2/inputs";
 import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
 import { useMonitorForm } from "@/Hooks/useMonitorForm";
@@ -130,7 +132,12 @@ const CreateMonitorPage = () => {
 	}, [location.pathname]);
 
 	const showTypeSelector = pageType === "uptime" && !isEditMode;
-	const defaultType: MonitorType = pageType === "pagespeed" ? "pagespeed" : pageType === "hardware" ? "hardware" : "http";
+	const defaultType: MonitorType =
+		pageType === "pagespeed"
+			? "pagespeed"
+			: pageType === "hardware"
+				? "hardware"
+				: "http";
 
 	const { data: existingMonitor } = useGet<Monitor>(
 		isEditMode ? `/monitors/${monitorId}` : null
@@ -139,7 +146,10 @@ const CreateMonitorPage = () => {
 	// Fetch notifications for the team
 	const { data: notifications } = useGet<Notification[]>("/notifications/team");
 
-	const { schema, defaults } = useMonitorForm({ data: existingMonitor ?? null, defaultType });
+	const { schema, defaults } = useMonitorForm({
+		data: existingMonitor ?? null,
+		defaultType,
+	});
 
 	const form = useForm<MonitorFormData>({
 		resolver: zodResolver(schema),
@@ -153,6 +163,8 @@ const CreateMonitorPage = () => {
 
 	const watchedType = watch("type") as MonitorType;
 
+	const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+
 	useEffect(() => {
 		clearErrors();
 	}, [watchedType, clearErrors]);
@@ -213,12 +225,16 @@ const CreateMonitorPage = () => {
 										<RadioWithDescription
 											value="http"
 											label={t("pages.createMonitor.form.type.optionHttp")}
-											description={t("pages.createMonitor.form.type.optionHttpDescription")}
+											description={t(
+												"pages.createMonitor.form.type.optionHttpDescription"
+											)}
 										/>
 										<RadioWithDescription
 											value="ping"
 											label={t("pages.createMonitor.form.type.optionPing")}
-											description={t("pages.createMonitor.form.type.optionPingDescription")}
+											description={t(
+												"pages.createMonitor.form.type.optionPingDescription"
+											)}
 										/>
 										<RadioWithDescription
 											value="docker"
@@ -230,12 +246,16 @@ const CreateMonitorPage = () => {
 										<RadioWithDescription
 											value="port"
 											label={t("pages.createMonitor.form.type.optionPort")}
-											description={t("pages.createMonitor.form.type.optionPortDescription")}
+											description={t(
+												"pages.createMonitor.form.type.optionPortDescription"
+											)}
 										/>
 										<RadioWithDescription
 											value="game"
 											label={t("pages.createMonitor.form.type.optionGame")}
-											description={t("pages.createMonitor.form.type.optionGameDescription")}
+											description={t(
+												"pages.createMonitor.form.type.optionGameDescription"
+											)}
 										/>
 									</RadioGroup>
 								</FormControl>
@@ -523,6 +543,74 @@ const CreateMonitorPage = () => {
 				/>
 			)}
 
+			{/* Advanced Settings ConfigBox - only for HTTP monitors */}
+			{watchedType === "http" && (
+				<ConfigBox
+					title={t("pages.createMonitor.form.advanced.title")}
+					subtitle={t("pages.createMonitor.form.advanced.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<FormControlLabel
+								control={
+									<Checkbox
+										checked={showAdvancedSettings}
+										onChange={(e) => setShowAdvancedSettings(e.target.checked)}
+									/>
+								}
+								label={t("advancedMatching")}
+							/>
+							{showAdvancedSettings && (
+								<Stack spacing={theme.spacing(8)}>
+									<Controller
+										name="matchMethod"
+										control={control}
+										render={({ field }) => (
+											<Select
+												{...field}
+												value={field.value ?? "equal"}
+												fieldLabel={t("pages.createMonitor.form.advanced.option.matchMethod.label")}
+											>
+												<MenuItem value="equal">{t("matchMethodOptions.equal")}</MenuItem>
+												<MenuItem value="include">{t("matchMethodOptions.include")}</MenuItem>
+												<MenuItem value="regex">{t("matchMethodOptions.regex")}</MenuItem>
+											</Select>
+										)}
+									/>
+									<Controller
+										name="expectedValue"
+										control={control}
+										render={({ field, fieldState }) => (
+											<TextField
+												{...field}
+												value={field.value ?? ""}
+												fieldLabel={t("pages.createMonitor.form.advanced.option.expectedValue.label")}
+												fullWidth
+												error={!!fieldState.error}
+												helperText={fieldState.error?.message ?? ""}
+											/>
+										)}
+									/>
+									<Controller
+										name="jsonPath"
+										control={control}
+										render={({ field, fieldState }) => (
+											<TextField
+												{...field}
+												value={field.value ?? ""}
+												fieldLabel={t("pages.createMonitor.form.advanced.option.jsonPath.label")}
+												fullWidth
+												error={!!fieldState.error}
+												helperText={fieldState.error?.message ?? ""}
+											/>
+										)}
+									/>
+								</Stack>
+							)}
+						</Stack>
+					}
+				/>
+			)}
+
 			{/* Submit Button */}
 			<Stack
 				direction="row"
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index 4db3002b1..80cb2e206 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -308,6 +308,23 @@
 							"label": "Ignore TLS/SSL errors"
 						}
 					}
+				},
+				"advanced": {
+					"title": "Advanced settings",
+					"description": "Optional settings for advanced use cases",
+					"option": {
+						"matchMethod": {
+							"label": "Match method"
+						},
+						"expectedValue": {
+							"label": "Expected value",
+							"description": "The expected value is used to match against response result, and the match determines the status."
+						},
+						"jsonPath": {
+							"label": "JSONPath expression",
+							"description": "This expression will be evaluated against the response JSON data and the result will be used to match against the expected value."
+						}
+					}
 				}
 			}
 		},