Developer
e783d2c07b
- Replace embedded Grafana iframes in ObservabilityPage with external Grafana link cards. Grafana URL is configurable via VITE_GRAFANA_URL (frontend) or GRAFANA_URL (backend env exposed to frontend build). - Remove the grafana scrape job from monitoring/prometheus/prometheus.yml so the main Prometheus stack no longer depends on Grafana. - Pass GRAFANA_URL through docker-compose.yml and docker-compose.dev.yml.
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, frontend/backend version chips in the shell header - 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.
The frontend version defaults to the package.json version and can be overridden with VITE_APP_VERSION and VITE_APP_BUILD_INFO when you need explicit deployed labels.
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) orssh(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.