Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ef4a6379c9 | |||
| d76ea49777 |
@@ -46,7 +46,7 @@ fully removed (web-ui-rework; see decision log 2026-06-17).
|
|||||||
|
|
||||||
### Tables
|
### 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`
|
- Tabular surfaces use **TanStack Table** (`@tanstack/react-table`) behind a `DataTable`
|
||||||
wrapper (`components/ui/data-table.tsx`).
|
wrapper (`components/ui/data-table.tsx`).
|
||||||
|
|||||||
@@ -76,8 +76,6 @@ interface LineSeriesChartProps {
|
|||||||
scale?: MetricScale;
|
scale?: MetricScale;
|
||||||
/** Available displayed time ranges. Defaults to the shared range choices. */
|
/** Available displayed time ranges. Defaults to the shared range choices. */
|
||||||
rangeOptions?: readonly ChartRangeOption[];
|
rangeOptions?: readonly ChartRangeOption[];
|
||||||
/** Whether to render the interactive range selector. */
|
|
||||||
showRangeSelector?: boolean;
|
|
||||||
/** Initial uncontrolled range. Defaults to the largest numeric option. */
|
/** Initial uncontrolled range. Defaults to the largest numeric option. */
|
||||||
defaultRangeSeconds?: ChartRangeValue;
|
defaultRangeSeconds?: ChartRangeValue;
|
||||||
/** Controlled range for consumers that refetch when the selection changes. */
|
/** Controlled range for consumers that refetch when the selection changes. */
|
||||||
@@ -92,7 +90,6 @@ export function LineSeriesChart({
|
|||||||
unit = "none",
|
unit = "none",
|
||||||
scale = "auto",
|
scale = "auto",
|
||||||
rangeOptions = DEFAULT_CHART_RANGES,
|
rangeOptions = DEFAULT_CHART_RANGES,
|
||||||
showRangeSelector = true,
|
|
||||||
defaultRangeSeconds,
|
defaultRangeSeconds,
|
||||||
rangeSeconds,
|
rangeSeconds,
|
||||||
onRangeChange,
|
onRangeChange,
|
||||||
@@ -101,9 +98,8 @@ export function LineSeriesChart({
|
|||||||
defaultRangeSeconds ??
|
defaultRangeSeconds ??
|
||||||
[...rangeOptions].reverse().find((range) => typeof range.value === "number")
|
[...rangeOptions].reverse().find((range) => typeof range.value === "number")
|
||||||
?.value;
|
?.value;
|
||||||
const [localRangeSeconds, setLocalRangeSeconds] = useState<
|
const [localRangeSeconds, setLocalRangeSeconds] =
|
||||||
ChartRangeValue | undefined
|
useState<ChartRangeValue | undefined>(initialRange);
|
||||||
>(initialRange);
|
|
||||||
const selectedRangeSeconds = rangeSeconds ?? localRangeSeconds;
|
const selectedRangeSeconds = rangeSeconds ?? localRangeSeconds;
|
||||||
const latestTimestamp = series.reduce(
|
const latestTimestamp = series.reduce(
|
||||||
(max, seriesItem) =>
|
(max, seriesItem) =>
|
||||||
@@ -144,7 +140,7 @@ export function LineSeriesChart({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{showRangeSelector && rangeOptions.length > 0 && (
|
{rangeOptions.length > 0 && (
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
<Select
|
<Select
|
||||||
value={
|
value={
|
||||||
|
|||||||
@@ -38,13 +38,6 @@ describe("LineSeriesChart", () => {
|
|||||||
).toHaveTextContent("2 hours");
|
).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", () => {
|
it("offers all loaded values and reports that selection", () => {
|
||||||
const onRangeChange = vi.fn();
|
const onRangeChange = vi.fn();
|
||||||
render(
|
render(
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
import { LineSeriesChart } from "../components/LineSeriesChart";
|
import { LineSeriesChart } from "../components/LineSeriesChart";
|
||||||
|
import {
|
||||||
|
chartRangesThrough,
|
||||||
|
rangeSecondsFromWindow,
|
||||||
|
} from "../components/chartRanges";
|
||||||
import type { ChartSeries } from "../components/LineSeriesChart";
|
import type { ChartSeries } from "../components/LineSeriesChart";
|
||||||
import type { MetricScale, MetricUnit } from "../lib/metricFormat";
|
import type { MetricScale, MetricUnit } from "../lib/metricFormat";
|
||||||
import { SectionCard } from "../components/SectionCard";
|
import { SectionCard } from "../components/SectionCard";
|
||||||
@@ -20,6 +24,7 @@ export function MetricChartWidget({
|
|||||||
}: Props) {
|
}: Props) {
|
||||||
const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
|
const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
|
||||||
const series = data?.data?.series as ChartSeries[] | undefined;
|
const series = data?.data?.series as ChartSeries[] | undefined;
|
||||||
|
const maxRangeSeconds = rangeSecondsFromWindow(widget.config.window);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SectionCard title={widget.title} description={description}>
|
<SectionCard title={widget.title} description={description}>
|
||||||
@@ -34,7 +39,8 @@ export function MetricChartWidget({
|
|||||||
series={series}
|
series={series}
|
||||||
unit={widget.config.unit as MetricUnit}
|
unit={widget.config.unit as MetricUnit}
|
||||||
scale={widget.config.scale as MetricScale}
|
scale={widget.config.scale as MetricScale}
|
||||||
showRangeSelector={false}
|
rangeOptions={chartRangesThrough(maxRangeSeconds)}
|
||||||
|
defaultRangeSeconds={maxRangeSeconds}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Alert>
|
<Alert>
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
import { LineSeriesChart } from "../components/LineSeriesChart";
|
import { LineSeriesChart } from "../components/LineSeriesChart";
|
||||||
|
import {
|
||||||
|
chartRangesThrough,
|
||||||
|
type ChartRangeValue,
|
||||||
|
} from "../components/chartRanges";
|
||||||
import type { ChartSeries } from "../components/LineSeriesChart";
|
import type { ChartSeries } from "../components/LineSeriesChart";
|
||||||
import type { MetricScale, MetricUnit } from "../lib/metricFormat";
|
import type { MetricScale, MetricUnit } from "../lib/metricFormat";
|
||||||
import { SectionCard } from "../components/SectionCard";
|
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, …).
|
// Source returns raw bytes/sec; default to bytes/sec + auto scale (MB/s, …).
|
||||||
const unit = (widget.config.unit as MetricUnit) || "bytes_per_sec";
|
const unit = (widget.config.unit as MetricUnit) || "bytes_per_sec";
|
||||||
const scale = (widget.config.scale as MetricScale) || "auto";
|
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 (
|
return (
|
||||||
<SectionCard title={widget.title} description={description}>
|
<SectionCard title={widget.title} description={description}>
|
||||||
@@ -38,7 +47,8 @@ export function QbittorrentSpeedWidget({
|
|||||||
unit={unit}
|
unit={unit}
|
||||||
scale={scale}
|
scale={scale}
|
||||||
height={220}
|
height={220}
|
||||||
showRangeSelector={false}
|
rangeOptions={chartRangesThrough(maxRangeSeconds)}
|
||||||
|
defaultRangeSeconds={defaultRangeSeconds}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Alert>
|
<Alert>
|
||||||
|
|||||||
@@ -56,9 +56,6 @@ describe("MetricChartWidget", () => {
|
|||||||
render(<MetricChartWidget widget={widget} refreshIntervalMs={60000} />);
|
render(<MetricChartWidget widget={widget} refreshIntervalMs={60000} />);
|
||||||
// recharts renders an SVG; the title from SectionCard should be present.
|
// recharts renders an SVG; the title from SectionCard should be present.
|
||||||
expect(screen.getByText("CPU Usage")).toBeInTheDocument();
|
expect(screen.getByText("CPU Usage")).toBeInTheDocument();
|
||||||
expect(
|
|
||||||
screen.queryByRole("combobox", { name: "Chart range" }),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows error Alert on error", () => {
|
it("shows error Alert on error", () => {
|
||||||
|
|||||||
@@ -52,9 +52,6 @@ describe("QbittorrentSpeedWidget", () => {
|
|||||||
<QbittorrentSpeedWidget widget={widget} refreshIntervalMs={5000} />,
|
<QbittorrentSpeedWidget widget={widget} refreshIntervalMs={5000} />,
|
||||||
);
|
);
|
||||||
expect(screen.getByText("Speed Chart")).toBeInTheDocument();
|
expect(screen.getByText("Speed Chart")).toBeInTheDocument();
|
||||||
expect(
|
|
||||||
screen.queryByRole("combobox", { name: "Chart range" }),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
expect(container.firstChild).not.toBeNull();
|
expect(container.firstChild).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user