feat: Allow multiple selections for regional agents.

- Allow multiple regional agents to be selected in the service dialog form, similar to the notification channels.
2025-07-10 23:06:10 +07:00
parent 7fd6d07c10
commit de79eb963d
6 changed files with 135 additions and 85 deletions
@@ -1,4 +1,3 @@
-
 import { Form } from "@/components/ui/form";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -47,18 +46,18 @@ export function ServiceForm({
      form.reset(formData);

      // Log for debugging
-      console.log("Populating form with data:", { 
-        type: formData.type, 
-        url: formData.url, 
-        port: formData.port, 
-        regionalAgent: formData.regionalAgent,
-        regionalMonitoringEnabled: formData.regionalMonitoringEnabled,
-        regional_status: initialData.regional_status,
-        region_name: initialData.region_name,
-        agent_id: initialData.agent_id,
-        notification_status: initialData.notification_status,
-        notificationChannels: formData.notificationChannels
-      });
+    //  console.log("Populating form with data:", { 
+    //    type: formData.type, 
+    //    url: formData.url, 
+    //    port: formData.port, 
+    //    regionalAgents: formData.regionalAgents,
+    //    regionalMonitoringEnabled: formData.regionalMonitoringEnabled,
+    //    regional_status: initialData.regional_status,
+    //    region_name: initialData.region_name,
+    //    agent_id: initialData.agent_id,
+     //   notification_status: initialData.notification_status,
+     //   notificationChannels: formData.notificationChannels
+    //  });
    }
  }, [initialData, isEdit, form]);

@@ -97,7 +96,7 @@ export function ServiceForm({
        form.reset();
      }
    } catch (error) {
-      console.error(`Error ${isEdit ? 'updating' : 'creating'} service:`, 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.`,
@@ -6,7 +6,9 @@ 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";
+import { MapPin, Loader2, X, Plus } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";

 interface ServiceRegionalFieldsProps {
  form: UseFormReturn<ServiceFormData>;
@@ -14,7 +16,7 @@ interface ServiceRegionalFieldsProps {

 export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
  const regionalMonitoringEnabled = form.watch("regionalMonitoringEnabled");
-  const currentRegionalAgent = form.watch("regionalAgent");
+  const currentRegionalAgents = form.watch("regionalAgents") || [];

  const { data: regionalAgents = [], isLoading } = useQuery({
    queryKey: ['regional-services'],
@@ -27,15 +29,16 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
    agent.connection === 'online' && agent.agent_id !== "1"
  );

-  // Find the current agent name for display
-  const getCurrentAgentDisplay = () => {
-    if (!currentRegionalAgent || currentRegionalAgent === "unassign") {
-      return "Select a regional agent or unassign";
-    }
-    
-    const [regionName, agentId] = currentRegionalAgent.split("|");
+  // Get available agents (not already selected)
+  const availableAgents = onlineAgents.filter(agent => 
+    !currentRegionalAgents.includes(`${agent.region_name}|${agent.agent_id}`)
+  );
+
+  // Get agent display name
+  const getAgentDisplayName = (agentValue: string) => {
+    const [regionName, agentId] = agentValue.split("|");
    const agent = onlineAgents.find(agent => 
-      `${agent.region_name}|${agent.agent_id}` === currentRegionalAgent
+      `${agent.region_name}|${agent.agent_id}` === agentValue
    );
    
    if (agent) {
@@ -43,25 +46,27 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
    }
    
    // If agent is not found in online agents, it might be offline but still assigned
-    // Show the region name from the stored value
    if (regionName && agentId) {
      return `${regionName} (Agent ${agentId}) - Offline`;
    }
    
-    return "Select a regional agent or unassign";
+    return agentValue;
  };

-  // Get the proper select value - handle both assigned and unassigned cases
-  const getSelectValue = () => {
-    if (!regionalMonitoringEnabled) {
-      return "unassign";
+  // Add regional agent
+  const addRegionalAgent = (agentValue: string) => {
+    if (agentValue && agentValue !== "select") {
+      const currentAgents = form.getValues("regionalAgents") || [];
+      if (!currentAgents.includes(agentValue)) {
+        form.setValue("regionalAgents", [...currentAgents, agentValue]);
+      }
    }
-    
-    if (!currentRegionalAgent || currentRegionalAgent === "") {
-      return "unassign";
-    }
-    
-    return currentRegionalAgent;
+  };
+
+  // Remove regional agent
+  const removeRegionalAgent = (agentValue: string) => {
+    const currentAgents = form.getValues("regionalAgents") || [];
+    form.setValue("regionalAgents", currentAgents.filter(agent => agent !== agentValue));
  };

  return (
@@ -77,13 +82,19 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
                Regional Monitoring
              </FormLabel>
              <div className="text-sm text-muted-foreground">
-                Assign this service to a regional monitoring agent for distributed monitoring
+                Assign this service to regional monitoring agents for distributed monitoring
              </div>
            </div>
            <FormControl>
              <Switch
                checked={field.value || false}
-                onCheckedChange={field.onChange}
+                onCheckedChange={(checked) => {
+                  field.onChange(checked);
+                  // Clear agents when disabling regional monitoring
+                  if (!checked) {
+                    form.setValue("regionalAgents", []);
+                  }
+                }}
              />
            </FormControl>
          </FormItem>
@@ -93,16 +104,36 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
      {regionalMonitoringEnabled && (
        <FormField
          control={form.control}
-          name="regionalAgent"
+          name="regionalAgents"
          render={({ field }) => (
            <FormItem>
-              <FormLabel>Regional Agent</FormLabel>
+              <FormLabel>Regional Agents</FormLabel>
+              
+              {/* Display selected agents */}
+              {currentRegionalAgents.length > 0 && (
+                <div className="flex flex-wrap gap-2 mb-3">
+                  {currentRegionalAgents.map((agentValue) => (
+                    <Badge key={agentValue} variant="secondary" className="flex items-center gap-2">
+                      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                      <span className="text-sm">{getAgentDisplayName(agentValue)}</span>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-4 w-4 p-0 ml-1"
+                        onClick={() => removeRegionalAgent(agentValue)}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </Badge>
+                  ))}
+                </div>
+              )}
+
+              {/* Add new agent selector */}
              <Select 
-                onValueChange={(value) => {
-                  // Handle the unassign case by setting to empty string
-                  field.onChange(value === "unassign" ? "" : value);
-                }} 
-                value={getSelectValue()}
+                onValueChange={addRegionalAgent}
+                value="select"
                disabled={isLoading}
              >
                <FormControl>
@@ -110,7 +141,11 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
                    <SelectValue placeholder={
                      isLoading 
                        ? "Loading agents..." 
-                        : getCurrentAgentDisplay()
+                        : availableAgents.length > 0 
+                          ? "Select additional regional agents..."
+                          : currentRegionalAgents.length > 0 
+                            ? "All available agents selected"
+                            : "No regional agents available"
                    } />
                  </SelectTrigger>
                </FormControl>
@@ -122,47 +157,52 @@ export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
                        Loading agents...
                      </div>
                    </SelectItem>
+                  ) : availableAgents.length === 0 ? (
+                    <SelectItem value="no-agents" disabled>
+                      {currentRegionalAgents.length > 0 
+                        ? "All available agents selected"
+                        : "No online regional agents available"
+                      }
+                    </SelectItem>
                  ) : (
                    <>
-                      <SelectItem value="unassign">
+                      <SelectItem value="select" disabled>
                        <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>
+                          <Plus className="h-4 w-4 text-muted-foreground" />
+                          <span className="text-muted-foreground">Select an agent to add...</span>
                        </div>
                      </SelectItem>
-                      {onlineAgents.length === 0 ? (
-                        <SelectItem value="no-agents" disabled>
-                          No online regional agents available
+                      {availableAgents.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>
-                      ) : (
-                        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 !== "" && (
-                <p className="text-sm text-green-600">
-                  Currently assigned to: {getCurrentAgentDisplay()}
+              
+              {currentRegionalAgents.length === 0 && regionalMonitoringEnabled && (
+                <p className="text-sm text-orange-600">
+                  No regional agents selected. Service will use default monitoring.
                </p>
              )}
-              {(!currentRegionalAgent || currentRegionalAgent === "") && regionalMonitoringEnabled && (
-                <p className="text-sm text-orange-600">
-                  Service is unassigned and will use default monitoring.
+              
+              {currentRegionalAgents.length > 0 && (
+                <p className="text-sm text-green-600">
+                  Service assigned to {currentRegionalAgents.length} regional agent{currentRegionalAgents.length > 1 ? 's' : ''}.
                </p>
              )}
            </FormItem>
@@ -13,7 +13,7 @@ export const getServiceFormDefaults = (): ServiceFormData => ({
  notificationChannels: [],
  alertTemplate: "",
  regionalMonitoringEnabled: false,
-  regionalAgent: "",
+  regionalAgents: [],
 });

 export const mapServiceToFormData = (service: Service): ServiceFormData => {
@@ -40,9 +40,12 @@ export const mapServiceToFormData = (service: Service): ServiceFormData => {

  // Handle regional monitoring data - check regional_status field
  const isRegionalEnabled = service.regional_status === "enabled";
-  const regionalAgent = isRegionalEnabled && service.region_name && service.agent_id 
-    ? `${service.region_name}|${service.agent_id}` 
-    : "";
+  const regionalAgents: string[] = [];
+  
+  // For backward compatibility, if there's a single regional agent, add it to the array
+  if (isRegionalEnabled && service.region_name && service.agent_id) {
+    regionalAgents.push(`${service.region_name}|${service.agent_id}`);
+  }

  // Handle notification channels - convert notification_channel and notificationChannel to array
  const notificationChannels: string[] = [];
@@ -62,7 +65,8 @@ export const mapServiceToFormData = (service: Service): ServiceFormData => {
    notification_status: service.notification_status,
    notification_channel: service.notification_channel,
    notificationChannel: service.notificationChannel,
-    mappedChannels: notificationChannels
+    mappedChannels: notificationChannels,
+    regionalAgents: regionalAgents
  });

  return {
@@ -76,21 +80,23 @@ export const mapServiceToFormData = (service: Service): ServiceFormData => {
    notificationChannels: notificationChannels,
    alertTemplate: service.alertTemplate === "default" ? "" : service.alertTemplate || "",
    regionalMonitoringEnabled: isRegionalEnabled,
-    regionalAgent: regionalAgent,
+    regionalAgents: regionalAgents,
  };
 };

 export const mapFormDataToServiceData = (data: ServiceFormData) => {
-  // Parse regional agent selection
+  // Parse regional agent selection - for now, use the first agent for backward compatibility
  let regionName = "";
  let agentId = "";
  let regionalStatus: "enabled" | "disabled" = "disabled";
  
  // Set regional status and agent data based on form values
-  if (data.regionalMonitoringEnabled) {
+  if (data.regionalMonitoringEnabled && data.regionalAgents && data.regionalAgents.length > 0) {
    regionalStatus = "enabled";
-    if (data.regionalAgent && data.regionalAgent !== "") {
-      const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
+    // Use the first agent for backward compatibility with single-agent database schema
+    const firstAgent = data.regionalAgents[0];
+    if (firstAgent && firstAgent !== "") {
+      const [parsedRegionName, parsedAgentId] = firstAgent.split("|");
      regionName = parsedRegionName || "";
      agentId = parsedAgentId || "";
    }
@@ -109,6 +115,10 @@ export const mapFormDataToServiceData = (data: ServiceFormData) => {
    regionalStatus: regionalStatus,
    regionName: regionName,
    agentId: agentId,
+    // Store multiple agents as a comment for future use (when backend supports it)
+    regionalAgentsNote: data.regionalAgents && data.regionalAgents.length > 1 
+      ? `Multiple agents selected: ${data.regionalAgents.join(', ')}` 
+      : 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
@@ -14,9 +14,9 @@ export const serviceSchema = z.object({
  notificationStatus: z.enum(["enabled", "disabled"]).optional(),
  notificationChannels: z.array(z.string()).optional(),
  alertTemplate: z.string().optional(),
-  // Regional monitoring fields
+  // Regional monitoring fields - now supports multiple agents
  regionalMonitoringEnabled: z.boolean().optional(),
-  regionalAgent: z.string().optional(),
+  regionalAgents: z.array(z.string()).optional(),
 });

-export type ServiceFormData = z.infer<typeof serviceSchema>;
+export type ServiceFormData = z.infer<typeof serviceSchema>;
@@ -34,4 +34,4 @@ function Badge({ className, variant, ...props }: BadgeProps) {
  )
 }

-export { Badge, badgeVariants }
+export { Badge, badgeVariants }
@@ -1,3 +1,4 @@
+
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -5,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
@@ -53,4 +54,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"

-export { Button, buttonVariants }
+export { Button, buttonVariants }