From c31973804803a06e98efba60d620f94bcf97b985 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 14 Feb 2026 00:40:59 +0000
Subject: [PATCH 1/5] add config box for thresholds

---
 client/src/Pages/CreateMonitor/index.tsx | 108 +++++++++++++++++++++++
 client/src/locales/en.json               |  23 ++++-
 2 files changed, 130 insertions(+), 1 deletion(-)

diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx
index e7ceb52b1..76848d269 100644
--- a/client/src/Pages/CreateMonitor/index.tsx
+++ b/client/src/Pages/CreateMonitor/index.tsx
@@ -486,6 +486,114 @@ const CreateMonitorPage = () => {
 				}
 			/>
 
+			{/* Alert Thresholds - only for hardware type */}
+			{generalSettingsConfig.showSecret && (
+				<ConfigBox
+					title={t("pages.createMonitor.form.thresholds.title")}
+					subtitle={t("pages.createMonitor.form.thresholds.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="cpuAlertThreshold"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value === 0 ? "" : field.value}
+										onChange={(e) => {
+											const val = e.target.value;
+											field.onChange(val === "" ? 0 : Number(val));
+										}}
+										type="number"
+										fieldLabel={t(
+											"pages.createMonitor.form.thresholds.option.cpuThreshold.label"
+										)}
+										placeholder={t(
+											"pages.createMonitor.form.thresholds.option.cpuThreshold.placeholder"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="memoryAlertThreshold"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value === 0 ? "" : field.value}
+										onChange={(e) => {
+											const val = e.target.value;
+											field.onChange(val === "" ? 0 : Number(val));
+										}}
+										type="number"
+										fieldLabel={t(
+											"pages.createMonitor.form.thresholds.option.memoryThreshold.label"
+										)}
+										placeholder={t(
+											"pages.createMonitor.form.thresholds.option.memoryThreshold.placeholder"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="diskAlertThreshold"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value === 0 ? "" : field.value}
+										onChange={(e) => {
+											const val = e.target.value;
+											field.onChange(val === "" ? 0 : Number(val));
+										}}
+										type="number"
+										fieldLabel={t(
+											"pages.createMonitor.form.thresholds.option.diskThreshold.label"
+										)}
+										placeholder={t(
+											"pages.createMonitor.form.thresholds.option.diskThreshold.placeholder"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="tempAlertThreshold"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value === 0 ? "" : field.value}
+										onChange={(e) => {
+											const val = e.target.value;
+											field.onChange(val === "" ? 0 : Number(val));
+										}}
+										type="number"
+										fieldLabel={t(
+											"pages.createMonitor.form.thresholds.option.tempThreshold.label"
+										)}
+										placeholder={t(
+											"pages.createMonitor.form.thresholds.option.tempThreshold.placeholder"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+
 			<ConfigBox
 				title={t("pages.createMonitor.form.incidents.title")}
 				subtitle={t("pages.createMonitor.form.incidents.description")}
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index 935077a2b..c199e3151 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -187,7 +187,6 @@
 			"description": "See the latest releases and help grow the community on GitHub"
 		}
 	},
-
 	"pages": {
 		"notFound": {
 			"title": "Oh no!  You dropped your sushi!",
@@ -521,6 +520,28 @@
 					"optionPort": "Port",
 					"optionPortDescription": "Monitor if a specific port on a server is open.",
 					"title": "Type"
+				},
+				"thresholds": {
+					"title": "Alert thresholds",
+					"description": "Define the thresholds at which alerts should be triggered for this hardware monitor.",
+					"option": {
+						"cpuThreshold": {
+							"label": "CPU alert threshold (%)",
+							"placeholder": "80"
+						},
+						"memoryThreshold": {
+							"label": "Memory alert threshold (%)",
+							"placeholder": "80"
+						},
+						"diskThreshold": {
+							"label": "Disk alert threshold (%)",
+							"placeholder": "80"
+						},
+						"tempThreshold": {
+							"label": "Temperature alert threshold (°C)",
+							"placeholder": "80"
+						}
+					}
 				}
 			}
 		},

From 47b18e1d9d8356ac95ec01d63fce611ddae2da6e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 14 Feb 2026 01:02:15 +0000
Subject: [PATCH 2/5] use sliderwithlabels

---
 client/src/Pages/CreateMonitor/index.tsx | 88 +++++++++---------------
 1 file changed, 32 insertions(+), 56 deletions(-)

diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx
index 76848d269..67cc512f8 100644
--- a/client/src/Pages/CreateMonitor/index.tsx
+++ b/client/src/Pages/CreateMonitor/index.tsx
@@ -496,96 +496,72 @@ const CreateMonitorPage = () => {
 							<Controller
 								name="cpuAlertThreshold"
 								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
+								render={({ field }) => (
+									<SliderWithLabel
 										{...field}
-										value={field.value === 0 ? "" : field.value}
-										onChange={(e) => {
-											const val = e.target.value;
-											field.onChange(val === "" ? 0 : Number(val));
-										}}
-										type="number"
+										sliderMaxWidth={{ xs: "100%", md: "50%" }}
 										fieldLabel={t(
 											"pages.createMonitor.form.thresholds.option.cpuThreshold.label"
 										)}
-										placeholder={t(
-											"pages.createMonitor.form.thresholds.option.cpuThreshold.placeholder"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
+										min={0}
+										max={100}
+										step={1}
+										valueLabelDisplay="auto"
+										valueLabelFormat={(value) => `${value}%`}
 									/>
 								)}
 							/>
 							<Controller
 								name="memoryAlertThreshold"
 								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
+								render={({ field }) => (
+									<SliderWithLabel
 										{...field}
-										value={field.value === 0 ? "" : field.value}
-										onChange={(e) => {
-											const val = e.target.value;
-											field.onChange(val === "" ? 0 : Number(val));
-										}}
-										type="number"
+										sliderMaxWidth={{ xs: "100%", md: "50%" }}
 										fieldLabel={t(
 											"pages.createMonitor.form.thresholds.option.memoryThreshold.label"
 										)}
-										placeholder={t(
-											"pages.createMonitor.form.thresholds.option.memoryThreshold.placeholder"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
+										min={0}
+										max={100}
+										step={1}
+										valueLabelDisplay="auto"
+										valueLabelFormat={(value) => `${value}%`}
 									/>
 								)}
 							/>
 							<Controller
 								name="diskAlertThreshold"
 								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
+								render={({ field }) => (
+									<SliderWithLabel
 										{...field}
-										value={field.value === 0 ? "" : field.value}
-										onChange={(e) => {
-											const val = e.target.value;
-											field.onChange(val === "" ? 0 : Number(val));
-										}}
-										type="number"
+										sliderMaxWidth={{ xs: "100%", md: "50%" }}
 										fieldLabel={t(
 											"pages.createMonitor.form.thresholds.option.diskThreshold.label"
 										)}
-										placeholder={t(
-											"pages.createMonitor.form.thresholds.option.diskThreshold.placeholder"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
+										min={0}
+										max={100}
+										step={1}
+										valueLabelDisplay="auto"
+										valueLabelFormat={(value) => `${value}%`}
 									/>
 								)}
 							/>
 							<Controller
 								name="tempAlertThreshold"
 								control={control}
-								render={({ field, fieldState }) => (
-									<TextField
+								render={({ field }) => (
+									<SliderWithLabel
 										{...field}
-										value={field.value === 0 ? "" : field.value}
-										onChange={(e) => {
-											const val = e.target.value;
-											field.onChange(val === "" ? 0 : Number(val));
-										}}
-										type="number"
+										sliderMaxWidth={{ xs: "100%", md: "50%" }}
 										fieldLabel={t(
 											"pages.createMonitor.form.thresholds.option.tempThreshold.label"
 										)}
-										placeholder={t(
-											"pages.createMonitor.form.thresholds.option.tempThreshold.placeholder"
-										)}
-										fullWidth
-										error={!!fieldState.error}
-										helperText={fieldState.error?.message ?? ""}
+										min={0}
+										max={100}
+										step={1}
+										valueLabelDisplay="auto"
+										valueLabelFormat={(value) => `${value}°C`}
 									/>
 								)}
 							/>

From f694917dd40524001ddd55bd37ca7e5a573c47e1 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 14 Feb 2026 01:07:46 +0000
Subject: [PATCH 3/5] remove unused

---
 client/src/locales/en.json | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index c199e3151..8e18d8e2a 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -526,20 +526,16 @@
 					"description": "Define the thresholds at which alerts should be triggered for this hardware monitor.",
 					"option": {
 						"cpuThreshold": {
-							"label": "CPU alert threshold (%)",
-							"placeholder": "80"
+							"label": "CPU alert threshold (%)"
 						},
 						"memoryThreshold": {
-							"label": "Memory alert threshold (%)",
-							"placeholder": "80"
+							"label": "Memory alert threshold (%)"
 						},
 						"diskThreshold": {
-							"label": "Disk alert threshold (%)",
-							"placeholder": "80"
+							"label": "Disk alert threshold (%)"
 						},
 						"tempThreshold": {
-							"label": "Temperature alert threshold (°C)",
-							"placeholder": "80"
+							"label": "Temperature alert threshold (°C)"
 						}
 					}
 				}

From 2430bbeebba522f309699ba89e9736e0a1dbc6b9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 14 Feb 2026 01:15:12 +0000
Subject: [PATCH 4/5] remove slider hover

---
 client/src/Components/v2/inputs/Slider.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/Components/v2/inputs/Slider.tsx b/client/src/Components/v2/inputs/Slider.tsx
index 97a16ac2c..1bdb57cb3 100644
--- a/client/src/Components/v2/inputs/Slider.tsx
+++ b/client/src/Components/v2/inputs/Slider.tsx
@@ -39,9 +39,14 @@ export const SliderInput = forwardRef<HTMLSpanElement, SliderInputProps>(
 								opacity: 1,
 							},
 							"& .MuiSlider-thumb": {
+								height: 15,
+								width: 15,
 								backgroundColor: "#fff",
 								"&:hover, &.Mui-focusVisible": {
-									boxShadow: `0 0 0 8px ${theme.palette.primary.main}20`,
+									boxShadow: "none",
+								},
+								"&:active": {
+									boxShadow: "none",
 								},
 							},
 							"& .MuiSlider-valueLabel": {

From 111b68b8df7a20ec5bd0ed08c9d22fd7567f672e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 14 Feb 2026 01:21:02 +0000
Subject: [PATCH 5/5] revert slider size change

---
 client/src/Components/v2/inputs/Slider.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/Components/v2/inputs/Slider.tsx b/client/src/Components/v2/inputs/Slider.tsx
index 1bdb57cb3..83037ab54 100644
--- a/client/src/Components/v2/inputs/Slider.tsx
+++ b/client/src/Components/v2/inputs/Slider.tsx
@@ -39,8 +39,6 @@ export const SliderInput = forwardRef<HTMLSpanElement, SliderInputProps>(
 								opacity: 1,
 							},
 							"& .MuiSlider-thumb": {
-								height: 15,
-								width: 15,
 								backgroundColor: "#fff",
 								"&:hover, &.Mui-focusVisible": {
 									boxShadow: "none",