diff --git a/application/src/components/services/add-service/ServiceUrlField.tsx b/application/src/components/services/add-service/ServiceUrlField.tsx new file mode 100644 index 0000000..0284f35 --- /dev/null +++ b/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; +} + +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 ( +
+ ( + + {getFieldLabel()} + + { + console.log(`${serviceType === "dns" ? "Domain" : serviceType === "tcp" ? "Host" : "URL"} field changed:`, e.target.value); + field.onChange(e); + }} + /> + + + {getDescription()} + + + + )} + /> + + {serviceType === "tcp" && ( + ( + + Port + + { + console.log("Port field changed:", e.target.value); + field.onChange(e); + }} + /> + + + Enter the port number for TCP connection test + + + + )} + /> + )} +
+ ); +} \ No newline at end of file diff --git a/application/src/components/services/add-service/types.ts b/application/src/components/services/add-service/types.ts index eb3ac47..2aee449 100644 --- a/application/src/components/services/add-service/types.ts +++ b/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"), - url: z.string().min(1, "Service URL is required"), - interval: z.string().min(1, "Heartbeat interval is required"), - retries: z.string().min(1, "Maximum retries is required"), + type: z.enum(["http", "ping", "tcp", "dns"]), + url: z.string().min(1, "URL/Domain/Host is required").refine((value) => { + // Basic validation - more specific validation can be added per type + 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; +export type ServiceFormData = z.infer; \ No newline at end of file