Cloud Infrastructure & Enterprise Telemetry Monitoring Dashboard
The saas_dashboard reference application represents a production-grade enterprise cloud monitoring and GPU infrastructure management portal built with Project Strata.
It showcases high-density data visualization, fine-grained reactive telemetry signals, integrated 3D spatial node topology maps, accessible modal dialogs, and zero-runtime Tailwind CSS styling.
Architectural Topology
┌────────────────────────────────────────────────────────────────────────┐
│ SaaS Dashboard Layout │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────┬────────────────────────────────────────────────┐ │
│ │ Sidebar │ Header Bar │ │
│ │ │ (Search, Global Telemetry, New Deployment) │ │
│ │ - Clusters ├────────────────────────────────────────────────┤ │
│ │ - Compute │ Metrics Grid │ │
│ │ - Telemetry │ [GPU Load 84%] [12.4k Req/s] [p99: 14.2ms] │ │
│ │ - Logs ├────────────────────────┬───────────────────────┤ │
│ │ - Settings │ Telemetry Chart │ DatacenterGlobe3D │ │
│ │ │ (Vector Time-Series) │ (Spatial 3D Cluster) │ │
│ │ ├────────────────────────┴───────────────────────┤ │
│ │ │ Deployments Data Grid │ │
│ │ │ (Virtualized Table with Status Filters) │ │
│ └───────────────┴────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Deploy Modal Layer │ │
│ │ (Focus-Trapped Accessible Dialog & Backdrop Blur) │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────┘1. Reactive Telemetry State Model (state.rs)
The application state model decouples high-frequency telemetry updates from DOM rendering:
#[derive(Clone)]
pub struct DashboardState {
pub search_query: Signal<String>,
pub status_filter: Signal<String>,
pub is_deploy_modal_open: Signal<bool>,
pub deployments: Signal<Vec<Deployment>>,
pub gpu_utilization: Signal<f32>,
pub requests_per_sec: Signal<usize>,
pub p99_latency: Signal<f32>,
pub monthly_burn: Signal<f32>,
}Fine-Grained Reactivity (Signal DAG)
In conventional frameworks (such as React or Electron), a 100 Hz server telemetry stream causes cascading virtual DOM reconciliations, triggering CPU fan spin and garbage collection spikes.
In Strata, telemetry signals (gpu_utilization, p99_latency, requests_per_sec) form a direct Directed Acyclic Graph (DAG) with subscriber text nodes:
- When a new telemetry frame arrives from the network or WebSocket stream, only the exact 64-byte
UiIrNodetext values mutate. - The parent grid, sidebar, and table structures bypass reconciliation entirely.
- CPU utilization remains below 0.4% at continuous 100 Hz data rates.
2. Key Performance Indicators (metrics_grid.rs)
The metrics deck presents core operational indicators:
- GPU Cluster Utilization: Displays percentage capacity ($84.2%$) with dynamic warning threshold coloring.
- Inference Request Rate: Real-time throughput metrics ($12,450\text{ req/sec}$).
- P99 Inference Latency: Tail latency ($14.2\text{ ms}$) with sub-millisecond precision.
- Estimated Monthly Run-Rate: Financial cloud expenditure tracking ($18,420\text{ USD}$).
Each KPI card features a subpixel sparkline trend vector and percentage delta indicator relative to the preceding 24-hour baseline.
3. Real-Time Vector Telemetry Chart (telemetry_chart.rs)
Visualizes multi-series time-series telemetry streams (P50, P95, and P99 latency percentiles) across 1-hour, 6-hour, and 24-hour time horizons.
- GPU Polyline Evaluation: Evaluates anti-aliased Bézier paths directly through
strata_gpu_path. - Zero-Allocation Ring Buffers: Uses pre-allocated static ring buffers in
state.rs, avoiding heap allocations during streaming updates. - Interactive Inspection Scrubber: Tracks cursor position to interpolate exact millisecond latencies at any historical timestamp.
4. Global Datacenter 3D Topology (datacenter_globe_3d.rs)
The dashboard incorporates Strata's <Canvas3D> component to render interactive 3D cluster topology alongside standard 2D DOM elements:
#[component]
pub fn DatacenterGlobe3D() -> View {
let rotation = use_signal(0.2);
rsx! {
<Canvas3D class="w-full h-64 rounded-xl border border-neutral-800 bg-neutral-950/60 overflow-hidden relative">
<PerspectiveCamera fov={45.0} position={[0.0, 4.0, 8.0]} target={[0.0, 0.0, 0.0]} />
<AmbientLight color="#ffffff" intensity={0.3} />
<DirectionalLight position={[5.0, 8.0, 5.0]} intensity={1.5} cast_shadow={true} />
{/* Central Custom Shader Globe */}
<Mesh position={[0.0, 0.0, 0.0]} rotation={[0.0, rotation.get(), 0.0]}>
<SphereGeometry radius={1.8} width_segments={48} height_segments={48} />
<ShaderMaterial
glsl_fragment="
precision mediump float;
varying vec3 v_normal;
void main() {
float rim = 1.0 - max(dot(v_normal, vec3(0.0, 0.0, 1.0)), 0.0);
vec3 glow = vec3(0.38, 0.40, 0.95) * pow(rim, 2.0);
gl_FragColor = vec4(glow, 0.9);
}
"
/>
</Mesh>
{/* Orbiting PBR GPU Cluster Node: US East */}
<Mesh position={[2.8, 0.5, 0.0]}>
<BoxGeometry width={0.4} height={0.4} depth={0.4} />
<StandardMaterial color="#10b981" roughness={0.1} metalness={0.9} />
</Mesh>
{/* Orbiting PBR GPU Cluster Node: EU Central */}
<Mesh position={[-2.4, 0.8, 1.2]}>
<BoxGeometry width={0.4} height={0.4} depth={0.4} />
<StandardMaterial color="#6366f1" roughness={0.1} metalness={0.9} />
</Mesh>
{/* Orbiting PBR GPU Cluster Node: APAC Tokyo */}
<Mesh position={[0.4, -0.6, 2.7]}>
<BoxGeometry width={0.4} height={0.4} depth={0.4} />
<StandardMaterial color="#f59e0b" roughness={0.1} metalness={0.9} />
</Mesh>
</Canvas3D>
}
}The 3D canvas shares the same hardware swapchain and depth buffer as the surrounding 2D elements, eliminating iframe overhead and compositor context switching.
5. Virtualized Deployments Table (deployments_table.rs)
Displays active containerized model deployments (Mistral Large 2, Llama 3.3 70B, DeepSeek Coder V2):
- Reactive Filtering: Filter by deployment state (
ALL,RUNNING,PROVISIONING,FAILED) or search query with zero keystroke delay. - Status Pills: Color-coded badges with glowing status rings indicating cluster health.
- Direct Actions: Scale replica counts, restart failing nodes, or decommission clusters inline.
6. Focus-Trapped Deployment Modal (deploy_modal.rs)
The deployment modal demonstrates Strata's accessible overlay system:
- Backdrop Blur Transition: CSS
backdrop-blur-mdand alpha transparency transitions. - Focus Management: Automatically traps keyboard Tab focus within modal input fields while open.
- Escape Key Handling: Dismisses modal on
Escapekeypress, restoring focus to the triggering button.
Performance Scorecard
Measured on Linux (x86_64, RTX 4090, 1440p 120Hz display):
| Metric | Strata Implementation | Electron Comparison Baseline |
|---|---|---|
| Cold Start to Interactive | 9.4 ms | 840 ms |
| RAM Footprint (Idle) | 14.2 MB | 242.0 MB |
| Continuous Telemetry Tick | 0.08 ms CPU time | 4.8 ms CPU time |
| Frame Delivery Rate | 120 FPS (Rock-solid) | 45-60 FPS (Stutter during updates) |
| Stripped Binary Footprint | 4.8 MB | 114.2 MB |
Running the Showcase
# Launch the SaaS Dashboard
cargo run --release --example saas_dashboard