From ab27011b91ed4f1de4290798b37d0a0a765b6f51 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 27 Dec 2024 11:16:58 -0800
Subject: [PATCH] Add port option to create uptime monitors

---
 .../src/Pages/Uptime/CreateUptime/index.jsx   | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/Client/src/Pages/Uptime/CreateUptime/index.jsx b/Client/src/Pages/Uptime/CreateUptime/index.jsx
index d72a4fa25..c5a9df770 100644
--- a/Client/src/Pages/Uptime/CreateUptime/index.jsx
+++ b/Client/src/Pages/Uptime/CreateUptime/index.jsx
@@ -50,6 +50,11 @@ const CreateMonitor = () => {
 			placeholder: "abc123",
 			namePlaceholder: "My Container",
 		},
+		port: {
+			label: "URL to monitor",
+			placeholder: "localhost",
+			namePlaceholder: "Localhost:5173",
+		},
 	};
 
 	const { user, authToken } = useSelector((state) => state.auth);
@@ -82,6 +87,7 @@ const CreateMonitor = () => {
 				monitor.type === "http"
 					? `http${https ? "s" : ""}://` + monitor.url
 					: monitor.url,
+			port: monitor.type === "port" ? monitor.port : undefined,
 			name: monitor.name === "" ? monitor.url : monitor.name,
 			type: monitor.type,
 			interval: monitor.interval * MS_PER_MINUTE,
@@ -252,11 +258,23 @@ const CreateMonitor = () => {
 							error={errors["url"] ? true : false}
 							helperText={errors["url"]}
 						/>
+						<TextInput
+							type="number"
+							id="monitor-port"
+							label="Port to monitor"
+							placeholder="5173"
+							value={monitor.port}
+							onChange={(event) => handleChange(event, "port")}
+							error={errors["port"] ? true : false}
+							helperText={errors["port"]}
+							hidden={monitor.type !== "port"}
+						/>
 						<TextInput
 							type="text"
 							id="monitor-name"
 							label="Display name"
 							isOptional={true}
+							placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
 							value={monitor.name}
 							onChange={(event) => handleChange(event, "name")}
 							error={errors["name"] ? true : false}
@@ -321,6 +339,15 @@ const CreateMonitor = () => {
 							checked={monitor.type === "docker"}
 							onChange={(event) => handleChange(event, "type")}
 						/>
+						<Radio
+							id="monitor-checks-port"
+							title="Port monitoring"
+							desc="Check whether your port is open or not."
+							size="small"
+							value="port"
+							checked={monitor.type === "port"}
+							onChange={(event) => handleChange(event, "type")}
+						/>
 						{errors["type"] ? (
 							<Box className="error-container">
 								<Typography