{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cdc-replication-stream", "title": "Cdc Replication Stream", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/cdc-replication-stream/CdcReplicationStream.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n ArrowRight,\n ArrowRightLeft,\n Check,\n ChevronDown,\n ChevronRight,\n Copy,\n Database,\n Download,\n Filter,\n Layers,\n Pause,\n Play,\n RefreshCw,\n Search,\n Server,\n ShieldCheck,\n Terminal,\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 type CdcOperation = 'INSERT' | 'UPDATE' | 'DELETE'\n\nexport interface CdcTableMetric {\n name: string\n schema: string\n primaryKey: string\n syncedRows: number\n replicationDelayMs: number\n status: 'synchronized' | 'syncing' | 'paused'\n operations: {\n insertPercent: number\n updatePercent: number\n deletePercent: number\n }\n mode: string\n}\n\nexport interface CdcStreamEvent {\n id: string\n timestamp: string\n table: string\n operation: CdcOperation\n primaryKey: string\n binlogPosition: string\n lsn: string\n txId: string\n summary: string\n modifiedFields?: string[]\n before?: Record\n after?: Record\n}\n\nexport interface CdcReplicationStreamProps {\n initialEvents?: CdcStreamEvent[]\n initialTables?: CdcTableMetric[]\n initialPaused?: boolean\n initialOperationFilter?: 'all' | CdcOperation\n initialSearch?: string\n className?: string\n}\n\nconst defaultTables: CdcTableMetric[] = [\n {\n name: 'users',\n schema: 'public',\n primaryKey: 'id [UUID]',\n syncedRows: 1842910,\n replicationDelayMs: 12,\n status: 'synchronized',\n operations: {\n insertPercent: 65,\n updatePercent: 30,\n deletePercent: 5,\n },\n mode: 'Continuous WAL',\n },\n {\n name: 'orders',\n schema: 'public',\n primaryKey: 'order_id [BIGINT]',\n syncedRows: 2145820,\n replicationDelayMs: 16,\n status: 'synchronized',\n operations: {\n insertPercent: 78,\n updatePercent: 20,\n deletePercent: 2,\n },\n mode: 'Continuous WAL',\n },\n {\n name: 'transactions',\n schema: 'public',\n primaryKey: 'tx_hash [VARCHAR]',\n syncedRows: 624300,\n replicationDelayMs: 18,\n status: 'synchronized',\n operations: {\n insertPercent: 92,\n updatePercent: 7,\n deletePercent: 1,\n },\n mode: 'Continuous WAL',\n },\n {\n name: 'subscriptions',\n schema: 'public',\n primaryKey: 'sub_id [UUID]',\n syncedRows: 208440,\n replicationDelayMs: 14,\n status: 'synchronized',\n operations: {\n insertPercent: 45,\n updatePercent: 50,\n deletePercent: 5,\n },\n mode: 'Continuous WAL',\n },\n]\n\nconst defaultEvents: CdcStreamEvent[] = [\n {\n id: 'evt-cdc-104',\n timestamp: '2026-08-21T14:32:05.812Z',\n table: 'public.subscriptions',\n operation: 'UPDATE',\n primaryKey: 'sub_99a8b1c4',\n binlogPosition: 'mysql-bin.000412 : 8492014',\n lsn: '0/16B38E0',\n txId: 'tx_883019',\n summary: 'status: \"trialing\" → \"active\", plan: \"starter_monthly\" → \"enterprise_annual\", seats: 5 → 25',\n modifiedFields: ['status', 'plan', 'seats', 'monthly_amount', 'trial_ends_at', 'updated_at'],\n before: {\n id: 'sub_99a8b1c4',\n user_id: 'usr_44018',\n plan: 'starter_monthly',\n status: 'trialing',\n seats: 5,\n monthly_amount: 49.0,\n auto_renew: true,\n trial_ends_at: '2026-08-21T23:59:59Z',\n updated_at: '2026-08-14T10:00:00Z',\n },\n after: {\n id: 'sub_99a8b1c4',\n user_id: 'usr_44018',\n plan: 'enterprise_annual',\n status: 'active',\n seats: 25,\n monthly_amount: 490.0,\n auto_renew: true,\n trial_ends_at: null,\n updated_at: '2026-08-21T14:32:05Z',\n },\n },\n {\n id: 'evt-cdc-103',\n timestamp: '2026-08-21T14:32:04.195Z',\n table: 'public.orders',\n operation: 'INSERT',\n primaryKey: 'ord_8819203',\n binlogPosition: 'mysql-bin.000412 : 8491820',\n lsn: '0/16B3698',\n txId: 'tx_883018',\n summary: 'New checkout order created for $1,280.00 (Customer: usr_99120, 3 line items)',\n modifiedFields: [],\n after: {\n order_id: 'ord_8819203',\n customer_id: 'usr_99120',\n currency: 'USD',\n total_amount: 1280.0,\n tax_amount: 102.4,\n status: 'paid',\n payment_gateway: 'stripe_card',\n shipping_country: 'US',\n created_at: '2026-08-21T14:32:04Z',\n },\n },\n {\n id: 'evt-cdc-102',\n timestamp: '2026-08-21T14:31:59.604Z',\n table: 'public.transactions',\n operation: 'UPDATE',\n primaryKey: 'tx_0x99b1f41',\n binlogPosition: 'mysql-bin.000412 : 8491412',\n lsn: '0/16B3440',\n txId: 'tx_883017',\n summary: 'status: \"processing\" → \"settled\", settled_at timestamp set',\n modifiedFields: ['status', 'settled_at'],\n before: {\n tx_hash: 'tx_0x99b1f41',\n order_id: 'ord_8819198',\n amount: 349.5,\n status: 'processing',\n settled_at: null,\n fee_cents: 1045,\n },\n after: {\n tx_hash: 'tx_0x99b1f41',\n order_id: 'ord_8819198',\n amount: 349.5,\n status: 'settled',\n settled_at: '2026-08-21T14:31:59Z',\n fee_cents: 1045,\n },\n },\n {\n id: 'evt-cdc-101',\n timestamp: '2026-08-21T14:31:52.410Z',\n table: 'public.users',\n operation: 'INSERT',\n primaryKey: 'usr_99304',\n binlogPosition: 'mysql-bin.000412 : 8490980',\n lsn: '0/16B31F0',\n txId: 'tx_883016',\n summary: 'New user registration: elena.rostova@cloudscale.io (Org: org_7720)',\n modifiedFields: [],\n after: {\n id: 'usr_99304',\n email: 'elena.rostova@cloudscale.io',\n full_name: 'Elena Rostova',\n org_id: 'org_7720',\n role: 'data_engineer',\n email_verified: true,\n mfa_enabled: true,\n created_at: '2026-08-21T14:31:52Z',\n },\n },\n {\n id: 'evt-cdc-100',\n timestamp: '2026-08-21T14:31:40.118Z',\n table: 'public.subscriptions',\n operation: 'DELETE',\n primaryKey: 'sub_7718021',\n binlogPosition: 'mysql-bin.000412 : 8490410',\n lsn: '0/16B2FA0',\n txId: 'tx_883015',\n summary: 'Hard purge of cancelled expired trial subscription sub_7718021',\n modifiedFields: [],\n before: {\n id: 'sub_7718021',\n user_id: 'usr_22910',\n plan: 'developer_free',\n status: 'cancelled',\n seats: 1,\n deleted_at: '2026-08-21T14:31:40Z',\n },\n },\n]\n\nconst currentBinlog = 'mysql-bin.000412 : 8492014'\n\nfunction matchesSearch(event: CdcStreamEvent, query: string): boolean {\n if (!query.trim()) return true\n const q = query.trim()\n\n if (q.startsWith('/') && q.length > 1) {\n const lastSlash = q.lastIndexOf('/')\n if (lastSlash > 0) {\n const pattern = q.slice(1, lastSlash)\n const flags = q.slice(lastSlash + 1)\n try {\n const re = new RegExp(pattern, flags)\n return (\n re.test(event.table) ||\n re.test(event.operation) ||\n re.test(event.primaryKey) ||\n re.test(event.binlogPosition) ||\n re.test(event.lsn) ||\n re.test(event.txId) ||\n re.test(event.summary) ||\n re.test(JSON.stringify(event.before ?? {})) ||\n re.test(JSON.stringify(event.after ?? {}))\n )\n } catch {\n // Fall back to plain search on invalid regex\n }\n }\n }\n\n const lower = q.toLowerCase()\n return (\n event.table.toLowerCase().includes(lower) ||\n event.operation.toLowerCase().includes(lower) ||\n event.primaryKey.toLowerCase().includes(lower) ||\n event.binlogPosition.toLowerCase().includes(lower) ||\n event.lsn.toLowerCase().includes(lower) ||\n event.txId.toLowerCase().includes(lower) ||\n event.summary.toLowerCase().includes(lower) ||\n JSON.stringify(event.before ?? {})\n .toLowerCase()\n .includes(lower) ||\n JSON.stringify(event.after ?? {})\n .toLowerCase()\n .includes(lower)\n )\n}\n\nfunction formatTimestamp(iso: string): string {\n try {\n const d = new Date(iso)\n return d.toISOString().replace('T', ' ').replace('Z', ' UTC')\n } catch {\n return iso\n }\n}\n\nfunction formatNumber(num: number): string {\n return new Intl.NumberFormat('en-US').format(num)\n}\n\nexport function CdcReplicationStream({\n initialEvents,\n initialTables,\n initialPaused = false,\n initialOperationFilter = 'all',\n initialSearch = '',\n className,\n}: CdcReplicationStreamProps) {\n const [tables] = React.useState(initialTables ? [...initialTables] : [...defaultTables])\n const [events, setEvents] = React.useState(initialEvents ? [...initialEvents] : [...defaultEvents])\n const [isPaused, setIsPaused] = React.useState(initialPaused)\n const [isSnapshotting, setIsSnapshotting] = React.useState(false)\n const [snapshotNotice, setSnapshotNotice] = React.useState(false)\n const [selectedOperation, setSelectedOperation] = React.useState<'all' | CdcOperation>(initialOperationFilter)\n const [searchQuery, setSearchQuery] = React.useState(initialSearch)\n const [expandedIds, setExpandedIds] = React.useState>({\n 'evt-cdc-104': true,\n })\n const [copiedEventId, setCopiedEventId] = React.useState(null)\n const [copiedBinlog, setCopiedBinlog] = React.useState(false)\n const [exportedNotice, setExportedNotice] = React.useState(false)\n\n const filteredEvents = React.useMemo(() => {\n return events.filter((event) => {\n const matchesOp = selectedOperation === 'all' || event.operation === selectedOperation\n const matchesText = matchesSearch(event, searchQuery)\n return matchesOp && matchesText\n })\n }, [events, selectedOperation, searchQuery])\n\n const operationCounts = React.useMemo(() => {\n return {\n all: events.length,\n INSERT: events.filter((e) => e.operation === 'INSERT').length,\n UPDATE: events.filter((e) => e.operation === 'UPDATE').length,\n DELETE: events.filter((e) => e.operation === 'DELETE').length,\n }\n }, [events])\n\n const allExpanded = filteredEvents.length > 0 && filteredEvents.every((e) => expandedIds[e.id])\n\n function togglePause() {\n setIsPaused((prev) => !prev)\n }\n\n function toggleExpand(id: string) {\n setExpandedIds((prev) => ({\n ...prev,\n [id]: !prev[id],\n }))\n }\n\n function toggleAllExpand() {\n if (allExpanded) {\n setExpandedIds({})\n } else {\n const next: Record = {}\n filteredEvents.forEach((e) => {\n next[e.id] = true\n })\n setExpandedIds(next)\n }\n }\n\n function triggerSnapshot() {\n if (isSnapshotting) return\n setIsSnapshotting(true)\n setSnapshotNotice(true)\n\n setTimeout(() => {\n setIsSnapshotting(false)\n }, 2200)\n\n setTimeout(() => {\n setSnapshotNotice(false)\n }, 6000)\n }\n\n function clearStream() {\n setEvents([])\n setExpandedIds({})\n }\n\n function resetStream() {\n setEvents(initialEvents ? [...initialEvents] : [...defaultEvents])\n setSearchQuery('')\n setSelectedOperation('all')\n setExpandedIds({ 'evt-cdc-104': true })\n }\n\n function copyBinlogPosition() {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(currentBinlog)\n setCopiedBinlog(true)\n setTimeout(() => {\n setCopiedBinlog(false)\n }, 2000)\n }\n }\n\n function copyPayload(id: string, payload: Record) {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(JSON.stringify(payload, null, 2))\n setCopiedEventId(id)\n setTimeout(() => {\n setCopiedEventId((current) => (current === id ? null : current))\n }, 2000)\n }\n }\n\n function exportJson() {\n const dataStr =\n 'data:text/json;charset=utf-8,' +\n encodeURIComponent(\n JSON.stringify(\n {\n pipeline: 'Postgres Source (OLTP) -> Snowflake DW (OLAP)',\n binlog_position: currentBinlog,\n timestamp: new Date().toISOString(),\n tables,\n events: filteredEvents,\n },\n null,\n 2,\n ),\n )\n if (typeof document !== 'undefined') {\n const downloadAnchor = document.createElement('a')\n downloadAnchor.setAttribute('href', dataStr)\n downloadAnchor.setAttribute(\n 'download',\n `cdc-replication-stream-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`,\n )\n document.body.appendChild(downloadAnchor)\n downloadAnchor.click()\n downloadAnchor.remove()\n setExportedNotice(true)\n setTimeout(() => {\n setExportedNotice(false)\n }, 2000)\n }\n }\n\n return (\n
\n {/* Header: Sync Pipeline Overview & Global Controls */}\n
\n
\n
\n \n
\n
\n
\n

CDC Replication Stream

\n\n {/* Real-Time Status Badge */}\n {isSnapshotting ? (\n
\n \n Snapshot Ingest Active\n
\n ) : !isPaused ? (\n
\n \n \n \n \n Replication Streaming · 18ms Latency\n
\n ) : (\n
\n \n Replication Paused\n
\n )}\n
\n\n {/* Pipeline Architecture Breadcrumb */}\n
\n Postgres Source (OLTP)\n \n Snowflake DW (OLAP)\n \n
\n
\n
\n\n {/* Header Action Controls & Binlog Pointer */}\n
\n {/* Binlog Position Indicator Chip */}\n \n \n Binlog:\n {currentBinlog}\n {copiedBinlog ? (\n \n ) : (\n \n )}\n \n\n \n\n \n {isPaused ? (\n \n ) : (\n \n )}\n {isPaused ? 'Resume Stream' : 'Pause Stream'}\n \n\n \n
\n
\n\n {/* Snapshot Notification Banner */}\n {snapshotNotice && (\n
\n
\n \n
\n Snapshot sync initiated:\n \n {' '}\n Executing non-blocking logical schema snapshot across 4 tables at WAL offset{' '}\n mysql-bin.000412 : 8492014.\n \n
\n
\n \n LSN: 0/16B38E0\n \n
\n )}\n\n {/* 4 CDC Telemetry Metric Cards */}\n
\n {/* 1. Replication Lag */}\n \n \n
\n Replication Lag\n
\n \n
\n
\n
\n
\n 18ms\n p99: 24ms\n
\n
\n \n Sub-second real-time\n \n
\n
\n
\n SLA Headroom\n 96.4%\n
\n \n
\n
\n \n \n\n {/* 2. Throughput */}\n \n \n
\n Throughput\n
\n \n
\n
\n
\n
\n 1,420\n events/sec\n
\n
\n \n 380 KB/s bandwidth\n \n
\n
\n Hourly Pace\n 5.11M evts/hr\n
\n
\n \n \n\n {/* 3. Total Synced Today */}\n \n \n
\n Total Synced Today\n
\n \n
\n
\n
\n
\n 4.82M\n Row Changes\n
\n
\n \n +14.2% vs yesterday\n \n
\n
\n WAL Integrity\n 100% Consistent\n
\n
\n \n \n\n {/* 4. Error / Dead Letter Queue */}\n \n \n
\n Error / DLQ\n
\n \n
\n
\n
\n
\n 0\n Failed Events\n
\n
\n \n DLQ Empty · Healthy\n \n
\n
\n Schema Drift\n 0 Violations\n
\n
\n \n \n
\n\n {/* Active Synced Tables Table */}\n \n \n
\n
\n Active Synced Tables ({tables.length})\n \n Per-table WAL change capture distribution, row synchronization counts, and per-table replication latency\n \n
\n
\n \n \n INSERT\n \n \n \n UPDATE\n \n \n \n DELETE\n \n
\n
\n \n \n
\n \n \n \n Table Name & Schema\n Change Operations Breakdown\n Synced Rows Count\n Replication Delay\n Status\n \n \n \n {tables.map((table) => (\n \n {/* Table Name & Schema */}\n \n
\n
\n \n {table.schema}.{table.name}\n \n \n {table.primaryKey}\n \n
\n

Mode: {table.mode}

\n
\n \n\n {/* Operations Multi-Segment Stacked Progress Bar & Percentages */}\n \n
\n {/* Stacked Progress Bar */}\n
\n \n \n \n
\n\n {/* Breakdown Text */}\n
\n INS {table.operations.insertPercent}%\n UPD {table.operations.updatePercent}%\n DEL {table.operations.deletePercent}%\n
\n
\n \n\n {/* Synced Rows Count */}\n \n \n {formatNumber(table.syncedRows)}\n \n

rows committed

\n \n\n {/* Replication Delay */}\n \n \n {table.replicationDelayMs}ms\n \n

sub-second

\n \n\n {/* Status Badge */}\n \n \n \n Synchronized\n \n \n \n ))}\n \n
\n
\n \n \n\n {/* Live CDC Event Stream Ticker Card */}\n \n {/* Terminal Header Bar */}\n
\n
\n
\n \n \n \n
\n
\n Live CDC Event Stream Ticker\n \n
\n
\n\n
\n \n \n {allExpanded ? (\n \n ) : (\n \n )}\n {allExpanded ? 'Collapse All' : 'Expand All'}\n \n
\n
\n\n {/* Stream Filter Toolbar */}\n
\n
\n {/* Search Input */}\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search table, operation, primary key, column, or /regex/...\"\n className=\"pl-9 text-xs\"\n />\n
\n\n {/* Operation Filter Buttons */}\n
\n \n \n Op:\n \n\n setSelectedOperation('all')}\n >\n All\n \n {operationCounts.all}\n \n \n\n setSelectedOperation('INSERT')}\n >\n \n INSERT\n \n {operationCounts.INSERT}\n \n \n\n setSelectedOperation('UPDATE')}\n >\n \n UPDATE\n \n {operationCounts.UPDATE}\n \n \n\n setSelectedOperation('DELETE')}\n >\n \n DELETE\n \n {operationCounts.DELETE}\n \n \n
\n
\n
\n\n {/* Event Rows Feed */}\n \n {/* Empty State */}\n {filteredEvents.length === 0 ? (\n
\n
\n \n
\n
\n

No CDC events match current criteria

\n

\n {events.length === 0\n ? 'The replication event stream buffer was cleared.'\n : 'Try adjusting your operation filter or search query.'}\n

\n
\n \n
\n ) : (\n
    \n {filteredEvents.map((event) => {\n const isExpanded = !!expandedIds[event.id]\n return (\n \n {/* Primary Row Trigger */}\n toggleExpand(event.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n toggleExpand(event.id)\n }\n }}\n >\n {/* Left Rail: Chevron + Timestamp + Operation Badge + Table + Summary */}\n
    \n \n \n \n\n
    \n
    \n \n {formatTimestamp(event.timestamp)}\n \n\n {event.operation === 'INSERT' && (\n \n INSERT\n \n )}\n {event.operation === 'UPDATE' && (\n \n UPDATE\n \n )}\n {event.operation === 'DELETE' && (\n \n DELETE\n \n )}\n\n {event.table}\n\n \n {event.primaryKey}\n \n
    \n\n

    {event.summary}

    \n
    \n
    \n\n {/* Right Rail: Binlog Offset & Tx ID */}\n
    \n
    \n Tx:\n {event.txId}\n
    \n\n
    \n {event.binlogPosition}\n ·\n {event.lsn}\n
    \n
    \n
\n\n {/* Expanded Payload Diff View */}\n {isExpanded && (\n
\n
\n {/* Modified Fields Tag Bar */}\n {event.modifiedFields && event.modifiedFields.length > 0 && (\n
\n Modified Columns:\n {event.modifiedFields.map((field) => (\n \n {field}\n \n ))}\n
\n )}\n\n {/* Side-by-Side or Stacked JSON Diff */}\n
\n {/* Before Payload (For UPDATE and DELETE) */}\n {event.before && (\n
\n
\n
\n \n before_image.json\n (Previous State)\n
\n copyPayload(`${event.id}-before`, event.before!)}\n >\n {copiedEventId === `${event.id}-before` ? (\n \n ) : (\n \n )}\n {copiedEventId === `${event.id}-before` ? 'Copied' : 'Copy'}\n \n
\n\n 
\n                                  {JSON.stringify(event.before, null, 2)}\n
\n
\n )}\n\n {/* After Payload (For INSERT and UPDATE) */}\n {event.after && (\n \n
\n
\n \n after_image.json\n \n (Replicated Target State)\n \n
\n copyPayload(`${event.id}-after`, event.after!)}\n >\n {copiedEventId === `${event.id}-after` ? (\n \n ) : (\n \n )}\n {copiedEventId === `${event.id}-after` ? 'Copied' : 'Copy'}\n \n
\n\n 
\n                                  {JSON.stringify(event.after, null, 2)}\n
\n
\n )}\n
\n
\n \n )}\n \n )\n })}\n \n )}\n \n\n {/* Bottom Engine & Ingest Protocol Telemetry Bar */}\n
\n
\n
\n \n CDC Pipeline:\n {isPaused ? '0 evt/s (Paused)' : '1,420 events/sec'}\n
\n\n \n\n
\n \n Sink Topic:\n snowflake.cdc.raw_events\n
\n\n \n\n
\n \n Format:\n JSON + Schema Registry (v2)\n
\n
\n\n
\n \n Postgres WAL2JSON · TLS 1.3 · Heartbeat: 1,000ms OK\n
\n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/CdcReplicationStream.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": "Debezium and Fivetran style Change Data Capture (CDC) replication monitor and binlog sync pipeline with live telemetry metrics, table operation breakdowns, and real-time before/after row diff streaming.", "categories": [ "devops", "app" ] }