{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "kafka-stream-monitor", "title": "Kafka Stream Monitor", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/kafka-stream-monitor/kafka-stream-monitor.component.ts", "content": "// Apache Kafka topic stream telemetry dashboard: partition offset monitor, leader broker\n// distribution, consumer group lag tracker, and real-time message payload inspector with\n// deserialized JSON viewer. Port of the React block 1:1 (sample data, copy, filters).\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Activity,\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronRight,\n Copy,\n Filter,\n Gauge,\n HardDrive,\n Layers,\n LucideAngularModule,\n Pause,\n Play,\n PlusCircle,\n Radio,\n RotateCcw,\n Search,\n ShieldCheck,\n Terminal,\n Trash2,\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 { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface KafkaStreamMessage {\n id: string\n offset: number\n partition: number\n key: string\n timestamp: string\n eventType: string\n sizeBytes: number\n schemaId: number\n traceId: string\n payload: Record\n}\n\nexport interface PartitionTelemetryRow {\n partitionId: number\n leaderBroker: string\n rack: string\n logEndOffset: number\n consumerOffset: number\n lag: number\n messageRate: string\n isrCount: number\n replicasCount: number\n status: 'healthy' | 'warning'\n}\n\nconst defaultPartitions: PartitionTelemetryRow[] = [\n {\n partitionId: 0,\n leaderBroker: 'Broker #102',\n rack: 'us-east-1a',\n logEndOffset: 1482910,\n consumerOffset: 1482910,\n lag: 0,\n messageRate: '1.2k msg/s',\n isrCount: 3,\n replicasCount: 3,\n status: 'healthy',\n },\n {\n partitionId: 1,\n leaderBroker: 'Broker #103',\n rack: 'us-east-1b',\n logEndOffset: 1482884,\n consumerOffset: 1482884,\n lag: 0,\n messageRate: '1.1k msg/s',\n isrCount: 3,\n replicasCount: 3,\n status: 'healthy',\n },\n {\n partitionId: 2,\n leaderBroker: 'Broker #101',\n rack: 'us-east-1c',\n logEndOffset: 1482905,\n consumerOffset: 1482905,\n lag: 0,\n messageRate: '1.4k msg/s',\n isrCount: 3,\n replicasCount: 3,\n status: 'healthy',\n },\n {\n partitionId: 3,\n leaderBroker: 'Broker #104',\n rack: 'us-east-1a',\n logEndOffset: 1482872,\n consumerOffset: 1482872,\n lag: 0,\n messageRate: '1.2k msg/s',\n isrCount: 3,\n replicasCount: 3,\n status: 'healthy',\n },\n]\n\nconst defaultMessages: KafkaStreamMessage[] = [\n {\n id: 'msg-1482910',\n offset: 1482910,\n partition: 0,\n key: 'cust_99201a',\n timestamp: '2026-08-21 14:32:05.812 UTC',\n eventType: 'checkout.order_completed',\n sizeBytes: 1420,\n schemaId: 104,\n traceId: '00-4bf92f3577b34da6a3ce929d0e0e4736',\n payload: {\n order_id: 'ord_9920184a',\n customer_id: 'cust_99201a',\n checkout_session: 'cs_live_992019482',\n currency: 'USD',\n total_amount: 349.5,\n item_count: 3,\n items: [\n { sku: 'SKU-PRO-4K', name: 'UltraHD Pro Monitor 32-inch', qty: 1, price: 299.0 },\n { sku: 'SKU-USB-C-2M', name: 'Braided Thunderbolt 4 Cable 2m', qty: 2, price: 25.25 },\n ],\n payment_status: 'authorized',\n fraud_risk_score: 0.02,\n shipping_destination: 'US-CA-94105',\n produced_at_epoch_ms: 1787322725812,\n },\n },\n {\n id: 'msg-1482909',\n offset: 1482909,\n partition: 2,\n key: 'cust_88301b',\n timestamp: '2026-08-21 14:31:58.240 UTC',\n eventType: 'checkout.payment_authorized',\n sizeBytes: 890,\n schemaId: 104,\n traceId: '00-7c201a9981f34ec189aa1029481920aa',\n payload: {\n transaction_id: 'txn_8830192b',\n customer_id: 'cust_88301b',\n payment_provider: 'stripe_us_direct',\n amount: 129.0,\n currency: 'USD',\n card_brand: 'visa',\n last4: '4242',\n avs_check: 'matched',\n cvv_check: 'matched',\n '3ds_authenticated': true,\n latency_ms: 142,\n },\n },\n {\n id: 'msg-1482908',\n offset: 1482908,\n partition: 1,\n key: 'cust_44109c',\n timestamp: '2026-08-21 14:31:44.102 UTC',\n eventType: 'checkout.cart_updated',\n sizeBytes: 1150,\n schemaId: 104,\n traceId: '00-11209e8832a44bb0902188492019ab23',\n payload: {\n cart_id: 'cart_4410912c',\n customer_id: 'cust_44109c',\n action: 'item_added',\n sku: 'SKU-MECH-KEYBOARD',\n name: 'Custom Wireless Mechanical Keyboard',\n quantity: 1,\n unit_price: 189.0,\n applied_promo_code: 'DEVCON2026',\n discount_amount: 18.9,\n cart_subtotal: 170.1,\n },\n },\n {\n id: 'msg-1482907',\n offset: 1482907,\n partition: 3,\n key: 'cust_11094d',\n timestamp: '2026-08-21 14:31:22.955 UTC',\n eventType: 'checkout.shipping_calculated',\n sizeBytes: 760,\n schemaId: 104,\n traceId: '00-66a9104882194cc2810992384719bb81',\n payload: {\n quote_id: 'shp_1109482d',\n customer_id: 'cust_11094d',\n carrier: 'FedEx Express',\n service_tier: 'Priority Overnight',\n estimated_delivery: '2026-08-22T10:30:00Z',\n rate_usd: 24.5,\n origin_postal: '94105',\n destination_postal: '10001',\n weight_kg: 1.85,\n },\n },\n {\n id: 'msg-1482906',\n offset: 1482906,\n partition: 0,\n key: 'cust_77210e',\n timestamp: '2026-08-21 14:31:05.419 UTC',\n eventType: 'checkout.address_validated',\n sizeBytes: 640,\n schemaId: 104,\n traceId: '00-559012bb99304ff091920394881029cc',\n payload: {\n validation_id: 'val_7721098e',\n customer_id: 'cust_77210e',\n country: 'US',\n state: 'CA',\n city: 'San Francisco',\n postal_code: '94107',\n is_residential: true,\n standardized: true,\n dpv_match: 'Y',\n service: 'smartystreets_v2',\n },\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-kafka-stream-monitor, [ui-kafka-stream-monitor]',\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 UiInputComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n \n
\n
\n production-kafka-us-east-1\n /\n

\n events.customer.checkout_v2\n

\n
\n \n \n \n \n \n Healthy · Zero Consumer Lag\n \n
\n

\n 12 Partitions · Replication Factor: 3 · min.insync.replicas: 2 · Cleanup Policy: delete,compact\n

\n
\n\n
\n \n \n
\n
\n\n \n @if (produceNotice()) {\n \n
\n \n {{ produceNotice() }}\n
\n Offset Ack: OK (2ms)\n
\n }\n\n \n
\n
\n
\n
\n
\n \n \n
\n

Message Inflow Rate

\n
\n +5.8% 1h\n
\n
\n
\n
\n
14,250 msgs/sec
\n

2.4 MB/s throughput

\n
\n
\n
\n Ingress Bandwidth\n 48% of cap\n
\n \n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Consumer Group Lag

\n
\n Real-time\n
\n
\n
\n
\n
0 messages lag
\n

across 4 consumer groups

\n
\n
\n
\n Processing Drift\n 0 ms lag\n
\n \n
\n
\n \n\n
\n
\n
\n
\n \n \n
\n

Total Retention

\n
\n 7 Days\n
\n
\n
\n
\n
480 GB total footprint
\n

40 GB avg / partition

\n
\n
\n
\n Disk Footprint\n 480 GB / 1.0 TB\n
\n \n
\n
\n \n\n
\n
\n
\n
\n \n \n
\n

Under-Replicated

\n
\n In-Sync\n
\n
\n
\n
\n
0 / 12 Partitions
\n

All 36 replicas fully in-sync (ISR)

\n
\n
\n
\n Replication Health\n 100% ISR\n
\n \n
\n
\n \n \n\n \n
\n
\n
\n
\n

Partitions & Offset Distribution

\n

\n Per-partition log high-water marks, consumer group commitments, and leader broker assignments.\n

\n
\n \n Showing 4 of 12 Partitions\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (partition of partitions(); track partition.partitionId) {\n \n \n \n \n \n \n \n \n \n }\n \n
Partition IDLeader BrokerLog End OffsetConsumer OffsetLagMessage RateReplicas (ISR)
\n
\n \n Partition {{ partition.partitionId }}\n
\n 		\n
\n {{ partition.leaderBroker }}\n ({{ partition.rack }})\n
\n 		\n {{ partition.logEndOffset.toLocaleString() }}\n \n {{ partition.consumerOffset.toLocaleString() }}\n \n {{ partition.lag }}\n \n {{ partition.messageRate }}\n \n \n {{ partition.isrCount }} / {{ partition.replicasCount }} In-Sync\n \n
\n
\n
\n
\n\n \n
\n
\n
\n
\n \n \n \n
\n
\n Live Message Stream Inspector\n @if (!isPaused()) {\n \n \n \n \n \n Streaming\n
\n } @else {\n \n \n Paused\n
\n }\n
\n
\n\n
\n \n @if (allExpanded()) {\n \n } @else {\n \n }\n {{ allExpanded() ? 'Collapse All' : 'Expand All' }}\n \n \n \n \n Clear\n \n
\n \n\n
\n
\n \n \n
\n
\n \n \n Partition:\n \n \n @for (p of partitionIds; track p) {\n \n }\n
\n
\n\n
\n @if (filteredMessages().length === 0) {\n
\n
\n \n
\n
\n

No messages found

\n

\n {{\n messages().length === 0\n ? 'Message buffer was cleared. Reset to restore sample messages or produce a test event.'\n : 'Try clearing the search query or changing partition filter.'\n }}\n

\n
\n \n
\n } @else {\n
\n\n @if (expandedOffsets()[msg.offset]) {\n
\n
\n \n
\n Trace ID:\n {{ msg.traceId }}\n
\n
\n Format:\n json+avro\n
\n
\n \n \n
\n \n deserialized_payload.json\n
\n \n @if (copiedId() === msg.id) {\n \n } @else {\n \n }\n {{ copiedId() === msg.id ? 'Copied' : 'Copy JSON' }}\n \n
\n {{ stringify(msg.payload) }}\n \n \n \n }\n \n }\n \n }\n \n\n \n
\n
\n \n Rate:\n {{ isPaused() ? '0 msg/s (Paused)' : '14,250 msgs/sec' }}\n
\n \n
\n \n Buffer:\n {{ filteredMessages().length }} / {{ messages().length }} cached\n
\n \n
\n \n Avg Latency:\n 1.8ms\n
\n
\n
\n \n SASL_SSL · LZ4 Compression · Schema Registry OK\n
\n \n \n \n `,\n})\nexport class UiKafkaStreamMonitorComponent {\n protected readonly Activity = Activity\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronRight = ChevronRight\n protected readonly Copy = Copy\n protected readonly Filter = Filter\n protected readonly Gauge = Gauge\n protected readonly HardDrive = HardDrive\n protected readonly Layers = Layers\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly PlusCircle = PlusCircle\n protected readonly Radio = Radio\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Terminal = Terminal\n protected readonly Trash2 = Trash2\n protected readonly Zap = Zap\n\n protected readonly partitionIds = [0, 1, 2, 3]\n\n @Input() set initialMessages(v: KafkaStreamMessage[] | undefined) {\n if (v) this.messages.set([...v])\n }\n @Input() set initialPartition(v: number | 'all') {\n this.selectedPartition.set(v ?? 'all')\n }\n @Input() set initialSearch(v: string) {\n this.searchQuery.set(v ?? '')\n }\n @Input('class') className?: string\n\n readonly partitions = signal([...defaultPartitions])\n readonly messages = signal([...defaultMessages])\n readonly isPaused = signal(false)\n readonly selectedPartition = signal('all')\n readonly searchQuery = signal('')\n readonly expandedOffsets = signal>({ 1482910: true })\n readonly copiedId = signal(null)\n readonly produceNotice = signal(null)\n private nextOffset = 1482911\n private copyTimer: ReturnType | undefined\n private noticeTimer: ReturnType | undefined\n\n readonly filteredMessages = computed(() => {\n const selected = this.selectedPartition()\n const q = this.searchQuery().trim().toLowerCase()\n return this.messages().filter((msg) => {\n if (selected !== 'all' && msg.partition !== selected) return false\n if (!q) return true\n return (\n msg.key.toLowerCase().includes(q) ||\n msg.eventType.toLowerCase().includes(q) ||\n msg.offset.toString().includes(q) ||\n msg.partition.toString().includes(q) ||\n JSON.stringify(msg.payload).toLowerCase().includes(q)\n )\n })\n })\n\n readonly allExpanded = computed(() => {\n const list = this.filteredMessages()\n return list.length > 0 && list.every((m) => this.expandedOffsets()[m.offset])\n })\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n partitionPillClass(p: number | 'all'): string {\n const active = this.selectedPartition() === p\n return cn(\n 'focus-visible:ring-ring inline-flex h-7 items-center rounded-md border px-2.5 font-mono text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n active\n ? 'border-primary bg-primary text-primary-foreground shadow-xs'\n : 'border-border bg-card text-muted-foreground hover:bg-accent hover:text-foreground',\n )\n }\n\n rowClass(offset: number): string {\n return cn('group transition-colors', this.expandedOffsets()[offset] ? 'bg-muted/30' : 'hover:bg-muted/20')\n }\n\n stringify(payload: Record): string {\n return JSON.stringify(payload, null, 2)\n }\n\n formatBytes(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`\n return `${(bytes / 1024).toFixed(1)} KB`\n }\n\n togglePause(): void {\n this.isPaused.update((v) => !v)\n }\n\n toggleExpand(offset: number): void {\n this.expandedOffsets.update((prev) => ({ ...prev, [offset]: !prev[offset] }))\n }\n\n toggleExpandKey(e: KeyboardEvent, offset: number): void {\n e.preventDefault()\n this.toggleExpand(offset)\n }\n\n toggleAllExpand(): void {\n if (this.allExpanded()) {\n this.expandedOffsets.set({})\n } else {\n const next: Record = {}\n for (const m of this.filteredMessages()) next[m.offset] = true\n this.expandedOffsets.set(next)\n }\n }\n\n clearStream(): void {\n this.messages.set([])\n this.expandedOffsets.set({})\n }\n\n resetStream(): void {\n this.messages.set([...defaultMessages])\n this.searchQuery.set('')\n this.selectedPartition.set('all')\n this.expandedOffsets.set({ 1482910: true })\n }\n\n copyPayload(id: string, payload: Record): void {\n try {\n void navigator.clipboard?.writeText(JSON.stringify(payload, null, 2))\n this.copiedId.set(id)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => {\n if (this.copiedId() === id) this.copiedId.set(null)\n }, 2000)\n } catch {\n // Clipboard fallback\n }\n }\n\n produceTestMessage(): void {\n const currentOffset = this.nextOffset++\n const targetPartition = currentOffset % 4\n const rand = Math.random().toString(36).substring(2, 8)\n const newMessage: KafkaStreamMessage = {\n id: `msg-${currentOffset}`,\n offset: currentOffset,\n partition: targetPartition,\n key: `cust_${rand}`,\n timestamp: new Date().toISOString().replace('T', ' ').slice(0, 23) + ' UTC',\n eventType: 'checkout.order_placed',\n sizeBytes: 1280,\n schemaId: 104,\n traceId: `00-${rand}${rand}${rand}${rand}`.slice(0, 35),\n payload: {\n order_id: `ord_${rand}`,\n customer_id: `cust_${rand}`,\n currency: 'USD',\n total_amount: 129.0,\n item_count: 1,\n items: [{ sku: 'SKU-SYNTH-DEVICE', name: 'Developer Workstation Hub', qty: 1, price: 129.0 }],\n payment_status: 'authorized',\n producer: 'console-stream-tester-ui',\n test_message: true,\n },\n }\n this.messages.update((prev) => [newMessage, ...prev])\n this.expandedOffsets.update((prev) => ({ ...prev, [currentOffset]: true }))\n this.produceNotice.set(`Produced message #${currentOffset.toLocaleString()} to Partition ${targetPartition}`)\n clearTimeout(this.noticeTimer)\n this.noticeTimer = setTimeout(() => this.produceNotice.set(null), 3500)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/kafka-stream-monitor/kafka-stream-monitor.component.ts" }, { "path": "packages/registry-angular/blocks/kafka-stream-monitor/index.ts", "content": "export {\n UiKafkaStreamMonitorComponent,\n type KafkaStreamMessage,\n type PartitionTelemetryRow,\n} from './kafka-stream-monitor.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/kafka-stream-monitor/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/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Apache Kafka & Redpanda topic stream telemetry dashboard: partition offset monitor, leader broker distribution, consumer group lag tracker, and real-time message payload inspector with deserialized JSON viewer.", "categories": [ "devops", "dashboard", "data", "app" ] }