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

client/src/Hooks/useMonitorForm.ts

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

client/src/Pages/CreateMonitor/index.tsx

@@ -119,6 +119,17 @@ const getGeneralSettingsConfig = (
 			showGrpcServiceName: true,
 			showIgnoreTls: true,
 		},
+		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,
+		},
 		pagespeed: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
@@ -326,6 +337,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>
 							)}