Refactor: Separate data display by monitoring source
and Fix: Display data collection in detail page
This commit is contained in:
Tola Leng
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user