DataIntegrity
A developer panel for a live channel: sent, received, duplicates and lag.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { DataIntegrity } from '@kerf-js/veneer'import type { IntegrityEvent } from '@kerf-js/veneer'import type { IntegrityStats } from '@kerf-js/veneer'export function Channel() { const stats = state(INTEGRITY_STATS) const events = state<IntegrityEvent[]>(INTEGRITY_EVENTS) const log = ( note: string, change: Partial<typeof INTEGRITY_STATS>, ) => { const seq = stats.value.sent + 1 stats.value = { ...stats.value, sent: seq, ...change } events.value = [ { id: `e${seq}`, seq, kind: 'title', route: 'You → Jun', note, lag: 40, }, ...events.value, ].slice(0, 5) } const reset = () => { stats.value = { sent: 0, received: 0, duplicate: 0, outOfOrder: 0, lagP95: 0, } events.value = [] } return ( <DataIntegrity channel="runbook:rollback" stats={stats} events={events} live="live" onInjectDuplicate={() => log('duplicate, ignored', { duplicate: stats.value.duplicate + 1, }) } onInjectReorder={() => log('out of order', { outOfOrder: stats.value.outOfOrder + 1, }) } onReset={reset} /> )}const INTEGRITY_STATS: IntegrityStats = { sent: 42, received: 41, duplicate: 1, outOfOrder: 0, lagP95: 54,}const INTEGRITY_EVENTS: IntegrityEvent[] = [ { id: 'e3', seq: 42, kind: 'status', route: 'Jun → you', lag: 31, }, { id: 'e2', seq: 41, kind: 'title', route: 'Jun → you', note: 'duplicate, ignored', lag: 54, }, { id: 'e1', seq: 41, kind: 'title', route: 'Jun → you', lag: 28, },]Installation
npm install @kerf-js/veneerUsage
tsx
import { DataIntegrity } from '@kerf-js/veneer'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
channel | string | — | The channel's name. |
stats | Live<IntegrityStats> | — | The counts. |
events | Live<IntegrityEvent[]> | — | The recent events. |
live | LiveState | — | Shows a live status. |
| Event | Type | Default | Description |
|---|---|---|---|
onInjectDuplicate | (() => void) | — | Sends a duplicate. |
onInjectReorder | (() => void) | — | Sends events out of order. |
onReset | (() => void) | — | Clears the counts. |
RelatedSynced form