Developer
8bc209b27e
Refreshes the docs that were actively misleading about the current FastAPI + React + service-registry app, and deletes one obsolete design. - CONTRIBUTING.md: full rewrite — Streamlit-era guidance replaced with the current backend (ruff/pytest, src/ layout) + frontend (npm lint/build/test) workflow, service-registry model, and shadcn/Tailwind stack. Mirrors AGENTS.md. - README.md: removed the non-existent /addons/:addonId route (Services page is current); fixed the per-machine Jellyfin wording; replaced the py_compile dev snippet with ruff + pytest / npm lint+build+test. - backend/README.md: updated the structure tree (removed deleted clients/resources.py; added routers backups/services/tasks/widgets, integrations/, models/, widgets/, workers/); dropped the "starts the collector" sentence (MonitoringPoller is decommissioned). - frontend/README.md: corrected the uvicorn module path (main:app -> media_library_viewer_api.main:app). - Deleted docs/superpowers/specs/2026-05-08-obsidian-documentation-design.md (Obsidian vault never built; stack refs MUI/D3/AG Grid all removed). Historical docs (MIGRATION_PLAN, superpowers backup-monitoring, the bannered design/runbook/context files) deferred to a later banner pass.
71 lines
2.8 KiB
Markdown
71 lines
2.8 KiB
Markdown
# 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
|
|
- **@tanstack/react-table** — Data tables (media, file browser)
|
|
- **react-router-dom** — Client-side routing
|
|
- **Tailwind CSS** + **shadcn/ui** — Styling
|
|
|
|
## Setup
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
```
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Runs on <http://localhost:5173> with API requests proxied to <http://localhost:8000>.
|
|
|
|
Make sure the backend is running:
|
|
|
|
```bash
|
|
cd ../backend
|
|
uvicorn media_library_viewer_api.main:app --reload --port 8000
|
|
```
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Output goes to `frontend/dist/`.
|
|
|
|
## Pages
|
|
|
|
- **Dashboard** (`/`) — Now playing, library stats, configurable widgets and shortcuts, frontend/backend version chips in the shell header
|
|
- **Observability** (`/observability`) — Thin dashboard: Alertmanager alerts, Prometheus target health, machine status, and Grafana deep-links (no in-app charting)
|
|
- **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, SSH keys, and setup workflow
|
|
- **Actions** (`/actions`) — Saved server tasks (shell/python) targeting ssh_tasks services
|
|
|
|
## 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.
|
|
|
|
```bash
|
|
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**.
|
|
- **Observability**: Manage only deploys backend + frontend. It connects to **existing** Grafana/Prometheus/Alertmanager instances; see `docker-compose.observability.yml` for an optional standalone example stack. A machine can be `local` (the API host itself) or `ssh` (a remote host), and the UI treats both the same after configuration.
|
|
|
|
In development, the Vite proxy handles `/api` requests automatically. Observability services (Grafana, Prometheus, Alertmanager) are configured in the app on the Services page — there are no observability env vars.
|