Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Developer
|
ef4a6379c9 | ||
|
Developer
|
d76ea49777 |
@@ -1,67 +1,62 @@
|
||||
# Manage
|
||||
|
||||
Manage is a media and server-operations application with Jellyfin integration, SSH file inspection, monitoring integrations, safe remote-job templates, a FastAPI backend, and a React single-page application.
|
||||
Manage is a media and server operations tool with Jellyfin integration, SSH file inspection, server monitoring, and safe remote job templates.
|
||||
|
||||
It includes a configurable dashboard, service registry, per-machine settings, a SQLite-indexed media library, a read-only Users view with optional Jellyseerr enrichment, remote file browsing with `ffprobe`, and SSH-based job execution.
|
||||
See `docs/REQUIREMENTS.md` for the living requirements, decisions, and planning history.
|
||||
See `docs/MIGRATION_PLAN.md` for the FastAPI + React architecture plan.
|
||||
|
||||
## Architecture and scope
|
||||
Project policy/docs:
|
||||
|
||||
- `backend/` is the FastAPI API.
|
||||
- `frontend/` is the React and TypeScript SPA.
|
||||
- `archive/` retains the original Streamlit prototype for reference.
|
||||
- License: `LICENSE` (MIT)
|
||||
- Contributing guide: `CONTRIBUTING.md`
|
||||
|
||||
The root Compose files deploy **only** Manage's backend and frontend. Manage can expose `/metrics` and optional Alertmanager proxy endpoints, but it does not deploy Grafana, Prometheus, Loki, Alertmanager, Alloy, or Node Exporter as part of its normal stack. Configure service instances in the app's Services page.
|
||||
## Architecture
|
||||
|
||||
## Prerequisites
|
||||
The project consists of two subprojects:
|
||||
|
||||
- Docker and Docker Compose for the supplied Compose stacks.
|
||||
- Python 3.11 or newer for manual backend development.
|
||||
- Node.js and npm for manual frontend development.
|
||||
- A valid Fernet key for `MANAGE_ENCRYPTION_KEY`, including in development Compose.
|
||||
- For production: an existing external Docker network named `web`, Traefik, DNS/TLS configuration, and an OIDC provider.
|
||||
- **`backend/`** — FastAPI Python API (see `backend/README.md`)
|
||||
- **`frontend/`** — React + TypeScript SPA (see `frontend/README.md`)
|
||||
- **`archive/`** — Original Streamlit prototype (preserved for reference)
|
||||
|
||||
## Local development with Compose
|
||||
## Features
|
||||
|
||||
1. Create `.env` from the template and set a valid `MANAGE_ENCRYPTION_KEY`. Docker Compose automatically reads `.env` for interpolation; alternatively, export the same variables in the shell.
|
||||
- Configurable dashboard with persisted widgets (Jellyfin activity, backups summary, Grafana deep-links, Prometheus metrics, Alertmanager alerts, SSH task output, static text) and shortcuts
|
||||
- Thin-dashboard observability: Alertmanager alerts, Prometheus target health, machine status, and Grafana deep-links (no in-app charting)
|
||||
- Service registry: configure Jellyfin, Jellyseerr, Alertmanager, Grafana, Prometheus, Nextcloud, and SSH task runner instances in the UI
|
||||
- Per-machine settings for SSH, monitoring targets, and file browsing
|
||||
- SQLite-indexed media table with full-library sort/filter
|
||||
- Read-only Users tab with Jellyfin as the base source and optional Jellyseerr enrichment
|
||||
- Remote file browser with ffprobe preview and job execution
|
||||
- Jellyfin API integration for library metadata and user identity data
|
||||
- SSH-based file inspection and safe remote job templates
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
## Quick Start
|
||||
|
||||
Generate a Fernet key if needed:
|
||||
### Docker Compose (recommended)
|
||||
|
||||
```bash
|
||||
python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
|
||||
```
|
||||
|
||||
2. Start the development stack:
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml up --build
|
||||
```
|
||||
|
||||
The development frontend is available at <http://localhost:5173> and the backend at <http://localhost:8000>. Development Compose sets `AUTH_ENABLED=false` and `VITE_OIDC_ENABLED=false`, but still requires `MANAGE_ENCRYPTION_KEY`. The backend cache, settings database, media index, saved SSH keys, tasks, and dashboard widgets persist outside rebuilt containers.
|
||||
|
||||
## Production-style deployment
|
||||
|
||||
The root [`docker-compose.yml`](docker-compose.yml) is designed for deployment behind Traefik; it does not publish localhost ports. Before starting it, configure `.env` (or shell variables) with the required values:
|
||||
|
||||
- `BACKEND_APP_HOST`, `FRONTEND_APP_HOST`, and `CERT_RESOLVER` for Traefik routing and certificates.
|
||||
- `OIDC_ISSUER_URL` and `OIDC_AUDIENCE` for backend authentication.
|
||||
- `VITE_OIDC_ISSUER`, `VITE_OIDC_CLIENT_ID`, `VITE_OIDC_REDIRECT_URI`, and `VITE_OIDC_POST_LOGOUT_REDIRECT_URI` for the frontend build.
|
||||
- `MANAGE_ENCRYPTION_KEY`, a valid Fernet key used to encrypt service secrets at rest.
|
||||
|
||||
Then run:
|
||||
Production-style deployment with the frontend serving the SPA and proxying `/api` to the backend. The compose files rely on environment-variable interpolation, so export the required values in your shell before running them (no `env_file` is needed):
|
||||
|
||||
```bash
|
||||
docker compose up --build
|
||||
```
|
||||
|
||||
The production Compose file requires its external `web` network to exist. It is not a standalone local deployment; access is through the configured Traefik hostnames.
|
||||
Open the app at <http://localhost:8080>.
|
||||
|
||||
## Manual development
|
||||
The production Compose file requires OIDC and Traefik variables; see [Configuration](#configuration) below. Copy `.env.example` to `.env`, fill in the required values, and export them in your shell before running `docker compose up`.
|
||||
|
||||
### Backend
|
||||
> **Observability is external.** Manage only ships its **backend** and **frontend**. It does **not** deploy Grafana, Prometheus, Loki, Alertmanager, Alloy, or Node Exporter. The backend exposes a `/metrics` endpoint and optional Alertmanager proxy endpoints so an *existing* observability deployment can scrape and consume them. For a ready-to-run example stack you can deploy alongside Manage, see [`docker-compose.observability.yml`](docker-compose.observability.yml) and [`docs/observability-runbooks.md`](docs/observability-runbooks.md).
|
||||
|
||||
Local development with hot reload:
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml up --build
|
||||
```
|
||||
|
||||
Frontend runs on <http://localhost:5173> and the backend on <http://localhost:8000>. Dev compose disables OIDC by default (`AUTH_ENABLED=false`), so you can open it directly without an identity provider.
|
||||
|
||||
The backend media index and settings database (including monitoring machines, SSH keys, saved tasks, and dashboard widgets) are persisted in Docker volumes so rebuilds and container restarts do not reset state.
|
||||
|
||||
### Manual backend/frontend development
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
@@ -71,75 +66,126 @@ pip install -e '.[dev]'
|
||||
uvicorn media_library_viewer_api.main:app --reload --port 8000
|
||||
```
|
||||
|
||||
### Frontend
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Tests and quality checks
|
||||
## Configuration
|
||||
|
||||
The Compose files use environment-variable interpolation. Export the required variables in your shell or pass them inline; a `.env` file is optional, not required.
|
||||
|
||||
### Compose examples
|
||||
|
||||
Production-style example with shell exports:
|
||||
|
||||
```bash
|
||||
# Backend
|
||||
cd backend
|
||||
ruff check .
|
||||
python -m pytest
|
||||
export BACKEND_APP_HOST=api.manage.example.com
|
||||
export FRONTEND_APP_HOST=manage.example.com
|
||||
export CERT_RESOLVER=letsencrypt
|
||||
export VITE_OIDC_ISSUER=https://auth.example.com/application/o/manage/
|
||||
export VITE_OIDC_CLIENT_ID=manage
|
||||
export VITE_OIDC_REDIRECT_URI=https://manage.example.com/oidc/callback
|
||||
export VITE_OIDC_POST_LOGOUT_REDIRECT_URI=https://manage.example.com/
|
||||
export MANAGE_ENCRYPTION_KEY=$(python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())")
|
||||
|
||||
# Frontend
|
||||
cd ../frontend
|
||||
npm run lint
|
||||
npm run build
|
||||
npm run test
|
||||
docker compose up --build
|
||||
```
|
||||
|
||||
A focused frontend typecheck can be run with `npx tsc --noEmit` from `frontend/`.
|
||||
> Observability services (Grafana, Prometheus, Alertmanager) are configured in
|
||||
> the app on the **Services** page — no env vars for them.
|
||||
|
||||
## Configuration and operations
|
||||
Inline one-liner example:
|
||||
|
||||
[`.env.example`](.env.example) is a template; do not commit real credentials or encryption keys. The Compose files interpolate environment values directly. Some template entries are for the optional observability example and are not consumed by the normal Manage Compose stack.
|
||||
```bash
|
||||
BACKEND_APP_HOST=api.manage.example.com FRONTEND_APP_HOST=manage.example.com CERT_RESOLVER=letsencrypt VITE_OIDC_ISSUER=https://auth.example.com/application/o/manage/ VITE_OIDC_CLIENT_ID=manage VITE_OIDC_REDIRECT_URI=https://manage.example.com/oidc/callback VITE_OIDC_POST_LOGOUT_REDIRECT_URI=https://manage.example.com/ docker compose up --build
|
||||
```
|
||||
|
||||
Optional SMTP settings (`SMTP_HOST`, `SMTP_PORT`, `SMTP_USERNAME`, `SMTP_PASSWORD`, `SMTP_FROM_ADDRESS`, `SMTP_FROM_NAME`, `SMTP_USE_TLS`, `SMTP_USE_SSL`, and `SMTP_TIMEOUT`) support the Users message popup.
|
||||
For local development, no SSH key is required unless you want to connect to remote SSH machines later:
|
||||
|
||||
### Remote servers
|
||||
```bash
|
||||
docker compose -f docker-compose.dev.yml up --build
|
||||
```
|
||||
|
||||
A managed remote server needs a POSIX `/bin/sh`, `python3`, `ffprobe`, `find`, `stat`, `df`, and `awk`. Configure its SSH credentials in Manage's Settings. Unknown SSH host keys are rejected; establish trust first, for example:
|
||||
Example environment variables:
|
||||
|
||||
```bash
|
||||
# Optional backend logging level
|
||||
LOG_LEVEL=INFO
|
||||
|
||||
# Optional SMTP settings for the Users -> message popup
|
||||
SMTP_HOST=smtp.example.com
|
||||
SMTP_PORT=587
|
||||
SMTP_USERNAME=your-smtp-username
|
||||
SMTP_PASSWORD=your-smtp-password
|
||||
SMTP_FROM_ADDRESS=no-reply@example.com
|
||||
SMTP_FROM_NAME=Manage
|
||||
SMTP_USE_TLS=true
|
||||
SMTP_USE_SSL=false
|
||||
SMTP_TIMEOUT=30
|
||||
|
||||
# Jellyfin, Jellyseerr, and SSH targets are now configured per machine in the app's Settings tab.
|
||||
# The backend seeds a local machine automatically, so no global Jellyfin or SSH env vars are required.
|
||||
#
|
||||
# Remote SSH machines can store their private key and optional passphrase directly in Settings,
|
||||
# so no SSH key mount is required for normal use.
|
||||
|
||||
# Authentik / OIDC
|
||||
AUTH_ENABLED=true
|
||||
OIDC_ISSUER_URL=https://auth.example.com/application/o/manage/
|
||||
OIDC_AUDIENCE=manage
|
||||
OIDC_JWKS_URL=
|
||||
OIDC_CLOCK_SKEW_SECONDS=30
|
||||
|
||||
# Frontend OIDC settings
|
||||
VITE_OIDC_ENABLED=true
|
||||
VITE_OIDC_ISSUER=https://auth.example.com/application/o/manage/
|
||||
VITE_OIDC_CLIENT_ID=manage
|
||||
VITE_OIDC_SCOPE=openid profile email
|
||||
VITE_OIDC_REDIRECT_URI=https://manage.example.com/oidc/callback
|
||||
VITE_OIDC_POST_LOGOUT_REDIRECT_URI=https://manage.example.com/
|
||||
|
||||
# Observability services (Grafana, Prometheus, Alertmanager) are configured in
|
||||
# the app on the Services page. The only observability env var is the optional
|
||||
# PROMETHEUS_ENABLED toggle (defaults on) for Manage's own /metrics endpoint.
|
||||
|
||||
# Required: master key encrypting service secrets (API keys/tokens) at rest.
|
||||
# Generate one with: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
|
||||
MANAGE_ENCRYPTION_KEY=replace-with-a-fernet-key
|
||||
```
|
||||
|
||||
## Remote server requirements
|
||||
|
||||
The remote server needs:
|
||||
|
||||
- `/bin/sh` (POSIX shell)
|
||||
- `python3`, `ffprobe`, `find`, `stat`, `df`, `awk` for file inspection and job templates
|
||||
- SSH access with a key configured in the app's Settings tab
|
||||
|
||||
The SSH client rejects unknown host keys. Connect manually once first:
|
||||
|
||||
```bash
|
||||
ssh user@host
|
||||
```
|
||||
|
||||
SSH commands run through `/bin/sh -c` regardless of the remote login shell.
|
||||
|
||||
### Optional observability example
|
||||
|
||||
[`docker-compose.observability.yml`](docker-compose.observability.yml) is a separate, optional stack for Grafana, Prometheus, Loki, Alertmanager, Alloy, and Node Exporter. It is not required by Manage. Its header documents required `*_ROOT` persistence directories, `CERT_RESOLVER`, and Grafana/Prometheus/Alertmanager host variables. With those prepared, run:
|
||||
## Development
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.observability.yml up -d
|
||||
# Backend (lint + tests)
|
||||
cd backend && .venv/bin/ruff check . && .venv/bin/python -m pytest
|
||||
|
||||
# Frontend (lint + typecheck/build + tests)
|
||||
cd frontend && npm run lint && npm run build && npm run test
|
||||
```
|
||||
|
||||
Set a non-default `GRAFANA_ADMIN_USER` and a strong, secret `GRAFANA_ADMIN_PASSWORD` before deploying this stack. Do not expose the example observability services with their defaults.
|
||||
Focused frontend typecheck: `npx tsc --noEmit`.
|
||||
|
||||
See [`docs/observability-runbooks.md`](docs/observability-runbooks.md) for its operational documentation.
|
||||
## Notes
|
||||
|
||||
## Repository layout
|
||||
|
||||
```text
|
||||
.
|
||||
├── backend/ # FastAPI API and tests
|
||||
├── frontend/ # React/TypeScript SPA and tests
|
||||
├── archive/ # Preserved Streamlit prototype
|
||||
├── docs/ # Requirements, migration, and operations docs
|
||||
├── docker-compose.yml # Traefik-backed production-style stack
|
||||
├── docker-compose.dev.yml # Local hot-reload development stack
|
||||
└── docker-compose.observability.yml # Optional standalone observability example
|
||||
```
|
||||
|
||||
## Project documents
|
||||
|
||||
- [Requirements and planning history](docs/REQUIREMENTS.md)
|
||||
- [FastAPI + React migration plan](docs/MIGRATION_PLAN.md)
|
||||
- [Contributing guide](CONTRIBUTING.md)
|
||||
- [MIT license](LICENSE)
|
||||
- Jellyfin server root URL required (not `/web`). The client strips trailing `/web` defensively.
|
||||
- SSH commands run through `/bin/sh -c` regardless of remote login shell.
|
||||
- Job templates are shell-quoted. Add new templates in `backend/src/media_library_viewer_api/jobs.py`.
|
||||
- Root-level Docker Compose files are provided for production (`docker-compose.yml`) and local development (`docker-compose.dev.yml`), and both rely on Compose interpolation rather than `env_file` entries. They deploy **only** the backend and frontend; Manage never deploys its own observability stack (see `docker-compose.observability.yml` for an optional standalone example).
|
||||
- The configurable dashboard stores widget instances in the backend SQLite settings database. New installs seed default Jellyfin activity and Backups widgets automatically.
|
||||
- Grafana, Prometheus, and Alertmanager are configured as **service instances** in the app (Services page); their widget adapters resolve URLs from service records, and no observability URLs/credentials live in env vars. No credentials are stored in widget config; service API keys are encrypted at rest with `MANAGE_ENCRYPTION_KEY`. When no alertmanager service is configured, the alert proxy endpoints return graceful "not configured" responses.
|
||||
|
||||
@@ -220,12 +220,7 @@ class QbittorrentClient:
|
||||
if fields is None:
|
||||
snap["torrents"].pop(hash_, None)
|
||||
else:
|
||||
previous = snap["torrents"].get(hash_)
|
||||
snap["torrents"][hash_] = (
|
||||
{**previous, **fields}
|
||||
if isinstance(previous, dict) and isinstance(fields, dict)
|
||||
else fields
|
||||
)
|
||||
snap["torrents"][hash_] = fields
|
||||
for hash_ in update.get("torrents_removed") or []:
|
||||
snap["torrents"].pop(hash_, None)
|
||||
categories = update.get("categories")
|
||||
|
||||
@@ -547,7 +547,6 @@ class QbittorrentWidgetSource:
|
||||
"direction": direction,
|
||||
"size": torrent.get("size"),
|
||||
"progress": torrent.get("progress"),
|
||||
"ratio": torrent.get("ratio"),
|
||||
"dl_speed": torrent.get("dlspeed"),
|
||||
"up_speed": torrent.get("upspeed"),
|
||||
}
|
||||
|
||||
@@ -125,21 +125,13 @@ class QbittorrentClientTests(unittest.TestCase):
|
||||
"rid": 10,
|
||||
"full_update": True,
|
||||
"server_state": {"dl_info_speed": 100},
|
||||
"torrents": {
|
||||
"a": {
|
||||
"name": "A",
|
||||
"state": "downloading",
|
||||
"size": 1_024,
|
||||
"progress": 0.5,
|
||||
"dlspeed": 100,
|
||||
}
|
||||
},
|
||||
"torrents": {"a": {"name": "A", "state": "downloading"}},
|
||||
}
|
||||
partial = {
|
||||
"rid": 11,
|
||||
"full_update": False,
|
||||
"server_state": {"dl_info_speed": 200},
|
||||
"torrents": {"a": {"dlspeed": 200}},
|
||||
"torrents": {"a": {"name": "A", "state": "pausedDL"}},
|
||||
}
|
||||
self.session.get.side_effect = [self._get_response(full), self._get_response(partial)]
|
||||
|
||||
@@ -151,11 +143,7 @@ class QbittorrentClientTests(unittest.TestCase):
|
||||
r2 = self.client.maindata()
|
||||
self.assertEqual(self.session.get.call_args_list[1].kwargs["params"].get("rid"), 10)
|
||||
self.assertEqual(r2["server_state"]["dl_info_speed"], 200) # merged
|
||||
self.assertEqual(r2["torrents"]["a"]["dlspeed"], 200)
|
||||
self.assertEqual(r2["torrents"]["a"]["name"], "A")
|
||||
self.assertEqual(r2["torrents"]["a"]["state"], "downloading")
|
||||
self.assertEqual(r2["torrents"]["a"]["size"], 1_024)
|
||||
self.assertEqual(r2["torrents"]["a"]["progress"], 0.5)
|
||||
self.assertEqual(r2["torrents"]["a"]["state"], "pausedDL") # merged
|
||||
|
||||
def test_maindata_caches_concurrent_calls_within_ttl(self) -> None:
|
||||
"""Two calls within the TTL collapse to a single HTTP fetch."""
|
||||
@@ -239,8 +227,8 @@ class QbittorrentClientTests(unittest.TestCase):
|
||||
self.session.post.return_value = self._login_response()
|
||||
self.client._login()
|
||||
call_kwargs = self.session.post.call_args.kwargs
|
||||
self.assertEqual(call_kwargs["timeout"], (5.0, 5.0))
|
||||
self.assertNotIsInstance(call_kwargs["timeout"], int)
|
||||
assert call_kwargs["timeout"] == (5.0, 5.0)
|
||||
assert not isinstance(call_kwargs["timeout"], int)
|
||||
|
||||
def test_login_fails_message_names_bad_credentials(self) -> None:
|
||||
"""'Fails.' body yields a clear 'invalid username or password' error."""
|
||||
|
||||
@@ -1085,7 +1085,6 @@ def _fake_qbit_maindata():
|
||||
"state": "downloading",
|
||||
"size": 1000,
|
||||
"progress": 0.5,
|
||||
"ratio": 1.25,
|
||||
"dlspeed": 500,
|
||||
"upspeed": 10,
|
||||
},
|
||||
@@ -1094,7 +1093,6 @@ def _fake_qbit_maindata():
|
||||
"state": "uploading",
|
||||
"size": 2000,
|
||||
"progress": 1.0,
|
||||
"ratio": 0.5,
|
||||
"dlspeed": 0,
|
||||
"upspeed": 100,
|
||||
},
|
||||
@@ -1180,7 +1178,6 @@ async def test_qbittorrent_active_filters_current_transfers_only():
|
||||
assert len(active) == 2
|
||||
names = [torrent["name"] for torrent in active]
|
||||
assert names == ["Movie.mkv", "Show.mkv"]
|
||||
assert [torrent["ratio"] for torrent in active] == [1.25, 0.5]
|
||||
assert all((torrent["dl_speed"] or 0) > 0 or (torrent["up_speed"] or 0) > 0 for torrent in active)
|
||||
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ fully removed (web-ui-rework; see decision log 2026-06-17).
|
||||
|
||||
### Tables
|
||||
|
||||
- All in-app time-series widgets should use the shared range-aware `LineSeriesChart` component so filtering and display formatting remain consistent across Prometheus and qBittorrent charts. A dashboard widget's configured window is its single source of range selection and the card renders the complete configured response; the standalone qBittorrent service-history page retains an interactive selector with **All values** for all retained samples.
|
||||
- All in-app time-series widgets should use the shared range-aware `LineSeriesChart` component so range controls, filtering, and display formatting remain consistent across Prometheus and qBittorrent charts. The selector offers 5 minutes, 15 minutes, 30 minutes, 1 hour, 3 hours, 6 hours, 12 hours, 24 hours, 2 days, 7 days, 14 days, 30 days, and **All values**; sources with bounded local retention expose the finite windows they can retain plus all retained values.
|
||||
|
||||
- Tabular surfaces use **TanStack Table** (`@tanstack/react-table`) behind a `DataTable`
|
||||
wrapper (`components/ui/data-table.tsx`).
|
||||
@@ -321,11 +321,6 @@ These do not reference a service.
|
||||
- The scheduler should run immediately after startup with per-service staggering, use fixed-delay execution, prevent overlap/backlog, and reconcile configuration changes without a backend restart.
|
||||
- Poll failures should remain enabled, be persisted, and retry with bounded exponential backoff. A successful scheduled or manual run should clear backoff.
|
||||
- The qBittorrent widget-data endpoint must become read-only; only the scheduler may contact qBittorrent and append samples.
|
||||
- The qBittorrent client must merge incremental torrent patches with the prior
|
||||
snapshot so active-transfer rows retain their name, size, progress, and state
|
||||
when only throughput changes.
|
||||
- Active-torrent entries must show each torrent's qBittorrent share ratio
|
||||
(uploaded ÷ downloaded) alongside its size and completion progress.
|
||||
- The service UI should expose polling settings, current status, stale-data state, a manual `Run now` action, the shared selectable chart windows, an **All values** option that fetches every retained speed sample, and paginated scheduled-action history.
|
||||
- Scheduled-action runs should use dedicated generic records, retain at most 30 days or 1,000 runs per service/action, and never store secrets or raw credentials.
|
||||
- Disabling a qBittorrent service pauses polling while retaining history; deleting the service purges its samples and scheduler history through the existing cascade-delete behavior.
|
||||
|
||||
@@ -76,8 +76,6 @@ interface LineSeriesChartProps {
|
||||
scale?: MetricScale;
|
||||
/** Available displayed time ranges. Defaults to the shared range choices. */
|
||||
rangeOptions?: readonly ChartRangeOption[];
|
||||
/** Whether to render the interactive range selector. */
|
||||
showRangeSelector?: boolean;
|
||||
/** Initial uncontrolled range. Defaults to the largest numeric option. */
|
||||
defaultRangeSeconds?: ChartRangeValue;
|
||||
/** Controlled range for consumers that refetch when the selection changes. */
|
||||
@@ -92,7 +90,6 @@ export function LineSeriesChart({
|
||||
unit = "none",
|
||||
scale = "auto",
|
||||
rangeOptions = DEFAULT_CHART_RANGES,
|
||||
showRangeSelector = true,
|
||||
defaultRangeSeconds,
|
||||
rangeSeconds,
|
||||
onRangeChange,
|
||||
@@ -101,9 +98,8 @@ export function LineSeriesChart({
|
||||
defaultRangeSeconds ??
|
||||
[...rangeOptions].reverse().find((range) => typeof range.value === "number")
|
||||
?.value;
|
||||
const [localRangeSeconds, setLocalRangeSeconds] = useState<
|
||||
ChartRangeValue | undefined
|
||||
>(initialRange);
|
||||
const [localRangeSeconds, setLocalRangeSeconds] =
|
||||
useState<ChartRangeValue | undefined>(initialRange);
|
||||
const selectedRangeSeconds = rangeSeconds ?? localRangeSeconds;
|
||||
const latestTimestamp = series.reduce(
|
||||
(max, seriesItem) =>
|
||||
@@ -144,7 +140,7 @@ export function LineSeriesChart({
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{showRangeSelector && rangeOptions.length > 0 && (
|
||||
{rangeOptions.length > 0 && (
|
||||
<div className="flex justify-end">
|
||||
<Select
|
||||
value={
|
||||
|
||||
@@ -38,13 +38,6 @@ describe("LineSeriesChart", () => {
|
||||
).toHaveTextContent("2 hours");
|
||||
});
|
||||
|
||||
it("can hide the interactive selector for configured widgets", () => {
|
||||
render(<LineSeriesChart series={[]} showRangeSelector={false} />);
|
||||
expect(
|
||||
screen.queryByRole("combobox", { name: "Chart range" }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("offers all loaded values and reports that selection", () => {
|
||||
const onRangeChange = vi.fn();
|
||||
render(
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { LineSeriesChart } from "../components/LineSeriesChart";
|
||||
import {
|
||||
chartRangesThrough,
|
||||
rangeSecondsFromWindow,
|
||||
} from "../components/chartRanges";
|
||||
import type { ChartSeries } from "../components/LineSeriesChart";
|
||||
import type { MetricScale, MetricUnit } from "../lib/metricFormat";
|
||||
import { SectionCard } from "../components/SectionCard";
|
||||
@@ -20,6 +24,7 @@ export function MetricChartWidget({
|
||||
}: Props) {
|
||||
const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
|
||||
const series = data?.data?.series as ChartSeries[] | undefined;
|
||||
const maxRangeSeconds = rangeSecondsFromWindow(widget.config.window);
|
||||
|
||||
return (
|
||||
<SectionCard title={widget.title} description={description}>
|
||||
@@ -34,7 +39,8 @@ export function MetricChartWidget({
|
||||
series={series}
|
||||
unit={widget.config.unit as MetricUnit}
|
||||
scale={widget.config.scale as MetricScale}
|
||||
showRangeSelector={false}
|
||||
rangeOptions={chartRangesThrough(maxRangeSeconds)}
|
||||
defaultRangeSeconds={maxRangeSeconds}
|
||||
/>
|
||||
) : (
|
||||
<Alert>
|
||||
|
||||
@@ -17,7 +17,6 @@ interface ActiveTorrent {
|
||||
direction?: "downloading" | "uploading";
|
||||
size: number | null;
|
||||
progress: number | null;
|
||||
ratio: number | null;
|
||||
dl_speed: number | null;
|
||||
up_speed: number | null;
|
||||
}
|
||||
@@ -41,12 +40,6 @@ function formatProgress(progress: number | null): string {
|
||||
return `${Math.round(progress * 100)}% complete`;
|
||||
}
|
||||
|
||||
function formatRatio(ratio: number | null): string {
|
||||
if (ratio === null || !Number.isFinite(ratio) || ratio < 0)
|
||||
return "Ratio unknown";
|
||||
return `Ratio ${ratio.toFixed(2)}`;
|
||||
}
|
||||
|
||||
function formatState(
|
||||
state: string | null,
|
||||
direction?: ActiveTorrent["direction"],
|
||||
@@ -110,8 +103,7 @@ export function QbittorrentActiveTorrentsWidget({
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatSize(torrent.size)} ·{" "}
|
||||
{formatProgress(torrent.progress)} ·{" "}
|
||||
{formatRatio(torrent.ratio)}
|
||||
{formatProgress(torrent.progress)}
|
||||
</p>
|
||||
</div>
|
||||
<Badge
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { LineSeriesChart } from "../components/LineSeriesChart";
|
||||
import {
|
||||
chartRangesThrough,
|
||||
type ChartRangeValue,
|
||||
} from "../components/chartRanges";
|
||||
import type { ChartSeries } from "../components/LineSeriesChart";
|
||||
import type { MetricScale, MetricUnit } from "../lib/metricFormat";
|
||||
import { SectionCard } from "../components/SectionCard";
|
||||
@@ -23,6 +27,11 @@ export function QbittorrentSpeedWidget({
|
||||
// Source returns raw bytes/sec; default to bytes/sec + auto scale (MB/s, …).
|
||||
const unit = (widget.config.unit as MetricUnit) || "bytes_per_sec";
|
||||
const scale = (widget.config.scale as MetricScale) || "auto";
|
||||
const configuredRange = widget.config.window_seconds;
|
||||
const maxRangeSeconds =
|
||||
configuredRange === "all" ? 86_400 : Number(configuredRange) || 1800;
|
||||
const defaultRangeSeconds: ChartRangeValue =
|
||||
configuredRange === "all" ? "all" : maxRangeSeconds;
|
||||
|
||||
return (
|
||||
<SectionCard title={widget.title} description={description}>
|
||||
@@ -38,7 +47,8 @@ export function QbittorrentSpeedWidget({
|
||||
unit={unit}
|
||||
scale={scale}
|
||||
height={220}
|
||||
showRangeSelector={false}
|
||||
rangeOptions={chartRangesThrough(maxRangeSeconds)}
|
||||
defaultRangeSeconds={defaultRangeSeconds}
|
||||
/>
|
||||
) : (
|
||||
<Alert>
|
||||
|
||||
@@ -56,9 +56,6 @@ describe("MetricChartWidget", () => {
|
||||
render(<MetricChartWidget widget={widget} refreshIntervalMs={60000} />);
|
||||
// recharts renders an SVG; the title from SectionCard should be present.
|
||||
expect(screen.getByText("CPU Usage")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole("combobox", { name: "Chart range" }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows error Alert on error", () => {
|
||||
|
||||
@@ -54,7 +54,6 @@ describe("QbittorrentActiveTorrentsWidget", () => {
|
||||
state: "downloading",
|
||||
size: 1000,
|
||||
progress: 0.5,
|
||||
ratio: 1.25,
|
||||
dl_speed: 500000,
|
||||
up_speed: 1000,
|
||||
},
|
||||
@@ -78,7 +77,6 @@ describe("QbittorrentActiveTorrentsWidget", () => {
|
||||
expect(screen.getByText("Show.mkv")).toBeInTheDocument();
|
||||
expect(screen.getByText("Downloading")).toBeInTheDocument();
|
||||
expect(screen.getByText("Uploading")).toBeInTheDocument();
|
||||
expect(screen.getByText(/Ratio 1\.25/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows empty state when no active torrents", () => {
|
||||
|
||||
@@ -52,9 +52,6 @@ describe("QbittorrentSpeedWidget", () => {
|
||||
<QbittorrentSpeedWidget widget={widget} refreshIntervalMs={5000} />,
|
||||
);
|
||||
expect(screen.getByText("Speed Chart")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole("combobox", { name: "Chart range" }),
|
||||
).not.toBeInTheDocument();
|
||||
expect(container.firstChild).not.toBeNull();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user