manage/frontend

Manage Frontend

React + TypeScript SPA for Manage, consuming the FastAPI backend.

Tech Stack

• Vite — Build tool
• React 18+ — UI framework
• TypeScript — Type safety
• @tanstack/react-query — Data fetching/caching
• ag-grid-react — Data tables (media, file browser)
• recharts — Monitoring charts
• react-router-dom — Client-side routing
• Tailwind CSS — Styling

Setup

cd frontend
npm install

Development

npm run dev

Runs on http://localhost:5173 with API requests proxied to http://localhost:8000.

Make sure the backend is running:

cd ../backend
uvicorn main:app --reload --port 8000

Build

npm run build

Output goes to frontend/dist/.

Pages

• Dashboard (/) — Now playing, backend-collected per-machine monitoring table with 10-minute averages/min/max, library stats
• Monitoring (/monitoring) — Per-machine CPU/IO wait/RAM/network/disk charts, collector controls, and backend-collected recent action history
• Media (/media) — Full-library table with sort/filter/search
• Users (/users) — Read-only Jellyfin user list with optional Jellyseerr enrichment
• File Browser (/files) — Remote directory browsing, ffprobe preview, jobs
• Settings (/settings) — Persistent monitoring machine definitions and setup workflow

Environment Variables

Set VITE_API_URL and any OIDC variables directly in your shell or Compose build args if the API is not at http://localhost:8000.

VITE_API_URL=http://your-backend-host:8000

Configuration workflow examples

• Local development: run docker compose -f docker-compose.dev.yml up --build, then open the app and add monitoring machines in the Settings tab.
• Production: export the required Compose variables in your shell, run docker compose up --build, and manage local/remote machines from Settings.
• Dashboard monitoring UI: the dashboard shows a compact, sortable table with one row per configured machine plus poller status.
• Monitoring UI: the Monitoring tab shows one card per configured machine, including a recent action-history table populated by the backend poller. A machine can be local (the API host itself) or ssh (a remote host), and the UI treats both the same after configuration. The page also shows the backend poller health badge.

In development, the Vite proxy handles /api requests automatically.