diff --git a/src/components/widgets/unifi_console/unifi_console.test.jsx b/src/components/widgets/unifi_console/unifi_console.test.jsx
index c447a756f..0dc16b546 100644
--- a/src/components/widgets/unifi_console/unifi_console.test.jsx
+++ b/src/components/widgets/unifi_console/unifi_console.test.jsx
@@ -40,32 +40,41 @@ describe("components/widgets/unifi_console", () => {
it("renders a wait state when no site is available yet", () => {
useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+ const options = Object.freeze({ index: 0 });
- renderWithProviders(
, { settings: { target: "_self" } });
expect(screen.getByText("unifi.wait")).toBeInTheDocument();
+ expect(useWidgetAPI).toHaveBeenCalledWith(
+ { index: 0, service_group: "unifi_console", service_name: "unifi_console" },
+ "stat/sites",
+ { index: 0 },
+ );
+ expect(options).toEqual({ index: 0 });
});
it("renders site name and uptime when data is available", () => {
+ const data = {
+ data: [
+ {
+ name: "default",
+ desc: "Home",
+ health: [
+ {
+ subsystem: "wan",
+ status: "ok",
+ gw_name: "Router",
+ "gw_system-stats": { uptime: 172800 },
+ },
+ { subsystem: "lan", status: "unknown" },
+ { subsystem: "wlan", status: "unknown" },
+ ],
+ },
+ ],
+ };
+ const originalData = structuredClone(data);
useWidgetAPI.mockReturnValue({
- data: {
- data: [
- {
- name: "default",
- desc: "Home",
- health: [
- {
- subsystem: "wan",
- status: "ok",
- gw_name: "Router",
- "gw_system-stats": { uptime: 172800 },
- },
- { subsystem: "lan", status: "unknown" },
- { subsystem: "wlan", status: "unknown" },
- ],
- },
- ],
- },
+ data,
error: undefined,
});
@@ -75,6 +84,7 @@ describe("components/widgets/unifi_console", () => {
// common.number is mocked to return the numeric value as a string.
expect(screen.getByText("2")).toBeInTheDocument();
expect(screen.getByText("unifi.days")).toBeInTheDocument();
+ expect(data).toEqual(originalData);
});
it("selects a site by description when options.site is set", () => {
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d5c5296cf..7dfcc841b 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -12,7 +12,7 @@ import dynamic from "next/dynamic";
import Head from "next/head";
import { useRouter } from "next/router";
import Script from "next/script";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { BiError } from "react-icons/bi";
import useSWR, { SWRConfig } from "swr";
import { ColorContext } from "utils/contexts/color";
@@ -102,7 +102,29 @@ function Index({ initialSettings, fallback }) {
const [stale, setStale] = useState(false);
const { data: errorsData } = useSWR("/api/validate");
const { error: validateError } = errorsData || {};
- const { data: hashData, mutate: mutateHash } = useSWR("/api/hash");
+
+ const handleHashData = useCallback((hashData) => {
+ if (typeof window === "undefined" || !hashData?.hash) return;
+
+ const previousHash = localStorage.getItem("hash");
+
+ if (!previousHash) {
+ localStorage.setItem("hash", hashData.hash);
+ }
+
+ if (previousHash && previousHash !== hashData.hash) {
+ setStale(true);
+ localStorage.setItem("hash", hashData.hash);
+
+ fetch("/api/revalidate").then((res) => {
+ if (res.ok) {
+ window.location.reload();
+ }
+ });
+ }
+ }, []);
+
+ const { mutate: mutateHash } = useSWR("/api/hash", { onSuccess: handleHashData });
useEffect(() => {
if (windowFocused) {
@@ -110,29 +132,6 @@ function Index({ initialSettings, fallback }) {
}
}, [windowFocused, mutateHash]);
- useEffect(() => {
- if (hashData) {
- if (typeof window !== "undefined") {
- const previousHash = localStorage.getItem("hash");
-
- if (!previousHash) {
- localStorage.setItem("hash", hashData.hash);
- }
-
- if (previousHash && previousHash !== hashData.hash) {
- setStale(true);
- localStorage.setItem("hash", hashData.hash);
-
- fetch("/api/revalidate").then((res) => {
- if (res.ok) {
- window.location.reload();
- }
- });
- }
- }
- }
- }, [hashData]);
-
if (validateError) {
return (
@@ -264,6 +263,13 @@ function Home({ initialSettings }) {
e.key.match(/([à-ü]|[À-Ü]|!)/g) ||
(e.key === "v" && (e.ctrlKey || e.metaKey))
) {
+ if (e.key.length === 1 && !(e.key === "v" && (e.ctrlKey || e.metaKey))) {
+ e.preventDefault();
+ // whitespace opens the search but shouldn't be in it
+ if (e.key.trim()) {
+ setSearchString((currentSearchString) => currentSearchString + e.key);
+ }
+ }
setSearching(true);
} else if (e.key === "Escape") {
setSearchString("");
diff --git a/src/utils/contexts/color.jsx b/src/utils/contexts/color.jsx
index f75ced94f..d779a58b6 100644
--- a/src/utils/contexts/color.jsx
+++ b/src/utils/contexts/color.jsx
@@ -30,10 +30,6 @@ export function ColorProvider({ initialTheme, children }) {
lastColor = rawColor;
};
- useEffect(() => {
- if (initialTheme !== undefined) setColor(initialTheme ?? getInitialColor());
- }, [initialTheme]);
-
useEffect(() => {
rawSetColor(color);
}, [color]);
diff --git a/src/utils/contexts/settings.jsx b/src/utils/contexts/settings.jsx
index 00699b41a..1837ec275 100644
--- a/src/utils/contexts/settings.jsx
+++ b/src/utils/contexts/settings.jsx
@@ -1,14 +1,10 @@
-import { createContext, useEffect, useMemo, useState } from "react";
+import { createContext, useMemo, useState } from "react";
export const SettingsContext = createContext();
export function SettingsProvider({ initialSettings, children }) {
const [settings, setSettings] = useState(() => initialSettings ?? {});
- useEffect(() => {
- if (initialSettings !== undefined) setSettings(initialSettings ?? {});
- }, [initialSettings]);
-
const value = useMemo(() => ({ settings, setSettings }), [settings]);
return
{children};
diff --git a/src/utils/contexts/tab.jsx b/src/utils/contexts/tab.jsx
index c18fc2c94..316f43d72 100644
--- a/src/utils/contexts/tab.jsx
+++ b/src/utils/contexts/tab.jsx
@@ -1,14 +1,10 @@
-import { createContext, useEffect, useMemo, useState } from "react";
+import { createContext, useMemo, useState } from "react";
export const TabContext = createContext();
export function TabProvider({ initialTab, children }) {
const [activeTab, setActiveTab] = useState(() => initialTab ?? false);
- useEffect(() => {
- if (initialTab !== undefined) setActiveTab(initialTab ?? false);
- }, [initialTab]);
-
const value = useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);
return
{children};
diff --git a/src/utils/contexts/theme.jsx b/src/utils/contexts/theme.jsx
index 81acff46a..3e4436ab5 100644
--- a/src/utils/contexts/theme.jsx
+++ b/src/utils/contexts/theme.jsx
@@ -31,10 +31,6 @@ export function ThemeProvider({ initialTheme, children }) {
localStorage.setItem("theme-mode", rawTheme);
};
- useEffect(() => {
- if (initialTheme !== undefined) setTheme(initialTheme ?? getInitialTheme());
- }, [initialTheme]);
-
useEffect(() => {
rawSetTheme(theme);
}, [theme]);
diff --git a/src/utils/hooks/use-current-time.js b/src/utils/hooks/use-current-time.js
new file mode 100644
index 000000000..a5640558d
--- /dev/null
+++ b/src/utils/hooks/use-current-time.js
@@ -0,0 +1,45 @@
+import { useSyncExternalStore } from "react";
+
+const MINUTE = 60_000;
+const stores = new Map();
+
+function getStore(refreshInterval) {
+ const existing = stores.get(refreshInterval);
+ if (existing) return existing;
+
+ const listeners = new Set();
+ let now = null; // null until mounted, so SSR and hydration render the same thing
+ let timer = null;
+
+ const store = {
+ getSnapshot: () => now,
+ subscribe: (onStoreChange) => {
+ listeners.add(onStoreChange);
+
+ if (!timer) {
+ now = Date.now();
+ timer = setInterval(() => {
+ now = Date.now();
+ listeners.forEach((listener) => listener());
+ }, refreshInterval);
+ }
+
+ return () => {
+ listeners.delete(onStoreChange);
+ if (!listeners.size) {
+ clearInterval(timer);
+ timer = null;
+ }
+ };
+ },
+ };
+
+ stores.set(refreshInterval, store);
+ return store;
+}
+
+// Returns null on the server and during hydration, then the current time.
+export default function useCurrentTime(refreshInterval = MINUTE) {
+ const { subscribe, getSnapshot } = getStore(refreshInterval);
+ return useSyncExternalStore(subscribe, getSnapshot, () => null);
+}
diff --git a/src/utils/hooks/use-current-time.test.jsx b/src/utils/hooks/use-current-time.test.jsx
new file mode 100644
index 000000000..ae8b02d34
--- /dev/null
+++ b/src/utils/hooks/use-current-time.test.jsx
@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import useCurrentTime from "./use-current-time";
+
+function CurrentTime({ refreshInterval }) {
+ return
{useCurrentTime(refreshInterval)};
+}
+
+describe("utils/hooks/use-current-time", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(1_000);
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it("updates at the requested interval", () => {
+ render(
);
+ expect(screen.getByText("1000")).toBeInTheDocument();
+
+ act(() => {
+ vi.advanceTimersByTime(5_000);
+ });
+
+ expect(screen.getByText("6000")).toBeInTheDocument();
+ });
+});
diff --git a/src/utils/hooks/window-focus.js b/src/utils/hooks/window-focus.js
index a221e48ea..0cf5585e4 100644
--- a/src/utils/hooks/window-focus.js
+++ b/src/utils/hooks/window-focus.js
@@ -1,26 +1,17 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
-const useWindowFocus = () => {
- const [focused, setFocused] = useState(hasFocus);
+const subscribe = (onFocusChange) => {
+ window.addEventListener("focus", onFocusChange);
+ window.addEventListener("blur", onFocusChange);
- useEffect(() => {
- setFocused(hasFocus());
-
- const onFocus = () => setFocused(true);
- const onBlur = () => setFocused(false);
-
- window.addEventListener("focus", onFocus);
- window.addEventListener("blur", onBlur);
-
- return () => {
- window.removeEventListener("focus", onFocus);
- window.removeEventListener("blur", onBlur);
- };
- }, []);
-
- return focused;
+ return () => {
+ window.removeEventListener("focus", onFocusChange);
+ window.removeEventListener("blur", onFocusChange);
+ };
};
+const useWindowFocus = () => useSyncExternalStore(subscribe, hasFocus, () => false);
+
export default useWindowFocus;
diff --git a/src/utils/hooks/window-focus.test.jsx b/src/utils/hooks/window-focus.test.jsx
index 818fb15fe..2491c39e9 100644
--- a/src/utils/hooks/window-focus.test.jsx
+++ b/src/utils/hooks/window-focus.test.jsx
@@ -12,15 +12,17 @@ function Fixture() {
describe("utils/hooks/window-focus", () => {
it("tracks focus/blur events", async () => {
- vi.spyOn(document, "hasFocus").mockReturnValue(true);
+ const hasFocus = vi.spyOn(document, "hasFocus").mockReturnValue(true);
render(
);
expect(screen.getByTestId("focused")).toHaveTextContent("true");
+ hasFocus.mockReturnValue(false);
window.dispatchEvent(new Event("blur"));
await waitFor(() => expect(screen.getByTestId("focused")).toHaveTextContent("false"));
+ hasFocus.mockReturnValue(true);
window.dispatchEvent(new Event("focus"));
await waitFor(() => expect(screen.getByTestId("focused")).toHaveTextContent("true"));
});
diff --git a/src/utils/proxy/use-widget-api.js b/src/utils/proxy/use-widget-api.js
index 5505a87e7..966c9e525 100644
--- a/src/utils/proxy/use-widget-api.js
+++ b/src/utils/proxy/use-widget-api.js
@@ -2,13 +2,13 @@ import useSWR from "swr";
import { formatProxyUrl } from "./api-helpers";
-export default function useWidgetAPI(widget, ...options) {
- const config = {};
- if (options && options[1]?.refreshInterval) {
- config.refreshInterval = options[1].refreshInterval;
+export default function useWidgetAPI(widget, endpoint, queryParams, swrConfig = {}) {
+ const config = { ...swrConfig };
+ if (queryParams?.refreshInterval) {
+ config.refreshInterval = queryParams.refreshInterval;
}
- let url = formatProxyUrl(widget, ...options);
- if (options[0] === "") {
+ let url = formatProxyUrl(widget, endpoint, queryParams);
+ if (endpoint === "") {
url = null;
}
const { data, error, mutate } = useSWR(url, config);
diff --git a/src/utils/proxy/use-widget-api.test.js b/src/utils/proxy/use-widget-api.test.js
index eb7e7d1b4..febdf9908 100644
--- a/src/utils/proxy/use-widget-api.test.js
+++ b/src/utils/proxy/use-widget-api.test.js
@@ -28,6 +28,18 @@ describe("utils/proxy/use-widget-api", () => {
expect(result.mutate).toBe("m");
});
+ it("passes additional SWR configuration separately from the proxy query", () => {
+ useSWR.mockReturnValue({ data: undefined, error: undefined, mutate: vi.fn() });
+
+ const widget = { service_group: "g", service_name: "s", index: 0 };
+ const onSuccess = vi.fn();
+ useWidgetAPI(widget, "status", { refreshInterval: 123 }, { onSuccess });
+
+ const [url, config] = useSWR.mock.calls[0];
+ expect(url).not.toContain("onSuccess");
+ expect(config).toEqual({ refreshInterval: 123, onSuccess });
+ });
+
it("returns data.error as the top-level error", () => {
const dataError = { message: "nope" };
useSWR.mockReturnValue({ data: { error: dataError }, error: undefined, mutate: vi.fn() });
diff --git a/src/utils/widget-fields.js b/src/utils/widget-fields.js
new file mode 100644
index 000000000..658d72cca
--- /dev/null
+++ b/src/utils/widget-fields.js
@@ -0,0 +1,12 @@
+export default function withWidgetFields(service, defaultFields, maxFields = 4) {
+ const configuredFields = service.widget.fields;
+ const fields = (configuredFields?.length ? configuredFields : defaultFields).slice(0, maxFields);
+
+ return {
+ ...service,
+ widget: {
+ ...service.widget,
+ fields,
+ },
+ };
+}
diff --git a/src/utils/widget-fields.test.js b/src/utils/widget-fields.test.js
new file mode 100644
index 000000000..0cddb1142
--- /dev/null
+++ b/src/utils/widget-fields.test.js
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+
+import withWidgetFields from "./widget-fields";
+
+describe("utils/widget-fields", () => {
+ it("applies defaults without modifying the service", () => {
+ const service = { name: "Example", widget: { type: "example" } };
+
+ const normalizedService = withWidgetFields(service, ["one", "two"]);
+
+ expect(normalizedService).toEqual({
+ name: "Example",
+ widget: { type: "example", fields: ["one", "two"] },
+ });
+ expect(service).toEqual({ name: "Example", widget: { type: "example" } });
+ });
+
+ it("treats an explicitly empty fields list as unset", () => {
+ const service = { widget: { type: "example", fields: [] } };
+
+ const normalizedService = withWidgetFields(service, ["one", "two"]);
+
+ expect(normalizedService.widget.fields).toEqual(["one", "two"]);
+ });
+
+ it("copies and limits configured fields", () => {
+ const service = { widget: { type: "example", fields: ["one", "two", "three"] } };
+
+ const normalizedService = withWidgetFields(service, ["default"], 2);
+
+ expect(normalizedService.widget.fields).toEqual(["one", "two"]);
+ expect(normalizedService.widget.fields).not.toBe(service.widget.fields);
+ expect(service.widget.fields).toEqual(["one", "two", "three"]);
+ });
+});
diff --git a/src/widgets/arcane/component.jsx b/src/widgets/arcane/component.jsx
index 20307bfdc..cdd14e300 100644
--- a/src/widgets/arcane/component.jsx
+++ b/src/widgets/arcane/component.jsx
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-const MAX_FIELDS = 4;
+const DEFAULT_FIELDS = ["running", "stopped", "total", "image_updates"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields) {
- widget.fields = ["running", "stopped", "total", "image_updates"];
- } else if (widget.fields.length > MAX_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_FIELDS);
- }
-
const envNotSet = widget.env == null || widget.env === "";
const { data: containers, error: containersError } = useWidgetAPI(widget, envNotSet ? "" : "containers");
diff --git a/src/widgets/arcane/component.test.jsx b/src/widgets/arcane/component.test.jsx
index 466cbcc71..3750c4520 100644
--- a/src/widgets/arcane/component.test.jsx
+++ b/src/widgets/arcane/component.test.jsx
@@ -57,7 +57,7 @@ describe("widgets/arcane/component", () => {
expect(screen.getByText("arcane.image_updates")).toBeInTheDocument();
});
- it("truncates custom fields to the max allowed", () => {
+ it("renders only the first four custom fields without mutating the input", () => {
useWidgetAPI.mockImplementation(() => ({ data: undefined, error: undefined }));
const service = {
@@ -65,7 +65,8 @@ describe("widgets/arcane/component", () => {
};
const { container } = renderWithProviders(
, { settings: { hideErrors: false } });
- // sliced to first four entries
+ // The helper caps the copied fields used for rendering and leaves the configured service unchanged.
+ expect(service.widget.fields).toEqual(["running", "stopped", "total", "images", "images_unused"]);
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("docker.running")).toBeInTheDocument();
expect(screen.getByText("dockhand.stopped")).toBeInTheDocument();
diff --git a/src/widgets/argocd/component.jsx b/src/widgets/argocd/component.jsx
index f61bed432..16d717534 100644
--- a/src/widgets/argocd/component.jsx
+++ b/src/widgets/argocd/component.jsx
@@ -2,19 +2,14 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["apps", "synced", "outOfSync", "healthy"];
+
+export default function Component({ service: configuredService }) {
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields) {
- widget.fields = ["apps", "synced", "outOfSync", "healthy"];
- }
-
- const MAX_ALLOWED_FIELDS = 4;
- if (widget.fields.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
const { data: appsData, error: appsError } = useWidgetAPI(widget, "applications");
const appCounts = widget.fields.map((status) => {
diff --git a/src/widgets/argocd/component.test.jsx b/src/widgets/argocd/component.test.jsx
index 88b102643..ed4b29116 100644
--- a/src/widgets/argocd/component.test.jsx
+++ b/src/widgets/argocd/component.test.jsx
@@ -25,7 +25,7 @@ describe("widgets/argocd/component", () => {
const service = { widget: { type: "argocd", fields: ["apps", "synced", "outOfSync", "healthy", "extra"] } };
const { container } = renderWithProviders(
, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["apps", "synced", "outOfSync", "healthy"]);
+ expect(service.widget.fields).toEqual(["apps", "synced", "outOfSync", "healthy", "extra"]);
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("argocd.apps")).toBeInTheDocument();
expect(screen.getByText("argocd.synced")).toBeInTheDocument();
diff --git a/src/widgets/authentik/component.jsx b/src/widgets/authentik/component.jsx
index dcb2fe6e4..935d41355 100644
--- a/src/widgets/authentik/component.jsx
+++ b/src/widgets/authentik/component.jsx
@@ -2,10 +2,14 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import useCurrentTime from "utils/hooks/use-current-time";
import useWidgetAPI from "utils/proxy/use-widget-api";
+const DAY = 24 * 60 * 60 * 1000;
+
export default function Component({ service }) {
const { t } = useTranslation();
+ const currentTime = useCurrentTime();
const { widget } = service;
const isV2 = widget.version === 2;
@@ -45,7 +49,7 @@ export default function Component({ service }) {
switch (widget.version) {
// v1 is default
default:
- const yesterday = new Date(Date.now()).setHours(-24);
+ const yesterday = currentTime - DAY;
loginsLast24H = loginsData.reduce(
(total, current) => (current.x_cord >= yesterday ? total + current.y_cord : total),
0,
diff --git a/src/widgets/authentik/component.test.jsx b/src/widgets/authentik/component.test.jsx
index e3b39d0d8..d49f5c774 100644
--- a/src/widgets/authentik/component.test.jsx
+++ b/src/widgets/authentik/component.test.jsx
@@ -71,7 +71,8 @@ describe("widgets/authentik/component", () => {
it("computes v1 login/failed counts for entries within the last 24h window", () => {
vi.useFakeTimers();
- vi.setSystemTime(new Date("2026-01-02T00:00:00Z"));
+ // Use midday so a mistaken previous-midnight cutoff would include the 25-hour-old entries.
+ vi.setSystemTime(new Date("2026-01-02T12:00:00Z"));
const now = Date.now();
const oneHourAgo = now - 60 * 60 * 1000;
diff --git a/src/widgets/backrest/component.jsx b/src/widgets/backrest/component.jsx
index ab52efa05..0ab2ca483 100644
--- a/src/widgets/backrest/component.jsx
+++ b/src/widgets/backrest/component.jsx
@@ -3,13 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
const BACKREST_DEFAULT_FIELDS = ["num_success_latest", "num_failure_latest", "num_failure_30", "bytes_added_30"];
-const MAX_ALLOWED_FIELDS = 4;
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, BACKREST_DEFAULT_FIELDS);
const { widget } = service;
const { data, error } = useWidgetAPI(widget, "summary");
@@ -18,12 +19,6 @@ export default function Component({ service }) {
return
;
}
- if (!widget.fields?.length) {
- widget.fields = BACKREST_DEFAULT_FIELDS;
- } else if (widget.fields.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!data) {
return (
diff --git a/src/widgets/backrest/component.test.jsx b/src/widgets/backrest/component.test.jsx
index 85616c601..20d93e863 100644
--- a/src/widgets/backrest/component.test.jsx
+++ b/src/widgets/backrest/component.test.jsx
@@ -24,12 +24,7 @@ describe("widgets/backrest/component", () => {
const service = { widget: { type: "backrest" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual([
- "num_success_latest",
- "num_failure_latest",
- "num_failure_30",
- "bytes_added_30",
- ]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("backrest.num_success_latest")).toBeInTheDocument();
@@ -48,7 +43,7 @@ describe("widgets/backrest/component", () => {
renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["a", "b", "c", "d"]);
+ expect(service.widget.fields).toEqual(["a", "b", "c", "d", "e"]);
});
it("renders values and respects field filtering", () => {
diff --git a/src/widgets/beszel/component.jsx b/src/widgets/beszel/component.jsx
index de3f52aa7..013fb7e47 100644
--- a/src/widgets/beszel/component.jsx
+++ b/src/widgets/beszel/component.jsx
@@ -3,23 +3,21 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const SUMMARY_FIELDS = ["systems", "up"];
+const SYSTEM_FIELDS = ["name", "status", "cpu", "memory"];
+
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const defaultFields = configuredService.widget.systemId ? SYSTEM_FIELDS : SUMMARY_FIELDS;
+ const service = withWidgetFields(configuredService, defaultFields);
const { widget } = service;
const { systemId } = widget;
const { data: systems, error: systemsError } = useWidgetAPI(widget, "systems");
- const MAX_ALLOWED_FIELDS = 4;
- if (!widget.fields?.length > 0) {
- widget.fields = systemId ? ["name", "status", "cpu", "memory"] : ["systems", "up"];
- }
- if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
let system = null;
let finalError = systemsError;
diff --git a/src/widgets/beszel/component.test.jsx b/src/widgets/beszel/component.test.jsx
index ba3d0c618..454d85d11 100644
--- a/src/widgets/beszel/component.test.jsx
+++ b/src/widgets/beszel/component.test.jsx
@@ -23,7 +23,7 @@ describe("widgets/beszel/component", () => {
const service = { widget: { type: "beszel" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["systems", "up"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(2);
expect(screen.getByText("beszel.systems")).toBeInTheDocument();
expect(screen.getByText("beszel.up")).toBeInTheDocument();
@@ -66,7 +66,7 @@ describe("widgets/beszel/component", () => {
const service = { widget: { type: "beszel", systemId: "sys1" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["name", "status", "cpu", "memory"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expectBlockValue(container, "beszel.name", "MySystem");
diff --git a/src/widgets/calendar/component.jsx b/src/widgets/calendar/component.jsx
index 7c4b7c709..fe9b6ae9d 100644
--- a/src/widgets/calendar/component.jsx
+++ b/src/widgets/calendar/component.jsx
@@ -38,16 +38,16 @@ const colorVariants = {
export default function Component({ service }) {
const { widget } = service;
const { i18n } = useTranslation();
- const [showDate, setShowDate] = useState(null);
const [events, setEvents] = useState({});
const nowDate = DateTime.now().setLocale(i18n.language);
const currentDate = widget?.timezone ? nowDate.setZone(widget?.timezone).startOf("day") : nowDate;
+ const [showDate, setShowDate] = useState(null);
const { settings } = useContext(SettingsContext);
useEffect(() => {
- if (!showDate) {
- setShowDate(currentDate);
- }
+ // seeded after mount, not during render: "today" is client-only and would break hydration
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ if (!showDate) setShowDate(currentDate);
}, [showDate, currentDate]);
// params for API fetch
diff --git a/src/widgets/calendar/integrations/ical.jsx b/src/widgets/calendar/integrations/ical.jsx
index bad4a6ac9..1c20dee5d 100644
--- a/src/widgets/calendar/integrations/ical.jsx
+++ b/src/widgets/calendar/integrations/ical.jsx
@@ -1,7 +1,7 @@
import ICAL from "ical.js";
import { DateTime } from "luxon";
import { useTranslation } from "next-i18next/pages";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
import Error from "../../../components/services/widget/error";
import useWidgetAPI from "../../../utils/proxy/use-widget-api";
@@ -17,65 +17,67 @@ function simpleHash(str) {
return Math.abs(hash).toString(36);
}
+function buildEvent(event, type) {
+ return {
+ id: event.getFirstPropertyValue("uid"),
+ type,
+ title: event.getFirstPropertyValue("summary"),
+ rrule: event.getFirstPropertyValue("rrule"),
+ dtstart:
+ event.getFirstPropertyValue("dtstart") ||
+ event.getFirstPropertyValue("due") ||
+ event.getFirstPropertyValue("completed") ||
+ ICAL.Time.now(), // handles events without a date
+ dtend:
+ event.getFirstPropertyValue("dtend") ||
+ event.getFirstPropertyValue("due") ||
+ event.getFirstPropertyValue("completed") ||
+ ICAL.Time.now(), // handles events without a date
+ location: event.getFirstPropertyValue("location"),
+ status: event.getFirstPropertyValue("status"),
+ url: event.getFirstPropertyValue("url"),
+ };
+}
+
export default function Integration({ config, params, setEvents, hideErrors, timezone }) {
const { t } = useTranslation();
const { data: icalData, error: icalError } = useWidgetAPI(config, config.name, {
refreshInterval: 300000, // 5 minutes
});
+ const { events, dataError } = useMemo(() => {
+ if (icalError || !icalData || icalData.error) {
+ return { events: [], dataError: undefined };
+ }
+
+ if (!icalData.data) {
+ return {
+ events: [],
+ dataError: { message: `'${config.name}': ${t("calendar.errorWhenLoadingData")}` },
+ };
+ }
+
+ const jCal = ICAL.parse(icalData.data);
+ const vCalendar = new ICAL.Component(jCal);
+ const parsedEvents = [
+ ...vCalendar.getAllSubcomponents("vevent").map((event) => buildEvent(event, "vevent")),
+ ...vCalendar.getAllSubcomponents("vtodo").map((todo) => buildEvent(todo, "vtodo")),
+ ];
+
+ return {
+ events: parsedEvents,
+ dataError:
+ parsedEvents.length === 0 ? { message: `'${config.name}': ${t("calendar.noEventsFound")}` } : undefined,
+ };
+ }, [icalData, icalError, config.name, t]);
+
useEffect(() => {
const { showName = false } = config?.params || {};
- let events = [];
-
- if (!icalError && icalData && !icalData.error) {
- if (!icalData.data) {
- icalData.error = { message: `'${config.name}': ${t("calendar.errorWhenLoadingData")}` };
- return;
- }
-
- const jCal = ICAL.parse(icalData.data);
- const vCalendar = new ICAL.Component(jCal);
-
- const buildEvent = (event, type) => {
- return {
- id: event.getFirstPropertyValue("uid"),
- type,
- title: event.getFirstPropertyValue("summary"),
- rrule: event.getFirstPropertyValue("rrule"),
- dtstart:
- event.getFirstPropertyValue("dtstart") ||
- event.getFirstPropertyValue("due") ||
- event.getFirstPropertyValue("completed") ||
- ICAL.Time.now(), // handles events without a date
- dtend:
- event.getFirstPropertyValue("dtend") ||
- event.getFirstPropertyValue("due") ||
- event.getFirstPropertyValue("completed") ||
- ICAL.Time.now(), // handles events without a date
- location: event.getFirstPropertyValue("location"),
- status: event.getFirstPropertyValue("status"),
- url: event.getFirstPropertyValue("url"),
- };
- };
-
- const getEvents = () => {
- const vEvents = vCalendar.getAllSubcomponents("vevent").map((event) => buildEvent(event, "vevent"));
-
- const vTodos = vCalendar.getAllSubcomponents("vtodo").map((todo) => buildEvent(todo, "vtodo"));
-
- return [...vEvents, ...vTodos];
- };
-
- events = getEvents();
- if (events.length === 0) {
- icalData.error = { message: `'${config.name}': ${t("calendar.noEventsFound")}` };
- }
- }
const startDate = DateTime.fromISO(params.start);
const endDate = DateTime.fromISO(params.end);
- if (icalError || events.length === 0 || !startDate.isValid || !endDate.isValid) {
+ if (events.length === 0 || !startDate.isValid || !endDate.isValid) {
return;
}
@@ -113,7 +115,7 @@ export default function Integration({ config, params, setEvents, hideErrors, tim
return occurrences;
};
- const eventsToAdd = [];
+ const eventsToAdd = {};
events.forEach((event) => {
const occurrences = getOcurrencesFromRange(event);
@@ -154,8 +156,8 @@ export default function Integration({ config, params, setEvents, hideErrors, tim
});
setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
- }, [icalData, icalError, config, params, setEvents, timezone, t]);
+ }, [events, config, params, setEvents, timezone]);
- const error = icalError ?? icalData?.error;
+ const error = icalError ?? icalData?.error ?? dataError;
return error && !hideErrors && ;
}
diff --git a/src/widgets/calendar/integrations/ical.test.jsx b/src/widgets/calendar/integrations/ical.test.jsx
index bd0b4f873..d1d0fb019 100644
--- a/src/widgets/calendar/integrations/ical.test.jsx
+++ b/src/widgets/calendar/integrations/ical.test.jsx
@@ -1,6 +1,6 @@
// @vitest-environment jsdom
-import { render, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
const { useWidgetAPI } = vi.hoisted(() => ({
@@ -12,6 +12,45 @@ vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
import Integration from "./ical";
describe("widgets/calendar/integrations/ical", () => {
+ it("reports a missing calendar payload without mutating the response", () => {
+ const data = {};
+ useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+ render(
+ ,
+ );
+
+ expect(screen.getByText(/'Work': calendar\.errorWhenLoadingData/)).toBeInTheDocument();
+ expect(data).toEqual({});
+ });
+
+ it("reports a calendar with no events without mutating the response", () => {
+ const data = {
+ data: ["BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//Test//EN", "END:VCALENDAR", ""].join("\n"),
+ };
+ const originalData = structuredClone(data);
+ useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+ render(
+ ,
+ );
+
+ expect(screen.getByText(/'Empty': calendar\.noEventsFound/)).toBeInTheDocument();
+ expect(data).toEqual(originalData);
+ });
+
it("adds parsed events within the date range", async () => {
useWidgetAPI.mockReturnValue({
data: {
diff --git a/src/widgets/dockhand/component.jsx b/src/widgets/dockhand/component.jsx
index 0fff1c49f..e72132f5d 100644
--- a/src/widgets/dockhand/component.jsx
+++ b/src/widgets/dockhand/component.jsx
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-const MAX_FIELDS = 4;
+const DEFAULT_FIELDS = ["running", "total", "cpu", "memory"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields) {
- widget.fields = ["running", "total", "cpu", "memory"];
- } else if (widget.fields.length > MAX_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_FIELDS);
- }
-
const { data: stats, error: statsError } = useWidgetAPI(widget, "dashboard/stats");
if (statsError) {
diff --git a/src/widgets/dockhand/component.test.jsx b/src/widgets/dockhand/component.test.jsx
index d9f0be490..f55981239 100644
--- a/src/widgets/dockhand/component.test.jsx
+++ b/src/widgets/dockhand/component.test.jsx
@@ -22,7 +22,11 @@ describe("widgets/dockhand/component", () => {
const service = { widget: { type: "dockhand" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["running", "total", "cpu", "memory"]);
+ expect(service.widget.fields).toBeUndefined();
+ expect(useWidgetAPI).toHaveBeenCalledWith(
+ { type: "dockhand", fields: ["running", "total", "cpu", "memory"] },
+ "dashboard/stats",
+ );
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("dockhand.running")).toBeInTheDocument();
expect(screen.getByText("dockhand.total")).toBeInTheDocument();
diff --git a/src/widgets/duplicati/component.jsx b/src/widgets/duplicati/component.jsx
index 90e0253ed..7252c587b 100644
--- a/src/widgets/duplicati/component.jsx
+++ b/src/widgets/duplicati/component.jsx
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
const DEFAULT_FIELDS = ["jobs", "errors", "lastBackup", "nextRun"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields?.length) {
- widget.fields = DEFAULT_FIELDS;
- } else if (widget.fields?.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
const { data, error } = useWidgetAPI(widget);
if (error) {
diff --git a/src/widgets/esphome/component.jsx b/src/widgets/esphome/component.jsx
index 94fea61fa..b966e10be 100644
--- a/src/widgets/esphome/component.jsx
+++ b/src/widgets/esphome/component.jsx
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["online", "offline", "offline_alt", "total"];
+
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: resultData, error: resultError } = useWidgetAPI(widget);
@@ -14,12 +18,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields || widget.fields.length === 0) {
- widget.fields = ["online", "offline", "offline_alt", "total"];
- } else if (widget.fields.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
if (!resultData) {
return (
diff --git a/src/widgets/esphome/component.test.jsx b/src/widgets/esphome/component.test.jsx
index 10ad52176..9be60325c 100644
--- a/src/widgets/esphome/component.test.jsx
+++ b/src/widgets/esphome/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/esphome/component", () => {
const service = { widget: { type: "esphome" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["online", "offline", "offline_alt", "total"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("esphome.online")).toBeInTheDocument();
expect(screen.getByText("esphome.offline")).toBeInTheDocument();
diff --git a/src/widgets/fritzbox/component.jsx b/src/widgets/fritzbox/component.jsx
index 5611de312..1f7f6c576 100644
--- a/src/widgets/fritzbox/component.jsx
+++ b/src/widgets/fritzbox/component.jsx
@@ -3,11 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
export const fritzboxDefaultFields = ["connectionStatus", "uptime", "maxDown", "maxUp"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, fritzboxDefaultFields);
const { widget } = service;
const { data: fritzboxData, error: fritzboxError } = useWidgetAPI(widget, "status");
@@ -15,16 +17,6 @@ export default function Component({ service }) {
return ;
}
- // Default fields
- if (!widget.fields?.length > 0) {
- widget.fields = fritzboxDefaultFields;
- }
- const MAX_ALLOWED_FIELDS = 4;
- // Limits max number of displayed fields
- if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!fritzboxData) {
return (
diff --git a/src/widgets/fritzbox/component.test.jsx b/src/widgets/fritzbox/component.test.jsx
index f1abcaf41..017fb200c 100644
--- a/src/widgets/fritzbox/component.test.jsx
+++ b/src/widgets/fritzbox/component.test.jsx
@@ -9,7 +9,7 @@ import { expectBlockValue } from "test-utils/widget-assertions";
const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
-import Component, { fritzboxDefaultFields } from "./component";
+import Component from "./component";
describe("widgets/fritzbox/component", () => {
beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/fritzbox/component", () => {
const service = { widget: { type: "fritzbox", url: "http://x" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(fritzboxDefaultFields);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("fritzbox.connectionStatus")).toBeInTheDocument();
expect(screen.getByText("fritzbox.uptime")).toBeInTheDocument();
@@ -43,7 +43,14 @@ describe("widgets/fritzbox/component", () => {
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["down", "up", "received", "sent"]);
+ expect(service.widget.fields).toEqual([
+ "down",
+ "up",
+ "received",
+ "sent",
+ "externalIPAddress",
+ "externalIPv6Prefix",
+ ]);
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("fritzbox.down")).toBeInTheDocument();
expect(screen.getByText("fritzbox.up")).toBeInTheDocument();
diff --git a/src/widgets/gamedig/component.jsx b/src/widgets/gamedig/component.jsx
index 8ed11a124..08e885a74 100644
--- a/src/widgets/gamedig/component.jsx
+++ b/src/widgets/gamedig/component.jsx
@@ -3,8 +3,12 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["map", "currentPlayers", "ping"];
+
+export default function Component({ service: configuredService }) {
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: serverData, error: serverError } = useWidgetAPI(widget, "status");
const { t } = useTranslation();
@@ -13,16 +17,6 @@ export default function Component({ service }) {
return ;
}
- // Default fields
- if (widget.fields == null || widget.fields.length === 0) {
- widget.fields = ["map", "currentPlayers", "ping"];
- }
- const MAX_ALLOWED_FIELDS = 4;
- // Limits max number of displayed fields
- if (widget.fields != null && widget.fields.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!serverData) {
return (
diff --git a/src/widgets/gamedig/component.test.jsx b/src/widgets/gamedig/component.test.jsx
index 895b4d3bc..456b0ec25 100644
--- a/src/widgets/gamedig/component.test.jsx
+++ b/src/widgets/gamedig/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/gamedig/component", () => {
const service = { widget: { type: "gamedig", url: "http://x" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["map", "currentPlayers", "ping"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("gamedig.map")).toBeInTheDocument();
expect(screen.getByText("gamedig.currentPlayers")).toBeInTheDocument();
@@ -54,7 +54,7 @@ describe("widgets/gamedig/component", () => {
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["status", "name", "map", "currentPlayers"]);
+ expect(service.widget.fields).toEqual(["status", "name", "map", "currentPlayers", "ping"]);
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expectBlockValue(container, "gamedig.status", "gamedig.online");
diff --git a/src/widgets/glances/components/custom_tooltip.jsx b/src/widgets/glances/components/custom_tooltip.jsx
index c7f2c7baa..84f297109 100644
--- a/src/widgets/glances/components/custom_tooltip.jsx
+++ b/src/widgets/glances/components/custom_tooltip.jsx
@@ -3,7 +3,7 @@ export default function Tooltip({ active, payload, formatter }) {
return (
{payload.map((pld, id) => (
-
+
{formatter(pld.value)} {payload[id].name}
diff --git a/src/widgets/glances/metrics/containers.jsx b/src/widgets/glances/metrics/containers.jsx
index f9cc1e0e1..b82210ee8 100644
--- a/src/widgets/glances/metrics/containers.jsx
+++ b/src/widgets/glances/metrics/containers.jsx
@@ -41,7 +41,7 @@ export default function Component({ service }) {
);
}
- data.splice(chart ? 5 : 1);
+ const visibleData = data.slice(0, chart ? 5 : 1);
let headerYPosition = "top-4";
let listYPosition = "bottom-4";
if (chart) {
@@ -61,7 +61,7 @@ export default function Component({ service }) {
- {data.map((item) => (
+ {visibleData.map((item) => (
{statusMap[item[statusKey]]}
diff --git a/src/widgets/glances/metrics/containers.test.jsx b/src/widgets/glances/metrics/containers.test.jsx
index 58889f1db..0124744cc 100644
--- a/src/widgets/glances/metrics/containers.test.jsx
+++ b/src/widgets/glances/metrics/containers.test.jsx
@@ -103,5 +103,6 @@ describe("widgets/glances/metrics/containers", () => {
expect(screen.getByText("item-0")).toBeInTheDocument();
expect(screen.getByText("item-4")).toBeInTheDocument();
expect(screen.queryByText("item-5")).not.toBeInTheDocument();
+ expect(data).toHaveLength(6);
});
});
diff --git a/src/widgets/glances/metrics/cpu.jsx b/src/widgets/glances/metrics/cpu.jsx
index 0e3b334df..81d450c2b 100644
--- a/src/widgets/glances/metrics/cpu.jsx
+++ b/src/widgets/glances/metrics/cpu.jsx
@@ -1,10 +1,12 @@
import { useTranslation } from "next-i18next/pages";
import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
import Block from "../components/block";
import Container from "../components/container";
+import useDataPoints from "./use-data-points";
+
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -19,26 +21,26 @@ export default function Component({ service }) {
const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
const apiVersion = parseVersionForUrl(version, 3);
- const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+ const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { value: 0 });
- const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/cpu`, {
- refreshInterval: Math.max(defaultInterval, refreshInterval),
- });
+ const handleData = useCallback(
+ (newData) => {
+ if (newData) addDataPoint({ value: newData.total });
+ },
+ [addDataPoint],
+ );
+
+ const { data, error } = useWidgetAPI(
+ service.widget,
+ `${apiVersion}/cpu`,
+ {
+ refreshInterval: Math.max(defaultInterval, refreshInterval),
+ },
+ { onSuccess: handleData },
+ );
const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, `${apiVersion}/quicklook`);
- useEffect(() => {
- if (data) {
- setDataPoints((prevDataPoints) => {
- const newDataPoints = [...prevDataPoints, { value: data.total }];
- if (newDataPoints.length > pointsLimit) {
- newDataPoints.shift();
- }
- return newDataPoints;
- });
- }
- }, [data, pointsLimit]);
-
if (error) {
return
;
}
diff --git a/src/widgets/glances/metrics/disk.jsx b/src/widgets/glances/metrics/disk.jsx
index 89ce1cc22..770597338 100644
--- a/src/widgets/glances/metrics/disk.jsx
+++ b/src/widgets/glances/metrics/disk.jsx
@@ -1,10 +1,12 @@
import { useTranslation } from "next-i18next/pages";
import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
import Block from "../components/block";
import Container from "../components/container";
+import useDataPoints from "./use-data-points";
+
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -20,39 +22,37 @@ export default function Component({ service }) {
const apiVersion = parseVersionForUrl(version, 3);
const [, diskName] = widget.metric.split(":");
- const [dataPoints, setDataPoints] = useState(
- new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit),
- );
- const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
-
- const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/diskio`, {
- refreshInterval: Math.max(defaultInterval, refreshInterval),
+ const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, {
+ read_bytes: 0,
+ write_bytes: 0,
+ time_since_update: 0,
});
+ const handleData = useCallback(
+ (newData) => {
+ if (!newData?.error) {
+ const diskData = newData.find((item) => item.disk_name === diskName);
+ if (diskData) addDataPoint(diskData);
+ }
+ },
+ [addDataPoint, diskName],
+ );
+
+ const { data, error } = useWidgetAPI(
+ service.widget,
+ `${apiVersion}/diskio`,
+ {
+ refreshInterval: Math.max(defaultInterval, refreshInterval),
+ },
+ { onSuccess: handleData },
+ );
+
const calculateRates = (d) =>
d.map((item) => ({
a: item.read_bytes / item.time_since_update,
b: item.write_bytes / item.time_since_update,
}));
- useEffect(() => {
- if (data && !data.error) {
- const diskData = data.find((item) => item.disk_name === diskName);
-
- setDataPoints((prevDataPoints) => {
- const newDataPoints = [...prevDataPoints, diskData];
- if (newDataPoints.length > pointsLimit) {
- newDataPoints.shift();
- }
- return newDataPoints;
- });
- }
- }, [data, diskName, pointsLimit]);
-
- useEffect(() => {
- setRatePoints(calculateRates(dataPoints));
- }, [dataPoints]);
-
if (error || (data && data.error)) {
const finalError = error || data.error;
return
;
@@ -83,7 +83,7 @@ export default function Component({ service }) {
{chart && (
diff --git a/src/widgets/glances/metrics/gpu.jsx b/src/widgets/glances/metrics/gpu.jsx
index 4c99e698d..aa3b6629b 100644
--- a/src/widgets/glances/metrics/gpu.jsx
+++ b/src/widgets/glances/metrics/gpu.jsx
@@ -1,10 +1,12 @@
import { useTranslation } from "next-i18next/pages";
import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
import Block from "../components/block";
import Container from "../components/container";
+import useDataPoints from "./use-data-points";
+
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -20,27 +22,26 @@ export default function Component({ service }) {
const apiVersion = parseVersionForUrl(version, 3);
const [, gpuName] = widget.metric.split(":");
- const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
+ const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { a: 0, b: 0 });
- const { data, error } = useWidgetAPI(widget, `${apiVersion}/gpu`, {
- refreshInterval: Math.max(defaultInterval, refreshInterval),
- });
-
- useEffect(() => {
- if (data && !data.error) {
- const gpuData = data.find((item) => item[item.key] == gpuName);
-
- if (gpuData) {
- setDataPoints((prevDataPoints) => {
- const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
- if (newDataPoints.length > pointsLimit) {
- newDataPoints.shift();
- }
- return newDataPoints;
- });
+ const handleData = useCallback(
+ (newData) => {
+ if (!newData?.error) {
+ const gpuData = newData.find((item) => item[item.key] == gpuName);
+ if (gpuData) addDataPoint({ a: gpuData.mem, b: gpuData.proc });
}
- }
- }, [data, gpuName, pointsLimit]);
+ },
+ [addDataPoint, gpuName],
+ );
+
+ const { data, error } = useWidgetAPI(
+ widget,
+ `${apiVersion}/gpu`,
+ {
+ refreshInterval: Math.max(defaultInterval, refreshInterval),
+ },
+ { onSuccess: handleData },
+ );
if (error || (data && data.error)) {
const finalError = error || data.error;
diff --git a/src/widgets/glances/metrics/memory.jsx b/src/widgets/glances/metrics/memory.jsx
index c8d0e6207..1fe9b1ae0 100644
--- a/src/widgets/glances/metrics/memory.jsx
+++ b/src/widgets/glances/metrics/memory.jsx
@@ -1,10 +1,12 @@
import { useTranslation } from "next-i18next/pages";
import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
import Block from "../components/block";
import Container from "../components/container";
+import useDataPoints from "./use-data-points";
+
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -20,23 +22,23 @@ export default function Component({ service }) {
const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit, version = 3 } = widget;
const apiVersion = parseVersionForUrl(version, 3);
- const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+ const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { a: 0, b: 0 });
- const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/mem`, {
- refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
- });
+ const handleData = useCallback(
+ (newData) => {
+ if (newData) addDataPoint({ a: newData.used, b: newData.available });
+ },
+ [addDataPoint],
+ );
- useEffect(() => {
- if (data) {
- setDataPoints((prevDataPoints) => {
- const newDataPoints = [...prevDataPoints, { a: data.used, b: data.available }];
- if (newDataPoints.length > pointsLimit) {
- newDataPoints.shift();
- }
- return newDataPoints;
- });
- }
- }, [data, pointsLimit]);
+ const { data, error } = useWidgetAPI(
+ service.widget,
+ `${apiVersion}/mem`,
+ {
+ refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
+ },
+ { onSuccess: handleData },
+ );
if (error) {
return ;
diff --git a/src/widgets/glances/metrics/net.jsx b/src/widgets/glances/metrics/net.jsx
index 914075008..70d3f26c6 100644
--- a/src/widgets/glances/metrics/net.jsx
+++ b/src/widgets/glances/metrics/net.jsx
@@ -1,10 +1,12 @@
import { useTranslation } from "next-i18next/pages";
import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
import Block from "../components/block";
import Container from "../components/container";
+import useDataPoints from "./use-data-points";
+
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -25,33 +27,32 @@ export default function Component({ service }) {
const [, interfaceName] = metric.split(":");
- const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+ const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { a: 0, b: 0 });
- const { data, error } = useWidgetAPI(widget, `${apiVersion}/network`, {
- refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
- });
+ const handleData = useCallback(
+ (newData) => {
+ if (!newData?.error) {
+ const interfaceData = newData.find((item) => item[item.key] === interfaceName);
- useEffect(() => {
- if (data && !data.error) {
- const interfaceData = data.find((item) => item[item.key] === interfaceName);
-
- if (interfaceData) {
- setDataPoints((prevDataPoints) => {
- const newDataPoints = [
- ...prevDataPoints,
- {
- a: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
- b: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
- },
- ];
- if (newDataPoints.length > pointsLimit) {
- newDataPoints.shift();
- }
- return newDataPoints;
- });
+ if (interfaceData) {
+ addDataPoint({
+ a: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
+ b: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
+ });
+ }
}
- }
- }, [data, interfaceName, pointsLimit, rxKey, txKey]);
+ },
+ [addDataPoint, interfaceName, rxKey, txKey],
+ );
+
+ const { data, error } = useWidgetAPI(
+ widget,
+ `${apiVersion}/network`,
+ {
+ refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
+ },
+ { onSuccess: handleData },
+ );
if (error || (data && data.error)) {
const finalError = error || data.error;
diff --git a/src/widgets/glances/metrics/process.jsx b/src/widgets/glances/metrics/process.jsx
index 62f0f985d..bcbbaf32c 100644
--- a/src/widgets/glances/metrics/process.jsx
+++ b/src/widgets/glances/metrics/process.jsx
@@ -43,7 +43,7 @@ export default function Component({ service }) {
);
}
- data.splice(chart ? 5 : 1);
+ const visibleData = data.slice(0, chart ? 5 : 1);
let headerYPosition = "top-4";
let listYPosition = "bottom-4";
if (chart) {
@@ -63,7 +63,7 @@ export default function Component({ service }) {
- {data.map((item) => (
+ {visibleData.map((item) => (
{statusMap[item.status]}
diff --git a/src/widgets/glances/metrics/process.test.jsx b/src/widgets/glances/metrics/process.test.jsx
index 9a3ded419..f9f8eab93 100644
--- a/src/widgets/glances/metrics/process.test.jsx
+++ b/src/widgets/glances/metrics/process.test.jsx
@@ -19,4 +19,20 @@ describe("widgets/glances/metrics/process", () => {
});
expect(screen.getByText("-")).toBeInTheDocument();
});
+
+ it("limits displayed processes without modifying the response", () => {
+ const data = [
+ { pid: 1, status: "R", name: "first", cpu_percent: 1, memory_info: [100] },
+ { pid: 2, status: "S", name: "second", cpu_percent: 2, memory_info: [200] },
+ ];
+ useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+ renderWithProviders(
, {
+ settings: { hideErrors: false },
+ });
+
+ expect(screen.getByText("first")).toBeInTheDocument();
+ expect(screen.queryByText("second")).not.toBeInTheDocument();
+ expect(data).toHaveLength(2);
+ });
});
diff --git a/src/widgets/glances/metrics/sensor.jsx b/src/widgets/glances/metrics/sensor.jsx
index ef744a816..89f96a999 100644
--- a/src/widgets/glances/metrics/sensor.jsx
+++ b/src/widgets/glances/metrics/sensor.jsx
@@ -1,10 +1,12 @@
import { useTranslation } from "next-i18next/pages";
import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useCallback } from "react";
import Block from "../components/block";
import Container from "../components/container";
+import useDataPoints from "./use-data-points";
+
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -20,32 +22,29 @@ export default function Component({ service }) {
const apiVersion = parseVersionForUrl(version, 3);
const [, sensorName] = widget.metric.split(":");
- const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+ const [dataPoints, addDataPoint] = useDataPoints(pointsLimit, { value: 0 });
- const { data, error } = useWidgetAPI(service.widget, `${apiVersion}/sensors`, {
- refreshInterval: Math.max(defaultInterval, refreshInterval),
- });
-
- useEffect(() => {
- if (data && !data.error) {
- const sensorData = data.find((item) => item.label === sensorName);
- if (sensorData) {
- setDataPoints((prevDataPoints) => {
- const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
- if (newDataPoints.length > pointsLimit) {
- newDataPoints.shift();
- }
- return newDataPoints;
- });
- } else {
- data.error = true;
+ const handleData = useCallback(
+ (newData) => {
+ if (!newData?.error) {
+ const sensorData = newData.find((item) => item.label === sensorName);
+ if (sensorData) addDataPoint({ value: sensorData.value });
}
- }
- }, [data, sensorName, pointsLimit]);
+ },
+ [addDataPoint, sensorName],
+ );
- if (error || (data && data.error)) {
- const finalError = error || data.error;
- return
;
+ const { data, error } = useWidgetAPI(
+ service.widget,
+ `${apiVersion}/sensors`,
+ {
+ refreshInterval: Math.max(defaultInterval, refreshInterval),
+ },
+ { onSuccess: handleData },
+ );
+
+ if (error || data?.error) {
+ return
;
}
if (!data) {
diff --git a/src/widgets/glances/metrics/sensor.test.jsx b/src/widgets/glances/metrics/sensor.test.jsx
index 4dee7a9cb..6f7f0b658 100644
--- a/src/widgets/glances/metrics/sensor.test.jsx
+++ b/src/widgets/glances/metrics/sensor.test.jsx
@@ -22,4 +22,17 @@ describe("widgets/glances/metrics/sensor", () => {
);
expect(screen.getByText("-")).toBeInTheDocument();
});
+
+ it("renders a placeholder for a missing sensor without modifying the response", () => {
+ const data = [{ label: "Other", value: 42 }];
+ useWidgetAPI.mockReturnValue({ data, error: undefined });
+
+ renderWithProviders(
+
,
+ { settings: { hideErrors: false } },
+ );
+
+ expect(screen.getByText("-")).toBeInTheDocument();
+ expect(data).toEqual([{ label: "Other", value: 42 }]);
+ });
});
diff --git a/src/widgets/glances/metrics/use-data-points.js b/src/widgets/glances/metrics/use-data-points.js
new file mode 100644
index 000000000..8763317ea
--- /dev/null
+++ b/src/widgets/glances/metrics/use-data-points.js
@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+export default function useDataPoints(pointsLimit, initialPoint) {
+ const [dataPoints, setDataPoints] = useState(() => new Array(pointsLimit).fill(initialPoint));
+
+ const addDataPoint = useCallback(
+ (dataPoint) => {
+ setDataPoints((currentDataPoints) => {
+ if (pointsLimit <= 0) return [];
+ return [...currentDataPoints, dataPoint].slice(-pointsLimit);
+ });
+ },
+ [pointsLimit],
+ );
+
+ return [dataPoints, addDataPoint];
+}
diff --git a/src/widgets/glances/metrics/use-data-points.test.jsx b/src/widgets/glances/metrics/use-data-points.test.jsx
new file mode 100644
index 000000000..b6bf8b314
--- /dev/null
+++ b/src/widgets/glances/metrics/use-data-points.test.jsx
@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import useDataPoints from "./use-data-points";
+
+describe("widgets/glances/metrics/use-data-points", () => {
+ it("appends data points while keeping the requested history length", () => {
+ const { result, rerender } = renderHook(({ pointsLimit }) => useDataPoints(pointsLimit, { value: 0 }), {
+ initialProps: { pointsLimit: 3 },
+ });
+
+ expect(result.current[0]).toEqual([{ value: 0 }, { value: 0 }, { value: 0 }]);
+
+ act(() => result.current[1]({ value: 1 }));
+ expect(result.current[0]).toEqual([{ value: 0 }, { value: 0 }, { value: 1 }]);
+
+ rerender({ pointsLimit: 2 });
+ act(() => result.current[1]({ value: 2 }));
+ expect(result.current[0]).toEqual([{ value: 1 }, { value: 2 }]);
+ });
+});
diff --git a/src/widgets/gluetun/component.jsx b/src/widgets/gluetun/component.jsx
index 2a8401c68..989de5276 100644
--- a/src/widgets/gluetun/component.jsx
+++ b/src/widgets/gluetun/component.jsx
@@ -2,14 +2,14 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["public_ip", "region", "country"];
+
+export default function Component({ service: configuredService }) {
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields) {
- widget.fields = ["public_ip", "region", "country"];
- }
-
const { data: gluetunData, error: gluetunError } = useWidgetAPI(widget, "ip");
const includePF = widget.fields.includes("port_forwarded");
const pfEndpoint = widget.version > 1 ? "port_forwarded_v2" : "port_forwarded";
diff --git a/src/widgets/gluetun/component.test.jsx b/src/widgets/gluetun/component.test.jsx
index aeb617493..6ee682733 100644
--- a/src/widgets/gluetun/component.test.jsx
+++ b/src/widgets/gluetun/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/gluetun/component", () => {
const service = { widget: { type: "gluetun", url: "http://x" } };
const { container } = renderWithProviders(
, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["public_ip", "region", "country"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("gluetun.public_ip")).toBeInTheDocument();
expect(screen.getByText("gluetun.region")).toBeInTheDocument();
diff --git a/src/widgets/hdhomerun/component.jsx b/src/widgets/hdhomerun/component.jsx
index 2532f92bc..93f3511a4 100644
--- a/src/widgets/hdhomerun/component.jsx
+++ b/src/widgets/hdhomerun/component.jsx
@@ -2,8 +2,12 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["channels", "hd"];
+
+export default function Component({ service: configuredService }) {
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { tuner = 0 } = widget;
@@ -24,15 +28,6 @@ export default function Component({ service }) {
);
}
- // Provide a default if not set in the config
- if (!widget.fields) {
- widget.fields = ["channels", "hd"];
- }
- // Limit to a maximum of 4 at a time
- if (widget.fields.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
return (
diff --git a/src/widgets/hdhomerun/component.test.jsx b/src/widgets/hdhomerun/component.test.jsx
index b0afac7b4..0bae6812b 100644
--- a/src/widgets/hdhomerun/component.test.jsx
+++ b/src/widgets/hdhomerun/component.test.jsx
@@ -58,7 +58,7 @@ describe("widgets/hdhomerun/component", () => {
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["channels", "hd", "tunerCount", "channelNumber"]);
+ expect(service.widget.fields).toEqual(["channels", "hd", "tunerCount", "channelNumber", "signalStrength"]);
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("hdhomerun.channels")).toBeInTheDocument();
expect(screen.getByText("hdhomerun.hd")).toBeInTheDocument();
diff --git a/src/widgets/homebox/component.jsx b/src/widgets/homebox/component.jsx
index 451d5a9a6..ee244885a 100644
--- a/src/widgets/homebox/component.jsx
+++ b/src/widgets/homebox/component.jsx
@@ -3,11 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
export const homeboxDefaultFields = ["items", "locations", "totalValue"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, homeboxDefaultFields);
const { widget } = service;
const { data: homeboxData, error: homeboxError } = useWidgetAPI(widget);
@@ -15,16 +17,6 @@ export default function Component({ service }) {
return ;
}
- // Default fields
- if (!widget.fields?.length > 0) {
- widget.fields = homeboxDefaultFields;
- }
- const MAX_ALLOWED_FIELDS = 4;
- // Limits max number of displayed fields
- if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!homeboxData) {
return (
diff --git a/src/widgets/homebox/component.test.jsx b/src/widgets/homebox/component.test.jsx
index 0342e8392..2113a28c3 100644
--- a/src/widgets/homebox/component.test.jsx
+++ b/src/widgets/homebox/component.test.jsx
@@ -9,7 +9,7 @@ import { expectBlockValue } from "test-utils/widget-assertions";
const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
-import Component, { homeboxDefaultFields } from "./component";
+import Component from "./component";
describe("widgets/homebox/component", () => {
beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/homebox/component", () => {
const service = { widget: { type: "homebox", url: "http://x" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(homeboxDefaultFields);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("homebox.items")).toBeInTheDocument();
expect(screen.getByText("homebox.locations")).toBeInTheDocument();
diff --git a/src/widgets/jellyfin/component.jsx b/src/widgets/jellyfin/component.jsx
index 8c32bb69c..d0bf24bc5 100644
--- a/src/widgets/jellyfin/component.jsx
+++ b/src/widgets/jellyfin/component.jsx
@@ -6,6 +6,9 @@ import { MdOutlineSmartDisplay } from "react-icons/md";
import { getURLSearchParams } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
+
+const DEFAULT_FIELDS = ["movies", "series", "episodes", "songs"];
function ticksToTime(ticks) {
const milliseconds = ticks / 10000;
@@ -178,12 +181,6 @@ function CountBlocks({ service, countData }) {
const { t } = useTranslation();
const { widget } = service;
- if (!widget.fields || widget.fields.length === 0) {
- widget.fields = ["movies", "series", "episodes", "songs"];
- } else if (widget.fields?.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
if (!countData) {
return (
@@ -207,9 +204,10 @@ function CountBlocks({ service, countData }) {
);
}
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const version = widget?.version ?? 1;
const useJellyfinV2 = version === 2;
diff --git a/src/widgets/jellyfin/component.test.jsx b/src/widgets/jellyfin/component.test.jsx
index fabcd1609..d0701e0a2 100644
--- a/src/widgets/jellyfin/component.test.jsx
+++ b/src/widgets/jellyfin/component.test.jsx
@@ -109,7 +109,7 @@ describe("widgets/jellyfin/component", () => {
renderWithProviders();
- expect(service.widget.fields).toEqual(["movies", "series", "episodes", "albums"]);
+ expect(service.widget.fields).toEqual(["movies", "series", "episodes", "albums", "songs"]);
expect(screen.getByText("jellyfin.albums")).toBeInTheDocument();
expect(screen.getByText("5")).toBeInTheDocument();
expect(screen.queryByText("jellyfin.songs")).not.toBeInTheDocument();
diff --git a/src/widgets/jellystat/component.jsx b/src/widgets/jellystat/component.jsx
index d62e643cd..85dd5089b 100644
--- a/src/widgets/jellystat/component.jsx
+++ b/src/widgets/jellystat/component.jsx
@@ -3,13 +3,13 @@ import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
-export default function Component({ service }) {
- const { widget } = service;
+export default function Component({ service: configuredService }) {
+ const configuredDays = configuredService.widget.days;
+ const days = Number.isInteger(configuredDays) && configuredDays > 0 ? configuredDays : 30;
+ const widget = { ...configuredService.widget, days };
+ const service = { ...configuredService, widget };
- // Days validation
- if (!(Number.isInteger(widget.days) && 0 < widget.days)) widget.days = 30;
-
- const { data: viewsData, error: viewsError } = useWidgetAPI(widget, "getViewsByLibraryType", { days: widget.days });
+ const { data: viewsData, error: viewsError } = useWidgetAPI(widget, "getViewsByLibraryType", { days });
const error = viewsError || viewsData?.message;
if (error) {
diff --git a/src/widgets/jellystat/component.test.jsx b/src/widgets/jellystat/component.test.jsx
index ecb822496..fad7de251 100644
--- a/src/widgets/jellystat/component.test.jsx
+++ b/src/widgets/jellystat/component.test.jsx
@@ -26,8 +26,8 @@ describe("widgets/jellystat/component", () => {
const service = { widget: { type: "jellystat", days: -1 } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.days).toBe(30);
- expect(useWidgetAPI).toHaveBeenCalledWith(service.widget, "getViewsByLibraryType", { days: 30 });
+ expect(service.widget.days).toBe(-1);
+ expect(useWidgetAPI).toHaveBeenCalledWith({ type: "jellystat", days: 30 }, "getViewsByLibraryType", { days: 30 });
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("jellystat.songs")).toBeInTheDocument();
diff --git a/src/widgets/karakeep/component.jsx b/src/widgets/karakeep/component.jsx
index 69b47c714..00cc90d04 100644
--- a/src/widgets/karakeep/component.jsx
+++ b/src/widgets/karakeep/component.jsx
@@ -3,12 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
export const karakeepDefaultFields = ["bookmarks", "favorites", "archived", "highlights"];
-const MAX_ALLOWED_FIELDS = 4;
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, karakeepDefaultFields);
const { widget } = service;
const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats");
@@ -17,12 +18,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields || widget.fields.length === 0) {
- widget.fields = karakeepDefaultFields;
- } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!statsData) {
return (
diff --git a/src/widgets/karakeep/component.test.jsx b/src/widgets/karakeep/component.test.jsx
index 6b95e71e8..02a8977ae 100644
--- a/src/widgets/karakeep/component.test.jsx
+++ b/src/widgets/karakeep/component.test.jsx
@@ -9,7 +9,7 @@ import { expectBlockValue } from "test-utils/widget-assertions";
const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
-import Component, { karakeepDefaultFields } from "./component";
+import Component from "./component";
describe("widgets/karakeep/component", () => {
beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/karakeep/component", () => {
const service = { widget: { type: "karakeep", url: "http://x" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(karakeepDefaultFields);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("karakeep.bookmarks")).toBeInTheDocument();
expect(screen.getByText("karakeep.favorites")).toBeInTheDocument();
@@ -38,7 +38,7 @@ describe("widgets/karakeep/component", () => {
const service = { widget: { type: "karakeep", fields: ["tags", "lists", "bookmarks", "favorites", "archived"] } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["tags", "lists", "bookmarks", "favorites"]);
+ expect(service.widget.fields).toEqual(["tags", "lists", "bookmarks", "favorites", "archived"]);
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("karakeep.tags")).toBeInTheDocument();
expect(screen.getByText("karakeep.lists")).toBeInTheDocument();
diff --git a/src/widgets/komodo/component.jsx b/src/widgets/komodo/component.jsx
index b1d9e0c64..a1e4a6f07 100644
--- a/src/widgets/komodo/component.jsx
+++ b/src/widgets/komodo/component.jsx
@@ -3,11 +3,21 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-const MAX_ALLOWED_FIELDS = 4;
+const SUMMARY_FIELDS = ["servers", "stacks", "containers"];
+const STACK_FIELDS = ["total", "running", "down", "unhealthy"];
+const CONTAINER_FIELDS = ["total", "running", "stopped", "unhealthy"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const configuredWidget = configuredService.widget;
+ const defaultFields = configuredWidget.showSummary
+ ? SUMMARY_FIELDS
+ : configuredWidget.showStacks
+ ? STACK_FIELDS
+ : CONTAINER_FIELDS;
+ const service = withWidgetFields(configuredService, defaultFields);
const { widget } = service;
const containersEndpoint = !(!widget.showSummary && widget.showStacks) ? "containers" : "";
const { data: containersData, error: containersError } = useWidgetAPI(widget, containersEndpoint);
@@ -20,16 +30,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields || widget.fields.length === 0) {
- widget.fields = widget.showSummary
- ? ["servers", "stacks", "containers"]
- : widget.showStacks
- ? ["total", "running", "down", "unhealthy"]
- : ["total", "running", "stopped", "unhealthy"];
- } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (
(!widget.showStacks && !containersData) ||
(widget.showSummary && (!containersData || !stacksData || !serversData)) ||
diff --git a/src/widgets/komodo/component.test.jsx b/src/widgets/komodo/component.test.jsx
index 55856eabc..4900d5e40 100644
--- a/src/widgets/komodo/component.test.jsx
+++ b/src/widgets/komodo/component.test.jsx
@@ -25,7 +25,7 @@ describe("widgets/komodo/component", () => {
const service = { widget: { type: "komodo", showStacks: true, showSummary: false } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["total", "running", "down", "unhealthy"]);
+ expect(service.widget.fields).toBeUndefined();
expect(useWidgetAPI.mock.calls[0][1]).toBe(""); // containersEndpoint
expect(useWidgetAPI.mock.calls[1][1]).toBe("stacks");
expect(useWidgetAPI.mock.calls[2][1]).toBe(""); // serversEndpoint
@@ -39,6 +39,20 @@ describe("widgets/komodo/component", () => {
expect(screen.queryByText("komodo.unknown")).toBeNull();
});
+ it("defaults fields for the containers view without modifying the service", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const service = { widget: { type: "komodo", showStacks: false, showSummary: false } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ expect(service.widget.fields).toBeUndefined();
+ expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+ expect(screen.getByText("komodo.total")).toBeInTheDocument();
+ expect(screen.getByText("komodo.running")).toBeInTheDocument();
+ expect(screen.getByText("komodo.stopped")).toBeInTheDocument();
+ expect(screen.getByText("komodo.unhealthy")).toBeInTheDocument();
+ });
+
it("renders computed down=stopped+down for stacks view", () => {
useWidgetAPI
.mockReturnValueOnce({ data: undefined, error: undefined }) // containers (disabled)
diff --git a/src/widgets/maintainerr/component.jsx b/src/widgets/maintainerr/component.jsx
index 83600afe5..77ee89ec0 100644
--- a/src/widgets/maintainerr/component.jsx
+++ b/src/widgets/maintainerr/component.jsx
@@ -3,20 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
const DEFAULT_FIELDS = ["itemsHandled", "episodesHandled", "moviesHandled", "reclaimable"];
-const MAX_FIELDS = 4;
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields?.length) {
- widget.fields = DEFAULT_FIELDS;
- } else if (widget.fields.length > MAX_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_FIELDS);
- }
-
const { data, error } = useWidgetAPI(widget);
if (error) {
diff --git a/src/widgets/ntfy/component.jsx b/src/widgets/ntfy/component.jsx
index 2dcdd2754..4de262222 100644
--- a/src/widgets/ntfy/component.jsx
+++ b/src/widgets/ntfy/component.jsx
@@ -3,6 +3,9 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
+
+const DEFAULT_FIELDS = ["title", "message", "priority", "lastReceived"];
const priorityLabels = {
1: "min",
@@ -20,8 +23,9 @@ function Truncated({ text }) {
);
}
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: messagesData, error: messagesError } = useWidgetAPI(widget, "messages");
@@ -30,12 +34,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields || widget.fields.length === 0) {
- widget.fields = ["title", "message", "priority", "lastReceived"];
- } else if (widget.fields?.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
if (!messagesData) {
return (
diff --git a/src/widgets/omada/component.jsx b/src/widgets/omada/component.jsx
index 44ea2a654..c03e93c63 100644
--- a/src/widgets/omada/component.jsx
+++ b/src/widgets/omada/component.jsx
@@ -3,10 +3,14 @@ import { useTranslation } from "next-i18next/pages";
import Block from "../../components/services/widget/block";
import Container from "../../components/services/widget/container";
import useWidgetAPI from "../../utils/proxy/use-widget-api";
+import withWidgetFields from "../../utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["connectedAp", "activeUser", "alerts", "connectedGateways"];
+
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: omadaData, error: omadaAPIError } = useWidgetAPI(widget, "info", {
@@ -17,12 +21,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields) {
- widget.fields = ["connectedAp", "activeUser", "alerts", "connectedGateways"];
- } else if (widget.fields?.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
if (!omadaData) {
return (
diff --git a/src/widgets/pangolin/component.jsx b/src/widgets/pangolin/component.jsx
index 3724cf9f5..e7ad38c7e 100644
--- a/src/widgets/pangolin/component.jsx
+++ b/src/widgets/pangolin/component.jsx
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-const MAX_ALLOWED_FIELDS = 4;
+const DEFAULT_FIELDS = ["sites", "resources", "targets", "traffic"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields) {
- widget.fields = ["sites", "resources", "targets", "traffic"];
- } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
const { data: sitesData, error: sitesError } = useWidgetAPI(widget, "sites");
const { data: resourcesData, error: resourcesError } = useWidgetAPI(widget, "resources");
diff --git a/src/widgets/pangolin/component.test.jsx b/src/widgets/pangolin/component.test.jsx
index 4796b2ee1..873b6b96e 100644
--- a/src/widgets/pangolin/component.test.jsx
+++ b/src/widgets/pangolin/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/pangolin/component", () => {
const service = { widget: { type: "pangolin" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["sites", "resources", "targets", "traffic"]);
+ expect(service.widget.fields).toBeUndefined();
// Container filters by widget.fields, so only the default 4 blocks are visible.
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("pangolin.sites")).toBeInTheDocument();
@@ -39,7 +39,7 @@ describe("widgets/pangolin/component", () => {
const service = { widget: { type: "pangolin", fields: ["sites", "resources", "targets", "traffic", "extra"] } };
renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["sites", "resources", "targets", "traffic"]);
+ expect(service.widget.fields).toEqual(["sites", "resources", "targets", "traffic", "extra"]);
});
it("renders computed site/resource/target totals and traffic bytes", () => {
diff --git a/src/widgets/peanut/component.jsx b/src/widgets/peanut/component.jsx
index e7767249d..c72b4e66c 100644
--- a/src/widgets/peanut/component.jsx
+++ b/src/widgets/peanut/component.jsx
@@ -25,18 +25,12 @@ export default function Component({ service }) {
}
// backwards compatibility with peanut v1
- if ("battery.charge" in upsData) {
- upsData.battery_charge = upsData["battery.charge"];
- }
- if ("ups.load" in upsData) {
- upsData.ups_load = upsData["ups.load"];
- }
- if ("ups.status" in upsData) {
- upsData.ups_status = upsData["ups.status"];
- }
+ const batteryCharge = "battery.charge" in upsData ? upsData["battery.charge"] : upsData.battery_charge;
+ const upsLoad = "ups.load" in upsData ? upsData["ups.load"] : upsData.ups_load;
+ const upsStatus = "ups.status" in upsData ? upsData["ups.status"] : upsData.ups_status;
let status;
- switch (upsData.ups_status) {
+ switch (upsStatus) {
case "OL":
status = t("peanut.online");
break;
@@ -47,21 +41,17 @@ export default function Component({ service }) {
status = t("peanut.low_battery");
break;
default:
- status = upsData.ups_status;
+ status = upsStatus;
}
return (
-
+
);
diff --git a/src/widgets/peanut/component.test.jsx b/src/widgets/peanut/component.test.jsx
index b7a0b1423..466cddf9d 100644
--- a/src/widgets/peanut/component.test.jsx
+++ b/src/widgets/peanut/component.test.jsx
@@ -34,12 +34,13 @@ describe("widgets/peanut/component", () => {
});
it("renders legacy field mapping and status translation", () => {
+ const data = {
+ "battery.charge": 55,
+ "ups.load": 12,
+ "ups.status": "OL",
+ };
useWidgetAPI.mockReturnValue({
- data: {
- "battery.charge": 55,
- "ups.load": 12,
- "ups.status": "OL",
- },
+ data,
error: undefined,
});
@@ -48,5 +49,6 @@ describe("widgets/peanut/component", () => {
expect(screen.getByText("55")).toBeInTheDocument();
expect(screen.getByText("12")).toBeInTheDocument();
expect(screen.getByText("peanut.online")).toBeInTheDocument();
+ expect(data).toEqual({ "battery.charge": 55, "ups.load": 12, "ups.status": "OL" });
});
});
diff --git a/src/widgets/pihole/component.jsx b/src/widgets/pihole/component.jsx
index 04b3a64a6..0f941a01a 100644
--- a/src/widgets/pihole/component.jsx
+++ b/src/widgets/pihole/component.jsx
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["queries", "blocked", "gravity"];
+
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: piholeData, error: piholeError } = useWidgetAPI(widget);
@@ -15,10 +19,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields) {
- widget.fields = ["queries", "blocked", "gravity"];
- }
-
if (!piholeData) {
return (
diff --git a/src/widgets/portainer/component.jsx b/src/widgets/portainer/component.jsx
index c0c212cfd..2fdf33bc6 100644
--- a/src/widgets/portainer/component.jsx
+++ b/src/widgets/portainer/component.jsx
@@ -2,14 +2,16 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DOCKER_FIELDS = ["running", "stopped", "total"];
+const KUBERNETES_FIELDS = ["applications", "services", "namespaces"];
+
+export default function Component({ service: configuredService }) {
+ const defaultFields = configuredService.widget.kubernetes ? KUBERNETES_FIELDS : DOCKER_FIELDS;
+ const service = withWidgetFields(configuredService, defaultFields);
const { widget } = service;
- if (!widget.fields) {
- widget.fields = widget.kubernetes ? ["applications", "services", "namespaces"] : ["running", "stopped", "total"];
- }
-
const { data: containersCount, error: containersError } = useWidgetAPI(
widget,
widget.kubernetes ? "" : "docker/containers",
diff --git a/src/widgets/portainer/component.test.jsx b/src/widgets/portainer/component.test.jsx
index b87845cde..e513250c3 100644
--- a/src/widgets/portainer/component.test.jsx
+++ b/src/widgets/portainer/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/portainer/component", () => {
const service = { widget: { type: "portainer", kubernetes: false } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["running", "stopped", "total"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("portainer.running")).toBeInTheDocument();
expect(screen.getByText("portainer.stopped")).toBeInTheDocument();
@@ -50,7 +50,7 @@ describe("widgets/portainer/component", () => {
const service = { widget: { type: "portainer", kubernetes: true } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["applications", "services", "namespaces"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("portainer.applications")).toBeInTheDocument();
expect(screen.getByText("portainer.services")).toBeInTheDocument();
diff --git a/src/widgets/prometheusmetric/component.jsx b/src/widgets/prometheusmetric/component.jsx
index 05978db41..1e86215b6 100644
--- a/src/widgets/prometheusmetric/component.jsx
+++ b/src/widgets/prometheusmetric/component.jsx
@@ -54,23 +54,19 @@ export default function Component({ service }) {
const { metrics = [], refreshInterval = 10000 } = widget;
- let prometheusmetricError;
+ const metricResults = metrics.slice(0, 4).map((metric) => {
+ // disable the rule that hooks should not be called from a callback,
+ // because we don't need a strong guarantee of hook execution order here.
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const { data, error } = useWidgetAPI(widget, "query", {
+ query: metric.query,
+ refreshInterval: Math.max(1000, metric.refreshInterval ?? refreshInterval),
+ });
+ return { key: metric.key ?? metric.label, data, error };
+ });
- const prometheusmetricData = new Map(
- metrics.slice(0, 4).map((metric) => {
- // disable the rule that hooks should not be called from a callback,
- // because we don't need a strong guarantee of hook execution order here.
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const { data: resultData, error: resultError } = useWidgetAPI(widget, "query", {
- query: metric.query,
- refreshInterval: Math.max(1000, metric.refreshInterval ?? refreshInterval),
- });
- if (resultError) {
- prometheusmetricError = resultError;
- }
- return [metric.key ?? metric.label, resultData];
- }),
- );
+ const prometheusmetricError = metricResults.find(({ error }) => error)?.error;
+ const prometheusmetricData = new Map(metricResults.map(({ key, data }) => [key, data]));
if (prometheusmetricError) {
return ;
diff --git a/src/widgets/proxmoxbackupserver/component.jsx b/src/widgets/proxmoxbackupserver/component.jsx
index 0b4d8f315..bb40f5869 100644
--- a/src/widgets/proxmoxbackupserver/component.jsx
+++ b/src/widgets/proxmoxbackupserver/component.jsx
@@ -2,20 +2,28 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import useCurrentTime from "utils/hooks/use-current-time";
import useWidgetAPI from "utils/proxy/use-widget-api";
+const HOUR = 60 * 60 * 1000;
+
export default function Component({ service }) {
const { t } = useTranslation();
+ // hourly is plenty of precision for a 24 hour window, and `since` is part of the request key
+ const currentTime = useCurrentTime(HOUR);
const { widget } = service;
const taskQueryParams = {
errors: true,
limit: 100,
- since: Math.floor(Date.now() / 1000) - 24 * 60 * 60,
+ // omitted until mounted, so the request key doesn't churn during hydration
+ ...(currentTime !== null && { since: Math.floor(currentTime / 1000) - 24 * 60 * 60 }),
};
const { data: datastoreData, error: datastoreError } = useWidgetAPI(widget, "status/datastore-usage");
- const { data: tasksData, error: tasksError } = useWidgetAPI(widget, "nodes/localhost/tasks", taskQueryParams);
+ const { data: tasksData, error: tasksError } = useWidgetAPI(widget, "nodes/localhost/tasks", taskQueryParams, {
+ keepPreviousData: true, // `since` rotates the key, don't blank the whole widget while it refetches
+ });
const { data: hostData, error: hostError } = useWidgetAPI(widget, "nodes/localhost/status");
if (datastoreError || tasksError || hostError) {
diff --git a/src/widgets/proxmoxbackupserver/component.test.jsx b/src/widgets/proxmoxbackupserver/component.test.jsx
index 3129ae996..19c691848 100644
--- a/src/widgets/proxmoxbackupserver/component.test.jsx
+++ b/src/widgets/proxmoxbackupserver/component.test.jsx
@@ -15,16 +15,20 @@ vi.mock("utils/proxy/use-widget-api", () => ({
import Component from "./component";
+const empty = { data: undefined, error: undefined };
+
+// keyed by endpoint rather than call order, since the component renders more than once
+function mockEndpoints(byEndpoint = {}) {
+ useWidgetAPI.mockImplementation((widget, endpoint) => byEndpoint[endpoint] ?? empty);
+}
+
describe("widgets/proxmoxbackupserver/component", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("renders placeholders while loading", () => {
- useWidgetAPI
- .mockReturnValueOnce({ data: undefined, error: undefined }) // datastore
- .mockReturnValueOnce({ data: undefined, error: undefined }) // tasks
- .mockReturnValueOnce({ data: undefined, error: undefined }); // host
+ mockEndpoints();
const { container } = renderWithProviders(, {
settings: { hideErrors: false },
@@ -38,10 +42,7 @@ describe("widgets/proxmoxbackupserver/component", () => {
});
it("renders error UI when any endpoint errors", () => {
- useWidgetAPI
- .mockReturnValueOnce({ data: undefined, error: undefined })
- .mockReturnValueOnce({ data: undefined, error: { message: "nope" } })
- .mockReturnValueOnce({ data: undefined, error: undefined });
+ mockEndpoints({ "nodes/localhost/tasks": { data: undefined, error: { message: "nope" } } });
renderWithProviders(, {
settings: { hideErrors: false },
@@ -51,8 +52,8 @@ describe("widgets/proxmoxbackupserver/component", () => {
});
it("renders computed values and caps failed tasks at 99+", () => {
- useWidgetAPI
- .mockReturnValueOnce({
+ mockEndpoints({
+ "status/datastore-usage": {
data: {
data: [
{ store: "ds1", used: 50, total: 100 },
@@ -60,9 +61,10 @@ describe("widgets/proxmoxbackupserver/component", () => {
],
},
error: undefined,
- })
- .mockReturnValueOnce({ data: { total: 1000 }, error: undefined })
- .mockReturnValueOnce({ data: { data: { cpu: 0.2, memory: { used: 1, total: 4 } } }, error: undefined });
+ },
+ "nodes/localhost/tasks": { data: { total: 1000 }, error: undefined },
+ "nodes/localhost/status": { data: { data: { cpu: 0.2, memory: { used: 1, total: 4 } } }, error: undefined },
+ });
renderWithProviders(, {
settings: { hideErrors: false },
@@ -78,19 +80,21 @@ describe("widgets/proxmoxbackupserver/component", () => {
it("requests failed tasks with a 24 hour since filter in epoch seconds", () => {
vi.spyOn(Date, "now").mockReturnValue(1_776_519_498_000);
- useWidgetAPI
- .mockReturnValueOnce({ data: undefined, error: undefined })
- .mockReturnValueOnce({ data: undefined, error: undefined })
- .mockReturnValueOnce({ data: undefined, error: undefined });
+ mockEndpoints();
renderWithProviders(, {
settings: { hideErrors: false },
});
- expect(useWidgetAPI).toHaveBeenNthCalledWith(2, { type: "proxmoxbackupserver" }, "nodes/localhost/tasks", {
- errors: true,
- limit: 100,
- since: 1_776_433_098,
- });
+ expect(useWidgetAPI).toHaveBeenCalledWith(
+ { type: "proxmoxbackupserver" },
+ "nodes/localhost/tasks",
+ {
+ errors: true,
+ limit: 100,
+ since: 1_776_433_098,
+ },
+ { keepPreviousData: true },
+ );
});
});
diff --git a/src/widgets/romm/component.jsx b/src/widgets/romm/component.jsx
index 222f8d4ae..00fb25d5a 100644
--- a/src/widgets/romm/component.jsx
+++ b/src/widgets/romm/component.jsx
@@ -3,11 +3,12 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
const ROMM_DEFAULT_FIELDS = ["platforms", "totalRoms", "saves", "states"];
-const MAX_ALLOWED_FIELDS = 4;
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
+ const service = withWidgetFields(configuredService, ROMM_DEFAULT_FIELDS);
const { widget } = service;
const { t } = useTranslation();
const { data: response, error: responseError } = useWidgetAPI(widget, "statistics");
@@ -16,12 +17,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields?.length > 0) {
- widget.fields = ROMM_DEFAULT_FIELDS;
- } else if (widget.fields.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!response) {
return (
diff --git a/src/widgets/romm/component.test.jsx b/src/widgets/romm/component.test.jsx
index 28384f8a1..75086dcb7 100644
--- a/src/widgets/romm/component.test.jsx
+++ b/src/widgets/romm/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/romm/component", () => {
const service = { widget: { type: "romm" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("romm.platforms")).toBeInTheDocument();
expect(screen.getByText("romm.totalRoms")).toBeInTheDocument();
@@ -38,7 +38,7 @@ describe("widgets/romm/component", () => {
const service = { widget: { type: "romm", fields: ["platforms", "totalRoms", "saves", "states", "screenshots"] } };
renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states"]);
+ expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states", "screenshots"]);
});
it("renders values when loaded (and includes additional fields when explicitly selected)", () => {
diff --git a/src/widgets/seerr/component.jsx b/src/widgets/seerr/component.jsx
index 95d72dc8a..c1a7cb83d 100644
--- a/src/widgets/seerr/component.jsx
+++ b/src/widgets/seerr/component.jsx
@@ -2,13 +2,13 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
export const seerrDefaultFields = ["pending", "approved", "completed"];
-const MAX_ALLOWED_FIELDS = 4;
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
+ const service = withWidgetFields(configuredService, seerrDefaultFields);
const { widget } = service;
- widget.fields = widget?.fields?.length ? widget.fields.slice(0, MAX_ALLOWED_FIELDS) : seerrDefaultFields;
const isIssueEnabled = widget.fields.includes("issues");
const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
@@ -30,16 +30,20 @@ export default function Component({ service }) {
);
}
- if (
- statsData.completed === undefined &&
- (widget.fields.includes("completed") || widget.fields.includes("available"))
- ) {
- // Fallback to "available" if "completed" requested but not available
- widget.fields = widget.fields.map((field) => (field === "completed" ? "available" : field));
+ // Older Seerr versions expose "available" instead of "completed".
+ let renderedService = service;
+ if (statsData.completed === undefined && service.widget.fields.includes("completed")) {
+ renderedService = {
+ ...service,
+ widget: {
+ ...service.widget,
+ fields: service.widget.fields.map((field) => (field === "completed" ? "available" : field)),
+ },
+ };
}
return (
-
+
diff --git a/src/widgets/seerr/component.test.jsx b/src/widgets/seerr/component.test.jsx
index a1c51f5c0..755971b1c 100644
--- a/src/widgets/seerr/component.test.jsx
+++ b/src/widgets/seerr/component.test.jsx
@@ -8,7 +8,7 @@ import { renderWithProviders } from "test-utils/render-with-providers";
const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
-import Component, { seerrDefaultFields } from "./component";
+import Component from "./component";
describe("widgets/seerr/component", () => {
beforeEach(() => {
@@ -23,7 +23,7 @@ describe("widgets/seerr/component", () => {
const service = { widget: { type: "seerr", url: "http://x" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(seerrDefaultFields);
+ expect(service.widget.fields).toBeUndefined();
expect(useWidgetAPI.mock.calls[1][1]).toBe("");
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("seerr.pending")).toBeInTheDocument();
@@ -42,7 +42,7 @@ describe("widgets/seerr/component", () => {
const service = { widget: { type: "jellyseerr", url: "http://x" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(seerrDefaultFields);
+ expect(service.widget.fields).toBeUndefined();
expect(useWidgetAPI.mock.calls[1][1]).toBe("");
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("seerr.pending")).toBeInTheDocument();
@@ -58,7 +58,7 @@ describe("widgets/seerr/component", () => {
const service = { widget: { type: "overseerr", url: "http://x" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(seerrDefaultFields);
+ expect(service.widget.fields).toBeUndefined();
expect(useWidgetAPI.mock.calls[1][1]).toBe("");
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("seerr.pending")).toBeInTheDocument();
@@ -110,7 +110,7 @@ describe("widgets/seerr/component", () => {
renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["pending", "approved", "available"]);
+ expect(service.widget.fields).toEqual(["pending", "approved", "completed"]);
expect(screen.getByText("3")).toBeInTheDocument();
expect(screen.queryByText("seerr.completed")).toBeNull();
});
diff --git a/src/widgets/slskd/component.jsx b/src/widgets/slskd/component.jsx
index 1d07b3f98..7c3a56001 100644
--- a/src/widgets/slskd/component.jsx
+++ b/src/widgets/slskd/component.jsx
@@ -3,12 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
const slskdDefaultFields = ["slskStatus", "downloads", "uploads", "sharedFiles"];
-const MAX_ALLOWED_FIELDS = 4;
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, slskdDefaultFields);
const { widget } = service;
const { data: appData, error: appError } = useWidgetAPI(widget, "application");
@@ -19,12 +20,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields || widget.fields.length === 0) {
- widget.fields = slskdDefaultFields;
- } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!appData || !downData || !upData) {
return (
diff --git a/src/widgets/slskd/component.test.jsx b/src/widgets/slskd/component.test.jsx
index 4228430d1..d050dc939 100644
--- a/src/widgets/slskd/component.test.jsx
+++ b/src/widgets/slskd/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/slskd/component", () => {
const service = { widget: { type: "slskd" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["slskStatus", "downloads", "uploads", "sharedFiles"]);
+ expect(service.widget.fields).toBeUndefined();
// Container filters children by widget.fields.
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("slskd.slskStatus")).toBeInTheDocument();
@@ -38,7 +38,7 @@ describe("widgets/slskd/component", () => {
const service = { widget: { type: "slskd", fields: ["a", "b", "c", "d", "e"] } };
renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["a", "b", "c", "d"]);
+ expect(service.widget.fields).toEqual(["a", "b", "c", "d", "e"]);
});
it("renders status and counts when loaded", () => {
diff --git a/src/widgets/stash/component.jsx b/src/widgets/stash/component.jsx
index 485e2401e..e1d08424b 100644
--- a/src/widgets/stash/component.jsx
+++ b/src/widgets/stash/component.jsx
@@ -4,23 +4,27 @@ import { useTranslation } from "next-i18next/pages";
import { useEffect, useState } from "react";
import { formatProxyUrl } from "utils/proxy/api-helpers";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["scenes", "images"];
+
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
- const { widget } = service;
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
+ const requestWidget = configuredService.widget;
const [stats, setStats] = useState(null);
useEffect(() => {
async function fetchStats() {
- const url = formatProxyUrl(widget, "stats");
+ const url = formatProxyUrl(requestWidget, "stats");
const res = await fetch(url, { method: "POST" });
setStats(await res.json());
}
if (!stats) {
fetchStats();
}
- }, [widget, stats]);
+ }, [requestWidget, stats]);
if (!stats) {
return (
@@ -31,16 +35,6 @@ export default function Component({ service }) {
);
}
- // Provide a default if not set in the config
- if (!widget.fields) {
- widget.fields = ["scenes", "images"];
- }
-
- // Limit to a maximum of 4 at a time
- if (widget.fields.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
return (
diff --git a/src/widgets/suwayomi/component.jsx b/src/widgets/suwayomi/component.jsx
index f321d46d7..6945448e1 100644
--- a/src/widgets/suwayomi/component.jsx
+++ b/src/widgets/suwayomi/component.jsx
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["download", "nondownload", "read", "unread"];
+
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: suwayomiData, error: suwayomiError } = useWidgetAPI(widget);
@@ -16,11 +20,6 @@ export default function Component({ service }) {
}
if (!suwayomiData) {
- if (!widget.fields || widget.fields.length === 0) {
- widget.fields = ["download", "nondownload", "read", "unread"];
- } else if (widget.fields.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
return (
{widget.fields.map((field) => (
diff --git a/src/widgets/suwayomi/component.test.jsx b/src/widgets/suwayomi/component.test.jsx
index a3a779d85..152efb1a0 100644
--- a/src/widgets/suwayomi/component.test.jsx
+++ b/src/widgets/suwayomi/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/suwayomi/component", () => {
const service = { widget: { type: "suwayomi" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["download", "nondownload", "read", "unread"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("suwayomi.download")).toBeInTheDocument();
expect(screen.getByText("suwayomi.nondownload")).toBeInTheDocument();
diff --git a/src/widgets/tailscale/component.jsx b/src/widgets/tailscale/component.jsx
index dfba539fc..4c05c5d30 100644
--- a/src/widgets/tailscale/component.jsx
+++ b/src/widgets/tailscale/component.jsx
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["address", "last_seen", "expires"];
+
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: tailscaleData, error: tailscaleError } = useWidgetAPI(widget, "device");
@@ -25,13 +29,6 @@ export default function Component({ service }) {
);
}
- const MAX_ALLOWED_FIELDS = 4;
- if (widget.fields?.length == 0 || !widget.fields) {
- widget.fields = ["address", "last_seen", "expires"];
- } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
const {
addresses: [address],
keyExpiryDisabled,
diff --git a/src/widgets/tautulli/component.jsx b/src/widgets/tautulli/component.jsx
index ea4edf7d4..f0d7a32fe 100644
--- a/src/widgets/tautulli/component.jsx
+++ b/src/widgets/tautulli/component.jsx
@@ -166,7 +166,7 @@ export default function Component({ service }) {
);
}
- const playing = activityData.response.data.sessions.sort((a, b) => {
+ const playing = [...activityData.response.data.sessions].sort((a, b) => {
if (a.view_offset > b.view_offset) {
return 1;
}
diff --git a/src/widgets/technitium/component.jsx b/src/widgets/technitium/component.jsx
index d0307b0ba..6d676c82a 100644
--- a/src/widgets/technitium/component.jsx
+++ b/src/widgets/technitium/component.jsx
@@ -3,14 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
-
-const MAX_ALLOWED_FIELDS = 4;
+import withWidgetFields from "utils/widget-fields";
export const technitiumDefaultFields = ["totalQueries", "totalAuthoritative", "totalCached", "totalServerFailure"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, technitiumDefaultFields);
const { widget } = service;
const params = {
@@ -20,16 +20,6 @@ export default function Component({ service }) {
const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats", params);
- // Default fields
- if (!widget.fields?.length > 0) {
- widget.fields = technitiumDefaultFields;
- }
-
- // Limits max number of displayed fields
- if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (statsError) {
return ;
}
diff --git a/src/widgets/technitium/component.test.jsx b/src/widgets/technitium/component.test.jsx
index 7888d687d..533b466a3 100644
--- a/src/widgets/technitium/component.test.jsx
+++ b/src/widgets/technitium/component.test.jsx
@@ -9,7 +9,7 @@ import { expectBlockValue, findServiceBlockByLabel } from "test-utils/widget-ass
const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
-import Component, { technitiumDefaultFields } from "./component";
+import Component from "./component";
describe("widgets/technitium/component", () => {
beforeEach(() => {
@@ -22,7 +22,7 @@ describe("widgets/technitium/component", () => {
const service = { widget: { type: "technitium" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(technitiumDefaultFields);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("technitium.totalQueries")).toBeInTheDocument();
expect(screen.getByText("technitium.totalAuthoritative")).toBeInTheDocument();
diff --git a/src/widgets/tracearr/component.jsx b/src/widgets/tracearr/component.jsx
index e2586d223..222516bf9 100644
--- a/src/widgets/tracearr/component.jsx
+++ b/src/widgets/tracearr/component.jsx
@@ -232,7 +232,7 @@ export default function Component({ service }) {
);
}
- const playing = activityData.data.sort((a, b) => a.progressMs - b.progressMs);
+ const playing = [...activityData.data].sort((a, b) => a.progressMs - b.progressMs);
const { summary } = activityData;
if (view === "summary") {
diff --git a/src/widgets/unraid/component.jsx b/src/widgets/unraid/component.jsx
index 99ec6244c..2b7ed6ea1 100644
--- a/src/widgets/unraid/component.jsx
+++ b/src/widgets/unraid/component.jsx
@@ -3,9 +3,9 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
const UNRAID_DEFAULT_FIELDS = ["status", "cpu", "memoryPercent", "notifications"];
-const MAX_ALLOWED_FIELDS = 4;
const POOLS = ["pool1", "pool2", "pool3", "pool4"];
const POOL_FIELDS = [
@@ -14,8 +14,9 @@ const POOL_FIELDS = [
{ param: "UsedPercent", label: "poolUsed", valueKey: "fsUsedPercent", valueType: "common.percent" },
];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, UNRAID_DEFAULT_FIELDS);
const { widget } = service;
const { data, error } = useWidgetAPI(widget);
@@ -24,12 +25,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields?.length) {
- widget.fields = UNRAID_DEFAULT_FIELDS;
- } else if (widget.fields.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
if (!data) {
return (
diff --git a/src/widgets/unraid/component.test.jsx b/src/widgets/unraid/component.test.jsx
index e6b82743d..e5d80b279 100644
--- a/src/widgets/unraid/component.test.jsx
+++ b/src/widgets/unraid/component.test.jsx
@@ -20,14 +20,17 @@ describe("widgets/unraid/component", () => {
vi.clearAllMocks();
});
- it("defaults widget.fields and filters down to 4 visible blocks while loading", () => {
+ it("defaults fields and filters down to 4 visible blocks while loading", () => {
useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
const service = { widget: { type: "unraid" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- // Component sets default fields
- expect(service.widget.fields).toEqual(["status", "cpu", "memoryPercent", "notifications"]);
+ expect(service.widget.fields).toBeUndefined();
+ expect(useWidgetAPI).toHaveBeenCalledWith({
+ type: "unraid",
+ fields: ["status", "cpu", "memoryPercent", "notifications"],
+ });
// Container filters the many placeholder Blocks down to the selected fields.
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
diff --git a/src/widgets/vikunja/component.jsx b/src/widgets/vikunja/component.jsx
index 186c80905..fddff2491 100644
--- a/src/widgets/vikunja/component.jsx
+++ b/src/widgets/vikunja/component.jsx
@@ -2,10 +2,14 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import useCurrentTime from "utils/hooks/use-current-time";
import useWidgetAPI from "utils/proxy/use-widget-api";
+const WEEK = 7 * 24 * 60 * 60 * 1000;
+
export default function Component({ service }) {
const { t } = useTranslation();
+ const currentTime = useCurrentTime();
const { widget } = service;
const version = widget.version ?? 1;
@@ -32,10 +36,10 @@ export default function Component({ service }) {
const projects = projectsData.filter((project) => project.id > 0); // saved filters have id < 0
- const oneWeekFromNow = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+ const oneWeekFromNow = new Date(currentTime + WEEK);
const tasksWithDueDate = tasksData.filter((task) => !task.dueDateIsDefault);
const tasks7d = tasksWithDueDate.filter((task) => new Date(task.dueDate) <= oneWeekFromNow);
- const tasksOverdue = tasksWithDueDate.filter((task) => new Date(task.dueDate) <= new Date(Date.now()));
+ const tasksOverdue = tasksWithDueDate.filter((task) => new Date(task.dueDate) <= new Date(currentTime));
const tasksInProgress = tasksData.filter((task) => task.inProgress);
return (
diff --git a/src/widgets/wallos/component.jsx b/src/widgets/wallos/component.jsx
index 93673a630..60606e9a4 100644
--- a/src/widgets/wallos/component.jsx
+++ b/src/widgets/wallos/component.jsx
@@ -3,8 +3,9 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-const MAX_ALLOWED_FIELDS = 4;
+const DEFAULT_FIELDS = ["activeSubscriptions", "nextRenewingSubscription", "thisMonthlyCost", "nextMonthlyCost"];
const todayDate = new Date();
function toApiMonthYear(offset = 0) {
@@ -16,16 +17,11 @@ function toApiMonthYear(offset = 0) {
};
}
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
- if (!widget.fields) {
- widget.fields = ["activeSubscriptions", "nextRenewingSubscription", "thisMonthlyCost", "nextMonthlyCost"];
- } else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
- widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
- }
-
const subscriptionsEndPoint =
widget.fields.includes("activeSubscriptions") || widget.fields.includes("nextRenewingSubscription")
? "get_subscriptions"
diff --git a/src/widgets/wallos/component.test.jsx b/src/widgets/wallos/component.test.jsx
index 7006ed3f2..6d4dc823d 100644
--- a/src/widgets/wallos/component.test.jsx
+++ b/src/widgets/wallos/component.test.jsx
@@ -22,12 +22,7 @@ describe("widgets/wallos/component", () => {
const service = { widget: { type: "wallos" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual([
- "activeSubscriptions",
- "nextRenewingSubscription",
- "thisMonthlyCost",
- "nextMonthlyCost",
- ]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("wallos.activeSubscriptions")).toBeInTheDocument();
expect(screen.getByText("wallos.nextRenewingSubscription")).toBeInTheDocument();
diff --git a/src/widgets/wgeasy/component.jsx b/src/widgets/wgeasy/component.jsx
index 338d94cc1..cce4c259a 100644
--- a/src/widgets/wgeasy/component.jsx
+++ b/src/widgets/wgeasy/component.jsx
@@ -2,18 +2,18 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
-export default function Component({ service }) {
+const DEFAULT_FIELDS = ["connected", "enabled", "total"];
+
+export default function Component({ service: configuredService }) {
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const endpoint = widget.version === 2 ? "clientv2" : "client";
const { data: infoData, error: infoError } = useWidgetAPI(widget, endpoint);
- if (!widget.fields) {
- widget.fields = ["connected", "enabled", "total"];
- }
-
if (infoError || infoData?.statusCode > 400) {
return ;
}
diff --git a/src/widgets/wgeasy/component.test.jsx b/src/widgets/wgeasy/component.test.jsx
index eebc83915..8269a0906 100644
--- a/src/widgets/wgeasy/component.test.jsx
+++ b/src/widgets/wgeasy/component.test.jsx
@@ -28,7 +28,7 @@ describe("widgets/wgeasy/component", () => {
const service = { widget: { type: "wgeasy" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["connected", "enabled", "total"]);
+ expect(service.widget.fields).toBeUndefined();
// Container filters by widget.fields; "disabled" is not included by default.
expect(container.querySelectorAll(".service-block")).toHaveLength(3);
expect(screen.getByText("wgeasy.connected")).toBeInTheDocument();
diff --git a/src/widgets/zabbix/component.jsx b/src/widgets/zabbix/component.jsx
index 397de7f18..aaa4c02f3 100644
--- a/src/widgets/zabbix/component.jsx
+++ b/src/widgets/zabbix/component.jsx
@@ -3,6 +3,7 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
+import withWidgetFields from "utils/widget-fields";
const PriorityUnclassified = "0";
const PriorityInformation = "1";
@@ -10,9 +11,11 @@ const PriorityWarning = "2";
const PriorityAverage = "3";
const PriorityHigh = "4";
const PriorityDisaster = "5";
+const DEFAULT_FIELDS = ["warning", "average", "high", "disaster"];
-export default function Component({ service }) {
+export default function Component({ service: configuredService }) {
const { t } = useTranslation();
+ const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: zabbixData, error: zabbixError } = useWidgetAPI(widget, "trigger");
@@ -21,12 +24,6 @@ export default function Component({ service }) {
return ;
}
- if (!widget.fields) {
- widget.fields = ["warning", "average", "high", "disaster"];
- } else if (widget.fields?.length > 4) {
- widget.fields = widget.fields.slice(0, 4);
- }
-
if (!zabbixData) {
return (
diff --git a/src/widgets/zabbix/component.test.jsx b/src/widgets/zabbix/component.test.jsx
index 25047022a..95e019f04 100644
--- a/src/widgets/zabbix/component.test.jsx
+++ b/src/widgets/zabbix/component.test.jsx
@@ -22,7 +22,7 @@ describe("widgets/zabbix/component", () => {
const service = { widget: { type: "zabbix" } };
const { container } = renderWithProviders(, { settings: { hideErrors: false } });
- expect(service.widget.fields).toEqual(["warning", "average", "high", "disaster"]);
+ expect(service.widget.fields).toBeUndefined();
expect(container.querySelectorAll(".service-block")).toHaveLength(4);
expect(screen.getByText("zabbix.warning")).toBeInTheDocument();
expect(screen.getByText("zabbix.average")).toBeInTheDocument();