Developer
e1356b20f1
PR 3 of 4 for configurable dashboard widgets. - Add TypeScript widget interfaces (WidgetInstance, WidgetInstanceInput, WidgetTypeInfo, WidgetDataResponse). - Create widget API client for CRUD, registry metadata, and per-widget data. - Create TanStack Query hooks for instances, data, sources, types, and mutations. - Create closed frontend widget registry with metadata, source type, refresh intervals, and config fields. - Add six shadcn/ui-based widget components: Jellyfin, Backups, Grafana link, Prometheus metric, SSH task output, and static text. - Add Vitest unit tests for registry metadata. Verification: - backend ruff clean; pytest 200 passed - frontend npm run lint: 0 errors - frontend npm run build: success - frontend npm run test -- src/widgets/registry.test.ts: 3 passed
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.