{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "cdc-replication-stream", "title": "Cdc Replication Stream", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/cdc-replication-stream/cdc-replication-stream.component.ts", "content": "import { ChangeDetectionStrategy, Component, DestroyRef, Input, OnInit, computed, inject, signal } from '@angular/core'\nimport {\n Activity,\n ArrowRight,\n ArrowRightLeft,\n Check,\n ChevronDown,\n ChevronRight,\n Copy,\n Database,\n Download,\n Filter,\n Layers,\n LucideAngularModule,\n Pause,\n Play,\n RefreshCw,\n Search,\n Server,\n ShieldCheck,\n Terminal,\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 type CdcOperation = 'INSERT' | 'UPDATE' | 'DELETE'\nexport type CdcOperationFilter = 'all' | CdcOperation\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\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\nexport function 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\nconst pillBase =\n 'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-cdc-replication-stream, [ui-cdc-replication-stream]',\n standalone: true,\n // React renders the root
itself: keep this wrapper out of the layout.\n host: { 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 UiTableHeaderComponent,\n UiTableBodyComponent,\n UiTableRowComponent,\n UiTableHeadComponent,\n UiTableCellComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n
\n
\n
\n

CDC Replication Stream

\n\n \n @if (isSnapshotting()) {\n \n \n Snapshot Ingest Active\n
\n } @else if (!isPaused()) {\n \n \n \n \n \n Replication Streaming · 18ms Latency\n
\n } @else {\n \n \n Replication Paused\n
\n }\n
\n\n \n
\n Postgres Source (OLTP)\n \n Snowflake DW (OLAP)\n \n
\n
\n
\n\n \n
\n \n \n \n Binlog:\n {{ currentBinlog }}\n @if (copiedBinlog()) {\n \n } @else {\n \n }\n \n\n \n \n {{ isSnapshotting() ? 'Syncing Snapshot...' : 'Force Sync Snapshot' }}\n \n\n \n @if (isPaused()) {\n \n } @else {\n \n }\n {{ isPaused() ? 'Resume Stream' : 'Pause Stream' }}\n \n\n \n @if (exportedNotice()) {\n \n } @else {\n \n }\n {{ exportedNotice() ? 'Exported' : 'Export JSON' }}\n \n
\n \n\n \n @if (snapshotNotice()) {\n \n
\n \n
\n Snapshot sync initiated:\n \n Executing non-blocking logical schema snapshot across 4 tables at WAL offset\n mysql-bin.000412 : 8492014.\n \n
\n
\n LSN: 0/16B38E0\n \n }\n\n \n
\n \n \n \n
\n Replication Lag\n \n \n
\n
\n
\n
\n 18ms\n p99: 24ms\n
\n
\n Sub-second real-time\n
\n
\n
\n SLA Headroom\n 96.4%\n
\n \n
\n
\n \n \n\n \n \n \n
\n Throughput\n \n \n
\n \n
\n
\n 1,420\n events/sec\n
\n
\n 380 KB/s bandwidth\n
\n
\n Hourly Pace\n 5.11M evts/hr\n
\n
\n \n \n\n \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 \n \n \n
\n Error / DLQ\n \n \n
\n \n
\n
\n 0\n Failed Events\n
\n
\n DLQ Empty · Healthy\n
\n
\n Schema Drift\n 0 Violations\n
\n
\n \n \n \n\n \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 @for (table of tables(); track table.name) {\n \n \n \n
\n
\n {{ table.schema }}.{{ table.name }}\n {{ table.primaryKey }}\n
\n

Mode: {{ table.mode }}

\n
\n \n\n \n \n
\n \n
\n
\n
\n
\n
\n\n \n
\n INS {{ table.operations.insertPercent }}%\n UPD {{ table.operations.updatePercent }}%\n DEL {{ table.operations.deletePercent }}%\n
\n \n \n\n \n \n {{\n formatNumber(table.syncedRows)\n }}\n

rows committed

\n \n\n \n \n {{ table.replicationDelayMs }}ms\n

sub-second

\n \n\n \n \n \n \n Synchronized\n \n \n \n }\n \n \n \n \n \n\n \n \n \n
\n
\n
\n \n \n \n
\n
\n Live CDC Event Stream Ticker\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 \n
\n
\n \n
\n \n \n \n
\n\n \n
\n \n \n Op:\n \n\n @for (op of operationFilters; track op) {\n \n }\n
\n
\n
\n\n \n \n @if (filteredEvents().length === 0) {\n \n
\n
\n \n
\n
\n

No CDC events match current criteria

\n

\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 } @else {\n
    \n @for (event of filteredEvents(); track event.id) {\n
  • \n \n \n \n
    \n \n \n \n\n
    \n
    \n {{\n formatTimestamp(event.timestamp)\n }}\n\n @if (event.operation === 'INSERT') {\n INSERT\n }\n @if (event.operation === 'UPDATE') {\n UPDATE\n }\n @if (event.operation === 'DELETE') {\n DELETE\n }\n\n {{ event.table }}\n\n {{\n event.primaryKey\n }}\n
    \n\n

    {{ event.summary }}

    \n
    \n
    \n\n \n
    \n
    \n Tx:\n {{ event.txId }}\n
    \n\n
    \n {{ event.binlogPosition }}\n ·\n {{ event.lsn }}\n
    \n
    \n \n\n \n @if (isExpanded(event.id)) {\n
    \n
    \n \n @if (event.modifiedFields && event.modifiedFields.length > 0) {\n
    \n Modified Columns:\n @for (field of event.modifiedFields; track field) {\n {{ field }}\n }\n
    \n }\n\n \n
    \n \n @if (event.before; as before) {\n \n \n
    \n \n before_image.json\n (Previous State)\n
    \n \n @if (copiedEventId() === event.id + '-before') {\n \n } @else {\n \n }\n {{ copiedEventId() === event.id + '-before' ? 'Copied' : 'Copy' }}\n \n
    \n\n {{ json(before) }}\n
    \n }\n\n \n @if (event.after; as after) {\n
    \n \n
    \n \n after_image.json\n (Replicated Target State)\n
    \n \n @if (copiedEventId() === event.id + '-after') {\n \n } @else {\n \n }\n {{ copiedEventId() === event.id + '-after' ? 'Copied' : 'Copy' }}\n \n
    \n\n {{ json(after) }}\n
    \n }\n \n \n \n }\n
    • \n }\n
\n }\n \n\n \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})\nexport class UiCdcReplicationStreamComponent implements OnInit {\n @Input() initialEvents?: CdcStreamEvent[]\n @Input() initialTables?: CdcTableMetric[]\n @Input() initialPaused = false\n @Input() initialOperationFilter: CdcOperationFilter = 'all'\n @Input() initialSearch = ''\n @Input('class') className?: string\n\n protected readonly ArrowRightLeft = ArrowRightLeft\n protected readonly ArrowRight = ArrowRight\n protected readonly RefreshCw = RefreshCw\n protected readonly Terminal = Terminal\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Play = Play\n protected readonly Pause = Pause\n protected readonly Download = Download\n protected readonly Zap = Zap\n protected readonly Activity = Activity\n protected readonly Database = Database\n protected readonly ShieldCheck = ShieldCheck\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronRight = ChevronRight\n protected readonly Search = Search\n protected readonly Filter = Filter\n protected readonly Layers = Layers\n protected readonly Server = Server\n\n protected readonly currentBinlog = currentBinlog\n protected readonly operationFilters: CdcOperationFilter[] = ['all', 'INSERT', 'UPDATE', 'DELETE']\n protected readonly formatNumber = formatNumber\n protected readonly formatTimestamp = formatTimestamp\n\n readonly tables = signal([...defaultTables])\n readonly events = signal([...defaultEvents])\n readonly isPaused = signal(false)\n readonly isSnapshotting = signal(false)\n readonly snapshotNotice = signal(false)\n readonly selectedOperation = signal('all')\n readonly searchQuery = signal('')\n readonly expandedIds = signal>({ 'evt-cdc-104': true })\n readonly copiedEventId = signal(null)\n readonly copiedBinlog = signal(false)\n readonly exportedNotice = signal(false)\n\n readonly filteredEvents = computed(() => {\n const op = this.selectedOperation()\n const q = this.searchQuery()\n return this.events().filter((event) => (op === 'all' || event.operation === op) && matchesSearch(event, q))\n })\n\n readonly operationCounts = computed(() => {\n const events = this.events()\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 })\n\n readonly allExpanded = computed(() => {\n const filtered = this.filteredEvents()\n const expanded = this.expandedIds()\n return filtered.length > 0 && filtered.every((e) => expanded[e.id])\n })\n\n private readonly timers = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n ngOnInit(): void {\n if (this.initialTables) this.tables.set([...this.initialTables])\n if (this.initialEvents) this.events.set([...this.initialEvents])\n this.isPaused.set(this.initialPaused)\n this.selectedOperation.set(this.initialOperationFilter)\n this.searchQuery.set(this.initialSearch)\n }\n\n protected get rootClass(): string {\n return cn('w-full space-y-4', this.className)\n }\n\n private later(fn: () => void, ms: number): void {\n const t = setTimeout(() => {\n this.timers.delete(t)\n fn()\n }, ms)\n this.timers.add(t)\n }\n\n isExpanded(id: string): boolean {\n return !!this.expandedIds()[id]\n }\n\n operationCount(op: CdcOperationFilter): number {\n return this.operationCounts()[op]\n }\n\n togglePause(): void {\n this.isPaused.update((prev) => !prev)\n }\n\n toggleExpand(id: string): void {\n this.expandedIds.update((prev) => ({ ...prev, [id]: !prev[id] }))\n }\n\n toggleAllExpand(): void {\n if (this.allExpanded()) {\n this.expandedIds.set({})\n } else {\n const next: Record = {}\n this.filteredEvents().forEach((e) => {\n next[e.id] = true\n })\n this.expandedIds.set(next)\n }\n }\n\n onRowKeydown(e: KeyboardEvent, id: string): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n this.toggleExpand(id)\n }\n }\n\n triggerSnapshot(): void {\n if (this.isSnapshotting()) return\n this.isSnapshotting.set(true)\n this.snapshotNotice.set(true)\n this.later(() => this.isSnapshotting.set(false), 2200)\n this.later(() => this.snapshotNotice.set(false), 6000)\n }\n\n clearStream(): void {\n this.events.set([])\n this.expandedIds.set({})\n }\n\n resetStream(): void {\n this.events.set(this.initialEvents ? [...this.initialEvents] : [...defaultEvents])\n this.searchQuery.set('')\n this.selectedOperation.set('all')\n this.expandedIds.set({ 'evt-cdc-104': true })\n }\n\n copyBinlogPosition(): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(currentBinlog).catch(() => {})\n this.copiedBinlog.set(true)\n this.later(() => this.copiedBinlog.set(false), 2000)\n }\n }\n\n copyPayload(id: string, payload: Record): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(JSON.stringify(payload, null, 2)).catch(() => {})\n this.copiedEventId.set(id)\n this.later(() => this.copiedEventId.update((current) => (current === id ? null : current)), 2000)\n }\n }\n\n exportJson(): void {\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: this.tables(),\n events: this.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 this.exportedNotice.set(true)\n this.later(() => this.exportedNotice.set(false), 2000)\n }\n }\n\n json(value: Record): string {\n return JSON.stringify(value, null, 2)\n }\n\n snapshotIconClass(): string {\n return cn('size-3.5', this.isSnapshotting() && 'text-primary animate-spin')\n }\n\n pillClass(op: CdcOperationFilter): string {\n const active = this.selectedOperation() === op\n if (op === 'all') {\n return cn(\n pillBase,\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 if (op === 'INSERT') {\n return cn(\n pillBase,\n active\n ? 'border-success bg-success text-white shadow-xs'\n : 'border-border bg-card text-muted-foreground hover:border-success/40 hover:text-success dark:hover:text-success',\n )\n }\n if (op === 'UPDATE') {\n return cn(\n pillBase,\n active\n ? 'border-info bg-info text-white shadow-xs'\n : 'border-border bg-card text-muted-foreground hover:border-info/40 hover:text-info dark:hover:text-info',\n )\n }\n return cn(\n pillBase,\n active\n ? 'border-destructive bg-destructive text-white shadow-xs'\n : 'border-border bg-card text-muted-foreground hover:border-destructive/40 hover:text-destructive dark:hover:text-destructive',\n )\n }\n\n pillDotClass(op: CdcOperationFilter): string {\n if (op === 'INSERT') return 'bg-success size-1.5 rounded-full'\n if (op === 'UPDATE') return 'bg-info size-1.5 rounded-full'\n return 'bg-destructive size-1.5 rounded-full'\n }\n\n pillCountClass(op: CdcOperationFilter): string {\n const active = this.selectedOperation() === op\n if (op === 'all') {\n return cn(\n 'py-0.2 rounded-full px-1.5 text-xs',\n active ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-muted text-muted-foreground',\n )\n }\n const idle =\n op === 'INSERT'\n ? 'bg-success/10 text-success'\n : op === 'UPDATE'\n ? 'bg-info/10 text-info'\n : 'bg-destructive/10 text-destructive'\n return cn('py-0.2 rounded-full px-1.5 text-xs', active ? 'bg-white/20 text-white' : idle)\n }\n\n rowClass(id: string): string {\n return cn('group transition-colors', this.isExpanded(id) ? 'bg-muted/30' : 'hover:bg-muted/20')\n }\n\n chevronClass(id: string): string {\n return cn(\n 'text-muted-foreground group-hover:text-foreground mt-0.5 shrink-0 transition-transform sm:mt-0',\n this.isExpanded(id) && 'text-foreground rotate-90',\n )\n }\n\n afterPanelClass(event: CdcStreamEvent): string {\n return cn(\n 'overflow-hidden rounded-md border border-zinc-800 bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner',\n !event.before && 'lg:col-span-2',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/cdc-replication-stream/cdc-replication-stream.component.ts" }, { "path": "packages/registry-angular/blocks/cdc-replication-stream/index.ts", "content": "export {\n UiCdcReplicationStreamComponent,\n matchesSearch,\n type CdcOperation,\n type CdcOperationFilter,\n type CdcTableMetric,\n type CdcStreamEvent,\n} from './cdc-replication-stream.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/cdc-replication-stream/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": "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" ] }