How mizcausevic-dev/kg-governance-dashboard works
Purpose and principal workflow
This is a browser-only governance dashboard for procurement reviewers, CISOs, and district CIOs. A reviewer opens the deployed SPA; it either loads recent events and follows the live event stream from the upstream audit-stream service, or—when no service URL is configured—shows a synthetic demo stream. The reviewer can inspect trends, producers, and filtered audit events, configure browser-side alerts, and explicitly request an audit-chain verification.
Components
Application and event input
• Reviewer — *(external; null repository path)* Procurement reviewer, CISO, or district CIO who opens the dashboard and uses its views and controls.
• Audit-stream service — *(external; null repository path)* Upstream audit-stream-py service documented as the source of the event history, SSE stream, and on-demand chain verification.
• React bootstrap — src/main.tsx Mounts the React application into the page’s root element.
• Dashboard orchestrator — src/App.tsx Owns the selected tab, event list, connection state, and vendor filter; chooses live or demo input and passes events to dashboard UI.
• Live audit client — src/lib/audit-stream.ts Reads the runtime URL and implements history and verification REST calls plus an EventSource subscription to the stream.
• Demo event generator — src/lib/demo-events.ts Builds synthetic event history and emits subsequent events when live mode is unavailable.
• Runtime endpoint configuration — public/config.js Supplies the audit-stream URL at runtime so a deployed dashboard can be repointed without rebuilding.
Governance views and interpretation
• Dashboard shell and status — src/components/AppHeader.tsx Provides header-level dashboard controls and status presentation; the README also documents sidebar, banner, system-log, and status-bar shell elements.
• Trend overview — src/components/OverviewTab.tsx Derives KPI, hourly, and event-kind summaries from the event list and renders charts; event severity comes from the RMF catalog.
• Producer activity — src/components/ProducersTab.tsx Groups events by the producer catalog and shows per-kind counts and each producer’s latest event.
• Audit trail and vendor filtering — src/components/AuditTrailTab.tsx Presents the event trail; the README documents filtering it by vendor mentions in event payloads.
• Chain verification view — src/components/VerifyTab.tsx Provides the user-facing verification action and result display; the README documents the on-demand chain check.
• Event and producer contract — src/lib/types.ts Defines the shared governance-event and producer types used by the dashboard.
• RMF event catalog — src/lib/rmf-citations.ts Maps event kinds to descriptions, severity, and NIST AI RMF citations used in event interpretation.
Alerts and derived data
• Alert rules and browser persistence — src/lib/alert-rules.ts Evaluates match and rolling-threshold rules and reads/writes rules and hits in browser localStorage; it also requests permission for and fires desktop notifications.
• Alert controls and notifications — src/components/NotificationBell.tsx Evaluates incoming events against rules, persists hits, and exposes the bell, hit list, and rule editor to the user.
• Chart derivations — src/lib/chart-utils.ts Supplies event-stream aggregations for trend and distribution charts.
Relationships
• Reviewer -> React bootstrap: opens the deployed dashboard; the page’s root element is mounted by the React entry point.
• React bootstrap -> Dashboard orchestrator: renders the root application component.
• Dashboard orchestrator -> Runtime endpoint configuration: reads the configured stream URL through the live client’s runtime-config lookup.
• Dashboard orchestrator -> Live audit client: when configured, requests history and subscribes to the event stream; also closes the subscription on cleanup.
• Audit-stream service -> Live audit client: serves history and verification responses and sends stream events; this is an external interface documented by the README and implemented as REST/SSE calls by the client.
• Dashboard orchestrator -> Demo event generator: when no live URL is configured, seeds history and starts a synthetic event subscription instead of using the live stream.
• Dashboard orchestrator -> Dashboard shell and status: supplies connection state, event count, active tab, and event data to the shell.
• Dashboard orchestrator -> Trend overview: passes the current event list for KPI and chart derivation.
• Dashboard orchestrator -> Producer activity: passes the current event list for producer-level aggregation.
• Dashboard orchestrator -> Audit trail and vendor filtering: passes events and the vendor-filter state.
• Reviewer -> Chain verification view: selects the verification view and initiates the on-demand check.
• Chain verification view -> Live audit client: requests chain verification; the client makes the verification GET request to the audit-stream service.
• Dashboard orchestrator -> Alert controls and notifications: supplies the current event list for alert evaluation.
• Alert controls and notifications -> Alert rules and browser persistence: loads and saves rules and hits, evaluates rules, and delegates desktop notification permission and delivery.
• Trend overview -> RMF event catalog: looks up severity while computing event-severity KPIs.
• Producer activity -> RMF event catalog: looks up event severity for producer event-kind chart colors.
• Trend overview -> Chart derivations: obtains hourly and event-kind aggregates for its charts.
Coverage limits
The source excerpts are bounded: several UI modules and the chart utility implementation were not sampled. Their responsibilities and some behavior are documented in the README, but internal call details beyond the cited evidence are not established here.
Main entry points: App.tsx Dashboard orchestrator · OverviewTab.tsx Trend overview · audit-stream.ts Live audit client · main.tsx React bootstrap
Components 16
Application and Event Input
- React bootstrap
src/main.tsx - Dashboard orchestrator
src/App.tsx - Live audit client
src/lib/audit-stream.ts - Demo event generator
src/lib/demo-events.ts - Runtime endpoint configuration
public/config.js
Governance Views
- Dashboard shell and status
src/components/AppHeader.tsx - Trend overview
src/components/OverviewTab.tsx - Producer activity
src/components/ProducersTab.tsx - Audit trail and vendor filtering
src/components/AuditTrailTab.tsx - Chain verification view
src/components/VerifyTab.tsx
Event Interpretation
- RMF event catalog
src/lib/rmf-citations.ts - Chart derivations
src/lib/chart-utils.ts
Alerts
- Alert controls and notifications
src/components/NotificationBell.tsx - Alert rules and browser persistence · Evaluates alert rules, persists rules and hits in browser localStorage, and handles desktop notifications.
src/lib/alert-rules.ts
Other components
- Reviewer · Procurement reviewer, CISO, or district CIO.
- Audit-stream service · Upstream service for event history, SSE events, and chain verification.
Connections 17
- Reviewer → React bootstrap: opens dashboard
- React bootstrap → Dashboard orchestrator: renders
- Dashboard orchestrator → Runtime endpoint configuration: reads URL · The live client uses the runtime configuration lookup.
- Dashboard orchestrator → Live audit client: loads and subscribes · Used when a live URL is configured.
- Audit-stream service → Live audit client: serves and streams · Provides history and verification responses and sends SSE events.
- Dashboard orchestrator → Demo event generator: seeds and subscribes · Used when no live URL is configured.
- Dashboard orchestrator → Dashboard shell and status: supplies dashboard state
- Dashboard orchestrator → Trend overview: passes events
- Dashboard orchestrator → Producer activity: passes events
- Dashboard orchestrator → Audit trail and vendor filtering: passes events and filter
- Reviewer → Chain verification view: requests verification
- Chain verification view → Live audit client: requests chain check
- Dashboard orchestrator → Alert controls and notifications: supplies events
- Alert controls and notifications → Alert rules and browser persistence: loads, saves, and evaluates
- Trend overview → RMF event catalog: looks up severity
- Producer activity → RMF event catalog: looks up severity
- Trend overview → Chart derivations: gets aggregates