React & Next.js Admin Dashboard UI

React Component Mounting & Props

Render the unified <ObservabilityDashboard /> component inside any client component:

"use client";

import { ObservabilityDashboard } from "@stacklenzz/ui";

export default function AdminObservabilityPage() {
  return (
    <main className="min-h-screen bg-[#090d16]">
      <ObservabilityDashboard
        config={{
          endpoint: "http://localhost:5000/api/observability/stats",
          refreshIntervalMs: 5000,
        }}
        defaultDashboard="full"
        showSwitcher={true}
      />
    </main>
  );
}

Available Dashboard Component Props

🎨 6 Built-in Runtime Themes

Switch themes live on the UI or configure your preferred default aesthetic. Theme selections automatically persist immediately to localStorage (key: stacklenzz_theme):

🏥 Dynamic SLA Health Evaluation Logic

The service header dynamically calculates composite system health (HEALTHY / DEGRADED / CRITICAL) in real-time, respecting your active Error Rate time window filter:

• CRITICAL: Triggered if active 5xx Error Rate ≥ 5.0%, remaining error budget ≤ 0%, P95 Latency ≥ 2,000ms, CPU Load ≥ 90%, Event Loop Lag ≥ 100ms, or Heap ≥ 95% (when Heap > 128MB).
• DEGRADED: Triggered if active 5xx Error Rate ≥ 1.0%, P95 Latency ≥ 800ms, CPU Load ≥ 75%, Event Loop Lag ≥ 30ms, or Heap ≥ 85% (when Heap > 128MB).
• HEALTHY: All metrics operating within normal baseline boundaries.

5xx Server Error Rate Formula & Depleted SLO Bar

Error Rate % = (Total HTTP 500+ Responses / Total HTTP Responses) × 100

When your error budget drops to 0%, the <SloCard /> visualizes a clear red depleted budget track rather than rendering empty space, keeping SLO status and service headers synchronized.

💻 CLI Commands Reference

The zero-config CLI simplifies setup and diagnostic checks across Next.js and Vite projects: