- Throughput chart: divide totalCount by bucket duration (seconds) so Y-axis shows true msg/s instead of raw bucket counts; fixes flat-line appearance when TPS is low but totalCount is large - Error Rate chart: convert failedCount/totalCount to percentage; change yLabel from "err/h" to "%" to match KPI stat card unit - Memory chart: add threshold line at jvm.memory.heap.max so chart Y-axis extends to max heap and shows the reference line (spec 5.3) - Agent state: suppress containerStatus badge when value is "UNKNOWN"; only render it with "Container: <state>" label when a non-UNKNOWN secondary state is present (spec 5.4) - DashboardTab chartGrid: add pointer-events:none with pointer-events:auto on children so the chart grid overlay does not intercept clicks on the Application Health table rows below (spec 5.5) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Cameleer3 UI
React SPA built with @cameleer/design-system v0.1.28, TanStack Query, and Zustand.
Development
npm install
npm run dev
By default the dev server proxies /api/* to http://localhost:8081. To proxy to a remote server instead:
VITE_API_TARGET=http://192.168.50.86:30081 npm run dev
No CORS issues — Vite's proxy makes API calls server-side.
Build
npm run build
API Types
Regenerate TypeScript types from a running backend:
npm run generate-api # Requires backend running on :8081
Key Features
- Composable sidebar with accordion behavior (Applications / Starred / Admin sections)
- Context-aware cmd-k search: shows apps/routes/exchanges on operational pages, users/groups/roles on admin pages
- LIVE mode toggle: when ON, queries poll at intervals (5s-30s); when OFF, sidebar clicks trigger manual refresh
- Route control bar with state-aware buttons (start/stop/suspend/resume) and confirmation dialogs
- Event-type icons in agent timeline with severity-based coloring