Skip to content
kerfjsGitHub

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/veneer

Usage

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

PropTypeDefaultDescription
channelstring—The channel's name.
statsLive<IntegrityStats>—The counts.
eventsLive<IntegrityEvent[]>—The recent events.
liveLiveState—Shows a live status.
EventTypeDefaultDescription
onInjectDuplicate(() => void)—Sends a duplicate.
onInjectReorder(() => void)—Sends events out of order.
onReset(() => void)—Clears the counts.

RelatedSynced form