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" } });
+ 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/components/widgets/widget.jsx b/src/components/widgets/widget.jsx
index ebc706ace..c7f0bf4df 100644
--- a/src/components/widgets/widget.jsx
+++ b/src/components/widgets/widget.jsx
@@ -1,6 +1,7 @@
-import ErrorBoundary from "components/errorboundry";
import dynamic from "next/dynamic";
+import ErrorBoundary from "components/errorboundry";
+
const widgetMappings = {
weatherapi: dynamic(() => import("components/widgets/weather/weather")),
openweathermap: dynamic(() => import("components/widgets/openweathermap/weather")),
diff --git a/src/components/widgets/widget/container.jsx b/src/components/widgets/widget/container.jsx
index 6c48b9209..117d79bf1 100644
--- a/src/components/widgets/widget/container.jsx
+++ b/src/components/widgets/widget/container.jsx
@@ -1,12 +1,13 @@
import classNames from "classnames";
import { useContext } from "react";
-import { SettingsContext } from "utils/contexts/settings";
import PrimaryText from "./primary_text";
import Raw from "./raw";
import SecondaryText from "./secondary_text";
import WidgetIcon from "./widget_icon";
+import { SettingsContext } from "utils/contexts/settings";
+
export function getAllClasses(options, additionalClassNames = "") {
if (options?.style?.header === "boxedWidgets") {
if (options?.style?.cardBlur !== undefined) {
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 809e7b216..7c7216660 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -5,13 +5,14 @@ import "styles/globals.css";
import "styles/manrope.css";
import "styles/theme.css";
import { SWRConfig } from "swr";
+
+import nextI18nextConfig from "../../next-i18next.config";
+
import { ColorProvider } from "utils/contexts/color";
import { SettingsProvider } from "utils/contexts/settings";
import { TabProvider } from "utils/contexts/tab";
import { ThemeProvider } from "utils/contexts/theme";
-import nextI18nextConfig from "../../next-i18next.config";
-
const tailwindSafelist = [
// TODO: remove pending https://github.com/tailwindlabs/tailwindcss/pull/17147
"backdrop-blur",
diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
index ce5a9f505..5379f8bbd 100644
--- a/src/pages/api/auth/[...nextauth].js
+++ b/src/pages/api/auth/[...nextauth].js
@@ -71,6 +71,16 @@ function logFailedPasswordSignIn() {
createLogger("nextauth").warn("Failed password sign-in attempt");
}
+function logNextAuthError(code, metadata) {
+ const error = metadata instanceof Error ? metadata : metadata?.error;
+
+ if (error?.message) {
+ createLogger("nextauth").error("%s: %s", code, error.message);
+ } else {
+ createLogger("nextauth").error("%s", code);
+ }
+}
+
let providers = [];
if (authEnabled) {
if (hasOidcConfig) {
@@ -140,7 +150,7 @@ export const authOptions = {
signIn: "/auth/signin",
},
logger: {
- error: (code) => createLogger("nextauth").error("%s", code),
+ error: logNextAuthError,
warn: (code) => createLogger("nextauth").warn("%s", code),
debug: (code) => createLogger("nextauth").debug("%s", code),
},
diff --git a/src/pages/api/search/searchSuggestion.js b/src/pages/api/search/searchSuggestion.js
index f03759c2c..7d291b281 100644
--- a/src/pages/api/search/searchSuggestion.js
+++ b/src/pages/api/search/searchSuggestion.js
@@ -1,5 +1,4 @@
import { searchProviders } from "components/widgets/search/search";
-
import { getSettings } from "utils/config/config";
import { widgetsFromConfig } from "utils/config/widget-helpers";
import { cachedRequest } from "utils/proxy/http";
diff --git a/src/pages/api/services/proxy.js b/src/pages/api/services/proxy.js
index 8aab61fd7..123794854 100644
--- a/src/pages/api/services/proxy.js
+++ b/src/pages/api/services/proxy.js
@@ -63,6 +63,8 @@ export default async function handler(req, res) {
if (serviceProxyHandler instanceof Function) {
// quick return for no endpoint services, calendar is an exception
if (!req.query.endpoint || serviceProxyHandler === calendarProxyHandler) {
+ req.method = "GET";
+ req.body = undefined;
return await serviceProxyHandler(req, res);
}
@@ -86,7 +88,7 @@ export default async function handler(req, res) {
}
req.method = mapping?.method || "GET";
- if (mapping?.body) req.body = mapping?.body;
+ req.body = mapping?.body;
req.query.endpoint = endpoint;
if (mapping.segments || req.query.segments) {
@@ -125,6 +127,8 @@ export default async function handler(req, res) {
if (widget.allowedEndpoints instanceof RegExp) {
if (widget.allowedEndpoints.test(req.query.endpoint)) {
+ req.method = "GET";
+ req.body = undefined;
return await serviceProxyHandler(req, res);
}
}
diff --git a/src/pages/api/services/proxy.test.js b/src/pages/api/services/proxy.test.js
new file mode 100644
index 000000000..3c5336040
--- /dev/null
+++ b/src/pages/api/services/proxy.test.js
@@ -0,0 +1,229 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import createMockRes from "test-utils/create-mock-res";
+
+const { getServiceWidget, logger, genericHandler, allowedHandler, mappedHandler, calendarHandler } = vi.hoisted(() => ({
+ getServiceWidget: vi.fn(),
+ logger: { debug: vi.fn(), error: vi.fn() },
+ genericHandler: vi.fn(),
+ allowedHandler: vi.fn(),
+ mappedHandler: vi.fn(),
+ calendarHandler: vi.fn(),
+}));
+
+vi.mock("utils/logger", () => ({
+ default: () => logger,
+}));
+vi.mock("utils/config/service-helpers", () => ({
+ default: getServiceWidget,
+}));
+vi.mock("widgets/calendar/proxy", () => ({
+ default: calendarHandler,
+}));
+
+vi.mock("widgets/widgets", () => ({
+ default: {
+ noendpoint: {
+ api: "{url}",
+ proxyHandler: genericHandler,
+ },
+ allowed: {
+ api: "{url}/api/{endpoint}",
+ proxyHandler: allowedHandler,
+ allowedEndpoints: /^status$/,
+ },
+ mapped: {
+ api: "{url}/{endpoint}",
+ proxyHandler: mappedHandler,
+ mappings: {
+ Sessions: {
+ endpoint: "Sessions",
+ },
+ Pause: {
+ method: "POST",
+ endpoint: "Sessions/Playing/Pause",
+ body: "mapping-body",
+ },
+ Refresh: {
+ method: "POST",
+ endpoint: "Sessions/Refresh",
+ },
+ },
+ },
+ ical: {
+ api: "{url}",
+ proxyHandler: calendarHandler,
+ },
+ },
+}));
+
+import handler from "./proxy";
+
+function createReq({ method = "GET", body, query = {} } = {}) {
+ return { method, body, query };
+}
+
+describe("pages/api/services/proxy", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe("client request shaping", () => {
+ it("forces GET and drops the body on the no-endpoint quick return", async () => {
+ getServiceWidget.mockResolvedValue({ type: "noendpoint", url: "http://example" });
+
+ const req = createReq({
+ method: "POST",
+ body: '{"cmd":"delete_all"}',
+ query: { group: "g", service: "svc", index: "0" },
+ });
+
+ await handler(req, createMockRes());
+
+ expect(genericHandler).toHaveBeenCalledTimes(1);
+ const forwarded = genericHandler.mock.calls[0][0];
+ expect(forwarded.method).toBe("GET");
+ expect(forwarded.body).toBeUndefined();
+ });
+
+ it.each(["PUT", "DELETE", "PATCH"])("forces GET for a %s on the no-endpoint quick return", async (method) => {
+ getServiceWidget.mockResolvedValue({ type: "noendpoint", url: "http://example" });
+
+ const req = createReq({ method, body: "payload", query: { group: "g", service: "svc", index: "0" } });
+
+ await handler(req, createMockRes());
+
+ const forwarded = genericHandler.mock.calls[0][0];
+ expect(forwarded.method).toBe("GET");
+ expect(forwarded.body).toBeUndefined();
+ });
+
+ it("forces GET and drops the body on the allowedEndpoints path", async () => {
+ getServiceWidget.mockResolvedValue({ type: "allowed", url: "http://example" });
+
+ const req = createReq({
+ method: "DELETE",
+ body: "payload",
+ query: { group: "g", service: "svc", endpoint: "status", index: "0" },
+ });
+
+ await handler(req, createMockRes());
+
+ expect(allowedHandler).toHaveBeenCalledTimes(1);
+ const forwarded = allowedHandler.mock.calls[0][0];
+ expect(forwarded.method).toBe("GET");
+ expect(forwarded.body).toBeUndefined();
+ });
+
+ it("forces GET and drops the body on the calendar exception path", async () => {
+ getServiceWidget.mockResolvedValue({ type: "calendar", url: "http://example" });
+
+ const req = createReq({
+ method: "POST",
+ body: "payload",
+ query: { group: "g", service: "svc", endpoint: "events", index: "0" },
+ });
+
+ await handler(req, createMockRes());
+
+ expect(calendarHandler).toHaveBeenCalledTimes(1);
+ const forwarded = calendarHandler.mock.calls[0][0];
+ expect(forwarded.method).toBe("GET");
+ expect(forwarded.body).toBeUndefined();
+ });
+
+ it("forces GET for a mapping that does not declare a method", async () => {
+ getServiceWidget.mockResolvedValue({ type: "mapped", url: "http://example" });
+
+ const req = createReq({
+ method: "POST",
+ body: "payload",
+ query: { group: "g", service: "svc", endpoint: "Sessions", index: "0" },
+ });
+
+ await handler(req, createMockRes());
+
+ const forwarded = mappedHandler.mock.calls[0][0];
+ expect(forwarded.method).toBe("GET");
+ expect(forwarded.body).toBeUndefined();
+ });
+
+ it("drops a client body when a non-GET mapping does not declare one", async () => {
+ getServiceWidget.mockResolvedValue({ type: "mapped", url: "http://example" });
+
+ const req = createReq({
+ method: "POST",
+ body: "attacker-controlled",
+ query: { group: "g", service: "svc", endpoint: "Refresh", index: "0" },
+ });
+
+ await handler(req, createMockRes());
+
+ const forwarded = mappedHandler.mock.calls[0][0];
+ expect(forwarded.method).toBe("POST");
+ expect(forwarded.body).toBeUndefined();
+ });
+ });
+
+ describe("mapping opt-in", () => {
+ it("still allows a mapping to declare a non-GET method and body", async () => {
+ getServiceWidget.mockResolvedValue({ type: "mapped", url: "http://example" });
+
+ const req = createReq({
+ method: "POST",
+ query: { group: "g", service: "svc", endpoint: "Pause", index: "0" },
+ });
+
+ await handler(req, createMockRes());
+
+ expect(mappedHandler).toHaveBeenCalledTimes(1);
+ const forwarded = mappedHandler.mock.calls[0][0];
+ expect(forwarded.method).toBe("POST");
+ expect(forwarded.body).toBe("mapping-body");
+ expect(forwarded.query.endpoint).toBe("Sessions/Playing/Pause");
+ });
+
+ it("rejects a method that does not match the mapping", async () => {
+ getServiceWidget.mockResolvedValue({ type: "mapped", url: "http://example" });
+
+ const req = createReq({
+ method: "GET",
+ query: { group: "g", service: "svc", endpoint: "Pause", index: "0" },
+ });
+ const res = createMockRes();
+
+ await handler(req, res);
+
+ expect(mappedHandler).not.toHaveBeenCalled();
+ expect(res.statusCode).toBe(403);
+ expect(res.body).toEqual({ error: "Unsupported method" });
+ });
+ });
+
+ describe("dispatch guards", () => {
+ it("rejects an endpoint that fails the allowedEndpoints test", async () => {
+ getServiceWidget.mockResolvedValue({ type: "allowed", url: "http://example" });
+
+ const req = createReq({ query: { group: "g", service: "svc", endpoint: "shutdown", index: "0" } });
+ const res = createMockRes();
+
+ await handler(req, res);
+
+ expect(allowedHandler).not.toHaveBeenCalled();
+ expect(res.statusCode).toBe(403);
+ expect(res.body).toEqual({ error: "Unmapped proxy request." });
+ });
+
+ it("rejects an unknown widget type", async () => {
+ getServiceWidget.mockResolvedValue({ type: "nope", url: "http://example" });
+
+ const req = createReq({ query: { group: "g", service: "svc", index: "0" } });
+ const res = createMockRes();
+
+ await handler(req, res);
+
+ expect(res.statusCode).toBe(403);
+ expect(res.body).toEqual({ error: "Unknown proxy service type" });
+ });
+ });
+});
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d5c5296cf..31b095bf1 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,4 +1,14 @@
import classNames from "classnames";
+import { useTranslation } from "next-i18next/pages";
+import { serverSideTranslations } from "next-i18next/pages/serverSideTranslations";
+import dynamic from "next/dynamic";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { BiError } from "react-icons/bi";
+import useSWR, { SWRConfig } from "swr";
+
import BookmarksGroup from "components/bookmarks/group";
import ErrorBoundary from "components/errorboundry";
import QuickLaunch from "components/quicklaunch";
@@ -6,22 +16,12 @@ import ServicesGroup from "components/services/group";
import Tab, { slugifyAndEncode } from "components/tab";
import Revalidate from "components/toggles/revalidate";
import Widget from "components/widgets/widget";
-import { useTranslation } from "next-i18next/pages";
-import { serverSideTranslations } from "next-i18next/pages/serverSideTranslations";
-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 { BiError } from "react-icons/bi";
-import useSWR, { SWRConfig } from "swr";
+import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
+import { getSettings } from "utils/config/config";
import { ColorContext } from "utils/contexts/color";
import { SettingsContext } from "utils/contexts/settings";
import { TabContext } from "utils/contexts/tab";
import { ThemeContext } from "utils/contexts/theme";
-
-import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
-import { getSettings } from "utils/config/config";
import useWindowFocus from "utils/hooks/window-focus";
import createLogger from "utils/logger";
import themes from "utils/styles/themes";
@@ -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("");
@@ -420,10 +426,11 @@ function Home({ initialSettings }) {
/>
{settings.disableIndexing &&
}
{settings.base &&
}
- {settings.favicon ? (
+ {/* from props, not context so its set before running JS */}
+ {initialSettings.favicon ? (
<>
-
-
+
+
) : (
<>
diff --git a/src/test-utils/render-with-providers.jsx b/src/test-utils/render-with-providers.jsx
index 2f9768912..7d6073fa9 100644
--- a/src/test-utils/render-with-providers.jsx
+++ b/src/test-utils/render-with-providers.jsx
@@ -1,4 +1,5 @@
import { render } from "@testing-library/react";
+
import { SettingsContext } from "utils/contexts/settings";
export function renderWithProviders(ui, { settings = {} } = {}) {
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/adguard/component.jsx b/src/widgets/adguard/component.jsx
index dd61e5daf..7b2099cac 100644
--- a/src/widgets/adguard/component.jsx
+++ b/src/widgets/adguard/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/apcups/component.jsx b/src/widgets/apcups/component.jsx
index 85e621dbb..1eb90b81e 100644
--- a/src/widgets/apcups/component.jsx
+++ b/src/widgets/apcups/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/arcane/component.jsx b/src/widgets/arcane/component.jsx
index 20307bfdc..5e8ed3ff4 100644
--- a/src/widgets/arcane/component.jsx
+++ b/src/widgets/arcane/component.jsx
@@ -1,21 +1,17 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
-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..cc4a1b0ce 100644
--- a/src/widgets/argocd/component.jsx
+++ b/src/widgets/argocd/component.jsx
@@ -1,20 +1,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/atsumeru/component.jsx b/src/widgets/atsumeru/component.jsx
index 33952a189..6a325a136 100644
--- a/src/widgets/atsumeru/component.jsx
+++ b/src/widgets/atsumeru/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/audiobookshelf/component.jsx b/src/widgets/audiobookshelf/component.jsx
index d24dfb3c9..3d94f8f04 100755
--- a/src/widgets/audiobookshelf/component.jsx
+++ b/src/widgets/audiobookshelf/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/authentik/component.jsx b/src/widgets/authentik/component.jsx
index dcb2fe6e4..a233ba829 100644
--- a/src/widgets/authentik/component.jsx
+++ b/src/widgets/authentik/component.jsx
@@ -1,11 +1,15 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+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/autobrr/component.jsx b/src/widgets/autobrr/component.jsx
index 5164cc309..7b652b610 100644
--- a/src/widgets/autobrr/component.jsx
+++ b/src/widgets/autobrr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/azuredevops/component.jsx b/src/widgets/azuredevops/component.jsx
index c963e3d1e..a5cf95b1c 100644
--- a/src/widgets/azuredevops/component.jsx
+++ b/src/widgets/azuredevops/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/backrest/component.jsx b/src/widgets/backrest/component.jsx
index ab52efa05..ff889ec5b 100644
--- a/src/widgets/backrest/component.jsx
+++ b/src/widgets/backrest/component.jsx
@@ -1,15 +1,16 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
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/bazarr/component.jsx b/src/widgets/bazarr/component.jsx
index 0e80180fe..ce443c318 100644
--- a/src/widgets/bazarr/component.jsx
+++ b/src/widgets/bazarr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/beszel/component.jsx b/src/widgets/beszel/component.jsx
index de3f52aa7..4eae0c3f6 100644
--- a/src/widgets/beszel/component.jsx
+++ b/src/widgets/beszel/component.jsx
@@ -1,25 +1,23 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 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/booklore/component.jsx b/src/widgets/booklore/component.jsx
index 99d8567f0..69e5bfa45 100644
--- a/src/widgets/booklore/component.jsx
+++ b/src/widgets/booklore/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/caddy/component.jsx b/src/widgets/caddy/component.jsx
index cfe36f61c..0d43e5054 100644
--- a/src/widgets/caddy/component.jsx
+++ b/src/widgets/caddy/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/calendar/component.jsx b/src/widgets/calendar/component.jsx
index 7c4b7c709..b73263a04 100644
--- a/src/widgets/calendar/component.jsx
+++ b/src/widgets/calendar/component.jsx
@@ -1,13 +1,14 @@
-import Container from "components/services/widget/container";
import { DateTime } from "luxon";
import { useTranslation } from "next-i18next/pages";
import dynamic from "next/dynamic";
import { useContext, useEffect, useMemo, useState } from "react";
-import { SettingsContext } from "utils/contexts/settings";
import Agenda from "./agenda";
import Monthly from "./monthly";
+import Container from "components/services/widget/container";
+import { SettingsContext } from "utils/contexts/settings";
+
const colorVariants = {
// https://tailwindcss.com/docs/content-configuration#dynamic-class-names
amber: "bg-amber-500",
@@ -38,16 +39,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/calibreweb/component.jsx b/src/widgets/calibreweb/component.jsx
index 993ada471..c6eef7947 100644
--- a/src/widgets/calibreweb/component.jsx
+++ b/src/widgets/calibreweb/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/changedetectionio/component.jsx b/src/widgets/changedetectionio/component.jsx
index 60da39a05..b63716b8b 100644
--- a/src/widgets/changedetectionio/component.jsx
+++ b/src/widgets/changedetectionio/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/channelsdvrserver/component.jsx b/src/widgets/channelsdvrserver/component.jsx
index b05c46146..acf6c27d1 100644
--- a/src/widgets/channelsdvrserver/component.jsx
+++ b/src/widgets/channelsdvrserver/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/checkmk/component.jsx b/src/widgets/checkmk/component.jsx
index 4a44d3e77..083eb299f 100644
--- a/src/widgets/checkmk/component.jsx
+++ b/src/widgets/checkmk/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/cloudflared/component.jsx b/src/widgets/cloudflared/component.jsx
index 790a5f34b..abae61bb0 100644
--- a/src/widgets/cloudflared/component.jsx
+++ b/src/widgets/cloudflared/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/coinmarketcap/component.jsx b/src/widgets/coinmarketcap/component.jsx
index c2a15b261..17d98d12f 100644
--- a/src/widgets/coinmarketcap/component.jsx
+++ b/src/widgets/coinmarketcap/component.jsx
@@ -1,10 +1,10 @@
import classNames from "classnames";
-import Dropdown from "components/services/dropdown";
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { useState } from "react";
+import Dropdown from "components/services/dropdown";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/crowdsec/component.jsx b/src/widgets/crowdsec/component.jsx
index 7eea1fc9c..7f84f8a93 100644
--- a/src/widgets/crowdsec/component.jsx
+++ b/src/widgets/crowdsec/component.jsx
@@ -1,17 +1,22 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
+const ALERTS_LIMIT = 500;
+
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
- const { data: alerts, error: alertsError } = useWidgetAPI(widget, !!widget.limit24h ? "alerts24h" : "alerts");
+ const { data: alerts, error: alertsError } = useWidgetAPI(widget, "alerts");
const { data: bans, error: bansError } = useWidgetAPI(widget, "bans");
+ const alertsCount = alerts?.length ?? 0;
+ const alertsValue = t("common.number", { value: alertsCount });
+
if (alertsError || bansError) {
return ;
}
@@ -27,7 +32,7 @@ export default function Component({ service }) {
return (
-
+ = ALERTS_LIMIT ? `${alertsValue}+` : alertsValue} />
);
diff --git a/src/widgets/crowdsec/component.test.jsx b/src/widgets/crowdsec/component.test.jsx
index abc4c8696..9802eaed4 100644
--- a/src/widgets/crowdsec/component.test.jsx
+++ b/src/widgets/crowdsec/component.test.jsx
@@ -17,15 +17,25 @@ describe("widgets/crowdsec/component", () => {
vi.clearAllMocks();
});
- it("selects alerts24h endpoint when limit24h is enabled", () => {
+ it("requests the alerts and bans endpoints", () => {
+ useWidgetAPI.mockImplementation(() => ({ data: undefined, error: undefined }));
+
+ renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(useWidgetAPI).toHaveBeenNthCalledWith(1, expect.any(Object), "alerts");
+ expect(useWidgetAPI).toHaveBeenNthCalledWith(2, expect.any(Object), "bans");
+ });
+
+ it("ignores the deprecated limit24h option", () => {
useWidgetAPI.mockImplementation(() => ({ data: undefined, error: undefined }));
renderWithProviders(, {
settings: { hideErrors: false },
});
- expect(useWidgetAPI).toHaveBeenNthCalledWith(1, expect.any(Object), "alerts24h");
- expect(useWidgetAPI).toHaveBeenNthCalledWith(2, expect.any(Object), "bans");
+ expect(useWidgetAPI).toHaveBeenNthCalledWith(1, expect.any(Object), "alerts");
});
it("renders placeholders when both alerts and bans are missing", () => {
@@ -52,4 +62,28 @@ describe("widgets/crowdsec/component", () => {
expectBlockValue(container, "crowdsec.alerts", 0);
expectBlockValue(container, "crowdsec.bans", 0);
});
+
+ it("marks the alert count as truncated at the API limit", () => {
+ useWidgetAPI
+ .mockReturnValueOnce({ data: new Array(500).fill({}), error: undefined })
+ .mockReturnValueOnce({ data: [], error: undefined });
+
+ renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(screen.getByText("500+")).toBeInTheDocument();
+ });
+
+ it("does not mark the alert count below the API limit", () => {
+ useWidgetAPI
+ .mockReturnValueOnce({ data: new Array(499).fill({}), error: undefined })
+ .mockReturnValueOnce({ data: [], error: undefined });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expectBlockValue(container, "crowdsec.alerts", 499);
+ });
});
diff --git a/src/widgets/crowdsec/widget.js b/src/widgets/crowdsec/widget.js
index 1b60168d0..223e94811 100644
--- a/src/widgets/crowdsec/widget.js
+++ b/src/widgets/crowdsec/widget.js
@@ -7,13 +7,10 @@ const widget = {
mappings: {
alerts: {
- endpoint: "alerts",
- },
- alerts24h: {
- endpoint: "alerts?limit=0&since=24h",
+ endpoint: "alerts?limit=500&since=24h&with_decisions=false&include_capi=false",
},
bans: {
- endpoint: "alerts?decision_type=ban&origin=crowdsec&has_active_decision=1",
+ endpoint: "alerts?decision_type=ban&include_capi=false&has_active_decision=1&with_decisions=false",
},
},
};
diff --git a/src/widgets/customapi/component.jsx b/src/widgets/customapi/component.jsx
index d034eff42..af94434da 100644
--- a/src/widgets/customapi/component.jsx
+++ b/src/widgets/customapi/component.jsx
@@ -1,8 +1,8 @@
import classNames from "classnames";
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import * as shvl from "utils/config/shvl";
import useWidgetAPI from "utils/proxy/use-widget-api";
diff --git a/src/widgets/deluge/component.jsx b/src/widgets/deluge/component.jsx
index 7b53b0654..cee80a631 100644
--- a/src/widgets/deluge/component.jsx
+++ b/src/widgets/deluge/component.jsx
@@ -1,9 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import QueueEntry from "../../components/widgets/queue/queueEntry";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/develancacheui/component.jsx b/src/widgets/develancacheui/component.jsx
index 08811a326..70e34613d 100644
--- a/src/widgets/develancacheui/component.jsx
+++ b/src/widgets/develancacheui/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/diskstation/component.jsx b/src/widgets/diskstation/component.jsx
index d4327ef60..34934a72d 100644
--- a/src/widgets/diskstation/component.jsx
+++ b/src/widgets/diskstation/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/dispatcharr/component.jsx b/src/widgets/dispatcharr/component.jsx
index 77ecccbec..6cde7c127 100644
--- a/src/widgets/dispatcharr/component.jsx
+++ b/src/widgets/dispatcharr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function StreamEntry({ title, clients, bitrate }) {
diff --git a/src/widgets/docker/component.jsx b/src/widgets/docker/component.jsx
index bb872a0d3..b37e1eff0 100644
--- a/src/widgets/docker/component.jsx
+++ b/src/widgets/docker/component.jsx
@@ -1,10 +1,11 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useSWR from "swr";
import { calculateCPUPercent, calculateThroughput, calculateUsedMemory } from "./stats-helpers";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+
export default function Component({ service }) {
const { t } = useTranslation();
diff --git a/src/widgets/dockhand/component.jsx b/src/widgets/dockhand/component.jsx
index 0fff1c49f..15b96fcf4 100644
--- a/src/widgets/dockhand/component.jsx
+++ b/src/widgets/dockhand/component.jsx
@@ -1,21 +1,17 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
-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/downloadstation/component.jsx b/src/widgets/downloadstation/component.jsx
index a18ddce01..2472170bf 100644
--- a/src/widgets/downloadstation/component.jsx
+++ b/src/widgets/downloadstation/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/duplicati/component.jsx b/src/widgets/duplicati/component.jsx
index 90e0253ed..7897892ce 100644
--- a/src/widgets/duplicati/component.jsx
+++ b/src/widgets/duplicati/component.jsx
@@ -1,21 +1,17 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
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/emby/component.jsx b/src/widgets/emby/component.jsx
index 18fed4cc4..940b5718f 100644
--- a/src/widgets/emby/component.jsx
+++ b/src/widgets/emby/component.jsx
@@ -1,9 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { BsCpu, BsFillCpuFill, BsFillPlayFill, BsPauseFill, BsVolumeMuteFill } from "react-icons/bs";
import { MdOutlineSmartDisplay } from "react-icons/md";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import { getURLSearchParams } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
diff --git a/src/widgets/esphome/component.jsx b/src/widgets/esphome/component.jsx
index 94fea61fa..071105e6f 100644
--- a/src/widgets/esphome/component.jsx
+++ b/src/widgets/esphome/component.jsx
@@ -1,12 +1,16 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 = ["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/evcc/component.jsx b/src/widgets/evcc/component.jsx
index fc638bd46..f6c152554 100644
--- a/src/widgets/evcc/component.jsx
+++ b/src/widgets/evcc/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function toKilowatts(t, value) {
diff --git a/src/widgets/filebrowser/component.jsx b/src/widgets/filebrowser/component.jsx
index 51ae03d97..fd4e00fce 100644
--- a/src/widgets/filebrowser/component.jsx
+++ b/src/widgets/filebrowser/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/fileflows/component.jsx b/src/widgets/fileflows/component.jsx
index 207f11002..46f46c884 100755
--- a/src/widgets/fileflows/component.jsx
+++ b/src/widgets/fileflows/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/firefly/component.jsx b/src/widgets/firefly/component.jsx
index 8e4da639c..28a47e47c 100644
--- a/src/widgets/firefly/component.jsx
+++ b/src/widgets/firefly/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/flood/component.jsx b/src/widgets/flood/component.jsx
index 2d3d9da12..6bfe5abc4 100644
--- a/src/widgets/flood/component.jsx
+++ b/src/widgets/flood/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/freshrss/component.jsx b/src/widgets/freshrss/component.jsx
index a9740cba4..466f3bdff 100644
--- a/src/widgets/freshrss/component.jsx
+++ b/src/widgets/freshrss/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/frigate/component.jsx b/src/widgets/frigate/component.jsx
index 6a342bbb5..5f66f0c56 100644
--- a/src/widgets/frigate/component.jsx
+++ b/src/widgets/frigate/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/fritzbox/component.jsx b/src/widgets/fritzbox/component.jsx
index 5611de312..549f4bb96 100644
--- a/src/widgets/fritzbox/component.jsx
+++ b/src/widgets/fritzbox/component.jsx
@@ -1,13 +1,15 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 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..5b3a75d54 100644
--- a/src/widgets/gamedig/component.jsx
+++ b/src/widgets/gamedig/component.jsx
@@ -1,10 +1,14 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 = ["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/gatus/component.jsx b/src/widgets/gatus/component.jsx
index 6fda47525..198fb08a1 100644
--- a/src/widgets/gatus/component.jsx
+++ b/src/widgets/gatus/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/ghostfolio/component.jsx b/src/widgets/ghostfolio/component.jsx
index 16025b958..f0007f261 100644
--- a/src/widgets/ghostfolio/component.jsx
+++ b/src/widgets/ghostfolio/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function getPerformancePercent(t, performanceRange) {
diff --git a/src/widgets/gitea/component.jsx b/src/widgets/gitea/component.jsx
index 81b69d67d..3b0b078fd 100644
--- a/src/widgets/gitea/component.jsx
+++ b/src/widgets/gitea/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/gitlab/component.jsx b/src/widgets/gitlab/component.jsx
index e0ef49463..75a3bf2fa 100644
--- a/src/widgets/gitlab/component.jsx
+++ b/src/widgets/gitlab/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/glances/components/container.jsx b/src/widgets/glances/components/container.jsx
index 7bcd5c462..744bf0c1c 100644
--- a/src/widgets/glances/components/container.jsx
+++ b/src/widgets/glances/components/container.jsx
@@ -1,9 +1,10 @@
import classNames from "classnames";
import { useContext } from "react";
-import { SettingsContext } from "utils/contexts/settings";
import Error from "./error";
+import { SettingsContext } from "utils/contexts/settings";
+
export default function Container({ children, widget, error = null, chart = true, className = "" }) {
const { settings } = useContext(SettingsContext);
const hideErrors = settings.hideErrors || widget?.hideErrors;
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..de692b679 100644
--- a/src/widgets/glances/metrics/containers.jsx
+++ b/src/widgets/glances/metrics/containers.jsx
@@ -1,9 +1,9 @@
-import ResolvedIcon from "components/resolvedicon";
import { useTranslation } from "next-i18next/pages";
import Block from "../components/block";
import Container from "../components/container";
+import ResolvedIcon from "components/resolvedicon";
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -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..7c26153a7 100644
--- a/src/widgets/glances/metrics/process.jsx
+++ b/src/widgets/glances/metrics/process.jsx
@@ -1,9 +1,9 @@
-import ResolvedIcon from "components/resolvedicon";
import { useTranslation } from "next-i18next/pages";
import Block from "../components/block";
import Container from "../components/container";
+import ResolvedIcon from "components/resolvedicon";
import { parseVersionForUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -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..783b1aef3 100644
--- a/src/widgets/gluetun/component.jsx
+++ b/src/widgets/gluetun/component.jsx
@@ -1,15 +1,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/gotify/component.jsx b/src/widgets/gotify/component.jsx
index 6cf9cea94..f5cadb06b 100644
--- a/src/widgets/gotify/component.jsx
+++ b/src/widgets/gotify/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/grafana/component.jsx b/src/widgets/grafana/component.jsx
index a2924cbc9..f01ff49a5 100755
--- a/src/widgets/grafana/component.jsx
+++ b/src/widgets/grafana/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/hdhomerun/component.jsx b/src/widgets/hdhomerun/component.jsx
index 2532f92bc..d87ee471d 100644
--- a/src/widgets/hdhomerun/component.jsx
+++ b/src/widgets/hdhomerun/component.jsx
@@ -1,9 +1,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 +27,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/headscale/component.jsx b/src/widgets/headscale/component.jsx
index 2d69feedb..4418fcd57 100644
--- a/src/widgets/headscale/component.jsx
+++ b/src/widgets/headscale/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/healthchecks/component.jsx b/src/widgets/healthchecks/component.jsx
index bacefca2c..ede57747c 100644
--- a/src/widgets/healthchecks/component.jsx
+++ b/src/widgets/healthchecks/component.jsx
@@ -1,9 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { i18n } from "../../../next-i18next.config";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
function formatDate(dateString) {
diff --git a/src/widgets/homeassistant/component.jsx b/src/widgets/homeassistant/component.jsx
index 1df415ae2..e43a08b6b 100644
--- a/src/widgets/homeassistant/component.jsx
+++ b/src/widgets/homeassistant/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/homebox/component.jsx b/src/widgets/homebox/component.jsx
index 451d5a9a6..c06d06d60 100644
--- a/src/widgets/homebox/component.jsx
+++ b/src/widgets/homebox/component.jsx
@@ -1,13 +1,15 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 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/homebridge/component.jsx b/src/widgets/homebridge/component.jsx
index 458dfc8a9..6dde67e28 100644
--- a/src/widgets/homebridge/component.jsx
+++ b/src/widgets/homebridge/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/iframe/component.jsx b/src/widgets/iframe/component.jsx
index 96dd69432..380e6977b 100644
--- a/src/widgets/iframe/component.jsx
+++ b/src/widgets/iframe/component.jsx
@@ -1,7 +1,8 @@
import classNames from "classnames";
-import Container from "components/services/widget/container";
import { useEffect, useState } from "react";
+import Container from "components/services/widget/container";
+
export default function Component({ service }) {
const [refreshTimer, setRefreshTimer] = useState(0);
diff --git a/src/widgets/immich/component.jsx b/src/widgets/immich/component.jsx
index 93cec3d73..cfbd7018d 100644
--- a/src/widgets/immich/component.jsx
+++ b/src/widgets/immich/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/jackett/component.jsx b/src/widgets/jackett/component.jsx
index e27e5dd80..4df28f484 100644
--- a/src/widgets/jackett/component.jsx
+++ b/src/widgets/jackett/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/jdownloader/component.jsx b/src/widgets/jdownloader/component.jsx
index f1b96b98f..c529dbd99 100644
--- a/src/widgets/jdownloader/component.jsx
+++ b/src/widgets/jdownloader/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/jellyfin/component.jsx b/src/widgets/jellyfin/component.jsx
index 8c32bb69c..40158d0a4 100644
--- a/src/widgets/jellyfin/component.jsx
+++ b/src/widgets/jellyfin/component.jsx
@@ -1,11 +1,14 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { BsCpu, BsFillCpuFill, BsFillPlayFill, BsPauseFill, BsVolumeMuteFill } from "react-icons/bs";
import { MdOutlineSmartDisplay } from "react-icons/md";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
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..b11c77c15 100644
--- a/src/widgets/jellystat/component.jsx
+++ b/src/widgets/jellystat/component.jsx
@@ -1,15 +1,14 @@
import Block from "components/services/widget/block";
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..59d3847c9 100644
--- a/src/widgets/karakeep/component.jsx
+++ b/src/widgets/karakeep/component.jsx
@@ -1,14 +1,15 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 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/kavita/component.jsx b/src/widgets/kavita/component.jsx
index a2a8b5a84..322ac5edf 100644
--- a/src/widgets/kavita/component.jsx
+++ b/src/widgets/kavita/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/komga/component.jsx b/src/widgets/komga/component.jsx
index 968de42c0..f28e0e79f 100644
--- a/src/widgets/komga/component.jsx
+++ b/src/widgets/komga/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/komodo/component.jsx b/src/widgets/komodo/component.jsx
index b1d9e0c64..14fd80392 100644
--- a/src/widgets/komodo/component.jsx
+++ b/src/widgets/komodo/component.jsx
@@ -1,13 +1,23 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
-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/kopia/component.jsx b/src/widgets/kopia/component.jsx
index c0ba78da6..424b99157 100755
--- a/src/widgets/kopia/component.jsx
+++ b/src/widgets/kopia/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function relativeDate(date) {
diff --git a/src/widgets/kubernetes/component.jsx b/src/widgets/kubernetes/component.jsx
index 6bae67f2e..0742529d5 100644
--- a/src/widgets/kubernetes/component.jsx
+++ b/src/widgets/kubernetes/component.jsx
@@ -1,8 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useSWR from "swr";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+
export default function Component({ service }) {
const { t } = useTranslation();
diff --git a/src/widgets/lidarr/component.jsx b/src/widgets/lidarr/component.jsx
index 161f00c98..8de556803 100644
--- a/src/widgets/lidarr/component.jsx
+++ b/src/widgets/lidarr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/linkwarden/component.jsx b/src/widgets/linkwarden/component.jsx
index 4bf449470..3ae7e8c19 100644
--- a/src/widgets/linkwarden/component.jsx
+++ b/src/widgets/linkwarden/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/lubelogger/component.jsx b/src/widgets/lubelogger/component.jsx
index 967924619..b84af3b7e 100644
--- a/src/widgets/lubelogger/component.jsx
+++ b/src/widgets/lubelogger/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/mailcow/component.jsx b/src/widgets/mailcow/component.jsx
index af2f863d5..b460d1c98 100644
--- a/src/widgets/mailcow/component.jsx
+++ b/src/widgets/mailcow/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/maintainerr/component.jsx b/src/widgets/maintainerr/component.jsx
index 83600afe5..d62b4d30c 100644
--- a/src/widgets/maintainerr/component.jsx
+++ b/src/widgets/maintainerr/component.jsx
@@ -1,22 +1,17 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
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/mastodon/component.jsx b/src/widgets/mastodon/component.jsx
index dc222bcba..e9bda6488 100644
--- a/src/widgets/mastodon/component.jsx
+++ b/src/widgets/mastodon/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/mealie/component.jsx b/src/widgets/mealie/component.jsx
index 69b2cccf3..795eeeb87 100644
--- a/src/widgets/mealie/component.jsx
+++ b/src/widgets/mealie/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/medusa/component.jsx b/src/widgets/medusa/component.jsx
index fe4c69796..aa46dc99f 100644
--- a/src/widgets/medusa/component.jsx
+++ b/src/widgets/medusa/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/mikrotik/component.jsx b/src/widgets/mikrotik/component.jsx
index 00f2edc92..c8dd141a6 100644
--- a/src/widgets/mikrotik/component.jsx
+++ b/src/widgets/mikrotik/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/minecraft/component.jsx b/src/widgets/minecraft/component.jsx
index 1e6698a63..912febef0 100644
--- a/src/widgets/minecraft/component.jsx
+++ b/src/widgets/minecraft/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/miniflux/component.jsx b/src/widgets/miniflux/component.jsx
index c3dc0954c..965e6f5b0 100644
--- a/src/widgets/miniflux/component.jsx
+++ b/src/widgets/miniflux/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/moonraker/component.jsx b/src/widgets/moonraker/component.jsx
index f2576d78c..04553bda4 100644
--- a/src/widgets/moonraker/component.jsx
+++ b/src/widgets/moonraker/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/mylar/component.jsx b/src/widgets/mylar/component.jsx
index d6175af46..609e99130 100644
--- a/src/widgets/mylar/component.jsx
+++ b/src/widgets/mylar/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/myspeed/component.jsx b/src/widgets/myspeed/component.jsx
index 5b7e225a6..45de95a32 100644
--- a/src/widgets/myspeed/component.jsx
+++ b/src/widgets/myspeed/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/navidrome/component.jsx b/src/widgets/navidrome/component.jsx
index 8427d930f..2c59c7957 100644
--- a/src/widgets/navidrome/component.jsx
+++ b/src/widgets/navidrome/component.jsx
@@ -1,6 +1,6 @@
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
function SinglePlayingEntry({ entry }) {
diff --git a/src/widgets/netalertx/component.jsx b/src/widgets/netalertx/component.jsx
index 280425806..f494abd55 100644
--- a/src/widgets/netalertx/component.jsx
+++ b/src/widgets/netalertx/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/netdata/component.jsx b/src/widgets/netdata/component.jsx
index 1e1811a7e..c675d1bf2 100644
--- a/src/widgets/netdata/component.jsx
+++ b/src/widgets/netdata/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/nextcloud/component.jsx b/src/widgets/nextcloud/component.jsx
index e3fb0948f..e30fd893a 100755
--- a/src/widgets/nextcloud/component.jsx
+++ b/src/widgets/nextcloud/component.jsx
@@ -1,8 +1,8 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { useMemo } from "react";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/nextdns/component.jsx b/src/widgets/nextdns/component.jsx
index 2fd5effc6..22612b197 100644
--- a/src/widgets/nextdns/component.jsx
+++ b/src/widgets/nextdns/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/npm/component.jsx b/src/widgets/npm/component.jsx
index 54e123a8d..032b8ba54 100644
--- a/src/widgets/npm/component.jsx
+++ b/src/widgets/npm/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/ntfy/component.jsx b/src/widgets/ntfy/component.jsx
index 2dcdd2754..239510b20 100644
--- a/src/widgets/ntfy/component.jsx
+++ b/src/widgets/ntfy/component.jsx
@@ -1,8 +1,11 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
+
+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/nzbget/component.jsx b/src/widgets/nzbget/component.jsx
index 24e480976..3606e0bd8 100644
--- a/src/widgets/nzbget/component.jsx
+++ b/src/widgets/nzbget/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/octoprint/component.jsx b/src/widgets/octoprint/component.jsx
index e6b138091..0844306e7 100644
--- a/src/widgets/octoprint/component.jsx
+++ b/src/widgets/octoprint/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
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/ombi/component.jsx b/src/widgets/ombi/component.jsx
index 859c01aa7..acefcfbf3 100644
--- a/src/widgets/ombi/component.jsx
+++ b/src/widgets/ombi/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/opendtu/component.jsx b/src/widgets/opendtu/component.jsx
index 4ded47896..00e446c62 100644
--- a/src/widgets/opendtu/component.jsx
+++ b/src/widgets/opendtu/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/openmediavault/methods/downloader_get_downloadlist.jsx b/src/widgets/openmediavault/methods/downloader_get_downloadlist.jsx
index 7caf34265..712ea0272 100644
--- a/src/widgets/openmediavault/methods/downloader_get_downloadlist.jsx
+++ b/src/widgets/openmediavault/methods/downloader_get_downloadlist.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
const downloadReduce = (acc, e) => {
diff --git a/src/widgets/openmediavault/methods/services_get_status.jsx b/src/widgets/openmediavault/methods/services_get_status.jsx
index 7ab0f8c1a..daa18e61c 100644
--- a/src/widgets/openmediavault/methods/services_get_status.jsx
+++ b/src/widgets/openmediavault/methods/services_get_status.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
const isRunningReduce = (acc, e) => {
diff --git a/src/widgets/openmediavault/methods/smart_get_list.jsx b/src/widgets/openmediavault/methods/smart_get_list.jsx
index 4998c02fa..c3cd0a4d3 100644
--- a/src/widgets/openmediavault/methods/smart_get_list.jsx
+++ b/src/widgets/openmediavault/methods/smart_get_list.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
const passedReduce = (acc, e) => {
diff --git a/src/widgets/openwrt/methods/interface.jsx b/src/widgets/openwrt/methods/interface.jsx
index 0e7c773bd..00e456111 100644
--- a/src/widgets/openwrt/methods/interface.jsx
+++ b/src/widgets/openwrt/methods/interface.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/openwrt/methods/system.jsx b/src/widgets/openwrt/methods/system.jsx
index f0bf86106..3d3068886 100644
--- a/src/widgets/openwrt/methods/system.jsx
+++ b/src/widgets/openwrt/methods/system.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/opnsense/component.jsx b/src/widgets/opnsense/component.jsx
index b60af25ca..26c5cbd2a 100644
--- a/src/widgets/opnsense/component.jsx
+++ b/src/widgets/opnsense/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/overseerr/component.jsx b/src/widgets/overseerr/component.jsx
index 47ae32dcc..1961498a9 100644
--- a/src/widgets/overseerr/component.jsx
+++ b/src/widgets/overseerr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/pangolin/component.jsx b/src/widgets/pangolin/component.jsx
index 3724cf9f5..009fdd8be 100644
--- a/src/widgets/pangolin/component.jsx
+++ b/src/widgets/pangolin/component.jsx
@@ -1,21 +1,17 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
-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/paperlessngx/component.jsx b/src/widgets/paperlessngx/component.jsx
index bafc2e99f..acc2f1e2e 100644
--- a/src/widgets/paperlessngx/component.jsx
+++ b/src/widgets/paperlessngx/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/peanut/component.jsx b/src/widgets/peanut/component.jsx
index e7767249d..8ff6b05b5 100644
--- a/src/widgets/peanut/component.jsx
+++ b/src/widgets/peanut/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
@@ -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/pfsense/component.jsx b/src/widgets/pfsense/component.jsx
index f4ff2792d..662693bc7 100644
--- a/src/widgets/pfsense/component.jsx
+++ b/src/widgets/pfsense/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/photoprism/component.jsx b/src/widgets/photoprism/component.jsx
index 2dc53c58d..70afe3711 100644
--- a/src/widgets/photoprism/component.jsx
+++ b/src/widgets/photoprism/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/pihole/component.jsx b/src/widgets/pihole/component.jsx
index 04b3a64a6..ca74d11e5 100644
--- a/src/widgets/pihole/component.jsx
+++ b/src/widgets/pihole/component.jsx
@@ -1,12 +1,16 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 = ["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/plantit/component.jsx b/src/widgets/plantit/component.jsx
index d4c136f06..c2a4bda3c 100644
--- a/src/widgets/plantit/component.jsx
+++ b/src/widgets/plantit/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/plex/component.jsx b/src/widgets/plex/component.jsx
index 96ad70328..63248012e 100644
--- a/src/widgets/plex/component.jsx
+++ b/src/widgets/plex/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/portainer/component.jsx b/src/widgets/portainer/component.jsx
index c0c212cfd..50b3fa2be 100644
--- a/src/widgets/portainer/component.jsx
+++ b/src/widgets/portainer/component.jsx
@@ -1,15 +1,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/prometheus/component.jsx b/src/widgets/prometheus/component.jsx
index 027d16785..36f68b837 100644
--- a/src/widgets/prometheus/component.jsx
+++ b/src/widgets/prometheus/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/prometheusmetric/component.jsx b/src/widgets/prometheusmetric/component.jsx
index 05978db41..e0c7b078f 100644
--- a/src/widgets/prometheusmetric/component.jsx
+++ b/src/widgets/prometheusmetric/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function formatValue(t, metric, rawValue) {
@@ -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/prowlarr/component.jsx b/src/widgets/prowlarr/component.jsx
index 9a9a8e66b..2d3d8e0dc 100644
--- a/src/widgets/prowlarr/component.jsx
+++ b/src/widgets/prowlarr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/proxmox/component.jsx b/src/widgets/proxmox/component.jsx
index e238fadac..54333c0af 100644
--- a/src/widgets/proxmox/component.jsx
+++ b/src/widgets/proxmox/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function calcRunning(total, current) {
diff --git a/src/widgets/proxmoxbackupserver/component.jsx b/src/widgets/proxmoxbackupserver/component.jsx
index 0b4d8f315..387a74932 100644
--- a/src/widgets/proxmoxbackupserver/component.jsx
+++ b/src/widgets/proxmoxbackupserver/component.jsx
@@ -1,21 +1,29 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+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/proxmoxvm/component.jsx b/src/widgets/proxmoxvm/component.jsx
index ab50ed672..3722a7d14 100644
--- a/src/widgets/proxmoxvm/component.jsx
+++ b/src/widgets/proxmoxvm/component.jsx
@@ -1,8 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useSWR from "swr";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+
export default function ProxmoxVM({ service }) {
const { t } = useTranslation();
diff --git a/src/widgets/pterodactyl/component.jsx b/src/widgets/pterodactyl/component.jsx
index 9a702eeff..1e88098f1 100644
--- a/src/widgets/pterodactyl/component.jsx
+++ b/src/widgets/pterodactyl/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/pulse/component.jsx b/src/widgets/pulse/component.jsx
index 5ad757866..e4442c5e1 100644
--- a/src/widgets/pulse/component.jsx
+++ b/src/widgets/pulse/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
const ACTIVE_STATUSES = ["online", "running"];
diff --git a/src/widgets/pyload/component.jsx b/src/widgets/pyload/component.jsx
index b2729be2f..1842a0772 100644
--- a/src/widgets/pyload/component.jsx
+++ b/src/widgets/pyload/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/qbittorrent/component.jsx b/src/widgets/qbittorrent/component.jsx
index 97b393278..20e000f4c 100644
--- a/src/widgets/qbittorrent/component.jsx
+++ b/src/widgets/qbittorrent/component.jsx
@@ -1,9 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import QueueEntry from "../../components/widgets/queue/queueEntry";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/qnap/component.jsx b/src/widgets/qnap/component.jsx
index 7ac21f256..cd598bc27 100644
--- a/src/widgets/qnap/component.jsx
+++ b/src/widgets/qnap/component.jsx
@@ -1,9 +1,9 @@
/* eslint no-underscore-dangle: ["error", { "allow": ["_text", "_cdata"] }] */
+import { useTranslation } from "next-i18next/pages";
+
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-import { useTranslation } from "next-i18next/pages";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/radarr/component.jsx b/src/widgets/radarr/component.jsx
index 4f6f12480..c6e215ba2 100644
--- a/src/widgets/radarr/component.jsx
+++ b/src/widgets/radarr/component.jsx
@@ -1,9 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import QueueEntry from "../../components/widgets/queue/queueEntry";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
function getProgress(sizeLeft, size) {
diff --git a/src/widgets/readarr/component.jsx b/src/widgets/readarr/component.jsx
index 53bd05655..f41e3304b 100644
--- a/src/widgets/readarr/component.jsx
+++ b/src/widgets/readarr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/romm/component.jsx b/src/widgets/romm/component.jsx
index 222f8d4ae..12fe390ce 100644
--- a/src/widgets/romm/component.jsx
+++ b/src/widgets/romm/component.jsx
@@ -1,13 +1,14 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
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/rutorrent/component.jsx b/src/widgets/rutorrent/component.jsx
index d8dd9c0ba..9012f72b1 100644
--- a/src/widgets/rutorrent/component.jsx
+++ b/src/widgets/rutorrent/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/sabnzbd/component.jsx b/src/widgets/sabnzbd/component.jsx
index b5f9a2dfe..9f7ab6f58 100644
--- a/src/widgets/sabnzbd/component.jsx
+++ b/src/widgets/sabnzbd/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function fromUnits(value) {
diff --git a/src/widgets/scrutiny/component.jsx b/src/widgets/scrutiny/component.jsx
index dd870516a..443edad39 100644
--- a/src/widgets/scrutiny/component.jsx
+++ b/src/widgets/scrutiny/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
// @see https://github.com/AnalogJ/scrutiny/blob/d8d56f77f9e868127c4849dac74d65512db658e8/webapp/frontend/src/app/shared/device-status.pipe.ts
diff --git a/src/widgets/seerr/component.jsx b/src/widgets/seerr/component.jsx
index 95d72dc8a..2acae2031 100644
--- a/src/widgets/seerr/component.jsx
+++ b/src/widgets/seerr/component.jsx
@@ -1,14 +1,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 +29,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..7f9f77448 100644
--- a/src/widgets/slskd/component.jsx
+++ b/src/widgets/slskd/component.jsx
@@ -1,14 +1,15 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
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/sonarr/component.jsx b/src/widgets/sonarr/component.jsx
index fc3f9db7a..0fdb6e615 100644
--- a/src/widgets/sonarr/component.jsx
+++ b/src/widgets/sonarr/component.jsx
@@ -1,9 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import QueueEntry from "../../components/widgets/queue/queueEntry";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
function getProgress(sizeLeft, size) {
diff --git a/src/widgets/sparkyfitness/component.jsx b/src/widgets/sparkyfitness/component.jsx
index e156ef619..082d340a7 100644
--- a/src/widgets/sparkyfitness/component.jsx
+++ b/src/widgets/sparkyfitness/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/speedtest/component.jsx b/src/widgets/speedtest/component.jsx
index 67336d642..db2399669 100644
--- a/src/widgets/speedtest/component.jsx
+++ b/src/widgets/speedtest/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/spoolman/component.jsx b/src/widgets/spoolman/component.jsx
index a30b67f7e..9adad3ee2 100644
--- a/src/widgets/spoolman/component.jsx
+++ b/src/widgets/spoolman/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/sportarr/component.jsx b/src/widgets/sportarr/component.jsx
index 83b906ae4..43c472ba1 100644
--- a/src/widgets/sportarr/component.jsx
+++ b/src/widgets/sportarr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/stash/component.jsx b/src/widgets/stash/component.jsx
index 485e2401e..ee21ca1ed 100644
--- a/src/widgets/stash/component.jsx
+++ b/src/widgets/stash/component.jsx
@@ -1,26 +1,30 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { useEffect, useState } from "react";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
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/stocks/component.jsx b/src/widgets/stocks/component.jsx
index 632fcee50..6c608d2fa 100644
--- a/src/widgets/stocks/component.jsx
+++ b/src/widgets/stocks/component.jsx
@@ -1,8 +1,8 @@
import classNames from "classnames";
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
function MarketStatus({ service }) {
diff --git a/src/widgets/strelaysrv/component.jsx b/src/widgets/strelaysrv/component.jsx
index 5412a27c5..21cc83633 100644
--- a/src/widgets/strelaysrv/component.jsx
+++ b/src/widgets/strelaysrv/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/suwayomi/component.jsx b/src/widgets/suwayomi/component.jsx
index f321d46d7..dd4623604 100644
--- a/src/widgets/suwayomi/component.jsx
+++ b/src/widgets/suwayomi/component.jsx
@@ -1,12 +1,16 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 = ["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/swagdashboard/component.jsx b/src/widgets/swagdashboard/component.jsx
index 4220e3c8e..f08a6862b 100644
--- a/src/widgets/swagdashboard/component.jsx
+++ b/src/widgets/swagdashboard/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/syncthing/component.jsx b/src/widgets/syncthing/component.jsx
index e83c8a246..93ba002e1 100644
--- a/src/widgets/syncthing/component.jsx
+++ b/src/widgets/syncthing/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/tailscale/component.jsx b/src/widgets/tailscale/component.jsx
index dfba539fc..7be822fbd 100644
--- a/src/widgets/tailscale/component.jsx
+++ b/src/widgets/tailscale/component.jsx
@@ -1,12 +1,16 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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 = ["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/tandoor/component.jsx b/src/widgets/tandoor/component.jsx
index d7f8ead72..5990b2153 100644
--- a/src/widgets/tandoor/component.jsx
+++ b/src/widgets/tandoor/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/tautulli/component.jsx b/src/widgets/tautulli/component.jsx
index ea4edf7d4..bb913fc95 100644
--- a/src/widgets/tautulli/component.jsx
+++ b/src/widgets/tautulli/component.jsx
@@ -1,8 +1,8 @@
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { BsCpu, BsFillCpuFill, BsFillPlayFill, BsPauseFill } from "react-icons/bs";
import { MdOutlineSmartDisplay, MdSmartDisplay } from "react-icons/md";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
function millisecondsToTime(milliseconds) {
@@ -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/tdarr/component.jsx b/src/widgets/tdarr/component.jsx
index 3d362f452..4730fd3f2 100644
--- a/src/widgets/tdarr/component.jsx
+++ b/src/widgets/tdarr/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/technitium/component.jsx b/src/widgets/technitium/component.jsx
index d0307b0ba..cb9007984 100644
--- a/src/widgets/technitium/component.jsx
+++ b/src/widgets/technitium/component.jsx
@@ -1,16 +1,16 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
-
-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..d3ff06c23 100644
--- a/src/widgets/tracearr/component.jsx
+++ b/src/widgets/tracearr/component.jsx
@@ -1,9 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { BsCpu, BsFillCpuFill, BsFillPlayFill, BsPauseFill } from "react-icons/bs";
import { MdOutlineSmartDisplay, MdSmartDisplay } from "react-icons/md";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
function millisecondsToTime(milliseconds) {
@@ -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/traefik/component.jsx b/src/widgets/traefik/component.jsx
index e4b3b46ba..6b45a4772 100644
--- a/src/widgets/traefik/component.jsx
+++ b/src/widgets/traefik/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/transmission/component.jsx b/src/widgets/transmission/component.jsx
index 0650e41d0..65ae33e4e 100644
--- a/src/widgets/transmission/component.jsx
+++ b/src/widgets/transmission/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/trilium/component.jsx b/src/widgets/trilium/component.jsx
index 7b83a6ab3..528941efd 100644
--- a/src/widgets/trilium/component.jsx
+++ b/src/widgets/trilium/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/truenas/component.jsx b/src/widgets/truenas/component.jsx
index cb5891267..f712b4b03 100644
--- a/src/widgets/truenas/component.jsx
+++ b/src/widgets/truenas/component.jsx
@@ -1,9 +1,9 @@
+import { useTranslation } from "next-i18next/pages";
+
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-import { useTranslation } from "next-i18next/pages";
-import Pool from "widgets/truenas/pool";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
+import Pool from "widgets/truenas/pool";
export default function Component({ service }) {
const { t } = useTranslation();
diff --git a/src/widgets/tubearchivist/component.jsx b/src/widgets/tubearchivist/component.jsx
index 524dd83a3..5571b88d1 100644
--- a/src/widgets/tubearchivist/component.jsx
+++ b/src/widgets/tubearchivist/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/unifi/component.jsx b/src/widgets/unifi/component.jsx
index 11770fd36..d273b416f 100644
--- a/src/widgets/unifi/component.jsx
+++ b/src/widgets/unifi/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/unifi_drive/component.jsx b/src/widgets/unifi_drive/component.jsx
index 69a10d286..f211e5951 100644
--- a/src/widgets/unifi_drive/component.jsx
+++ b/src/widgets/unifi_drive/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/unmanic/component.jsx b/src/widgets/unmanic/component.jsx
index 12069e523..9cadf60c5 100644
--- a/src/widgets/unmanic/component.jsx
+++ b/src/widgets/unmanic/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useEffect, useState } from "react";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import { formatProxyUrl } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
diff --git a/src/widgets/unraid/component.jsx b/src/widgets/unraid/component.jsx
index 99ec6244c..e64772c11 100644
--- a/src/widgets/unraid/component.jsx
+++ b/src/widgets/unraid/component.jsx
@@ -1,11 +1,11 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
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/uptimekuma/component.jsx b/src/widgets/uptimekuma/component.jsx
index 5c35bb539..6d144a7b8 100644
--- a/src/widgets/uptimekuma/component.jsx
+++ b/src/widgets/uptimekuma/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/uptimerobot/component.jsx b/src/widgets/uptimerobot/component.jsx
index 2ed5c460c..071d0287f 100644
--- a/src/widgets/uptimerobot/component.jsx
+++ b/src/widgets/uptimerobot/component.jsx
@@ -1,8 +1,8 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { useEffect, useState } from "react";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import { formatProxyUrl } from "utils/proxy/api-helpers";
export default function Component({ service }) {
diff --git a/src/widgets/urbackup/component.jsx b/src/widgets/urbackup/component.jsx
index 2d6729953..09c3198e4 100644
--- a/src/widgets/urbackup/component.jsx
+++ b/src/widgets/urbackup/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
const Status = Object.freeze({
diff --git a/src/widgets/vikunja/component.jsx b/src/widgets/vikunja/component.jsx
index 186c80905..b35739cd3 100644
--- a/src/widgets/vikunja/component.jsx
+++ b/src/widgets/vikunja/component.jsx
@@ -1,11 +1,15 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+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..08dda6ba8 100644
--- a/src/widgets/wallos/component.jsx
+++ b/src/widgets/wallos/component.jsx
@@ -1,10 +1,11 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
-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/watchtower/component.jsx b/src/widgets/watchtower/component.jsx
index 967ad3e31..5f89ca788 100644
--- a/src/widgets/watchtower/component.jsx
+++ b/src/widgets/watchtower/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/wgeasy/component.jsx b/src/widgets/wgeasy/component.jsx
index 338d94cc1..705f4e9b5 100644
--- a/src/widgets/wgeasy/component.jsx
+++ b/src/widgets/wgeasy/component.jsx
@@ -1,19 +1,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/whatsupdocker/component.jsx b/src/widgets/whatsupdocker/component.jsx
index cc3b51740..1b8b3eda5 100644
--- a/src/widgets/whatsupdocker/component.jsx
+++ b/src/widgets/whatsupdocker/component.jsx
@@ -1,6 +1,5 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
-
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
diff --git a/src/widgets/xteve/component.jsx b/src/widgets/xteve/component.jsx
index 5e2b1c1d5..ca5cf19f1 100644
--- a/src/widgets/xteve/component.jsx
+++ b/src/widgets/xteve/component.jsx
@@ -1,7 +1,7 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
export default function Component({ service }) {
diff --git a/src/widgets/yourspotify/component.jsx b/src/widgets/yourspotify/component.jsx
index b028a9186..4554ea2ff 100644
--- a/src/widgets/yourspotify/component.jsx
+++ b/src/widgets/yourspotify/component.jsx
@@ -1,8 +1,8 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import { useMemo } from "react";
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
function getStartDate(interval) {
diff --git a/src/widgets/zabbix/component.jsx b/src/widgets/zabbix/component.jsx
index 397de7f18..a8788fa00 100644
--- a/src/widgets/zabbix/component.jsx
+++ b/src/widgets/zabbix/component.jsx
@@ -1,8 +1,9 @@
-import Block from "components/services/widget/block";
-import Container from "components/services/widget/container";
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";
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();