feat(charting): unify configurable time windows
This commit is contained in:
Developer
@@ -86,7 +86,7 @@ class PrometheusChartWidgetConfig(WidgetConfigBase):
|
||||
"""A PromQL range query rendered as a multi-series line chart (SC-101..SC-104)."""
|
||||
|
||||
promql: str
|
||||
window: str = "1h" # one of 1h / 6h / 24h / 7d (see WINDOW_PRESETS)
|
||||
window: Literal["5m", "15m", "30m", "1h", "3h", "6h", "12h", "24h", "2d", "7d", "14d", "30d"] = "1h"
|
||||
# Display scaling for the Y axis + tooltip. "none" shows raw values; the
|
||||
# others auto/force a decimal-prefix unit (kB/MB/GB, kbps/Mbps, etc.).
|
||||
unit: Literal[
|
||||
@@ -116,7 +116,7 @@ class PrometheusMeanWidgetConfig(WidgetConfigBase):
|
||||
"""A PromQL range query averaged client-side into a single value (SC-112..SC-114)."""
|
||||
|
||||
promql: str
|
||||
window: str = "1h" # one of 1h / 6h / 24h / 7d (see WINDOW_PRESETS)
|
||||
window: Literal["5m", "15m", "30m", "1h", "3h", "6h", "12h", "24h", "2d", "7d", "14d", "30d"] = "1h"
|
||||
unit: str | None = None
|
||||
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ from __future__ import annotations
|
||||
|
||||
from typing import TYPE_CHECKING, Any, Literal
|
||||
|
||||
from pydantic import Field
|
||||
from pydantic import Field, field_validator
|
||||
|
||||
from media_library_viewer_api.clients.qbittorrent import QbittorrentClient
|
||||
from media_library_viewer_api.integrations.base import (
|
||||
@@ -83,7 +83,7 @@ class QbittorrentWidgetConfig(WidgetConfigBase):
|
||||
class QbittorrentSpeedWidgetConfig(WidgetConfigBase):
|
||||
"""Speed chart config. The source returns raw bytes/sec; the frontend scales."""
|
||||
|
||||
window_seconds: int = Field(default=1_800, ge=60, le=86_400)
|
||||
window_seconds: int | Literal["all"] = 1_800
|
||||
unit: Literal[
|
||||
"none",
|
||||
"bytes",
|
||||
@@ -95,6 +95,16 @@ class QbittorrentSpeedWidgetConfig(WidgetConfigBase):
|
||||
] = "bytes_per_sec"
|
||||
scale: Literal["auto", "k", "m", "g", "t"] = "auto"
|
||||
|
||||
@field_validator("window_seconds")
|
||||
@classmethod
|
||||
def validate_window_seconds(cls, value: int | str) -> int | str:
|
||||
"""Allow all retained samples while bounding explicit numeric windows."""
|
||||
if value == "all":
|
||||
return value
|
||||
if not isinstance(value, int) or not 60 <= value <= 86_400:
|
||||
raise ValueError("window_seconds must be between 60 and 86400, or 'all'")
|
||||
return value
|
||||
|
||||
|
||||
DEFINITION = ServiceDefinition(
|
||||
service_type="qbittorrent",
|
||||
|
||||
@@ -54,7 +54,8 @@ class SchedulerSample(BaseModel):
|
||||
|
||||
class SchedulerSamplesResponse(BaseModel):
|
||||
service_id: str
|
||||
window_seconds: int
|
||||
window_seconds: int | None
|
||||
all_values: bool = False
|
||||
samples: list[SchedulerSample]
|
||||
|
||||
|
||||
|
||||
@@ -103,14 +103,22 @@ def run_scheduler_action(
|
||||
def get_scheduler_samples(
|
||||
service_id: str,
|
||||
window_seconds: int = Query(default=1_800, ge=60, le=86_400),
|
||||
all_values: bool = Query(default=False),
|
||||
store: SettingsStore = Depends(get_settings_store),
|
||||
) -> SchedulerSamplesResponse:
|
||||
_require_qbittorrent(service_id, store)
|
||||
sample_store = QbittorrentSampleStore()
|
||||
if all_values:
|
||||
samples = sample_store.window(service_id)
|
||||
response_window: int | None = None
|
||||
else:
|
||||
since_ts = _safe_int(time.time()) - window_seconds
|
||||
samples = QbittorrentSampleStore().window(service_id, since_ts=since_ts)
|
||||
samples = sample_store.window(service_id, since_ts=since_ts)
|
||||
response_window = window_seconds
|
||||
return SchedulerSamplesResponse(
|
||||
service_id=service_id,
|
||||
window_seconds=window_seconds,
|
||||
window_seconds=response_window,
|
||||
all_values=all_values,
|
||||
samples=samples,
|
||||
)
|
||||
|
||||
|
||||
@@ -21,10 +21,18 @@ from typing import Any
|
||||
#: Window presets (SC-108, SC-112). Users pick one of these rather than typing
|
||||
#: raw ``from``/``to``/``step`` values. Values are window lengths in seconds.
|
||||
WINDOW_PRESETS: dict[str, int] = {
|
||||
"5m": 300,
|
||||
"15m": 900,
|
||||
"30m": 1_800,
|
||||
"1h": 3_600,
|
||||
"3h": 10_800,
|
||||
"6h": 21_600,
|
||||
"12h": 43_200,
|
||||
"24h": 86_400,
|
||||
"2d": 172_800,
|
||||
"7d": 604_800,
|
||||
"14d": 1_209_600,
|
||||
"30d": 2_592_000,
|
||||
}
|
||||
|
||||
#: Sentinel values Prometheus serialises for non-finite floats; map these to
|
||||
@@ -36,9 +44,9 @@ def step_for_window(window_seconds: int, target_points: int = 200) -> int:
|
||||
"""Derive a scrape ``step`` for a window that yields ~``target_points`` samples.
|
||||
|
||||
Clamped to a minimum of 15 seconds so Prometheus does not reject
|
||||
sub-15s resolutions on high-cardinality queries. The spec (SC-104) requires
|
||||
the resulting point count to land in the 100–300 band; with
|
||||
``target_points=200`` every preset yields 200 points.
|
||||
sub-15s resolutions on high-cardinality queries. The 5m and 15m presets
|
||||
therefore return 20 and 60 points respectively; all longer presets stay
|
||||
in the target 100–300 point band.
|
||||
"""
|
||||
return max(15, round(window_seconds / target_points))
|
||||
|
||||
|
||||
@@ -480,8 +480,12 @@ class QbittorrentWidgetSource:
|
||||
return {"error": "qBittorrent widget is missing its service"}
|
||||
|
||||
if widget_kind == "speed":
|
||||
configured_window = config.get("window_seconds")
|
||||
if configured_window == "all":
|
||||
samples = QbittorrentSampleStore().window(service.id)
|
||||
else:
|
||||
window_seconds = _safe_int(
|
||||
config.get("window_seconds") or service.config.get("sample_retention_seconds") or 1_800
|
||||
configured_window or service.config.get("sample_retention_seconds") or 1_800
|
||||
)
|
||||
window_seconds = max(60, min(window_seconds, 86_400))
|
||||
since_ts = _safe_int(time.time()) - window_seconds
|
||||
|
||||
@@ -14,16 +14,33 @@ from media_library_viewer_api.widgets.prometheus_range import (
|
||||
|
||||
|
||||
class TestStepForWindow:
|
||||
"""SC-104: every preset must yield 100–300 points."""
|
||||
"""SC-104: presets preserve usable resolution without sub-15s steps."""
|
||||
|
||||
@pytest.mark.parametrize("preset", sorted(WINDOW_PRESETS))
|
||||
def test_presets_yield_in_band_point_counts(self, preset: str) -> None:
|
||||
def test_presets_yield_supported_point_counts(self, preset: str) -> None:
|
||||
window = WINDOW_PRESETS[preset]
|
||||
step = step_for_window(window)
|
||||
# Clamped minimum.
|
||||
# The Prometheus-safe 15-second floor limits the two short presets to
|
||||
# 20 and 60 points; all longer windows stay in the 100–300 target band.
|
||||
assert step >= 15
|
||||
point_count = window // step
|
||||
assert 100 <= point_count <= 300, f"{preset}: {point_count} points (step={step})"
|
||||
assert min(100, window // 15) <= point_count <= 300, f"{preset}: {point_count} points (step={step})"
|
||||
|
||||
def test_window_presets_cover_the_shared_chart_windows(self) -> None:
|
||||
assert WINDOW_PRESETS == {
|
||||
"5m": 300,
|
||||
"15m": 900,
|
||||
"30m": 1_800,
|
||||
"1h": 3_600,
|
||||
"3h": 10_800,
|
||||
"6h": 21_600,
|
||||
"12h": 43_200,
|
||||
"24h": 86_400,
|
||||
"2d": 172_800,
|
||||
"7d": 604_800,
|
||||
"14d": 1_209_600,
|
||||
"30d": 2_592_000,
|
||||
}
|
||||
|
||||
def test_floor_of_fifteen_seconds(self) -> None:
|
||||
# A tiny window that would otherwise produce a sub-15s step is clamped.
|
||||
|
||||
@@ -87,6 +87,32 @@ def test_scheduler_routes_expose_status_history_and_disabled_manual_run(schedule
|
||||
assert manual.status_code == 400
|
||||
|
||||
|
||||
def test_scheduler_samples_all_values_reads_all_retained_samples(scheduler_client):
|
||||
client, store = scheduler_client
|
||||
service = store.upsert_service(
|
||||
{
|
||||
"service_type": "qbittorrent",
|
||||
"name": "qbit",
|
||||
"config": {"base_url": "http://qbit:8080"},
|
||||
"secrets": {},
|
||||
"enabled": True,
|
||||
}
|
||||
)
|
||||
retained = [{"ts": 10, "dl_speed": 20, "up_speed": 30}]
|
||||
with patch("media_library_viewer_api.routers.scheduler.QbittorrentSampleStore") as store_cls:
|
||||
store_cls.return_value.window.return_value = retained
|
||||
response = client.get(f"/api/scheduler/services/{service['id']}/samples?all_values=true")
|
||||
|
||||
assert response.status_code == 200
|
||||
assert response.json() == {
|
||||
"service_id": service["id"],
|
||||
"window_seconds": None,
|
||||
"all_values": True,
|
||||
"samples": retained,
|
||||
}
|
||||
store_cls.return_value.window.assert_called_once_with(service["id"])
|
||||
|
||||
|
||||
def test_sample_store_applies_time_and_row_limits(tmp_path):
|
||||
harness = ServiceDataHarness(tmp_path)
|
||||
harness.register(QBITTORRENT_CONCERN)
|
||||
|
||||
@@ -1224,6 +1224,21 @@ async def test_qbittorrent_speed_reads_samples_without_polling(tmp_path):
|
||||
assert dl_points[-1]["v"] == 500000
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_qbittorrent_speed_all_values_reads_all_retained_samples():
|
||||
"""The all-values speed setting intentionally omits the time cutoff."""
|
||||
from media_library_viewer_api.widgets.sources import QbittorrentWidgetSource
|
||||
|
||||
adapter = QbittorrentWidgetSource()
|
||||
service = ServiceRecord(id="svc-speed", service_type="qbittorrent", name="qbit", config={}, secrets={})
|
||||
with patch("media_library_viewer_api.widgets.sources.QbittorrentSampleStore") as store_cls:
|
||||
store_cls.return_value.window.return_value = [{"ts": 10, "dl_speed": 20, "up_speed": 30}]
|
||||
result = await adapter.fetch(service, "speed", {"window_seconds": "all"})
|
||||
|
||||
store_cls.return_value.window.assert_called_once_with("svc-speed")
|
||||
assert result["series"][0]["points"] == [{"t": 10_000, "v": 20}]
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_qbittorrent_adapter_missing_service():
|
||||
from media_library_viewer_api.widgets.sources import QbittorrentWidgetSource
|
||||
|
||||
@@ -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 range controls, filtering, and display formatting remain consistent across Prometheus and qBittorrent charts.
|
||||
- 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,7 +321,7 @@ 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 service UI should expose polling settings, current status, stale-data state, a manual `Run now` action, selectable chart windows, and paginated scheduled-action history.
|
||||
- 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.
|
||||
- Persistent polling failures should be visible in the service UI and application metrics; a new notification channel is not required for the first release.
|
||||
|
||||
@@ -24,11 +24,13 @@ export function fetchSchedulerRuns(
|
||||
|
||||
export function fetchSchedulerSamples(
|
||||
serviceId: string,
|
||||
windowSeconds: number,
|
||||
window: number | "all",
|
||||
): Promise<SchedulerSamplesResponse> {
|
||||
return get<SchedulerSamplesResponse>(
|
||||
`/api/scheduler/services/${serviceId}/samples`,
|
||||
{ window_seconds: String(windowSeconds) },
|
||||
window === "all"
|
||||
? { all_values: "true" }
|
||||
: { window_seconds: String(window) },
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,11 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { DEFAULT_CHART_RANGES, type ChartRangeOption } from "./chartRanges";
|
||||
import {
|
||||
DEFAULT_CHART_RANGES,
|
||||
type ChartRangeOption,
|
||||
type ChartRangeValue,
|
||||
} from "./chartRanges";
|
||||
import {
|
||||
formatScaled,
|
||||
metricScaleInfo,
|
||||
@@ -72,11 +76,11 @@ interface LineSeriesChartProps {
|
||||
scale?: MetricScale;
|
||||
/** Available displayed time ranges. Defaults to the shared range choices. */
|
||||
rangeOptions?: readonly ChartRangeOption[];
|
||||
/** Initial uncontrolled range. Defaults to the largest available option. */
|
||||
defaultRangeSeconds?: number;
|
||||
/** Initial uncontrolled range. Defaults to the largest numeric option. */
|
||||
defaultRangeSeconds?: ChartRangeValue;
|
||||
/** Controlled range for consumers that refetch when the selection changes. */
|
||||
rangeSeconds?: number;
|
||||
onRangeChange?: (rangeSeconds: number) => void;
|
||||
rangeSeconds?: ChartRangeValue;
|
||||
onRangeChange?: (range: ChartRangeValue) => void;
|
||||
}
|
||||
|
||||
/** Shared range-aware line chart renderer for Prometheus and qBittorrent data. */
|
||||
@@ -91,8 +95,11 @@ export function LineSeriesChart({
|
||||
onRangeChange,
|
||||
}: LineSeriesChartProps) {
|
||||
const initialRange =
|
||||
defaultRangeSeconds ?? rangeOptions[rangeOptions.length - 1]?.value;
|
||||
const [localRangeSeconds, setLocalRangeSeconds] = useState(initialRange);
|
||||
defaultRangeSeconds ??
|
||||
[...rangeOptions].reverse().find((range) => typeof range.value === "number")
|
||||
?.value;
|
||||
const [localRangeSeconds, setLocalRangeSeconds] =
|
||||
useState<ChartRangeValue | undefined>(initialRange);
|
||||
const selectedRangeSeconds = rangeSeconds ?? localRangeSeconds;
|
||||
const latestTimestamp = series.reduce(
|
||||
(max, seriesItem) =>
|
||||
@@ -102,7 +109,8 @@ export function LineSeriesChart({
|
||||
),
|
||||
0,
|
||||
);
|
||||
const cutoff = selectedRangeSeconds
|
||||
const cutoff =
|
||||
typeof selectedRangeSeconds === "number"
|
||||
? latestTimestamp - selectedRangeSeconds * 1000
|
||||
: null;
|
||||
const visibleSeries =
|
||||
@@ -125,7 +133,7 @@ export function LineSeriesChart({
|
||||
formatScaled(value, scaleInfo, unit);
|
||||
|
||||
function handleRangeChange(value: string) {
|
||||
const nextRange = Number(value);
|
||||
const nextRange: ChartRangeValue = value === "all" ? "all" : Number(value);
|
||||
setLocalRangeSeconds(nextRange);
|
||||
onRangeChange?.(nextRange);
|
||||
}
|
||||
@@ -136,7 +144,9 @@ export function LineSeriesChart({
|
||||
<div className="flex justify-end">
|
||||
<Select
|
||||
value={
|
||||
selectedRangeSeconds ? String(selectedRangeSeconds) : undefined
|
||||
selectedRangeSeconds === undefined
|
||||
? undefined
|
||||
: String(selectedRangeSeconds)
|
||||
}
|
||||
onValueChange={handleRangeChange}
|
||||
>
|
||||
|
||||
@@ -141,7 +141,8 @@ function WidgetConfigEditor({
|
||||
? Object.entries(
|
||||
(
|
||||
binding.configSchema as
|
||||
{ properties?: Record<string, unknown> } | undefined
|
||||
| { properties?: Record<string, unknown> }
|
||||
| undefined
|
||||
)?.properties ?? {},
|
||||
)
|
||||
: [];
|
||||
@@ -190,7 +191,7 @@ function WidgetConfigEditor({
|
||||
<SelectContent>
|
||||
{enumOptions.map((opt) => (
|
||||
<SelectItem key={opt} value={opt}>
|
||||
{opt.replace(/_/g, " ")}
|
||||
{opt === "all" ? "All values" : opt.replace(/_/g, " ")}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import { LineSeriesChart } from "../LineSeriesChart";
|
||||
import type { ChartSeries } from "../LineSeriesChart";
|
||||
import { chartRangesThrough } from "../chartRanges";
|
||||
@@ -38,6 +38,22 @@ describe("LineSeriesChart", () => {
|
||||
).toHaveTextContent("2 hours");
|
||||
});
|
||||
|
||||
it("offers all loaded values and reports that selection", () => {
|
||||
const onRangeChange = vi.fn();
|
||||
render(
|
||||
<LineSeriesChart
|
||||
series={[]}
|
||||
rangeOptions={chartRangesThrough(3600)}
|
||||
onRangeChange={onRangeChange}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("combobox", { name: "Chart range" }));
|
||||
fireEvent.click(screen.getByRole("option", { name: "All values" }));
|
||||
|
||||
expect(onRangeChange).toHaveBeenCalledWith("all");
|
||||
});
|
||||
|
||||
it("renders with custom height", () => {
|
||||
const series: ChartSeries[] = [{ label: "dl", points: [{ t: 1, v: 1 }] }];
|
||||
const { container } = render(
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
chartRangesThrough,
|
||||
PROMETHEUS_WINDOW_VALUES,
|
||||
rangeSecondsFromWindow,
|
||||
} from "../chartRanges";
|
||||
|
||||
describe("chart ranges", () => {
|
||||
it("maps every persisted Prometheus window to its display duration", () => {
|
||||
expect(PROMETHEUS_WINDOW_VALUES).toEqual([
|
||||
"5m",
|
||||
"15m",
|
||||
"30m",
|
||||
"1h",
|
||||
"3h",
|
||||
"6h",
|
||||
"12h",
|
||||
"24h",
|
||||
"2d",
|
||||
"7d",
|
||||
"14d",
|
||||
"30d",
|
||||
]);
|
||||
expect(PROMETHEUS_WINDOW_VALUES.map(rangeSecondsFromWindow)).toEqual([
|
||||
300, 900, 1800, 3600, 10800, 21600, 43200, 86400, 172800, 604800, 1209600,
|
||||
2592000,
|
||||
]);
|
||||
});
|
||||
|
||||
it("offers all values after every finite range through the available history", () => {
|
||||
expect(chartRangesThrough(86_400).at(-1)).toEqual({
|
||||
value: "all",
|
||||
label: "All values",
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,18 +1,45 @@
|
||||
export type ChartRangeValue = number | "all";
|
||||
|
||||
export interface ChartRangeOption {
|
||||
value: number;
|
||||
value: ChartRangeValue;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Shared range choices used by every time-series chart. */
|
||||
export const DEFAULT_CHART_RANGES: ChartRangeOption[] = [
|
||||
{ value: 900, label: "15 minutes" },
|
||||
{ value: 1800, label: "30 minutes" },
|
||||
{ value: 3600, label: "1 hour" },
|
||||
{ value: 21600, label: "6 hours" },
|
||||
{ value: 86400, label: "24 hours" },
|
||||
{ value: 604800, label: "7 days" },
|
||||
interface FiniteChartRange extends ChartRangeOption {
|
||||
key: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
/** Canonical finite windows for chart configuration and display filtering. */
|
||||
const FINITE_CHART_RANGES: readonly FiniteChartRange[] = [
|
||||
{ key: "5m", value: 300, label: "5 minutes" },
|
||||
{ key: "15m", value: 900, label: "15 minutes" },
|
||||
{ key: "30m", value: 1800, label: "30 minutes" },
|
||||
{ key: "1h", value: 3600, label: "1 hour" },
|
||||
{ key: "3h", value: 10800, label: "3 hours" },
|
||||
{ key: "6h", value: 21600, label: "6 hours" },
|
||||
{ key: "12h", value: 43200, label: "12 hours" },
|
||||
{ key: "24h", value: 86400, label: "24 hours" },
|
||||
{ key: "2d", value: 172800, label: "2 days" },
|
||||
{ key: "7d", value: 604800, label: "7 days" },
|
||||
{ key: "14d", value: 1209600, label: "14 days" },
|
||||
{ key: "30d", value: 2592000, label: "30 days" },
|
||||
];
|
||||
|
||||
/** Shared range choices used by every time-series chart. */
|
||||
export const DEFAULT_CHART_RANGES: readonly ChartRangeOption[] =
|
||||
FINITE_CHART_RANGES;
|
||||
|
||||
/** Symbolic range values persisted by Prometheus chart and mean widgets. */
|
||||
export const PROMETHEUS_WINDOW_VALUES = FINITE_CHART_RANGES.map(
|
||||
(range) => range.key,
|
||||
);
|
||||
|
||||
export const ALL_VALUES_CHART_RANGE: ChartRangeOption = {
|
||||
value: "all",
|
||||
label: "All values",
|
||||
};
|
||||
|
||||
function formatRangeLabel(seconds: number): string {
|
||||
if (seconds % 604800 === 0) return `${seconds / 604800} days`;
|
||||
if (seconds % 3600 === 0) return `${seconds / 3600} hours`;
|
||||
@@ -22,27 +49,33 @@ function formatRangeLabel(seconds: number): string {
|
||||
|
||||
export function chartRangesThrough(maxSeconds: number): ChartRangeOption[] {
|
||||
if (!Number.isFinite(maxSeconds) || maxSeconds <= 0) {
|
||||
return [DEFAULT_CHART_RANGES[0]];
|
||||
return [DEFAULT_CHART_RANGES[0], ALL_VALUES_CHART_RANGE];
|
||||
}
|
||||
const ranges = DEFAULT_CHART_RANGES.filter(
|
||||
const ranges = FINITE_CHART_RANGES.filter(
|
||||
(range) => range.value < maxSeconds,
|
||||
);
|
||||
const exact = DEFAULT_CHART_RANGES.find(
|
||||
(range) => range.value === maxSeconds,
|
||||
);
|
||||
return exact
|
||||
const exact = FINITE_CHART_RANGES.find((range) => range.value === maxSeconds);
|
||||
return [
|
||||
...(exact
|
||||
? [...ranges, exact]
|
||||
: [...ranges, { value: maxSeconds, label: formatRangeLabel(maxSeconds) }];
|
||||
: [
|
||||
...ranges,
|
||||
{ value: maxSeconds, label: formatRangeLabel(maxSeconds) },
|
||||
]),
|
||||
ALL_VALUES_CHART_RANGE,
|
||||
];
|
||||
}
|
||||
|
||||
export function rangeSecondsFromWindow(window: unknown): number {
|
||||
const values: Record<string, number> = {
|
||||
"15m": 900,
|
||||
"30m": 1800,
|
||||
"1h": 3600,
|
||||
"6h": 21600,
|
||||
"24h": 86400,
|
||||
"7d": 604800,
|
||||
};
|
||||
return values[String(window)] ?? 3600;
|
||||
return (
|
||||
FINITE_CHART_RANGES.find((range) => range.key === String(window))?.value ??
|
||||
3600
|
||||
);
|
||||
}
|
||||
|
||||
/** Numeric chart windows suitable for sources with bounded local retention. */
|
||||
export function numericChartRangesThrough(maxSeconds: number): number[] {
|
||||
return FINITE_CHART_RANGES.flatMap((range) =>
|
||||
range.value <= maxSeconds ? [range.value] : [],
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
fetchSchedulerStatus,
|
||||
runSchedulerAction,
|
||||
} from "../api/scheduler";
|
||||
import type { ChartRangeValue } from "../components/chartRanges";
|
||||
|
||||
export function useSchedulerStatus(serviceId: string) {
|
||||
return useQuery({
|
||||
@@ -24,10 +25,13 @@ export function useSchedulerRuns(serviceId: string) {
|
||||
});
|
||||
}
|
||||
|
||||
export function useSchedulerSamples(serviceId: string, windowSeconds: number) {
|
||||
export function useSchedulerSamples(
|
||||
serviceId: string,
|
||||
window: ChartRangeValue,
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: ["scheduler", "samples", serviceId, windowSeconds],
|
||||
queryFn: () => fetchSchedulerSamples(serviceId, windowSeconds),
|
||||
queryKey: ["scheduler", "samples", serviceId, window],
|
||||
queryFn: () => fetchSchedulerSamples(serviceId, window),
|
||||
enabled: Boolean(serviceId),
|
||||
refetchInterval: 15_000,
|
||||
});
|
||||
|
||||
@@ -69,6 +69,44 @@ describe("service registry", () => {
|
||||
expect(speed?.defaultConfig.unit).toBe("bytes_per_sec");
|
||||
});
|
||||
|
||||
it("shares expanded chart windows and an all-retained option", () => {
|
||||
const propertiesOf = (kind: string) => {
|
||||
const binding = SERVICE_REGISTRY[
|
||||
kind === "speed" ? "qbittorrent" : "prometheus"
|
||||
].widgets.find((widget) => widget.kind === kind);
|
||||
const schema = binding?.configSchema as
|
||||
| { properties?: Record<string, { enum?: string[] }> }
|
||||
| undefined;
|
||||
return schema?.properties ?? {};
|
||||
};
|
||||
|
||||
expect(propertiesOf("chart").window?.enum).toEqual([
|
||||
"5m",
|
||||
"15m",
|
||||
"30m",
|
||||
"1h",
|
||||
"3h",
|
||||
"6h",
|
||||
"12h",
|
||||
"24h",
|
||||
"2d",
|
||||
"7d",
|
||||
"14d",
|
||||
"30d",
|
||||
]);
|
||||
expect(propertiesOf("speed").window_seconds?.enum).toEqual([
|
||||
"300",
|
||||
"900",
|
||||
"1800",
|
||||
"3600",
|
||||
"10800",
|
||||
"21600",
|
||||
"43200",
|
||||
"86400",
|
||||
"all",
|
||||
]);
|
||||
});
|
||||
|
||||
it("resolves a prometheus metric widget via the services list", () => {
|
||||
const widget: WidgetInstance = {
|
||||
id: "w1",
|
||||
|
||||
@@ -17,6 +17,10 @@ import { RequestStatWidget } from "../widgets/RequestStatWidget";
|
||||
import { RequestsOverviewWidget } from "../widgets/RequestsOverviewWidget";
|
||||
import { SshTaskWidget } from "../widgets/SshTaskWidget";
|
||||
import { StaticWidget } from "../widgets/StaticWidget";
|
||||
import {
|
||||
numericChartRangesThrough,
|
||||
PROMETHEUS_WINDOW_VALUES,
|
||||
} from "../components/chartRanges";
|
||||
import type {
|
||||
ServiceInstance,
|
||||
ServiceTypeInfo,
|
||||
@@ -64,6 +68,10 @@ const UNIT_VALUES = [
|
||||
"seconds",
|
||||
];
|
||||
const SCALE_VALUES = ["auto", "k", "m", "g", "t"];
|
||||
const SPEED_WINDOW_VALUES = [
|
||||
...numericChartRangesThrough(86_400).map(String),
|
||||
"all",
|
||||
];
|
||||
const AXIS_FORMAT_PROPERTIES = {
|
||||
unit: {
|
||||
type: "string",
|
||||
@@ -186,7 +194,8 @@ export const SERVICE_REGISTRY: Record<string, ServiceBinding> = {
|
||||
},
|
||||
window: {
|
||||
type: "string",
|
||||
description: "Time window preset (1h, 6h, 24h, 7d)",
|
||||
enum: PROMETHEUS_WINDOW_VALUES,
|
||||
description: "Maximum history fetched for the chart",
|
||||
},
|
||||
...AXIS_FORMAT_PROPERTIES,
|
||||
},
|
||||
@@ -233,7 +242,8 @@ export const SERVICE_REGISTRY: Record<string, ServiceBinding> = {
|
||||
},
|
||||
window: {
|
||||
type: "string",
|
||||
description: "Time window preset (1h, 6h, 24h, 7d)",
|
||||
enum: PROMETHEUS_WINDOW_VALUES,
|
||||
description: "Time window used to calculate the average",
|
||||
},
|
||||
unit: { type: "string" },
|
||||
},
|
||||
@@ -282,7 +292,9 @@ export const SERVICE_REGISTRY: Record<string, ServiceBinding> = {
|
||||
properties: {
|
||||
window_seconds: {
|
||||
type: "integer",
|
||||
description: "Maximum data window available to the chart",
|
||||
enum: SPEED_WINDOW_VALUES,
|
||||
description:
|
||||
"Maximum history fetched for the chart, or all retained samples",
|
||||
},
|
||||
...AXIS_FORMAT_PROPERTIES,
|
||||
},
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { Activity, Clock, Play, RefreshCw, TriangleAlert } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { LineSeriesChart } from "../../components/LineSeriesChart";
|
||||
import { chartRangesThrough } from "../../components/chartRanges";
|
||||
import {
|
||||
chartRangesThrough,
|
||||
type ChartRangeValue,
|
||||
} from "../../components/chartRanges";
|
||||
import {
|
||||
useRunSchedulerAction,
|
||||
useSchedulerRuns,
|
||||
@@ -29,9 +32,9 @@ function statusVariant(
|
||||
}
|
||||
|
||||
export function QbittorrentTab({ instance }: { instance: ServiceInstance }) {
|
||||
const [windowSeconds, setWindowSeconds] = useState(1800);
|
||||
const [selectedRange, setSelectedRange] = useState<ChartRangeValue>(1800);
|
||||
const status = useSchedulerStatus(instance.id);
|
||||
const samples = useSchedulerSamples(instance.id, windowSeconds);
|
||||
const samples = useSchedulerSamples(instance.id, selectedRange);
|
||||
const runs = useSchedulerRuns(instance.id);
|
||||
const runNow = useRunSchedulerAction();
|
||||
const stale = Boolean(status.data?.enabled && status.data.is_stale);
|
||||
@@ -111,9 +114,9 @@ export function QbittorrentTab({ instance }: { instance: ServiceInstance }) {
|
||||
series={chartSeries}
|
||||
unit="bytes"
|
||||
height={300}
|
||||
rangeOptions={chartRangesThrough(86400)}
|
||||
rangeSeconds={windowSeconds}
|
||||
onRangeChange={setWindowSeconds}
|
||||
rangeOptions={chartRangesThrough(86_400)}
|
||||
rangeSeconds={selectedRange}
|
||||
onRangeChange={setSelectedRange}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
@@ -456,7 +456,8 @@ export interface SchedulerRunsResponse {
|
||||
|
||||
export interface SchedulerSamplesResponse {
|
||||
service_id: string;
|
||||
window_seconds: number;
|
||||
window_seconds: number | null;
|
||||
all_values: boolean;
|
||||
samples: Array<{
|
||||
ts: number;
|
||||
dl_speed: number;
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { LineSeriesChart } from "../components/LineSeriesChart";
|
||||
import { chartRangesThrough } from "../components/chartRanges";
|
||||
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";
|
||||
@@ -24,7 +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 maxRangeSeconds = Number(widget.config.window_seconds) || 1800;
|
||||
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}>
|
||||
@@ -41,7 +48,7 @@ export function QbittorrentSpeedWidget({
|
||||
scale={scale}
|
||||
height={220}
|
||||
rangeOptions={chartRangesThrough(maxRangeSeconds)}
|
||||
defaultRangeSeconds={maxRangeSeconds}
|
||||
defaultRangeSeconds={defaultRangeSeconds}
|
||||
/>
|
||||
) : (
|
||||
<Alert>
|
||||
|
||||
@@ -41,7 +41,7 @@ A Grafana gateway timeout, connection error, HTTP 401/403 (auth), datasource-not
|
||||
|
||||
### Requirement: SC-104 — Step is derived from the window preset
|
||||
|
||||
Given a window preset (1h / 6h / 24h / 7d), the backend MUST reuse the existing `WINDOW_PRESETS` and `step_for_window` math to derive the gateway request's `intervalMs` (`step * 1000`), `maxDataPoints`, and `from`/`to` time bounds, landing the resulting point count in the same ~100–300 band as the pre-change direct-Prom path. Users do not configure `from`/`to`/`step`/`intervalMs` directly.
|
||||
Given a window preset (5m / 15m / 30m / 1h / 3h / 6h / 12h / 24h / 2d / 7d / 14d / 30d), the backend MUST reuse the existing `WINDOW_PRESETS` and `step_for_window` math to derive the gateway request's `intervalMs` (`step * 1000`), `maxDataPoints`, and `from`/`to` time bounds. Windows of 30 minutes or more must land in the ~100–300 point band; 5m and 15m may return 20 and 60 points respectively because Prometheus resolution is never set below 15 seconds. Users do not configure `from`/`to`/`step`/`intervalMs` directly.
|
||||
|
||||
### Requirement: SC-105 — Chart widget moves from grafana to prometheus
|
||||
|
||||
@@ -57,7 +57,7 @@ The `chart` widget MUST render all series returned by the gateway range query, e
|
||||
|
||||
### Requirement: SC-108 — Chart window is a preset
|
||||
|
||||
The `chart` widget config MUST expose the time window as a preset selector (`1h`, `6h`, `24h`, `7d`), not raw `from`/`to`/`step` fields. The preset is stored in widget config and resolved to `start`/`end` server-side.
|
||||
The `chart` widget config MUST expose the time window as a preset selector (`5m`, `15m`, `30m`, `1h`, `3h`, `6h`, `12h`, `24h`, `2d`, `7d`, `14d`, `30d`), not raw `from`/`to`/`step` fields. The preset is stored in widget config and resolved to `start`/`end` server-side. The shared chart renderer also offers an **All values** display option that removes the client-side cutoff from the values returned by that configured query.
|
||||
|
||||
### Requirement: SC-109 — Gauge renders an instant scalar
|
||||
|
||||
|
||||
Reference in New Issue
Block a user