454 lines
16 KiB
TypeScript
454 lines
16 KiB
TypeScript
import { Link, useSearchParams } from "react-router-dom";
|
|
import { useEnforcements } from "@/hooks/useEvents";
|
|
import { useEnforcementStream } from "@/hooks/useEnforcementStream";
|
|
import { EnforcementStatus } from "@/api";
|
|
import { useState, useMemo, memo, useCallback, useEffect } from "react";
|
|
import { Search, X } from "lucide-react";
|
|
import MultiSelect from "@/components/common/MultiSelect";
|
|
|
|
// Memoized filter input component to prevent re-render on WebSocket updates
|
|
const FilterInput = memo(
|
|
({
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder: string;
|
|
}) => (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{label}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
),
|
|
);
|
|
|
|
FilterInput.displayName = "FilterInput";
|
|
|
|
// Status options moved outside component to prevent recreation
|
|
const STATUS_OPTIONS = [
|
|
{ value: EnforcementStatus.CREATED, label: "Created" },
|
|
{ value: EnforcementStatus.PROCESSED, label: "Processed" },
|
|
{ value: EnforcementStatus.DISABLED, label: "Disabled" },
|
|
];
|
|
|
|
export default function EnforcementsPage() {
|
|
const [searchParams] = useSearchParams();
|
|
|
|
// Initialize filters from URL query parameters
|
|
const [page, setPage] = useState(1);
|
|
const pageSize = 50;
|
|
const [searchFilters, setSearchFilters] = useState({
|
|
rule: searchParams.get("rule_ref") || "",
|
|
trigger: searchParams.get("trigger_ref") || "",
|
|
event: searchParams.get("event") || "",
|
|
});
|
|
const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
|
|
const status = searchParams.get("status");
|
|
return status ? [status] : [];
|
|
});
|
|
|
|
// Debounced filter state for API calls
|
|
const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
|
|
const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
|
|
|
|
// Debounce filter changes (500ms delay)
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setDebouncedFilters(searchFilters);
|
|
}, 500);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [searchFilters]);
|
|
|
|
// Debounce status changes (300ms delay - shorter since it's a selection)
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setDebouncedStatuses(selectedStatuses);
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [selectedStatuses]);
|
|
|
|
const queryParams = useMemo(() => {
|
|
const params: any = { page, pageSize };
|
|
if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
|
|
if (debouncedFilters.event) {
|
|
const eventId = parseInt(debouncedFilters.event, 10);
|
|
if (!isNaN(eventId)) {
|
|
params.event = eventId;
|
|
}
|
|
}
|
|
|
|
// Include status filter if exactly one status is selected
|
|
// API only supports single status, so we use the first one for filtering
|
|
// and show all results if multiple are selected
|
|
if (debouncedStatuses.length === 1) {
|
|
params.status = debouncedStatuses[0] as EnforcementStatus;
|
|
}
|
|
|
|
return params;
|
|
}, [page, pageSize, debouncedFilters, debouncedStatuses]);
|
|
|
|
const { data, isLoading, error } = useEnforcements(queryParams);
|
|
|
|
// Subscribe to real-time updates for all enforcements
|
|
const { isConnected } = useEnforcementStream({ enabled: true });
|
|
|
|
const enforcements = data?.data || [];
|
|
const total = data?.pagination?.total_items || 0;
|
|
const totalPages = Math.ceil(total / pageSize);
|
|
|
|
// Client-side filtering for multiple status selection and rule_ref (when > 1 status selected)
|
|
const filteredEnforcements = useMemo(() => {
|
|
let filtered = enforcements;
|
|
|
|
// Filter by rule_ref (client-side since API doesn't support it)
|
|
if (debouncedFilters.rule) {
|
|
filtered = filtered.filter((enf: any) =>
|
|
enf.rule_ref
|
|
.toLowerCase()
|
|
.includes(debouncedFilters.rule.toLowerCase()),
|
|
);
|
|
}
|
|
|
|
// If multiple statuses selected, filter client-side
|
|
if (debouncedStatuses.length > 1) {
|
|
filtered = filtered.filter((enf: any) =>
|
|
debouncedStatuses.includes(enf.status),
|
|
);
|
|
}
|
|
|
|
return filtered;
|
|
}, [enforcements, debouncedFilters.rule, debouncedStatuses]);
|
|
|
|
const handleFilterChange = useCallback((field: string, value: string) => {
|
|
setSearchFilters((prev) => ({ ...prev, [field]: value }));
|
|
setPage(1); // Reset to first page on filter change
|
|
}, []);
|
|
|
|
const clearFilters = useCallback(() => {
|
|
setSearchFilters({
|
|
rule: "",
|
|
trigger: "",
|
|
event: "",
|
|
});
|
|
setSelectedStatuses([]);
|
|
setPage(1); // Reset to first page
|
|
}, []);
|
|
|
|
const hasActiveFilters =
|
|
Object.values(searchFilters).some((v) => v !== "") ||
|
|
selectedStatuses.length > 0;
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="p-6">
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
|
<p>Error: {(error as Error).message}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const getStatusColor = (status: EnforcementStatus) => {
|
|
switch (status) {
|
|
case EnforcementStatus.PROCESSED:
|
|
return "bg-green-100 text-green-800";
|
|
case EnforcementStatus.DISABLED:
|
|
return "bg-gray-100 text-gray-800";
|
|
case EnforcementStatus.CREATED:
|
|
return "bg-blue-100 text-blue-800";
|
|
default:
|
|
return "bg-gray-100 text-gray-800";
|
|
}
|
|
};
|
|
|
|
const getConditionBadge = (condition: string) => {
|
|
const colors = {
|
|
all: "bg-purple-100 text-purple-800",
|
|
any: "bg-indigo-100 text-indigo-800",
|
|
};
|
|
return (
|
|
colors[condition as keyof typeof colors] || "bg-gray-100 text-gray-800"
|
|
);
|
|
};
|
|
|
|
const formatTime = (timestamp: string) => {
|
|
const date = new Date(timestamp);
|
|
const now = new Date();
|
|
const diff = now.getTime() - date.getTime();
|
|
|
|
if (diff < 60000) return "just now";
|
|
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
|
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
|
return date.toLocaleDateString();
|
|
};
|
|
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleString();
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Enforcements</h1>
|
|
{isLoading && hasActiveFilters && (
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Searching enforcements...
|
|
</p>
|
|
)}
|
|
</div>
|
|
{isConnected && (
|
|
<div className="flex items-center gap-2 text-sm text-green-600">
|
|
<div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
|
|
<span>Live Updates</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Search Filters */}
|
|
<div className="bg-white shadow rounded-lg p-4 mb-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<Search className="h-5 w-5 text-gray-400" />
|
|
<h2 className="text-lg font-semibold">Filter Enforcements</h2>
|
|
</div>
|
|
{hasActiveFilters && (
|
|
<button
|
|
onClick={clearFilters}
|
|
className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
Clear Filters
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<FilterInput
|
|
label="Rule"
|
|
value={searchFilters.rule}
|
|
onChange={(value) => handleFilterChange("rule", value)}
|
|
placeholder="e.g., core.on_timer"
|
|
/>
|
|
<FilterInput
|
|
label="Trigger"
|
|
value={searchFilters.trigger}
|
|
onChange={(value) => handleFilterChange("trigger", value)}
|
|
placeholder="e.g., core.webhook"
|
|
/>
|
|
<FilterInput
|
|
label="Event ID"
|
|
value={searchFilters.event}
|
|
onChange={(value) => handleFilterChange("event", value)}
|
|
placeholder="e.g., 123"
|
|
/>
|
|
<div>
|
|
<MultiSelect
|
|
label="Status"
|
|
options={STATUS_OPTIONS}
|
|
value={selectedStatuses}
|
|
onChange={setSelectedStatuses}
|
|
placeholder="All Statuses"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{filteredEnforcements.length === 0 ? (
|
|
<div className="bg-white p-12 text-center rounded-lg shadow">
|
|
<p>
|
|
{enforcements.length === 0
|
|
? "No enforcements found"
|
|
: "No enforcements match the selected filters"}
|
|
</p>
|
|
{enforcements.length > 0 && hasActiveFilters && (
|
|
<button
|
|
onClick={clearFilters}
|
|
className="mt-3 text-sm text-blue-600 hover:text-blue-800"
|
|
>
|
|
Clear filters
|
|
</button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="bg-white shadow rounded-lg overflow-hidden">
|
|
<table className="min-w-full">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
ID
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Rule
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Trigger
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Event
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Condition
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Status
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
|
Created
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{filteredEnforcements.map((enforcement: any) => (
|
|
<tr key={enforcement.id} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 font-mono text-sm">
|
|
<Link
|
|
to={`/enforcements/${enforcement.id}`}
|
|
className="text-blue-600 hover:text-blue-800"
|
|
>
|
|
#{enforcement.id}
|
|
</Link>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
{enforcement.rule ? (
|
|
<Link
|
|
to={`/rules/${enforcement.rule}`}
|
|
className="text-sm text-blue-600 hover:text-blue-800"
|
|
>
|
|
{enforcement.rule_ref}
|
|
</Link>
|
|
) : (
|
|
<span className="text-sm text-gray-900">
|
|
{enforcement.rule_ref}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="text-sm text-gray-700">
|
|
{enforcement.trigger_ref}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
{enforcement.event ? (
|
|
<Link
|
|
to={`/events/${enforcement.event}`}
|
|
className="text-sm font-mono text-blue-600 hover:text-blue-800"
|
|
>
|
|
#{enforcement.event}
|
|
</Link>
|
|
) : (
|
|
<span className="text-sm text-gray-400 italic">-</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span
|
|
className={`px-2 py-1 text-xs rounded ${getConditionBadge(enforcement.condition)}`}
|
|
>
|
|
{enforcement.condition}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span
|
|
className={`px-2 py-1 text-xs rounded ${getStatusColor(enforcement.status)}`}
|
|
>
|
|
{enforcement.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="text-sm text-gray-900">
|
|
{formatTime(enforcement.created)}
|
|
</div>
|
|
<div className="text-xs text-gray-500">
|
|
{formatDate(enforcement.created)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
|
|
<div className="flex-1 flex justify-between sm:hidden">
|
|
<button
|
|
onClick={() => setPage(page - 1)}
|
|
disabled={page === 1}
|
|
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={page === totalPages}
|
|
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-700">
|
|
Showing{" "}
|
|
<span className="font-medium">
|
|
{(page - 1) * pageSize + 1}
|
|
</span>{" "}
|
|
to{" "}
|
|
<span className="font-medium">
|
|
{Math.min(page * pageSize, total)}
|
|
</span>{" "}
|
|
of <span className="font-medium">{total}</span> enforcements
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
|
<button
|
|
onClick={() => setPage(page - 1)}
|
|
disabled={page === 1}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={page === totalPages}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Next
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|