e0496fdba2
Wire up the existing POST /alerts/rules/{id}/render-preview endpoint
so rule authors can preview their Mustache-templated notification
before saving. Available in edit mode only (new rules require save
first — endpoint is id-bound). Matches the njams gap: their rules
builder ships no in-builder preview and operators compensate with
trial-and-error save/retry.
Implementation notes:
- ReviewStep gains an optional `ruleId` prop; when present, a
"Preview notification" button calls `useRenderPreview` (the
existing TanStack mutation in api/queries/alertRules.ts) and
renders title + message in a titled, read-only pane styled like
a notification card.
- Errors surface as a DS Alert (variant=error) beneath the button.
- `RuleEditorWizard` passes `ruleId={id}` through — mirrors the
existing TriggerStep / NotifyStep wiring.
- No stateless (/render-preview without id) variant exists on the
backend, so for new rules the button is simply omitted.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Cameleer 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