Feat: Frontend - update form hook and create/edit page

client/src/Hooks/useMonitorForm.ts

@@ -103,6 +103,14 @@ export const useMonitorForm = ({
 					selectedDisks: data?.selectedDisks || [],
 				};
 				break;
+			case "websocket":
+				defaults = {
+					...base,
+					type: "websocket",
+					url: data?.url || "",
+					ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				};
+				break;
 			default:
 				defaults = {
 					...base,

client/src/Pages/CreateMonitor/index.tsx

@@ -146,6 +146,17 @@ const getGeneralSettingsConfig = (
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
 		},
+		websocket: {
+			urlLabel: t("pages.createMonitor.form.general.option.wsUrl.label"),
+			urlPlaceholder: t("pages.createMonitor.form.general.option.wsUrl.placeholder"),
+			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
+			showUrl: true,
+			showPort: false,
+			showGameSelect: false,
+			showSecret: false,
+			showGrpcServiceName: false,
+			showIgnoreTls: true,
+		},
 	};
 	return configs[type] || configs.http;
 };
@@ -331,6 +342,13 @@ const CreateMonitorPage = () => {
 												"pages.createMonitor.form.type.optionGrpcDescription"
 											)}
 										/>
+										<RadioWithDescription
+											value="websocket"
+											label={t("pages.createMonitor.form.type.optionWebSocket")}
+											description={t(
+												"pages.createMonitor.form.type.optionWebSocketDescription"
+											)}
+										/>
 									</RadioGroup>
 								</FormControl>
 							)}
@@ -747,7 +765,7 @@ const CreateMonitorPage = () => {
 				}
 			/>
 
-			{(watchedType === "http" || watchedType === "grpc") && (
+			{(watchedType === "http" || watchedType === "grpc" || watchedType === "websocket") && (
 				<ConfigBox
 					title={t("pages.createMonitor.form.ignoreTls.title")}
 					subtitle={t("pages.createMonitor.form.ignoreTls.description")}