/** * Routing Rules View * Main orchestrator component for routing rules management */ import { RbacOperation, RbacResource, useRbac } from "@/app/_fallbacks/enterprise/lib/contexts/rbacContext"; import { Button } from "@/components/ui/button"; import { useDebouncedValue } from "@/hooks/useDebounce"; import { useGetRoutingRulesQuery } from "@/lib/store/apis/routingRulesApi"; import { RoutingRule } from "@/lib/types/routingRules"; import { GitBranch, Plus } from "lucide-react"; import { Link } from "@tanstack/react-router"; import { useEffect, useState } from "react"; import { RoutingRuleInfoSheet } from "./routingRuleInfoSheet"; import { RoutingRuleSheet } from "./routingRuleSheet"; import { RoutingRulesEmptyState } from "./routingRulesEmptyState"; import { RoutingRulesTable } from "./routingRulesTable"; const POLLING_INTERVAL = 5000; const PAGE_SIZE = 25; export function RoutingRulesView() { const [dialogOpen, setDialogOpen] = useState(false); const [editingRule, setEditingRule] = useState(null); const [infoSheetOpen, setInfoSheetOpen] = useState(false); const [selectedRule, setSelectedRule] = useState(null); const [search, setSearch] = useState(""); const [offset, setOffset] = useState(0); const debouncedSearch = useDebouncedValue(search, 300); // Reset to first page when search changes useEffect(() => { setOffset(0); }, [debouncedSearch]); // Permissions const canCreate = useRbac(RbacResource.RoutingRules, RbacOperation.Create); const canDelete = useRbac(RbacResource.RoutingRules, RbacOperation.Delete); // API const { data: rulesData, isLoading } = useGetRoutingRulesQuery( { limit: PAGE_SIZE, offset, search: debouncedSearch || undefined, }, { pollingInterval: POLLING_INTERVAL, }, ); const rules = rulesData?.rules || []; const totalCount = rulesData?.total_count || 0; // Snap offset back when total shrinks past current page (e.g. delete last item on last page) useEffect(() => { if (!rulesData || offset < totalCount) return; setOffset(totalCount === 0 ? 0 : Math.floor((totalCount - 1) / PAGE_SIZE) * PAGE_SIZE); }, [totalCount, offset]); const handleCreateNew = () => { setEditingRule(null); setDialogOpen(true); }; const handleEdit = (rule: RoutingRule) => { setEditingRule(rule); setDialogOpen(true); }; const handleRowClick = (rule: RoutingRule) => { setSelectedRule(rule); setInfoSheetOpen(true); }; const handleDialogOpenChange = (open: boolean) => { setDialogOpen(open); if (!open) { setEditingRule(null); } }; const hasActiveFilters = debouncedSearch; // True empty state: no rules at all (not just filtered to zero) if (!isLoading && totalCount === 0 && !hasActiveFilters) { return ( <> ); } return (
{/* Header */}

Routing Rules

Manage CEL-based routing rules for intelligent request routing across providers

{canCreate && ( )}
); }