Initial Release

2025-05-09 21:28:07 +07:00
commit 0c6cd18e6f
244 changed files with 50633 additions and 0 deletions
@@ -0,0 +1,55 @@
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { UseFormReturn } from "react-hook-form";
+import { ServiceFormData } from "./types";
+
+interface ServiceBasicFieldsProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Service Name</FormLabel>
+            <FormControl>
+              <Input 
+                placeholder="Service Name" 
+                className="bg-black border-gray-700" 
+                {...field} 
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="url"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Service URL</FormLabel>
+            <FormControl>
+              <Input 
+                placeholder="https://example.com" 
+                className="bg-black border-gray-700" 
+                {...field}
+                onChange={(e) => {
+                  console.log("URL field changed:", e.target.value);
+                  field.onChange(e);
+                }}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
@@ -0,0 +1,51 @@
+
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { UseFormReturn } from "react-hook-form";
+import { ServiceFormData } from "./types";
+
+interface ServiceConfigFieldsProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="interval"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Heartbeat Interval</FormLabel>
+            <FormControl>
+              <Input 
+                type="number" 
+                placeholder="60" 
+                className="bg-black border-gray-700" 
+                {...field} 
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+            
+      <FormField
+        control={form.control}
+        name="retries"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Maximum Retries</FormLabel>
+            <FormControl>
+              <Input 
+                type="number" 
+                placeholder="3" 
+                className="bg-black border-gray-700" 
+                {...field} 
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
@@ -0,0 +1,143 @@
+
+import { Form } from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState, useEffect } from "react";
+import { useToast } from "@/hooks/use-toast";
+import { useQueryClient } from "@tanstack/react-query";
+import { serviceSchema, ServiceFormData } from "./types";
+import { ServiceBasicFields } from "./ServiceBasicFields";
+import { ServiceTypeField } from "./ServiceTypeField";
+import { ServiceConfigFields } from "./ServiceConfigFields";
+import { ServiceNotificationFields } from "./ServiceNotificationFields";
+import { ServiceFormActions } from "./ServiceFormActions";
+import { serviceService } from "@/services/serviceService";
+import { Service } from "@/types/service.types";
+
+interface ServiceFormProps {
+  onSuccess: () => void;
+  onCancel: () => void;
+  initialData?: Service | null;
+  isEdit?: boolean;
+  onSubmitStart?: () => void;
+}
+
+export function ServiceForm({ 
+  onSuccess, 
+  onCancel, 
+  initialData, 
+  isEdit = false,
+  onSubmitStart
+}: ServiceFormProps) {
+  const { toast } = useToast();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Initialize form with default values
+  const form = useForm<ServiceFormData>({
+    resolver: zodResolver(serviceSchema),
+    defaultValues: {
+      name: "",
+      type: "http",
+      url: "",
+      interval: "60",
+      retries: "3",
+      notificationChannel: "",
+      alertTemplate: "",
+    },
+    mode: "onBlur",
+  });
+
+  // Populate form when initialData changes (separate from initialization)
+  useEffect(() => {
+    if (initialData && isEdit) {
+      // Reset the form with initial data values
+      form.reset({
+        name: initialData.name || "",
+        type: (initialData.type || "http").toLowerCase(),
+        url: initialData.url || "",
+        interval: String(initialData.interval || 60),
+        retries: String(initialData.retries || 3),
+        notificationChannel: initialData.notificationChannel || "",
+        alertTemplate: initialData.alertTemplate || "",
+      });
+
+      // Log for debugging
+      console.log("Populating form with URL:", initialData.url);
+    }
+  }, [initialData, isEdit, form]);
+
+  const handleSubmit = async (data: ServiceFormData) => {
+    if (isSubmitting) return;
+    
+    setIsSubmitting(true);
+    if (onSubmitStart) onSubmitStart();
+    
+    try {
+      console.log("Form data being submitted:", data); // Debug log for submitted data
+      
+      if (isEdit && initialData) {
+        // Update existing service
+        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,
+        });
+        
+        toast({
+          title: "Service updated",
+          description: `${data.name} has been updated successfully.`,
+        });
+      } else {
+        // Create new service
+        await serviceService.createService({
+          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",
+          description: `${data.name} has been added to monitoring.`,
+        });
+      }
+      
+      onSuccess();
+      if (!isEdit) {
+        form.reset();
+      }
+    } catch (error) {
+      console.error(`Error ${isEdit ? 'updating' : 'creating'} service:`, error);
+      toast({
+        title: `Failed to ${isEdit ? 'update' : 'create'} service`,
+        description: `An error occurred while ${isEdit ? 'updating' : 'creating'} the service.`,
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6 pb-4">
+        <ServiceBasicFields form={form} />
+        <ServiceTypeField form={form} />
+        <ServiceConfigFields form={form} />
+        <ServiceNotificationFields form={form} />
+        <ServiceFormActions 
+          isSubmitting={isSubmitting} 
+          onCancel={onCancel} 
+          submitLabel={isEdit ? "Update Service" : "Create Service"}
+        />
+      </form>
+    </Form>
+  );
+}
@@ -0,0 +1,51 @@
+
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+import { MouseEvent } from "react";
+
+interface ServiceFormActionsProps {
+  isSubmitting: boolean;
+  onCancel: () => void;
+  submitLabel?: string;
+}
+
+export function ServiceFormActions({ 
+  isSubmitting, 
+  onCancel,
+  submitLabel = "Create Service"
+}: ServiceFormActionsProps) {
+  const handleCancel = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!isSubmitting) {
+      onCancel();
+    }
+  };
+
+  return (
+    <div className="flex justify-end gap-3 pt-2">
+      <Button 
+        type="button" 
+        onClick={handleCancel}
+        variant="outline"
+        disabled={isSubmitting}
+        className="border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
+      >
+        Cancel
+      </Button>
+      <Button 
+        type="submit" 
+        disabled={isSubmitting}
+        className="bg-primary text-primary-foreground hover:bg-primary/90"
+      >
+        {isSubmitting ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            Processing...
+          </>
+        ) : (
+          submitLabel
+        )}
+      </Button>
+    </div>
+  );
+}
@@ -0,0 +1,139 @@
+
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { UseFormReturn } from "react-hook-form";
+import { ServiceFormData } from "./types";
+import { useQuery } from "@tanstack/react-query";
+import { templateService } from "@/services/templateService";
+import { alertConfigService, AlertConfiguration } from "@/services/alertConfigService";
+import { useState, useEffect } from "react";
+
+interface ServiceNotificationFieldsProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceNotificationFields({ form }: ServiceNotificationFieldsProps) {
+  const [alertConfigs, setAlertConfigs] = useState<AlertConfiguration[]>([]);
+  
+  // Get the current form values for debugging
+  const notificationChannel = form.watch("notificationChannel");
+  const alertTemplate = form.watch("alertTemplate");
+  
+  console.log("Current notification values:", { 
+    notificationChannel, 
+    alertTemplate 
+  });
+  
+  // Fetch alert configurations for notification channels
+  const { data: alertConfigsData } = useQuery({
+    queryKey: ['alertConfigs'],
+    queryFn: () => alertConfigService.getAlertConfigurations(),
+  });
+  
+  // Fetch templates for template selection
+  const { data: templates } = useQuery({
+    queryKey: ['templates'],
+    queryFn: () => templateService.getTemplates(),
+  });
+  
+  // Update alert configs when data is loaded
+  useEffect(() => {
+    if (alertConfigsData) {
+      setAlertConfigs(alertConfigsData);
+      
+      // Debug log to check what alert configs are loaded
+      console.log("Loaded alert configurations:", alertConfigsData);
+    }
+  }, [alertConfigsData]);
+
+  // Log when form values change to debug
+  useEffect(() => {
+    console.log("Notification values changed:", {
+      notificationChannel: form.getValues("notificationChannel"),
+      alertTemplate: form.getValues("alertTemplate")
+    });
+  }, [form.watch("notificationChannel"), form.watch("alertTemplate")]);
+  
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="notificationChannel"
+        render={({ field }) => {
+          // Important: We need to preserve the actual value for notification channel
+          const fieldValue = field.value || "";
+          const displayValue = fieldValue === "" ? "none" : fieldValue;
+          
+          console.log("Rendering notification channel field with value:", {
+            fieldValue,
+            displayValue
+          });
+          
+          return (
+            <FormItem>
+              <FormLabel>Notification Channel</FormLabel>
+              <FormControl>
+                <Select 
+                  onValueChange={(value) => {
+                    console.log("Notification channel changed to:", value);
+                    field.onChange(value === "none" ? "" : value);
+                  }} 
+                  value={displayValue}
+                >
+                  <SelectTrigger className="bg-black border-gray-700">
+                    <SelectValue placeholder="Select a notification channel" />
+                  </SelectTrigger>
+                  <SelectContent className="bg-gray-900 text-white border-gray-700">
+                    <SelectItem value="none">None</SelectItem>
+                    {alertConfigs.map((config) => (
+                      <SelectItem key={config.id} value={config.id || ""}>
+                        {config.notify_name} ({config.notification_type})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+            </FormItem>
+          );
+        }}
+      />
+            
+      <FormField
+        control={form.control}
+        name="alertTemplate"
+        render={({ field }) => {
+          // Don't convert existing values to "default"
+          const displayValue = field.value || "default";
+          console.log("Rendering alert template field with value:", displayValue);
+          
+          return (
+            <FormItem>
+              <FormLabel>Alert Template</FormLabel>
+              <FormControl>
+                <Select 
+                  onValueChange={(value) => {
+                    console.log("Alert template changed to:", value);
+                    field.onChange(value === "default" ? "" : value);
+                  }} 
+                  value={displayValue}
+                >
+                  <SelectTrigger className="bg-black border-gray-700">
+                    <SelectValue placeholder="Select an alert template" />
+                  </SelectTrigger>
+                  <SelectContent className="bg-gray-900 text-white border-gray-700">
+                    <SelectItem value="default">Default</SelectItem>
+                    {templates?.map((template) => (
+                      <SelectItem key={template.id} value={template.id}>
+                        {template.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+            </FormItem>
+          );
+        }}
+      />
+    </>
+  );
+}
@@ -0,0 +1,58 @@
+
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Globe } from "lucide-react";
+import { UseFormReturn } from "react-hook-form";
+import { ServiceFormData } from "./types";
+
+interface ServiceTypeFieldProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
+  return (
+    <FormField
+      control={form.control}
+      name="type"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>Service Type</FormLabel>
+          <FormControl>
+            <Select 
+              onValueChange={field.onChange} 
+              defaultValue={field.value}
+            >
+              <SelectTrigger className="bg-black border-gray-700">
+                <SelectValue>
+                  {field.value === "http" && (
+                    <div className="flex items-center gap-2">
+                      <Globe className="w-4 h-4" />
+                      <span>HTTP/S</span>
+                    </div>
+                  )}
+                  {field.value !== "http" && "Select a service type"}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent className="bg-gray-900 text-white border-gray-700">
+                <SelectItem value="http">
+                  <div className="flex flex-col">
+                    <div className="flex items-center gap-2">
+                      <Globe className="w-4 h-4" />
+                      <span>HTTP/S</span>
+                    </div>
+                    <p className="text-xs text-gray-400 mt-1">
+                      Monitor websites and REST APIs with HTTP/HTTPS protocol
+                    </p>
+                  </div>
+                </SelectItem>
+                <SelectItem value="ping">PING</SelectItem>
+                <SelectItem value="tcp">TCP</SelectItem>
+                <SelectItem value="dns">DNS</SelectItem>
+              </SelectContent>
+            </Select>
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+}
@@ -0,0 +1,3 @@
+
+export * from "./ServiceForm";
+export * from "./types";
@@ -0,0 +1,14 @@
+
+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"),
+  notificationChannel: z.string().optional(),
+  alertTemplate: z.string().optional(),
+});
+
+export type ServiceFormData = z.infer<typeof serviceSchema>;