UI Dashboard & Monitoring Tab
Relevant source files
The following files were used as context for generating this wiki page:
The UI Dashboard and Monitoring system provides a centralized interface for real-time status updates, system health tracking, and performance metrics. It visualizes data from various sensing services, including hardware health, API connectivity, and inference engine performance. The dashboard serves as the primary entry point for operators to monitor the WiFi-DensePose platform's integrity and resource utilization.
Sources: ui/TEST_REPORT.md:12-25, v2/crates/wifi-densepose-desktop/README.md:12, ui/components/DashboardTab.js:7-12
Architecture and Core Logic
The DashboardTab class manages the lifecycle of the dashboard view. It initializes by caching DOM elements, loading initial API data, and establishing subscriptions to health and sensing services. The system utilizes a polling mechanism and event-driven updates to maintain real-time accuracy.
Initialization Sequence
- Element Caching: The component identifies and stores references to status indicators and metric containers.
- Initial Data Load: It fetches baseline API information and initial pose statistics.
- Service Monitoring: It subscribes to the
healthServiceandsensingServiceto receive asynchronous updates. - Periodic Polling: A 5000ms interval triggers live statistic updates, while health monitoring runs every 30000ms.
Sources: ui/components/DashboardTab.js:15-84, ui/tests/integration-test.html:314-325
The diagram shows the asynchronous flow between the dashboard component and backend services during initialization and operation.
Sources: ui/components/DashboardTab.js:52-82
System Health and Status Monitoring
The dashboard tracks the status of critical system components using a specific set of health states. These states are visually represented by color-coded indicators in the UI.
Component Mapping
The dashboard maps backend component names to specific UI elements:
posemaps to Inference.streammaps to Streaming.hardwaremaps to Hardware.
Sources: ui/components/DashboardTab.js:145-155
Component Status Levels
| Status | Description | UI representation |
|---|---|---|
healthy | Component is running normally | Green indicator / "HEALTHY" |
warning | Component is functional but limited | Yellow indicator / "WARNING" |
degraded | Component performance is suboptimal | Amber indicator |
unhealthy | Component has failed or is unreachable | Red indicator / "UNHEALTHY" |
Sources: ui/components/DashboardTab.js:90-105, ui/components/DashboardTab.js:157-170, ui/tests/integration-test.html:115-135
Resource and Performance Metrics
The dashboard visualizes system resource usage through progress bars and percentage displays. It tracks three primary metrics: CPU usage, Memory usage, and Disk usage.
Logic for Metric Representation
The UI updates metrics based on the data structure received from the health service. If CPU usage reaches specific thresholds, the CSS class changes to provide visual warnings:
- Normal: < 75%
- Warning: 75% - 89%
- Critical: ≥ 90%
Sources: ui/components/DashboardTab.js:203-215, ui/components/DashboardTab.js:231-236
Sensing Features and Data Sources
The dashboard provides specific feedback on the sensing data source, which determines the reliability of the displayed metrics.
This flowchart illustrates how different data source states translate into specific dashboard status indicators.
Sources: ui/components/DashboardTab.js:93-107
Real-time Occupancy and Statistics
The dashboard tracks live pose data and zone-level occupancy. This involves counting detected persons and calculating average detection confidence.
Statistics Components
- Person Count: Tracks active individuals in the sensing field.
- Average Confidence: Calculates the mean confidence percentage across all active detections.
- Total Detections: Displays a formatted cumulative count (e.g., 1.5M for millions).
- Zone Summary: Lists specific zones (e.g.,
zone_1,zone_2) and the number of persons currently occupying each.
Sources: ui/components/DashboardTab.js:256-320, ui/tests/integration-test.html:158-175
Data Formatter Example
The DashboardTab uses a formatter for large numbers to ensure UI readability:
// ui/components/DashboardTab.js:358-366
formatNumber(num) {
if (num >= 1000000) {
return `${(num / 1000000).toFixed(1)}M`;
}
if (num >= 1000) {
return `${(num / 1000).toFixed(1)}K`;
}
return num.toString();
}
UI Design and User Guidance
The dashboard follows the ADR-053 design system, utilizing a professional dark theme with specific color tokens:
--bg-base:#0d1117--accent:#7c3aed(Purple)--status-online:#3fb950
Sources: v2/crates/wifi-densepose-desktop/README.md:55-65
Users can access the "Help Center" from the dashboard by pressing ? or clicking the help button. This center provides a glossary of terms such as NV-diamond, CW-ODMR, and MagFrame, alongside quickstart steps for running the live frame stream and verifying the "witness" SHA-256 for determinism.
Sources: dashboard/src/components/nv-help.ts:13-35, dashboard/src/components/nv-help.ts:100-110
Summary
The UI Dashboard and Monitoring tab acts as the operational hub of the RuView project. It integrates data from hardware and inference services to provide a real-time overview of system health and sensing accuracy. By utilizing event-driven subscriptions and threshold-based visual alerts, it ensures that operators can identify system degradation or connection failures immediately across both live hardware and simulated environments.