{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "rate-limiting-config", "title": "Rate Limiting Config", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/rate-limiting-config/RateLimitingConfig.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n AlertTriangle,\n CheckCircle2,\n Copy,\n Database,\n Edit3,\n MoreHorizontal,\n Plus,\n RefreshCw,\n Search,\n Shield,\n ShieldAlert,\n ShieldCheck,\n Sliders,\n Timer,\n Trash2,\n TrendingUp,\n Zap,\n ZapOff,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface RateLimitRule {\n id: string\n name: string\n scope: string\n path: string\n method: string\n limitThreshold: string\n mitigationAction: 'HTTP 429 Too Many Requests' | 'CAPTCHA Challenge' | 'Block IP'\n actionVariant: 'warning' | 'secondary' | 'destructive'\n enabled: boolean\n lastTriggered: string\n blocked24h: string\n}\n\nexport interface RateLimitingConfigProps {\n className?: string\n}\n\nconst INITIAL_RULES: RateLimitRule[] = [\n {\n id: 'rule-auth-bruteforce',\n name: 'auth-endpoint-bruteforce',\n scope: 'Login & SSO token issuance',\n path: '/api/v1/auth/*',\n method: 'POST',\n limitThreshold: '100 req / 60s per IP',\n mitigationAction: 'HTTP 429 Too Many Requests',\n actionVariant: 'warning',\n enabled: true,\n lastTriggered: '2 mins ago',\n blocked24h: '842 blocks',\n },\n {\n id: 'rule-public-unauth',\n name: 'public-api-v1-unauthenticated',\n scope: 'Anonymous REST endpoints',\n path: '/api/v1/public/*',\n method: 'GET, POST',\n limitThreshold: '300 req / 60s per IP',\n mitigationAction: 'CAPTCHA Challenge',\n actionVariant: 'secondary',\n enabled: true,\n lastTriggered: '14 mins ago',\n blocked24h: '412 challenges',\n },\n {\n id: 'rule-ai-inference',\n name: 'ai-inference-tier-standard',\n scope: 'LLM completions & embeddings',\n path: '/api/v1/models/generate',\n method: 'POST',\n limitThreshold: '20 req / 60s per API Key',\n mitigationAction: 'HTTP 429 Too Many Requests',\n actionVariant: 'warning',\n enabled: true,\n lastTriggered: '1 hour ago',\n blocked24h: '148 throttled',\n },\n {\n id: 'rule-search-cluster',\n name: 'search-endpoints',\n scope: 'Vector & fuzzy full-text query',\n path: '/api/v1/search/*',\n method: 'GET',\n limitThreshold: '60 req / 60s per IP',\n mitigationAction: 'Block IP',\n actionVariant: 'destructive',\n enabled: false,\n lastTriggered: '3 days ago',\n blocked24h: '18 blocks',\n },\n]\n\nexport function RateLimitingConfig({ className }: RateLimitingConfigProps) {\n const [globalProtection, setGlobalProtection] = React.useState(true)\n const [algorithm, setAlgorithm] = React.useState<'token-bucket' | 'sliding-window'>('token-bucket')\n const [simVolume, setSimVolume] = React.useState(120)\n const [searchQuery, setSearchQuery] = React.useState('')\n const [rules, setRules] = React.useState(INITIAL_RULES)\n\n const toggleRule = React.useCallback((id: string) => {\n setRules((prev) => prev.map((r) => (r.id === id ? { ...r, enabled: !r.enabled } : r)))\n }, [])\n\n const activeRulesCount = React.useMemo(() => rules.filter((r) => r.enabled).length, [rules])\n\n const filteredRules = React.useMemo(() => {\n if (!searchQuery.trim()) return rules\n const q = searchQuery.toLowerCase()\n return rules.filter(\n (r) =>\n r.name.toLowerCase().includes(q) ||\n r.path.toLowerCase().includes(q) ||\n r.scope.toLowerCase().includes(q) ||\n r.mitigationAction.toLowerCase().includes(q),\n )\n }, [rules, searchQuery])\n\n const simStats = React.useMemo(() => {\n const vol = simVolume\n if (algorithm === 'token-bucket') {\n const refillRate = 50\n const burstCapacity = 100\n if (vol <= refillRate) {\n return {\n allowed: vol,\n dropped: 0,\n allowedPct: 100,\n droppedPct: 0,\n bucketFill: Math.round(100 - (vol / refillRate) * 20),\n status: 'optimal' as const,\n statusLabel: 'Optimal Throughput · No Throttling',\n latency: '0.35ms',\n description: `Traffic volume (${vol} req/s) is well within the 50 req/s continuous refill capacity. 100% of requests pass with zero drop rate.`,\n }\n } else if (vol <= burstCapacity) {\n const drop = 0\n return {\n allowed: vol,\n dropped: drop,\n allowedPct: 100,\n droppedPct: 0,\n bucketFill: Math.max(10, Math.round(100 - ((vol - refillRate) / (burstCapacity - refillRate)) * 80)),\n status: 'burst' as const,\n statusLabel: 'Consuming Burst Pool · 0% Dropped',\n latency: '0.42ms',\n description: `Traffic exceeds the 50 req/s replenishment rate. Tokens are being drawn from the 100-token burst reservoir. Zero requests dropped so far.`,\n }\n } else {\n const allowed = burstCapacity\n const dropped = vol - allowed\n const allowedPct = Math.round((allowed / vol) * 100)\n const droppedPct = 100 - allowedPct\n return {\n allowed,\n dropped,\n allowedPct,\n droppedPct,\n bucketFill: 0,\n status: 'throttling' as const,\n statusLabel: `Rate Limiting Active · ${droppedPct}% Dropped`,\n latency: '0.51ms',\n description: `Burst reservoir exhausted. Token bucket limiter is actively enforcing HTTP 429 throttling on ${dropped} req/s excess traffic.`,\n }\n }\n } else {\n // Sliding window mode\n const windowLimit = 120\n if (vol <= windowLimit) {\n const allowedPct = 100\n return {\n allowed: vol,\n dropped: 0,\n allowedPct,\n droppedPct: 0,\n bucketFill: Math.round((vol / windowLimit) * 100),\n status: 'optimal' as const,\n statusLabel: 'Within Sliding Window Quota',\n latency: '0.38ms',\n description: `Current 60-second rolling window is ${Math.round((vol / windowLimit) * 100)}% utilized. No mitigation actions triggered.`,\n }\n } else {\n const allowed = windowLimit\n const dropped = vol - allowed\n const allowedPct = Math.round((allowed / vol) * 100)\n const droppedPct = 100 - allowedPct\n return {\n allowed,\n dropped,\n allowedPct,\n droppedPct,\n bucketFill: 100,\n status: 'throttling' as const,\n statusLabel: `Window Saturated · ${droppedPct}% Shed`,\n latency: '0.48ms',\n description: `Rolling time-window threshold exceeded (${vol} req/s > ${windowLimit} limit). Excess requests are rejected at edge proxy.`,\n }\n }\n }\n }, [simVolume, algorithm])\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n \n \n Edge Protection\n \n Cloudflare & Upstash compatible\n
\n

\n Rate Limiting & Traffic Protection\n

\n

\n Configure DDoS mitigation, IP throttling, and per-tier request quotas.\n

\n
\n\n {/* Header Controls */}\n
\n
\n
\n Global Protection\n \n {globalProtection ? `${activeRulesCount} Active Rules` : 'Disabled (Bypassed)'}\n \n
\n \n
\n\n \n
\n
\n\n {/* 4 Health Cards */}\n
\n {/* Card 1: Total Requests */}\n \n \n Total Requests / min\n
\n \n
\n \n \n
4,250 req/s
\n
\n \n \n +12.4%\n \n 255.0k / min · 99.98% ok\n
\n \n \n\n {/* Card 2: Blocked Attacks */}\n \n \n Blocked Attacks\n
\n \n
\n \n \n
1,420 in 24h
\n
\n \n Tier-1 Edge\n \n 18 brute-force bursts\n
\n \n \n\n {/* Card 3: Active Throttles */}\n \n \n Active Throttles\n
\n \n
\n \n \n
18 IPs
\n
\n \n 4 edge clusters · Exp 15m\n
\n \n \n\n {/* Card 4: Median Latency Overhead */}\n \n \n Median Latency Overhead\n
\n \n
\n \n \n
0.4ms
\n
\n p99 < 1.2ms · Multi-Region Redis\n
\n \n \n
\n\n {/* Interactive Token Bucket Visualizer */}\n \n \n
\n
\n Algorithm Simulation & Token Dynamics\n \n Interactive Sandbox\n \n
\n \n Test traffic volume against token reservoir dynamics and rolling time windows.\n \n
\n\n {/* Algorithm Selector */}\n
\n Algorithm:\n \n
\n \n\n \n {/* Visual Algorithm Diagram / Pipeline */}\n
\n {/* Step 1 */}\n
\n
\n
\n \n {algorithm === 'token-bucket' ? '1. Refill Velocity' : '1. Time Window'}\n \n \n
\n
\n {algorithm === 'token-bucket' ? '50 tokens / s' : '60s Window'}\n
\n

\n {algorithm === 'token-bucket'\n ? 'Deterministic continuous refill into pool'\n : 'Rolling granular sub-window slices'}\n

\n
\n
\n \n
\n
\n\n {/* Step 2 */}\n
\n
\n
\n \n {algorithm === 'token-bucket' ? '2. Reservoir Capacity' : '2. Window Ceiling'}\n \n \n
\n
\n {algorithm === 'token-bucket' ? '100 tokens max' : '120 req / window'}\n
\n

\n {algorithm === 'token-bucket'\n ? `Pool status: ${simStats.bucketFill}% available`\n : `Window utilized: ${simStats.bucketFill}%`}\n

\n
\n
\n \n
\n
\n\n {/* Step 3 */}\n
\n
\n
\n \n 3. Test Traffic Load\n \n \n
\n
{simVolume} req/s
\n

Simulated rate generated from slider

\n
\n
\n \n
\n
\n\n {/* Step 4 */}\n
\n
\n
\n \n 4. Edge Gate Verdict\n \n {simStats.status === 'optimal' ? (\n \n ) : simStats.status === 'burst' ? (\n \n ) : (\n \n )}\n
\n
\n {simStats.allowed} Pass · {simStats.dropped} Drop\n
\n

Overhead: {simStats.latency}

\n
\n
\n
\n \n \n
\n
\n
\n
\n\n {/* Interactive Simulator Slider Box */}\n
\n
\n
\n
\n \n Simulate Incoming Request Volume\n
\n

\n Drag the slider to stress-test the algorithm against burst spikes and DDoS loads.\n

\n
\n\n {/* Current Rate Pill */}\n
\n \n {simStats.statusLabel}\n \n
\n {simVolume} req/s\n
\n
\n
\n\n {/* Slider */}\n
\n setSimVolume(val[0] ?? 120)}\n min={10}\n max={500}\n step={10}\n className=\"w-full\"\n />\n
\n 10 req/s (Low)\n 50 req/s (Refill Rate)\n 100 req/s (Burst Limit)\n 250 req/s (Heavy Spike)\n 500 req/s (DDoS Attack)\n
\n
\n\n {/* Simulation Visual Metrics & Split Bar */}\n
\n {/* Split Bar */}\n
\n
\n \n \n Allowed: {simStats.allowed} req/s ({simStats.allowedPct}%)\n \n \n \n Rate Limited / 429: {simStats.dropped} req/s ({simStats.droppedPct}%)\n \n
\n\n
\n \n \n
\n
\n\n {/* Simulation Summary Description */}\n
\n \n

{simStats.description}

\n
\n
\n
\n \n \n\n {/* Configured Rules Table Card */}\n \n \n
\n
\n Configured Rate Limiting Rules\n \n {filteredRules.length} Policies\n \n
\n \n Priority-ordered edge firewall rules evaluated sequentially for incoming traffic.\n \n
\n\n {/* Filter Search Bar */}\n
\n \n setSearchQuery(e.target.value)}\n type=\"text\"\n placeholder=\"Search rules, paths, actions…\"\n className=\"border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:border-ring h-8.5 w-full rounded-md border pr-3 pl-8 text-xs shadow-xs outline-none focus-visible:ring-[3px]\"\n />\n
\n \n\n \n
\n \n \n \n Rule Name & Scope\n Path Matcher\n Limit Threshold\n Mitigation Action\n Status\n Actions\n \n \n \n {filteredRules.map((rule) => (\n \n {/* Rule Name & Scope */}\n \n
\n
\n {rule.name}\n
\n
\n {rule.scope}\n ·\n {rule.blocked24h} in 24h\n
\n
\n \n\n {/* Path Matcher */}\n \n
\n \n {rule.method}\n \n \n {rule.path}\n \n
\n \n\n {/* Limit Threshold */}\n \n
\n
\n {rule.limitThreshold}\n
\n
Triggered {rule.lastTriggered}
\n
\n \n\n {/* Mitigation Action Badge */}\n \n \n \n {rule.mitigationAction}\n \n \n\n {/* Status Switch */}\n \n toggleRule(rule.id)} />\n \n\n {/* Actions Dropdown */}\n \n \n \n \n \n \n Rule Configuration\n \n \n Edit Rule\n \n \n \n View Metrics\n \n \n \n Duplicate Rule\n \n \n \n \n Delete Rule\n \n \n \n \n \n ))}\n \n
\n
\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/RateLimitingConfig.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/slider.json", "https://uipkge.dev/r/react/switch.json", "https://uipkge.dev/r/react/table.json" ], "description": "Cloudflare/Upstash style API rate limiting rules builder and token bucket traffic monitor with 4 health metrics cards, interactive token bucket vs sliding window simulation slider, and configured mitigation rules table with status controls and contextual action menus.", "categories": [ "devops", "app", "dashboard" ] }