Skip to content

Frontend Overview

The LogSys frontend is a React 19 + TypeScript SPA (in admin/) that provides the AlertOps operational dashboard. It consumes the REST API and the WebSocket stream for real-time KPIs.

Tech Stack

Concern Choice
UI React 19
Routing TanStack Router (type-safe, file-based)
Server state TanStack Query
Tables TanStack Table
Charts Recharts
Styling Tailwind CSS + CSS variables (oklch)
Client state Zustand
Real-time Native WebSocket (useKpiStream)
Build Vite + pnpm

Project Structure

admin/src/
├── components/      # Shared UI (DataTable, dialogs, layout…)
├── features/        # Feature modules (auth, dashboard, logs, …)
├── hooks/           # Shared hooks (useKpiStream, usePermissions…)
├── lib/             # API client, utils
├── routes/          # TanStack Router route tree
├── stores/          # Zustand stores
└── styles/          # index.css, theme.css

Feature Modules

Feature Contents
auth Login, session, RBAC
dashboard KPIs, charts, calendar
logs-analytics Logs, templates, analytics, AI insights
alerts / incidents Alert rules & incident management
sources / applications Source & app CRUD
monitoring Infra health + collectors
reports Report generation
tasks / users Task & user management
permissions Role/permission config
settings App settings

Routing

File-based routing with TanStack Router:

Route group Scope
(auth) Login page
_authenticated All logged-in pages (RBAC-guarded)
(errors) Error pages (404, 500)
__root Root layout (sidebar, topbar, theme)

Route files declare their required permission; unauthorized routes redirect.

Real-time

  • useKpiStream opens /ws/kpis and reconnects with backoff
  • Initial kpi:snapshot populates the dashboard instantly
  • Subsequent snapshots update charts/indicators live
  • See Real-time Updates

Theme

  • DXC colors (--accent-peach, --accent-blue, …) in theme.css
  • Severity palette (--sev-error, --sev-critical, …)
  • Light/dark mode via prefers-color-scheme + manual toggle
  • See Theme & Styling

Build & Deploy

cd admin
pnpm install
pnpm dev          # Vite dev server
pnpm build        # static build → dist/

The static build is deployable to Netlify or any static host; it talks to the API via Vite proxy in dev.