feat: Separate host and port for TCP services

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

@@ -0,0 +1,111 @@
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { UseFormReturn } from "react-hook-form";
+import { ServiceFormData } from "./types";
+
+interface ServiceUrlFieldProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceUrlField({ form }: ServiceUrlFieldProps) {
+  const serviceType = form.watch("type");
+  
+  const getPlaceholder = () => {
+    switch (serviceType) {
+      case "http":
+        return "https://example.com";
+      case "ping":
+        return "example.com or 192.168.1.1";
+      case "tcp":
+        return "example.com or 192.168.1.1";
+      case "dns":
+        return "example.com";
+      default:
+        return "Enter URL or hostname";
+    }
+  };
+
+  const getDescription = () => {
+    switch (serviceType) {
+      case "http":
+        return "Enter the full URL including protocol (http:// or https://)";
+      case "ping":
+        return "Enter hostname or IP address to ping";
+      case "tcp":
+        return "Enter hostname or IP address for TCP connection test";
+      case "dns":
+        return "Enter domain name for DNS record monitoring (A, AAAA, MX, etc.)";
+      default:
+        return "Enter the target URL or hostname for monitoring";
+    }
+  };
+
+  const getFieldLabel = () => {
+    switch (serviceType) {
+      case "dns":
+        return "Domain Name";
+      case "ping":
+        return "Hostname/IP";
+      case "tcp":
+        return "Hostname/IP";
+      default:
+        return "Target URL/Host";
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={form.control}
+        name="url"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{getFieldLabel()}</FormLabel>
+            <FormControl>
+              <Input 
+                placeholder={getPlaceholder()}
+                {...field}
+                onChange={(e) => {
+                  console.log(`${serviceType === "dns" ? "Domain" : serviceType === "tcp" ? "Host" : "URL"} field changed:`, e.target.value);
+                  field.onChange(e);
+                }}
+              />
+            </FormControl>
+            <FormDescription className="text-xs">
+              {getDescription()}
+            </FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      {serviceType === "tcp" && (
+        <FormField
+          control={form.control}
+          name="port"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Port</FormLabel>
+              <FormControl>
+                <Input 
+                  placeholder="8080"
+                  type="number"
+                  {...field}
+                  onChange={(e) => {
+                    console.log("Port field changed:", e.target.value);
+                    field.onChange(e);
+                  }}
+                />
+              </FormControl>
+              <FormDescription className="text-xs">
+                Enter the port number for TCP connection test
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      )}
+    </div>
+  );
+}

application/src/components/services/add-service/types.ts

@@ -3,12 +3,16 @@ import { z } from "zod";
 
 export const serviceSchema = z.object({
   name: z.string().min(1, "Service name is required"),
-  type: z.string().min(1, "Service type is required"),
+  type: z.enum(["http", "ping", "tcp", "dns"]),
-  url: z.string().min(1, "Service URL is required"),
+  url: z.string().min(1, "URL/Domain/Host is required").refine((value) => {
-  interval: z.string().min(1, "Heartbeat interval is required"),
+    // Basic validation - more specific validation can be added per type
-  retries: z.string().min(1, "Maximum retries is required"),
+    return value.trim().length > 0;
+  }, "Please enter a valid URL, hostname, or domain"),
+  port: z.string().optional(),
+  interval: z.string(),
+  retries: z.string(),
   notificationChannel: z.string().optional(),
   alertTemplate: z.string().optional(),
 });
 
-export type ServiceFormData = z.infer<typeof serviceSchema>;
+export type ServiceFormData = z.infer<typeof serviceSchema>;