Skip to content

Pages & Navigation

The frontend organizes operational screens into clear sections. Navigation is driven by TanStack Router with a persistent sidebar.

Layout

┌──────────────┬──────────────────────────────────────────┐
│              │  Topbar (search, theme, user menu)        │
│   Sidebar    ├──────────────────────────────────────────┤
│  navigation  │  Current page content                     │
│              │                                          │
└──────────────┴──────────────────────────────────────────┘
Region Content
Sidebar Section links, active-state highlighting
Topbar Global search (CommandPalette), theme toggle, user + role
Main Routed page component
Section Pages
Dashboard KPIs, charts, calendar
Logs & Analytics Logs explorer, templates, analytics, AI insights
Alerts Alert rules, firing alerts
Incidents Incident list, detail, timeline
Sources Source registry, ephemeral upload
Applications Application grouping
Monitoring Infra health, collector status
Tasks Task board, assignments
Users User management, roles
Permissions Role/permission matrix
Reports Report generation
Settings Platform settings

Key Pages

Dashboard

  • Global KPI cards (total events, error rate, events/min)
  • Severity + priority charts (Recharts)
  • GitHub-style priority calendar
  • Real-time updates via WebSocket

Logs Explorer

  • Table of events with filtering (severity, priority, source, environment, search)
  • Keyset pagination (cursor-based)
  • Row detail drawer with tags, template, priority

Templates

  • Top templates by occurrence
  • Per-template priority + confidence
  • Priority override action

AI Insights

  • ML snapshot engine results
  • Correlated templates, incident suggestions

Monitoring

  • PostgreSQL/Redis health indicators
  • Per-collector status + events_24h

Sources & Applications

  • Source CRUD + toggle
  • Ephemeral file upload
  • App grouping with unique event counts

Route Map (abridged)

Route Component
/login (auth)/login
/ Dashboard
/logs Logs explorer
/templates Templates
/analytics Analytics
/ai-insights AI insights
/alerts Alerts
/incidents Incidents
/sources Sources
/applications Applications
/monitoring Monitoring
/tasks Tasks
/users Users
/permissions Permissions
/settings Settings
  • _authenticated route group wraps all protected pages
  • Each page checks the user's role via usePermissions
  • Unauthorized → redirect or 403 screen
  • Command menu (Cmd/Ctrl + K) enables keyboard navigation