Refactor: Separate data display by monitoring source

and Fix: Display data collection in detail page
2025-06-24 22:11:29 +07:00
parent 35b11f5a16
commit ab4f0aa6ea
15 changed files with 565 additions and 57 deletions
@@ -13,6 +13,7 @@ import { ServiceNotificationFields } from "./ServiceNotificationFields";
 import { ServiceFormActions } from "./ServiceFormActions";
 import { serviceService } from "@/services/serviceService";
 import { Service } from "@/types/service.types";
+import { ServiceRegionalFields } from "./ServiceRegionalFields";

 interface ServiceFormProps {
  onSuccess: () => void;
@@ -44,6 +45,8 @@ export function ServiceForm({
      retries: "3",
      notificationChannel: "",
      alertTemplate: "",
+      regionalMonitoringEnabled: false,
+      regionalAgent: "",
    },
    mode: "onBlur",
  });
@@ -72,6 +75,11 @@ export function ServiceForm({
        urlValue = initialData.url || "";
      }

+      // Handle regional monitoring data - ensure proper assignment display
+      const regionalAgent = initialData.region_name && initialData.agent_id 
+        ? `${initialData.region_name}|${initialData.agent_id}` 
+        : "";
+
      // Reset the form with initial data values
      form.reset({
        name: initialData.name || "",
@@ -82,10 +90,20 @@ export function ServiceForm({
        retries: String(initialData.retries || 3),
        notificationChannel: initialData.notificationChannel || "",
        alertTemplate: initialData.alertTemplate || "",
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        regionalAgent: regionalAgent,
      });

      // Log for debugging
-      console.log("Populating form with data:", { type: validType, url: urlValue, port: portValue });
+      console.log("Populating form with data:", { 
+        type: validType, 
+        url: urlValue, 
+        port: portValue, 
+        regionalAgent,
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        region_name: initialData.region_name,
+        agent_id: initialData.agent_id
+      });
    }
  }, [initialData, isEdit, form]);

@@ -98,6 +116,17 @@ export function ServiceForm({
    try {
      console.log("Form data being submitted:", data); // Debug log for submitted data
      
+      // Parse regional agent selection
+      let regionName = "";
+      let agentId = "";
+      
+      // Only set region and agent if regional monitoring is enabled AND an agent is selected (not unassign)
+      if (data.regionalMonitoringEnabled && data.regionalAgent && data.regionalAgent !== "") {
+        const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
+        regionName = parsedRegionName || "";
+        agentId = parsedAgentId || "";
+      }
+      
      // Prepare service data with proper field mapping
      const serviceData = {
        name: data.name,
@@ -106,6 +135,10 @@ export function ServiceForm({
        retries: parseInt(data.retries),
        notificationChannel: data.notificationChannel || undefined,
        alertTemplate: data.alertTemplate || undefined,
+        regionalMonitoringEnabled: data.regionalMonitoringEnabled || false,
+        // Always set region_name and agent_id - empty strings when unassigned
+        regionName: regionName,
+        agentId: agentId,
        // 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
@@ -116,6 +149,8 @@ export function ServiceForm({
          : { url: data.url, domain: "", host: "", port: undefined }  // HTTP: store in url field
        )
      };
+
+      console.log("Service data being sent:", serviceData);
      
      if (isEdit && initialData) {
        // Update existing service
@@ -165,6 +200,11 @@ export function ServiceForm({
            <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">Regional Monitoring</h3>
+            <ServiceRegionalFields form={form} />
+          </div>
          
          <div className="space-y-4">
            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
@@ -0,0 +1,154 @@
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
+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 { regionalService } from "@/services/regionalService";
+import { MapPin, Loader2, X } from "lucide-react";
+
+interface ServiceRegionalFieldsProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
+  const regionalMonitoringEnabled = form.watch("regionalMonitoringEnabled");
+  const currentRegionalAgent = form.watch("regionalAgent");
+
+  const { data: regionalAgents = [], isLoading } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+    enabled: regionalMonitoringEnabled,
+  });
+
+  // Filter only online agents
+  const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+
+  // Find the current agent name for display
+  const getCurrentAgentDisplay = () => {
+    if (!currentRegionalAgent || currentRegionalAgent === "unassign") {
+      return "Select a regional agent or unassign";
+    }
+    
+    const [regionName] = currentRegionalAgent.split("|");
+    const agent = onlineAgents.find(agent => 
+      `${agent.region_name}|${agent.agent_id}` === currentRegionalAgent
+    );
+    
+    if (agent) {
+      return `${agent.region_name} (${agent.agent_ip_address})`;
+    }
+    
+    // If agent is not found in online agents, it might be offline but still assigned
+    return regionName || "Select a regional agent or unassign";
+  };
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={form.control}
+        name="regionalMonitoringEnabled"
+        render={({ field }) => (
+          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <FormLabel className="text-base font-medium flex items-center gap-2">
+                <MapPin className="h-4 w-4" />
+                Regional Monitoring
+              </FormLabel>
+              <div className="text-sm text-muted-foreground">
+                Assign this service to a regional monitoring agent for distributed monitoring
+              </div>
+            </div>
+            <FormControl>
+              <Switch
+                checked={field.value || false}
+                onCheckedChange={field.onChange}
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+
+      {regionalMonitoringEnabled && (
+        <FormField
+          control={form.control}
+          name="regionalAgent"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Regional Agent</FormLabel>
+              <Select 
+                onValueChange={(value) => {
+                  // Handle the unassign case by setting to empty string
+                  field.onChange(value === "unassign" ? "" : value);
+                }} 
+                value={field.value || "unassign"}
+                disabled={isLoading}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder={
+                      isLoading 
+                        ? "Loading agents..." 
+                        : getCurrentAgentDisplay()
+                    } />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {isLoading ? (
+                    <SelectItem value="loading" disabled>
+                      <div className="flex items-center gap-2">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Loading agents...
+                      </div>
+                    </SelectItem>
+                  ) : (
+                    <>
+                      <SelectItem value="unassign">
+                        <div className="flex items-center gap-2">
+                          <X className="h-4 w-4 text-red-500" />
+                          <span className="text-red-600">Unassign (No Regional Agent)</span>
+                        </div>
+                      </SelectItem>
+                      {onlineAgents.length === 0 ? (
+                        <SelectItem value="no-agents" disabled>
+                          No online regional agents available
+                        </SelectItem>
+                      ) : (
+                        onlineAgents.map((agent) => (
+                          <SelectItem key={agent.id} value={`${agent.region_name}|${agent.agent_id}`}>
+                            <div className="flex items-center gap-2">
+                              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                              <span className="font-medium">{agent.region_name}</span>
+                              <span className="text-muted-foreground">({agent.agent_ip_address})</span>
+                            </div>
+                          </SelectItem>
+                        ))
+                      )}
+                    </>
+                  )}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+              {regionalMonitoringEnabled && onlineAgents.length === 0 && !isLoading && (
+                <p className="text-sm text-amber-600">
+                  No online regional agents found. Services will use default monitoring.
+                </p>
+              )}
+              {currentRegionalAgent && currentRegionalAgent !== "" && currentRegionalAgent !== "unassign" && (
+                <p className="text-sm text-green-600">
+                  Currently assigned to: {getCurrentAgentDisplay()}
+                </p>
+              )}
+              {(!currentRegionalAgent || currentRegionalAgent === "" || currentRegionalAgent === "unassign") && (
+                <p className="text-sm text-orange-600">
+                  Service is unassigned and will use default monitoring.
+                </p>
+              )}
+            </FormItem>
+          )}
+        />
+      )}
+    </div>
+  );
+}
@@ -13,6 +13,9 @@ export const serviceSchema = z.object({
  retries: z.string(),
  notificationChannel: z.string().optional(),
  alertTemplate: z.string().optional(),
+  // Regional monitoring fields
+  regionalMonitoringEnabled: z.boolean().optional(),
+  regionalAgent: z.string().optional(),
 });

 export type ServiceFormData = z.infer<typeof serviceSchema>;