feat: Separate host and port for TCP services

application/src/components/services/add-service/ServiceForm.tsx

@@ -39,6 +39,7 @@ export function ServiceForm({
       name: "",
       type: "http",
       url: "",
+      port: "",
       interval: "60",
       retries: "3",
       notificationChannel: "",
@@ -50,11 +51,33 @@ export function ServiceForm({
   // Populate form when initialData changes (separate from initialization)
   useEffect(() => {
     if (initialData && isEdit) {
+      // Ensure the type is one of the allowed values
+      const serviceType = (initialData.type || "http").toLowerCase();
+      const validType = ["http", "ping", "tcp", "dns"].includes(serviceType) 
+        ? serviceType as "http" | "ping" | "tcp" | "dns"
+        : "http";
+
+      // For PING services, use host field; for DNS use domain field; for TCP use host field; others use url
+      let urlValue = "";
+      let portValue = "";
+      
+      if (validType === "ping") {
+        urlValue = initialData.host || "";
+      } else if (validType === "dns") {
+        urlValue = initialData.domain || "";
+      } else if (validType === "tcp") {
+        urlValue = initialData.host || "";
+        portValue = String(initialData.port || "");
+      } else {
+        urlValue = initialData.url || "";
+      }
+
       // Reset the form with initial data values
       form.reset({
         name: initialData.name || "",
-        type: (initialData.type || "http").toLowerCase(),
+        type: validType,
-        url: initialData.url || "",
+        url: urlValue,
+        port: portValue,
         interval: String(initialData.interval || 60),
         retries: String(initialData.retries || 3),
         notificationChannel: initialData.notificationChannel || "",
@@ -62,7 +85,7 @@ export function ServiceForm({
       });
 
       // Log for debugging
-      console.log("Populating form with URL:", initialData.url);
+      console.log("Populating form with data:", { type: validType, url: urlValue, port: portValue });
     }
   }, [initialData, isEdit, form]);
 
@@ -75,17 +98,28 @@ export function ServiceForm({
     try {
       console.log("Form data being submitted:", data); // Debug log for submitted data
       
-      if (isEdit && initialData) {
+      // Prepare service data with proper field mapping
-        // Update existing service
+      const serviceData = {
-        await serviceService.updateService(initialData.id, {
         name: data.name,
         type: data.type,
-          url: data.url, // Ensure URL is included here
         interval: parseInt(data.interval),
         retries: parseInt(data.retries),
         notificationChannel: data.notificationChannel || undefined,
         alertTemplate: data.alertTemplate || undefined,
-        });
+        // Map the URL field to appropriate database field based on service type
+        ...(data.type === "dns" 
+          ? { domain: data.url, url: "", host: "", port: undefined }  // DNS: store in domain field
+          : data.type === "ping"
+          ? { host: data.url, url: "", domain: "", port: undefined }  // PING: store in host field  
+          : data.type === "tcp"
+          ? { host: data.url, port: parseInt(data.port || "80"), url: "", domain: "" }  // TCP: store in host and port fields
+          : { url: data.url, domain: "", host: "", port: undefined }  // HTTP: store in url field
+        )
+      };
+      
+      if (isEdit && initialData) {
+        // Update existing service
+        await serviceService.updateService(initialData.id, serviceData);
         
         toast({
           title: "Service updated",
@@ -93,15 +127,7 @@ export function ServiceForm({
         });
       } else {
         // Create new service
-        await serviceService.createService({
+        await serviceService.createService(serviceData);
-          name: data.name,
-          type: data.type,
-          url: data.url, // Ensure URL is included here
-          interval: parseInt(data.interval),
-          retries: parseInt(data.retries),
-          notificationChannel: data.notificationChannel || undefined,
-          alertTemplate: data.alertTemplate || undefined,
-        });
         
         toast({
           title: "Service created",
@@ -128,10 +154,24 @@ export function ServiceForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6 pb-4">
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Basic Information</h3>
             <ServiceBasicFields form={form} />
             <ServiceTypeField form={form} />
+          </div>
+          
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
             <ServiceConfigFields form={form} />
+          </div>
+          
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
             <ServiceNotificationFields form={form} />
+          </div>
+        </div>
+        
         <ServiceFormActions 
           isSubmitting={isSubmitting} 
           onCancel={onCancel}