{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "kafka-stream-monitor", "title": "Kafka Stream Monitor", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/kafka-stream-monitor/KafkaStreamMonitor.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronRight,\n Copy,\n Filter,\n Gauge,\n HardDrive,\n Layers,\n Pause,\n Play,\n PlusCircle,\n Radio,\n RotateCcw,\n Search,\n ShieldCheck,\n Terminal,\n Trash2,\n Zap,\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 { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\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\nexport interface KafkaStreamMonitorProps {\n className?: string\n}\n\nconst partitions: 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\nexport function KafkaStreamMonitor({ className }: KafkaStreamMonitorProps) {\n const [messages, setMessages] = React.useState([...defaultMessages])\n const [isPaused, setIsPaused] = React.useState(false)\n const [selectedPartition, setSelectedPartition] = React.useState('all')\n const [searchQuery, setSearchQuery] = React.useState('')\n const [expandedOffsets, setExpandedOffsets] = React.useState>({\n 1482910: true,\n })\n const [copiedId, setCopiedId] = React.useState(null)\n const [produceNotice, setProduceNotice] = React.useState(null)\n const nextOffsetRef = React.useRef(1482911)\n\n const filteredMessages = React.useMemo(() => {\n return messages.filter((msg) => {\n const matchesPartition = selectedPartition === 'all' || msg.partition === selectedPartition\n if (!matchesPartition) return false\n\n if (!searchQuery.trim()) return true\n const q = searchQuery.trim().toLowerCase()\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 }, [messages, selectedPartition, searchQuery])\n\n const allExpanded = filteredMessages.length > 0 && filteredMessages.every((msg) => expandedOffsets[msg.offset])\n\n const togglePause = () => {\n setIsPaused((prev) => !prev)\n }\n\n const toggleExpand = (offset: number) => {\n setExpandedOffsets((prev) => ({\n ...prev,\n [offset]: !prev[offset],\n }))\n }\n\n const toggleAllExpand = () => {\n if (allExpanded) {\n setExpandedOffsets({})\n } else {\n const next: Record = {}\n filteredMessages.forEach((m) => {\n next[m.offset] = true\n })\n setExpandedOffsets(next)\n }\n }\n\n const clearStream = () => {\n setMessages([])\n setExpandedOffsets({})\n }\n\n const resetStream = () => {\n setMessages([...defaultMessages])\n setSearchQuery('')\n setSelectedPartition('all')\n setExpandedOffsets({ 1482910: true })\n }\n\n const copyPayload = (id: string, payload: Record) => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(JSON.stringify(payload, null, 2))\n setCopiedId(id)\n setTimeout(() => {\n setCopiedId((curr) => (curr === id ? null : curr))\n }, 2000)\n }\n }\n\n const produceTestMessage = () => {\n const currentOffset = nextOffsetRef.current++\n const targetPartition = currentOffset % 4\n const testCustomer = `cust_${Math.random().toString(36).substring(2, 8)}`\n const testOrderId = `ord_${Math.random().toString(36).substring(2, 9)}`\n const testAmount = +(Math.random() * 250 + 25).toFixed(2)\n\n const newMessage: KafkaStreamMessage = {\n id: `msg-${currentOffset}`,\n offset: currentOffset,\n partition: targetPartition,\n key: testCustomer,\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-${Math.random().toString(16).substring(2, 10)}${Math.random().toString(16).substring(2, 10)}${Math.random().toString(16).substring(2, 10)}${Math.random().toString(16).substring(2, 10)}`,\n payload: {\n order_id: testOrderId,\n customer_id: testCustomer,\n currency: 'USD',\n total_amount: testAmount,\n item_count: Math.floor(Math.random() * 3) + 1,\n items: [\n {\n sku: 'SKU-SYNTH-DEVICE',\n name: 'Developer Workstation Hub',\n qty: 1,\n price: testAmount,\n },\n ],\n payment_status: 'authorized',\n producer: 'console-stream-tester-ui',\n test_message: true,\n },\n }\n\n setMessages((prev) => [newMessage, ...prev])\n setExpandedOffsets((prev) => ({ ...prev, [currentOffset]: true }))\n setProduceNotice(`Produced message #${currentOffset.toLocaleString()} to Partition ${targetPartition}`)\n\n setTimeout(() => {\n setProduceNotice((curr) => (curr?.includes(currentOffset.toLocaleString()) ? null : curr))\n }, 3500)\n }\n\n const formatBytes = (bytes: number): string => {\n if (bytes < 1024) return `${bytes} B`\n return `${(bytes / 1024).toFixed(1)} KB`\n }\n\n return (\n
\n {/* Header Section */}\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 {/* Active Produce Alert Banner */}\n {produceNotice && (\n \n
\n \n {produceNotice}\n
\n \n Offset Ack: OK (2ms)\n \n \n )}\n\n {/* 4 Kafka Telemetry Metric Cards */}\n
\n {/* Card 1: Message Inflow Rate */}\n \n \n
\n
\n \n \n
\n Message Inflow Rate\n
\n \n +5.8% 1h\n \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 {/* Card 2: Consumer Group Lag */}\n \n \n
\n
\n \n \n
\n Consumer Group Lag\n
\n \n Real-time\n \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 {/* Card 3: Total Retention */}\n \n \n
\n
\n \n \n
\n Total Retention\n
\n \n 7 Days\n \n \n \n \n
\n
\n 480 GB total footprint\n
\n

40 GB avg / partition

\n
\n
\n
\n Disk Footprint\n 480 GB / 1.0 TB\n
\n \n
\n \n \n\n {/* Card 4: Under-Replicated Partitions */}\n \n \n
\n
\n \n \n
\n Under-Replicated\n
\n \n In-Sync\n \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 {/* Partitions & Offset Distribution Table */}\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 Partition ID\n Leader Broker\n Log End Offset\n Consumer Offset\n Lag\n Message Rate\n Replicas (ISR)\n \n \n \n {partitions.map((partition) => (\n \n \n
\n \n Partition {partition.partitionId}\n
\n \n \n
\n {partition.leaderBroker}\n ({partition.rack})\n
\n \n \n {{ ...partition }.logEndOffset.toLocaleString()}\n \n \n {{ ...partition }.consumerOffset.toLocaleString()}\n \n \n \n {partition.lag}\n \n \n \n {partition.messageRate}\n \n \n \n {partition.isrCount} / {partition.replicasCount} In-Sync\n \n \n \n ))}\n \n
\n
\n \n \n\n {/* Live Message Stream Inspector */}\n \n {/* Inspector Header Bar */}\n
\n
\n
\n \n \n \n
\n
\n Live Message Stream Inspector\n {!isPaused ? (\n
\n \n \n \n \n Streaming\n
\n ) : (\n
\n \n Paused\n
\n )}\n
\n
\n\n
\n \n {allExpanded ? (\n \n ) : (\n \n )}\n {allExpanded ? 'Collapse All' : 'Expand All'}\n \n\n \n\n \n \n Clear\n \n
\n
\n\n {/* Filter and Partition Selector Controls */}\n
\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Filter message key, offset, event type, or JSON payload...\"\n className=\"h-8 pl-8 text-xs\"\n />\n
\n\n
\n \n \n Partition:\n \n\n setSelectedPartition('all')}\n >\n All\n \n\n {[0, 1, 2, 3].map((p) => (\n setSelectedPartition(p)}\n >\n P-{p}\n \n ))}\n
\n
\n\n {/* Messages Stream List */}\n \n {filteredMessages.length === 0 ? (\n
\n
\n \n
\n
\n

No messages found

\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
    \n {filteredMessages.map((msg) => {\n const isExpanded = !!expandedOffsets[msg.offset]\n return (\n \n {/* Row Trigger */}\n toggleExpand(msg.offset)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n toggleExpand(msg.offset)\n }\n }}\n >\n {/* Left: Chevron + Offset + Partition + Key + Event */}\n
    \n \n \n \n\n
    \n
    \n \n #{msg.offset.toLocaleString()}\n \n\n \n P-{msg.partition}\n \n\n \n key: {msg.key}\n \n\n {msg.eventType}\n
    \n\n

    {msg.timestamp}

    \n
    \n
    \n\n {/* Right: Size + Trace ID */}\n
    \n \n {formatBytes(msg.sizeBytes)}\n \n \n schema_id: {msg.schemaId}\n \n
    \n \n\n {/* Expanded Payload Detail View */}\n {isExpanded && (\n
    \n
    \n {/* Metadata Info Strip */}\n
    \n
    \n Trace ID:\n {msg.traceId}\n
    \n
    \n Format:\n \n json+avro\n \n
    \n
    \n\n {/* JSON Payload Inspector Box */}\n
    \n
    \n
    \n \n deserialized_payload.json\n
    \n copyPayload(msg.id, msg.payload)}\n >\n {copiedId === msg.id ? (\n \n ) : (\n \n )}\n {copiedId === msg.id ? 'Copied' : 'Copy JSON'}\n \n
    \n\n 
    \n                              {JSON.stringify(msg.payload, null, 2)}\n
    \n
    \n
    \n
    \n )}\n \n )\n })}\n
\n )}\n \n\n {/* Bottom Stream Telemetry Bar */}\n
\n
\n
\n \n Rate:\n {isPaused ? '0 msg/s (Paused)' : '14,250 msgs/sec'}\n
\n\n \n\n
\n \n Buffer:\n \n {filteredMessages.length} / {messages.length} cached\n \n
\n\n \n\n
\n \n Avg Latency:\n 1.8ms\n
\n
\n\n
\n \n SASL_SSL · LZ4 Compression · Schema Registry OK\n
\n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/KafkaStreamMonitor.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/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }