Merge pull request #1479 from bluewave-labs/feat/fe/tcp-port-monitoring

feat: fe/tcp port monitoring, resolves #1476

Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js

@@ -86,7 +86,7 @@ export const getUptimeMonitorsByTeamId = createAsyncThunk(
 			const res = await networkService.getMonitorsAndSummaryByTeamId({
 				authToken: token,
 				teamId: user.teamId,
-				types: ["http", "ping", "docker"],
+				types: ["http", "ping", "docker", "port"],
 			});
 			return res.data;
 		} catch (error) {

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

Client/src/Pages/Uptime/Details/index.jsx

@@ -56,6 +56,7 @@ const DetailsPage = () => {
 				numToDisplay: 50,
 				normalize: true,
 			});
+			console.log(res?.data?.data);
 			setMonitor(res?.data?.data ?? {});
 		} catch (error) {
 			logger.error(error);

Client/src/Pages/Uptime/Home/UptimeTable/index.jsx

@@ -74,7 +74,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
 				authToken,
 				teamId: user.teamId,
 				limit: 25,
-				types: ["http", "ping", "docker"],
+				types: ["http", "ping", "docker", "port"],
 				status: null,
 				checkOrder: "desc",
 				normalize: true,

Client/src/Validation/validation.js

@@ -109,6 +109,7 @@ const monitorValidation = joi.object({
 			"string.uri": "The URL you provided is not valid.",
 			"string.invalidUrl": "Please enter a valid URL with optional port",
 		}),
+	port: joi.number(),
 	name: joi.string().trim().max(50).allow("").messages({
 		"string.max": "This field should not exceed the 50 characters limit.",
 	}),

Server/db/mongo/modules/monitorModule.js

@@ -21,6 +21,7 @@ const CHECK_MODEL_LOOKUP = {
 	http: Check,
 	ping: Check,
 	docker: Check,
+	port: Check,
 	pagespeed: PageSpeedCheck,
 	hardware: HardwareCheck,
 };
@@ -351,7 +352,12 @@ const getMonitorStatsById = async (req) => {
 			),
 		};
 
-		if (monitor.type === "http" || monitor.type === "ping" || monitor.type === "docker") {
+		if (
+			monitor.type === "http" ||
+			monitor.type === "ping" ||
+			monitor.type === "docker" ||
+			monitor.type === "port"
+		) {
 			// HTTP/PING Specific stats
 			monitorStats.periodAvgResponseTime = getAverageResponseTime(checksForDateRange);
 			monitorStats.periodUptime = getUptimePercentage(checksForDateRange);

Server/validation/joi.js

@@ -144,10 +144,12 @@ const getMonitorsAndSummaryByTeamIdQueryValidation = joi.object({
 	type: joi
 		.alternatives()
 		.try(
-			joi.string().valid("http", "ping", "pagespeed", "docker", "hardware"),
+			joi.string().valid("http", "ping", "pagespeed", "docker", "hardware", "port"),
 			joi
 				.array()
-				.items(joi.string().valid("http", "ping", "pagespeed", "docker", "hardware"))
+				.items(
+					joi.string().valid("http", "ping", "pagespeed", "docker", "hardware", "port")
+				)
 		),
 });
 
@@ -163,10 +165,12 @@ const getMonitorsByTeamIdQueryValidation = joi.object({
 	type: joi
 		.alternatives()
 		.try(
-			joi.string().valid("http", "ping", "pagespeed", "docker", "hardware"),
+			joi.string().valid("http", "ping", "pagespeed", "docker", "hardware", "port"),
 			joi
 				.array()
-				.items(joi.string().valid("http", "ping", "pagespeed", "docker", "hardware"))
+				.items(
+					joi.string().valid("http", "ping", "pagespeed", "docker", "hardware", "port")
+				)
 		),
 	page: joi.number(),
 	rowsPerPage: joi.number(),