{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "rate-limiting-config", "title": "Rate Limiting Config", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/rate-limiting-config/rate-limiting-config.component.ts", "content": "// Cloudflare/Upstash style API rate limiting rules builder and token bucket traffic monitor\n// with 4 health metrics cards, an interactive token bucket vs sliding window simulation\n// slider, and a configured mitigation rules table. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Activity,\n AlertTriangle,\n CheckCircle2,\n Copy,\n Database,\n Edit3,\n LucideAngularModule,\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-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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 type RateLimitAlgorithm = 'token-bucket' | 'sliding-window'\n\nexport interface SimStats {\n allowed: number\n dropped: number\n allowedPct: number\n droppedPct: number\n bucketFill: number\n status: 'optimal' | 'burst' | 'throttling'\n statusLabel: string\n latency: string\n description: string\n}\n\nexport const 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 computeSimStats(algorithm: RateLimitAlgorithm, vol: number): SimStats {\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',\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 return {\n allowed: vol,\n dropped: 0,\n allowedPct: 100,\n droppedPct: 0,\n bucketFill: Math.max(10, Math.round(100 - ((vol - refillRate) / (burstCapacity - refillRate)) * 80)),\n status: 'burst',\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 return {\n allowed,\n dropped,\n allowedPct,\n droppedPct: 100 - allowedPct,\n bucketFill: 0,\n status: 'throttling',\n statusLabel: `Rate Limiting Active · ${100 - allowedPct}% 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 }\n const windowLimit = 120\n if (vol <= windowLimit) {\n return {\n allowed: vol,\n dropped: 0,\n allowedPct: 100,\n droppedPct: 0,\n bucketFill: Math.round((vol / windowLimit) * 100),\n status: 'optimal',\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 }\n const allowed = windowLimit\n const dropped = vol - allowed\n const allowedPct = Math.round((allowed / vol) * 100)\n return {\n allowed,\n dropped,\n allowedPct,\n droppedPct: 100 - allowedPct,\n bucketFill: 100,\n status: 'throttling',\n statusLabel: `Window Saturated · ${100 - allowedPct}% 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@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-rate-limiting-config, [ui-rate-limiting-config]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"rate-limiting-config\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSliderComponent,\n UiSwitchComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n \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
\n
\n Global Protection\n \n {{ globalProtection() ? activeRulesCount() + ' Active Rules' : 'Disabled (Bypassed)' }}\n \n
\n \n
\n \n
\n
\n\n \n
\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
\n

Blocked Attacks

\n
\n \n
\n
\n
\n
1,420 in 24h
\n
\n Tier-1 Edge\n 18 brute-force bursts\n
\n
\n
\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
\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 \n
\n
\n
\n
\n

Algorithm Simulation & Token Dynamics

\n Interactive Sandbox\n
\n

\n Test traffic volume against token reservoir dynamics and rolling time windows.\n

\n
\n
\n Algorithm:\n \n \n \n Token Bucket (Burst Tolerant)\n Sliding Window Counter\n \n \n
\n
\n\n
\n
\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 {{\n algorithm() === 'token-bucket'\n ? 'Deterministic continuous refill into pool'\n : 'Rolling granular sub-window slices'\n }}\n

\n
\n
\n
\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 {{\n algorithm() === 'token-bucket'\n ? 'Pool status: ' + simStats().bucketFill + '% available'\n : 'Window utilized: ' + simStats().bucketFill + '%'\n }}\n

\n
\n
\n
\n
\n
\n
\n 3. Test Traffic Load\n \n
\n
{{ simVolume() }} req/s
\n

Simulated rate generated from slider

\n
\n
\n \n
\n
\n
\n
\n
\n 4. Edge Gate Verdict\n @if (simStats().status === 'optimal') {\n \n } @else if (simStats().status === 'burst') {\n \n } @else {\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 \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 \n {{ simStats().statusLabel }}\n \n
\n {{ simVolume() }} req/s\n
\n
\n
\n
\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
\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

{{ simStats().description }}

\n
\n \n \n \n \n\n \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 \n \n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (rule of filteredRules(); track rule.id) {\n \n \n \n \n \n \n \n \n }\n \n
Rule Name & ScopePath MatcherLimit ThresholdMitigation ActionStatusActions
\n
\n
\n {{ rule.name }}\n
\n
\n {{ rule.scope }}\n ·\n {{ rule.blocked24h }} in 24h\n
\n
\n 		\n
\n {{ rule.method }}\n \n {{ rule.path }}\n \n
\n 		\n
\n
\n {{ rule.limitThreshold }}\n
\n
Triggered {{ rule.lastTriggered }}
\n
\n 		\n \n \n {{ rule.mitigationAction }}\n \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})\nexport class UiRateLimitingConfigComponent {\n protected readonly Activity = Activity\n protected readonly AlertTriangle = AlertTriangle\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly Database = Database\n protected readonly Edit3 = Edit3\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Plus = Plus\n protected readonly RefreshCw = RefreshCw\n protected readonly Search = Search\n protected readonly Shield = Shield\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Sliders = Sliders\n protected readonly Timer = Timer\n protected readonly Trash2 = Trash2\n protected readonly TrendingUp = TrendingUp\n protected readonly Zap = Zap\n protected readonly ZapOff = ZapOff\n\n @Input('class') className?: string\n\n readonly globalProtection = signal(true)\n readonly algorithm = signal('token-bucket')\n readonly simVolume = signal(120)\n readonly searchQuery = signal('')\n readonly rules = signal(INITIAL_RULES.map((r) => ({ ...r })))\n\n readonly activeRulesCount = computed(() => this.rules().filter((r) => r.enabled).length)\n\n readonly filteredRules = computed(() => {\n const q = this.searchQuery().trim().toLowerCase()\n if (!q) return this.rules()\n return this.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 })\n\n readonly simStats = computed(() => computeSimStats(this.algorithm(), this.simVolume()))\n readonly sliderFillPct = computed(() => Math.min(100, Math.round((this.simVolume() / 500) * 100)))\n\n get hostClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n toggleRule(id: string, enabled?: boolean): void {\n this.rules.update((prev) => prev.map((r) => (r.id === id ? { ...r, enabled: enabled ?? !r.enabled } : r)))\n }\n\n setAlgorithm(value: string): void {\n this.algorithm.set(value as RateLimitAlgorithm)\n }\n\n onSimVolumeChange(value: number[]): void {\n if (value[0] !== undefined) this.simVolume.set(value[0])\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/rate-limiting-config/rate-limiting-config.component.ts" }, { "path": "packages/registry-angular/blocks/rate-limiting-config/index.ts", "content": "export {\n UiRateLimitingConfigComponent,\n INITIAL_RULES,\n computeSimStats,\n type RateLimitRule,\n type RateLimitAlgorithm,\n type SimStats,\n} from './rate-limiting-config.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/rate-limiting-config/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/slider.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/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" ] }