{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "usage-metering-dashboard", "title": "Usage Metering Dashboard", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/usage-metering-dashboard/usage-metering-dashboard.component.ts", "content": "// Real-time consumption metering and overage monitoring dashboard: billing cycle\n// tracking with days remaining, 4 resource meter cards with threshold progress bars and\n// projected month-end usage, projected invoice cost summary with overage breakdown,\n// auto-scale overage protection toggle, email alert threshold selector, and recent\n// usage events audit log. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n Activity,\n ArrowDownUp,\n ArrowUpRight,\n Cpu,\n Database,\n LucideAngularModule,\n TriangleAlert,\n Zap,\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 { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.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 UsageEvent {\n id: string\n timestamp: string\n service: string\n description: string\n volume: string\n status: 'warning' | 'normal'\n statusLabel: string\n}\n\nconst events: UsageEvent[] = [\n {\n id: 'evt-1',\n timestamp: 'Aug 18, 2026 14:22',\n service: 'API Gateway',\n description: 'Spike: Batch sync job',\n volume: '+240,000 reqs',\n status: 'warning',\n statusLabel: 'High Spike',\n },\n {\n id: 'evt-2',\n timestamp: 'Aug 17, 2026 09:15',\n service: 'Vector Storage',\n description: 'Index re-indexing & optimization',\n volume: '+12.4 GB',\n status: 'normal',\n statusLabel: 'Normal',\n },\n {\n id: 'evt-3',\n timestamp: 'Aug 16, 2026 22:40',\n service: 'Compute Cluster',\n description: 'Model inference burst job',\n volume: '+85.0 hrs',\n status: 'normal',\n statusLabel: 'Normal',\n },\n {\n id: 'evt-4',\n timestamp: 'Aug 15, 2026 11:05',\n service: 'CDN Edge',\n description: 'Media cache invalidation & egress',\n volume: '+64.2 GB',\n status: 'normal',\n statusLabel: 'Normal',\n },\n {\n id: 'evt-5',\n timestamp: 'Aug 14, 2026 18:30',\n service: 'API Gateway',\n description: 'Webhook delivery retry storm',\n volume: '+180,000 reqs',\n status: 'warning',\n statusLabel: 'High Spike',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-usage-metering-dashboard, [ui-usage-metering-dashboard]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n
\n
\n

Usage & Metering

\n

\n Monitor your organization's resource consumption and billing cycle limits.\n

\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n Current Billing Period\n Scale Plan — $199/mo\n
\n

\n Day 18 of 30 · Current period ends Sep 1, 2026 (12 days remaining)\n

\n
\n
\n
\n Cycle Progress\n 60%\n
\n \n
\n
\n
\n\n
\n
\n
\n
\n
\n \n \n
\n

API Requests

\n
\n \n \n Approaching Limit\n \n
\n
\n
\n
\n
\n 1.84M\n / 2.0M limit\n
\n \n
\n 92% utilized\n 160K remaining\n
\n
\n
\n
\n Projected at month-end:\n 2.15M\n
\n

+150K overage (~$15.00)

\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Compute Hours

\n
\n Healthy\n
\n
\n
\n
\n
\n 420\n / 1,000 hrs limit\n
\n \n
\n 42% utilized\n 580 hrs remaining\n
\n
\n
\n
\n Projected at month-end:\n 700 hrs\n
\n

Within allowance (300 hrs headroom)

\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Vector Storage

\n
\n Healthy\n
\n
\n
\n
\n
\n 78 GB\n / 100 GB limit\n
\n \n
\n 78% utilized\n 22 GB remaining\n
\n
\n
\n
\n Projected at month-end:\n 84 GB\n
\n

Within allowance (16 GB headroom)

\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Bandwidth / Egress

\n
\n Healthy\n
\n
\n
\n
\n
\n 412 GB\n / 500 GB limit\n
\n \n
\n 82.4% utilized\n 88 GB remaining\n
\n
\n
\n
\n Projected at month-end:\n 485 GB\n
\n

Within allowance (15 GB headroom)

\n
\n
\n \n \n\n
\n
\n
\n
\n

Projected Month-End Cost

\n \n \n Overage Projected\n \n
\n

Estimated cycle total factoring base tier and current consumption trajectory.

\n
\n
\n \n
\n

Projected Invoice

\n

$214.00

\n
\n
\n \n Base Plan: $199.00\n \n

+$15.00 overage

\n
\n
\n\n
\n
\n Scale Plan Base Subscription\n $199.00\n
\n
\n
\n API Requests Overage\n 150K @ $0.10 / 1K\n
\n +$15.00\n
\n
\n Compute Hours (1,000 hrs allowance)\n $0.00\n
\n
\n Storage & Egress Bandwidth\n $0.00\n
\n
\n\n
\n\n
\n Next scheduled invoice date\n September 1, 2026\n
\n
\n
\n\n
\n
\n

Overage Protection & Alerts

\n

Configure notifications and automated guardrails before limits are breached.

\n
\n
\n
\n
\n \n

\n Automatically throttle or scale resources to prevent unexpected billing spikes beyond set allowances.\n

\n
\n \n
\n\n
\n\n
\n
\n \n

\n Notify workspace admins when any metric crosses this percentage.\n

\n
\n \n \n \n 80% of limit\n 90% of limit\n 100% of limit\n \n \n
\n\n
\n\n
\n
\n Hard Spending Cap\n $300.00 / mo\n
\n
\n Recipients\n billing-alerts@acme.corp\n
\n
\n
\n
\n \n\n
\n
\n
\n
\n

Recent Usage Events

\n

\n High-volume consumption spikes and automated resource scaling events this cycle.\n

\n
\n 5 events logged\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n @for (event of usageEvents; track event.id) {\n \n \n \n \n \n {{ event.volume }}\n \n \n \n }\n \n
TimestampServiceEvent DescriptionVolumeStatus
\n {{ event.timestamp }}\n \n {{ event.service }}\n {{ event.description }}\n \n {{ event.statusLabel }}\n \n
\n
\n
\n
\n \n `,\n})\nexport class UiUsageMeteringDashboardComponent {\n protected readonly Activity = Activity\n protected readonly ArrowDownUp = ArrowDownUp\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Cpu = Cpu\n protected readonly Database = Database\n protected readonly TriangleAlert = TriangleAlert\n protected readonly Zap = Zap\n\n protected readonly usageEvents = events\n\n @Input('class') className?: string\n @Input() set initialAutoScaleProtection(v: boolean | undefined) {\n if (v !== undefined) this.autoScaleProtection.set(v)\n }\n @Input() set initialAlertThreshold(v: string | undefined) {\n if (v) this.alertThreshold.set(v)\n }\n\n readonly autoScaleProtection = signal(true)\n readonly alertThreshold = signal('90')\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/usage-metering-dashboard/usage-metering-dashboard.component.ts" }, { "path": "packages/registry-angular/blocks/usage-metering-dashboard/index.ts", "content": "export { UiUsageMeteringDashboardComponent, type UsageEvent } from './usage-metering-dashboard.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/usage-metering-dashboard/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/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Real-time consumption metering and overage monitoring dashboard: billing cycle tracking with days remaining, 4 key resource meter cards (API requests, compute hours, vector storage, bandwidth) with color-shifting threshold progress bars and projected month-end usage, projected invoice cost summary with overage breakdown, auto-scale overage protection toggle, email alert threshold selector, and recent usage events audit log.", "categories": [ "finance", "billing", "app" ] }