vh/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2026-09-19 10:35:49 -07:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Chore: full react hooks eslint compliance (#7040)

Browse Source
This commit is contained in:
shamoon
2026-08-21 14:00:02 -07:00
committed by GitHub
parent 7c26cf6d97
commit 4c361422ca
111 changed files with 1072 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/widgets/authoring/getting-started.md
+1
View File
@@ -85,6 +85,7 @@ To ensure cohesiveness of various widgets, the following should be used as a gui
- Note that we reserve the right to decline widgets for projects that are very young (eg < ~1y) or those with a small reach (eg low GitHub stars). Again, this is in an effort to keep overall widget maintenance under control.
- Widgets should be only one row of blocks
- Widgets should be no more than 4 blocks wide and generally conform to the styling / design choices of other widgets
- Use `withWidgetFields(service, defaultFields)` from `utils/widget-fields` to apply default fields and cap configured fields without mutating the service. The helper limits widgets to 4 fields.
- Minimize the number of API calls
- Avoid the use of custom proxy unless absolutely necessary
- Widgets should be 'read-only', as in they should not make write changes using the relevant tool's API. Homepage widgets are designed to surface information, not to be a (usually worse) replacement for the tool itself.
eslint.config.mjs
-18
View File
@@ -65,24 +65,6 @@ export default defineConfig([
allowElseIf: true,
},
],
// Keep the pre-eslint-plugin-react-hooks v6 lint policy until rules are adopted incrementally
"react-hooks/config": "off",
"react-hooks/error-boundaries": "off",
"react-hooks/exhaustive-deps": "warn",
"react-hooks/gating": "off",
"react-hooks/globals": "off",
"react-hooks/immutability": "off",
"react-hooks/incompatible-library": "off",
"react-hooks/preserve-manual-memoization": "off",
"react-hooks/purity": "off",
"react-hooks/refs": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/set-state-in-effect": "off",
"react-hooks/set-state-in-render": "off",
"react-hooks/static-components": "off",
"react-hooks/unsupported-syntax": "off",
"react-hooks/use-memo": "off",
},
},
// Vitest tests often intentionally place imports after `vi.mock(...)` to ensure
public/images/solisquad.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 96 B

src/__tests__/pages/index.test.jsx
+38 -3
View File
@@ -1,6 +1,6 @@
// @vitest-environment jsdom
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { ColorContext } from "utils/contexts/color";
@@ -25,6 +25,7 @@ const {
throwIn: null,
validateData: [],
hashData: null,
hashConfig: null,
mutateHash: vi.fn(),
servicesData: [],
bookmarksData: [],
@@ -59,9 +60,12 @@ const {
const serverSideTranslations = vi.fn(async (language) => ({ _translations: language }));
const logger = { error: vi.fn() };
const useSWR = vi.fn((key) => {
const useSWR = vi.fn((key, config) => {
if (key === "/api/validate") return { data: state.validateData };
if (key === "/api/hash") return { data: state.hashData, mutate: state.mutateHash };
if (key === "/api/hash") {
state.hashConfig = config;
return { data: state.hashData, mutate: state.mutateHash };
}
if (key === "/api/services") return { data: state.servicesData };
if (key === "/api/bookmarks") return { data: state.bookmarksData };
if (key === "/api/widgets") return { data: state.widgetsData };
@@ -172,6 +176,7 @@ describe("pages/index getStaticProps", () => {
state.throwIn = null;
state.validateData = [];
state.hashData = null;
state.hashConfig = null;
state.servicesData = [];
state.bookmarksData = [];
state.widgetsData = [];
@@ -351,6 +356,7 @@ describe("pages/index Index routing + SWR branches", () => {
}
await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
act(() => state.hashConfig.onSuccess(state.hashData));
await waitFor(() => {
expect(fetchSpy).toHaveBeenCalledWith("/api/revalidate");
@@ -379,11 +385,24 @@ describe("pages/index Index routing + SWR branches", () => {
localStorage.removeItem("hash");
await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
act(() => state.hashConfig.onSuccess(state.hashData));
await waitFor(() => {
expect(localStorage.getItem("hash")).toBe("first-hash");
});
});
it("ignores a hash response without a hash", async () => {
state.validateData = [];
localStorage.setItem("hash", "old-hash");
await renderIndex({ initialSettings: { title: "Homepage", layout: {} }, settings: { layout: {} } });
expect(() => act(() => state.hashConfig.onSuccess(null))).not.toThrow();
expect(() => act(() => state.hashConfig.onSuccess({}))).not.toThrow();
expect(localStorage.getItem("hash")).toBe("old-hash");
expect(document.querySelector(".animate-spin")).toBeFalsy();
});
});
describe("pages/index Home behavior", () => {
@@ -419,11 +438,27 @@ describe("pages/index Home behavior", () => {
fireEvent.keyDown(document.body, { key: "a" });
expect(screen.getByTestId("quicklaunch")).toHaveTextContent("open:3");
expect(state.quickLaunchProps.searchString).toBe("a");
fireEvent.keyDown(document.body, { key: "Escape" });
expect(screen.getByTestId("quicklaunch")).toHaveTextContent("closed:3");
});
it("opens search on space without seeding the query with whitespace", async () => {
await renderIndex({
initialSettings: { title: "Homepage", layout: {} },
settings: { title: "Homepage", layout: {}, language: "en" },
});
await waitFor(() => {
expect(state.quickLaunchProps).toBeTruthy();
});
fireEvent.keyDown(document.body, { key: " " });
expect(screen.getByTestId("quicklaunch")).toHaveTextContent("open:3");
expect(state.quickLaunchProps.searchString).toBe("");
});
it("renders services and bookmark groups when present", async () => {
await renderIndex({
initialSettings: { title: "Homepage", layout: {} },
src/components/quicklaunch.jsx
+116 -98
View File
@@ -15,6 +15,59 @@ const MOBILE_BUTTON_POSITIONS = {
"bottom-right": "bottom-4 right-4",
};
function getSearchResults({
hideVisitURL,
searchDescriptions,
searchProvider,
searchString,
searchSuggestions,
servicesAndBookmarks,
t,
url,
}) {
if (searchString.trim().length === 0) return [];
const results = servicesAndBookmarks.flatMap((result) => {
const nameMatch = result.name.toLowerCase().includes(searchString);
const descriptionMatch = searchDescriptions && result.description?.toLowerCase().includes(searchString);
if (!nameMatch && !descriptionMatch) return [];
return [{ ...result, ...(searchDescriptions && { priority: nameMatch ? 2 : +descriptionMatch }) }];
});
if (searchDescriptions) {
results.sort((a, b) => b.priority - a.priority);
}
if (searchProvider) {
results.push({
href: searchProvider.url + encodeURIComponent(searchString),
name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")}`,
type: "search",
});
if (searchProvider.showSearchSuggestions && searchProvider.suggestionUrl && searchSuggestions[1]) {
results.push(
...searchSuggestions[1].map((suggestion) => ({
href: searchProvider.url + encodeURIComponent(suggestion),
name: suggestion,
type: "searchSuggestion",
})),
);
}
}
if (!hideVisitURL && url) {
results.unshift({
href: url.toString(),
name: `${t("quicklaunch.visit")} URL`,
type: "url",
});
}
return results;
}
export default function QuickLaunch({ servicesAndBookmarks, searchString, setSearchString, isOpen, setSearching }) {
const { t } = useTranslation();
@@ -23,7 +76,6 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
const searchField = useRef();
const [results, setResults] = useState([]);
const [currentItemIndex, setCurrentItemIndex] = useState(null);
const [url, setUrl] = useState(null);
const [searchSuggestions, setSearchSuggestions] = useState([]);
@@ -62,7 +114,7 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
: null;
function openCurrentItem(newWindow) {
const result = results[currentItemIndex];
const result = results[activeItemIndex];
window.open(
result.href,
newWindow ? "_blank" : (result.target ?? searchProvider?.target ?? settings.target ?? "_blank"),
@@ -81,6 +133,7 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
function handleSearchChange(event) {
const rawSearchString = event.target.value;
setCurrentItemIndex(null);
try {
if (!/.+[.:].+/g.test(rawSearchString)) throw new Error(); // basic test for probably a url
let urlString = rawSearchString;
@@ -103,18 +156,19 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
} else if (event.key === "Enter" && results.length) {
closeAndReset();
openCurrentItem(event.metaKey);
} else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) {
setCurrentItemIndex(currentItemIndex + 1);
} else if (event.key === "ArrowDown" && results[activeItemIndex + 1]) {
setCurrentItemIndex(activeItemIndex + 1);
event.preventDefault();
} else if (event.key === "ArrowUp" && currentItemIndex > 0) {
setCurrentItemIndex(currentItemIndex - 1);
} else if (event.key === "ArrowUp" && activeItemIndex > 0) {
setCurrentItemIndex(activeItemIndex - 1);
event.preventDefault();
} else if (
event.key === "ArrowRight" &&
results[currentItemIndex] &&
results[currentItemIndex].type === "searchSuggestion"
results[activeItemIndex] &&
results[activeItemIndex].type === "searchSuggestion"
) {
setSearchString(results[currentItemIndex].name);
setCurrentItemIndex(null);
setSearchString(results[activeItemIndex].name);
}
}
@@ -138,88 +192,51 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
}
useEffect(() => {
const abortController = new AbortController();
if (searchString.trim().length === 0) setResults([]);
else {
let newResults = servicesAndBookmarks.filter((r) => {
const nameMatch = r.name.toLowerCase().includes(searchString);
let descriptionMatch;
if (searchDescriptions) {
descriptionMatch = r.description?.toLowerCase().includes(searchString);
r.priority = nameMatch ? 2 * +nameMatch : +descriptionMatch;
}
return nameMatch || descriptionMatch;
});
if (searchDescriptions) {
newResults = newResults.sort((a, b) => b.priority - a.priority);
}
if (searchProvider) {
newResults.push({
href: searchProvider.url + encodeURIComponent(searchString),
name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")}`,
type: "search",
});
if (searchProvider.showSearchSuggestions && searchProvider.suggestionUrl) {
if (searchString.trim() !== searchSuggestions[0]?.trim()) {
fetch(
`/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${
searchProvider.name ?? "Custom"
}`,
{ signal: abortController.signal },
)
.then(async (searchSuggestionResult) => {
const newSearchSuggestions = await searchSuggestionResult.json();
if (newSearchSuggestions) {
if (newSearchSuggestions[1].length > 4) {
newSearchSuggestions[1] = newSearchSuggestions[1].splice(0, 4);
}
setSearchSuggestions(newSearchSuggestions);
}
})
.catch(() => {
// If there is an error, just ignore it. There just will be no search suggestions.
});
}
if (searchSuggestions[1]) {
newResults = newResults.concat(
searchSuggestions[1].map((suggestion) => ({
href: searchProvider.url + encodeURIComponent(suggestion),
name: suggestion,
type: "searchSuggestion",
})),
);
}
}
}
if (!hideVisitURL && url) {
newResults.unshift({
href: url.toString(),
name: `${t("quicklaunch.visit")} URL`,
type: "url",
});
}
setResults(newResults);
if (newResults.length) {
setCurrentItemIndex(0);
}
if (
searchString.trim().length === 0 ||
!searchProvider?.showSearchSuggestions ||
!searchProvider.suggestionUrl ||
searchString.trim() === searchSuggestions[0]?.trim()
) {
return undefined;
}
return () => {
abortController.abort();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchString, servicesAndBookmarks, searchDescriptions, hideVisitURL, searchSuggestions, searchProvider, url]);
const abortController = new AbortController();
fetch(
`/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${
searchProvider.name ?? "Custom"
}`,
{ signal: abortController.signal },
)
.then(async (searchSuggestionResult) => {
const newSearchSuggestions = await searchSuggestionResult.json();
if (newSearchSuggestions) {
setCurrentItemIndex(null);
setSearchSuggestions([newSearchSuggestions[0], newSearchSuggestions[1].slice(0, 4)]);
}
})
.catch(() => {
// If there is an error, just ignore it. There just will be no search suggestions.
});
return () => abortController.abort();
}, [searchProvider, searchString, searchSuggestions]);
const results = getSearchResults({
hideVisitURL,
searchDescriptions,
searchProvider,
searchString,
searchSuggestions,
servicesAndBookmarks,
t,
url,
});
const activeItemIndex = currentItemIndex ?? (results.length ? 0 : null);
const [hidden, setHidden] = useState(true);
useEffect(() => {
function handleBackdropClick(event) {
if (event.target?.tagName === "DIV") closeAndReset();
@@ -228,14 +245,11 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
if (isOpen) {
searchField.current.focus();
document.body.addEventListener("click", handleBackdropClick);
setHidden(false);
} else {
document.body.removeEventListener("click", handleBackdropClick);
searchField.current.blur();
setTimeout(() => {
setHidden(true);
}, 300); // disable on close
}
return () => document.body.removeEventListener("click", handleBackdropClick);
}, [isOpen, closeAndReset]);
function highlightText(text) {
@@ -259,13 +273,17 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
<>
<div
className={classNames(
"relative z-40 ease-in-out duration-300 transition-opacity",
hidden && !isOpen && "hidden",
!hidden && isOpen && "opacity-100",
!isOpen && "opacity-0",
"relative z-40 ease-in-out",
isOpen ? "visible opacity-100" : "invisible opacity-0 pointer-events-none",
)}
style={{
transitionProperty: "opacity, visibility",
transitionDuration: "300ms, 0s",
transitionDelay: isOpen ? "0s, 0s" : "0s, 300ms",
}}
role="dialog"
aria-modal="true"
aria-hidden={!isOpen}
>
<div className="fixed inset-0 bg-gray-500 opacity-50" />
<div className="fixed inset-0 z-20 overflow-y-auto">
@@ -297,7 +315,7 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
onKeyDown={handleItemKeyDown}
className={classNames(
"flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
i === activeItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
)}
>
<div className="flex flex-row items-center mr-4 pointer-events-none">
src/components/widgets/datetime/datetime.jsx
+6 -11
View File
@@ -1,9 +1,11 @@
import { useTranslation } from "next-i18next/pages";
import { useEffect, useState } from "react";
import { useMemo } from "react";
import Container from "../widget/container";
import Raw from "../widget/raw";
import useCurrentTime from "utils/hooks/use-current-time";
const textSizes = {
"4xl": "text-4xl",
"3xl": "text-3xl",
@@ -18,17 +20,10 @@ const textSizes = {
export default function DateTime({ options }) {
const { text_size: textSize, locale, format } = options;
const { i18n } = useTranslation();
const [date, setDate] = useState("");
const dateLocale = locale ?? i18n.language;
useEffect(() => {
const dateFormat = new Intl.DateTimeFormat(dateLocale, { ...format });
setDate(dateFormat.format(new Date()));
const interval = setInterval(() => {
setDate(dateFormat.format(new Date()));
}, 1000);
return () => clearInterval(interval);
}, [date, setDate, dateLocale, format]);
const currentTime = useCurrentTime(1000);
const dateFormatter = useMemo(() => new Intl.DateTimeFormat(dateLocale, { ...format }), [dateLocale, format]);
const date = currentTime === null ? "" : dateFormatter.format(new Date(currentTime));
return (
<Container options={options} additionalClassNames="information-widget-datetime">
src/components/widgets/resources/network.jsx
+2 -2
View File
@@ -7,9 +7,9 @@ import Resource from "../widget/resource";
export default function Network({ options, refresh = 1500 }) {
const { t } = useTranslation();
if (options.network === true) options.network = "default";
const network = options.network === true ? "default" : options.network;
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${network}`, {
refreshInterval: refresh,
});
src/components/widgets/resources/network.test.jsx
+3 -1
View File
@@ -22,10 +22,12 @@ describe("components/widgets/resources/network", () => {
it("normalizes options.network=true to default interfaceName in the request", () => {
useSWR.mockReturnValue({ data: undefined, error: undefined });
const options = Object.freeze({ network: true });
render(<Network options={{ network: true }} />);
render(<Network options={options} />);
expect(useSWR).toHaveBeenCalledWith(expect.stringContaining("interfaceName=default"), expect.any(Object));
expect(options.network).toBe(true);
});
it("renders rates and usage percentage when data is present", () => {
src/components/widgets/search/search.jsx
+37 -43
View File
@@ -11,7 +11,7 @@ import {
} from "@headlessui/react";
import classNames from "classnames";
import { useTranslation } from "next-i18next/pages";
import { Fragment, useEffect, useMemo, useState } from "react";
import { Fragment, useEffect, useMemo, useState, useSyncExternalStore } from "react";
import { BiLogoBing } from "react-icons/bi";
import { FiSearch } from "react-icons/fi";
import { SiBaidu, SiBrave, SiDuckduckgo, SiGoogle } from "react-icons/si";
@@ -79,24 +79,32 @@ export function getStoredProvider() {
return null;
}
function subscribeToStoredProvider(onStoreChange) {
const handleStorage = (event) => {
if (event.key === localStorageKey) onStoreChange();
};
window.addEventListener("storage", handleStorage);
return () => window.removeEventListener("storage", handleStorage);
}
export default function Search({ options }) {
const { t } = useTranslation();
// options is a fresh object each render, so memo on provider itself
const availableProviderIds = useMemo(() => getAvailableProviderIds(options.provider) ?? [], [options.provider]);
const storedProvider = useSyncExternalStore(subscribeToStoredProvider, getStoredProvider, () => null);
const storedProviderId = Object.keys(searchProviders).find(
(providerId) => searchProviders[providerId] === storedProvider,
);
const initialProvider = availableProviderIds.includes(storedProviderId)
? storedProvider
: searchProviders[availableProviderIds[0] ?? "google"];
const [query, setQuery] = useState("");
const [selectedProvider, setSelectedProvider] = useState(searchProviders[availableProviderIds[0] ?? "google"]);
const [providerOverride, setProviderOverride] = useState(null);
const [searchSuggestions, setSearchSuggestions] = useState([]);
useEffect(() => {
const storedProvider = getStoredProvider();
let storedProviderKey = null;
storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider);
if (storedProvider && availableProviderIds.includes(storedProviderKey)) {
setSelectedProvider(storedProvider);
}
}, [availableProviderIds]);
const selectedProvider = providerOverride ?? initialProvider;
useEffect(() => {
const abortController = new AbortController();
@@ -130,8 +138,6 @@ export default function Search({ options }) {
};
}, [selectedProvider, options, query, searchSuggestions]);
let currentSuggestion;
function doSearch(value) {
const q = encodeURIComponent(value);
const { url } = selectedProvider;
@@ -142,13 +148,11 @@ export default function Search({ options }) {
}
setQuery("");
currentSuggestion = null;
}
const handleSearchKeyDown = (event) => {
const useSuggestion = searchSuggestions.length && currentSuggestion;
if (event.key === "Enter") {
doSearch(useSuggestion ? currentSuggestion : event.target.value);
if (event.key === "Enter" && !searchSuggestions[1]?.length) {
doSearch(event.target.value);
}
};
@@ -157,7 +161,7 @@ export default function Search({ options }) {
}
const onChangeProvider = (provider) => {
setSelectedProvider(provider);
setProviderOverride(provider);
localStorage.setItem(localStorageKey, provider.name);
};
@@ -166,7 +170,7 @@ export default function Search({ options }) {
<Raw>
<div className="flex-col relative h-8 my-4 min-w-fit z-20">
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
<Combobox value={query}>
<Combobox value={query} onChange={doSearch}>
<ComboboxInput
type="text"
className="
@@ -250,30 +254,20 @@ export default function Search({ options }) {
<div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs">
<ComboboxOption key={query} value={query} />
{searchSuggestions[1].map((suggestion) => (
<ComboboxOption
key={suggestion}
value={suggestion}
onMouseDown={() => {
doSearch(suggestion);
}}
className="flex w-full"
>
{({ active }) => {
if (active) currentSuggestion = suggestion;
return (
<div
className={classNames(
"px-2 py-1 rounded-md w-full flex-nowrap",
active ? "bg-theme-300/20 dark:bg-white/10" : "",
)}
>
<span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
<span className="mr-4 whitespace-pre opacity-50">
{suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
</span>
</div>
);
}}
<ComboboxOption key={suggestion} value={suggestion} className="flex w-full">
{({ active }) => (
<div
className={classNames(
"px-2 py-1 rounded-md w-full flex-nowrap",
active ? "bg-theme-300/20 dark:bg-white/10" : "",
)}
>
<span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
<span className="mr-4 whitespace-pre opacity-50">
{suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
</span>
</div>
)}
</ComboboxOption>
))}
</div>
src/components/widgets/search/search.test.jsx
+15 -2
View File
@@ -9,6 +9,7 @@ import { renderWithProviders } from "test-utils/render-with-providers";
vi.mock("@headlessui/react", async () => {
const React = await import("react");
const { Fragment, createContext, useContext } = React;
const ComboboxContext = createContext(null);
const ListboxContext = createContext(null);
function passthrough({ as: As = "div", children, ...props }) {
@@ -18,9 +19,21 @@ vi.mock("@headlessui/react", async () => {
}
return {
Combobox: passthrough,
Combobox: ({ onChange, children }) => (
<ComboboxContext.Provider value={{ onChange }}>
<div>{children}</div>
</ComboboxContext.Provider>
),
ComboboxInput: (props) => <input {...props} />,
ComboboxOption: passthrough,
ComboboxOption: ({ as: As = "div", value, children, ...props }) => {
const ctx = useContext(ComboboxContext);
const content = typeof children === "function" ? children({ active: false }) : children;
return (
<As value={value} onMouseDown={() => ctx?.onChange?.(value)} {...props}>
{content}
</As>
);
},
ComboboxOptions: passthrough,
Listbox: ({ value, onChange, children, ...props }) => (
<ListboxContext.Provider value={{ value, onChange }}>
src/components/widgets/unifi_console/unifi_console.jsx
+12 -12
View File
@@ -14,11 +14,11 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Widget({ options }) {
const { t } = useTranslation();
options.service_group = options.service_name = "unifi_console";
const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });
const widgetOptions = { ...options, service_group: "unifi_console", service_name: "unifi_console" };
const { data: statsData, error: statsError } = useWidgetAPI(widgetOptions, "stat/sites", { index: options.index });
if (statsError) {
return <Error options={options} />;
return <Error options={widgetOptions} />;
}
const defaultSite = options.site
@@ -27,27 +27,27 @@ export default function Widget({ options }) {
if (!defaultSite) {
return (
<Container options={options} additionalClassNames="information-widget-unifi-console">
<Container options={widgetOptions} additionalClassNames="information-widget-unifi-console">
<PrimaryText>{t("unifi.wait")}</PrimaryText>
<WidgetIcon icon={SiUbiquiti} />
</Container>
);
}
const wan = defaultSite.health.find((h) => h.subsystem === "wan");
const lan = defaultSite.health.find((h) => h.subsystem === "lan");
const wlan = defaultSite.health.find((h) => h.subsystem === "wlan");
[wan, lan, wlan].forEach((s) => {
s.up = s.status === "ok";
s.show = s.status !== "unknown";
});
const getHealth = (subsystem) => {
const health = defaultSite.health.find((item) => item.subsystem === subsystem) ?? { status: "unknown" };
return { ...health, up: health.status === "ok", show: health.status !== "unknown" };
};
const wan = getHealth("wan");
const lan = getHealth("lan");
const wlan = getHealth("wlan");
const name = wan.gw_name ?? defaultSite.desc;
const uptime = wan["gw_system-stats"] ? wan["gw_system-stats"].uptime : null;
const dataEmpty = !(wan.show || lan.show || wlan.show || uptime);
return (
<Container options={options} additionalClassNames="information-widget-unifi-console">
<Container options={widgetOptions} additionalClassNames="information-widget-unifi-console">
<Raw>
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<div className="flex flex-col">
src/components/widgets/unifi_console/unifi_console.test.jsx
+29 -19
View File
@@ -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(<UnifiConsole options={{ index: 0 }} />, { settings: { target: "_self" } });
renderWithProviders(<UnifiConsole options={options} />, { 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", () => {
src/pages/index.jsx
+31 -25
View File
@@ -12,7 +12,7 @@ import dynamic from "next/dynamic";
import Head from "next/head";
import { useRouter } from "next/router";
import Script from "next/script";
import { useContext, useEffect, useMemo, useState } from "react";
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { BiError } from "react-icons/bi";
import useSWR, { SWRConfig } from "swr";
import { ColorContext } from "utils/contexts/color";
@@ -102,7 +102,29 @@ function Index({ initialSettings, fallback }) {
const [stale, setStale] = useState(false);
const { data: errorsData } = useSWR("/api/validate");
const { error: validateError } = errorsData || {};
const { data: hashData, mutate: mutateHash } = useSWR("/api/hash");
const handleHashData = useCallback((hashData) => {
if (typeof window === "undefined" || !hashData?.hash) return;
const previousHash = localStorage.getItem("hash");
if (!previousHash) {
localStorage.setItem("hash", hashData.hash);
}
if (previousHash && previousHash !== hashData.hash) {
setStale(true);
localStorage.setItem("hash", hashData.hash);
fetch("/api/revalidate").then((res) => {
if (res.ok) {
window.location.reload();
}
});
}
}, []);
const { mutate: mutateHash } = useSWR("/api/hash", { onSuccess: handleHashData });
useEffect(() => {
if (windowFocused) {
@@ -110,29 +132,6 @@ function Index({ initialSettings, fallback }) {
}
}, [windowFocused, mutateHash]);
useEffect(() => {
if (hashData) {
if (typeof window !== "undefined") {
const previousHash = localStorage.getItem("hash");
if (!previousHash) {
localStorage.setItem("hash", hashData.hash);
}
if (previousHash && previousHash !== hashData.hash) {
setStale(true);
localStorage.setItem("hash", hashData.hash);
fetch("/api/revalidate").then((res) => {
if (res.ok) {
window.location.reload();
}
});
}
}
}
}, [hashData]);
if (validateError) {
return (
<div className="w-full h-screen container m-auto justify-center p-10 pointer-events-none">
@@ -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("");
src/utils/contexts/color.jsx
-4
View File
@@ -30,10 +30,6 @@ export function ColorProvider({ initialTheme, children }) {
lastColor = rawColor;
};
useEffect(() => {
if (initialTheme !== undefined) setColor(initialTheme ?? getInitialColor());
}, [initialTheme]);
useEffect(() => {
rawSetColor(color);
}, [color]);
src/utils/contexts/settings.jsx
+1 -5
View File
@@ -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 <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
src/utils/contexts/tab.jsx
+1 -5
View File
@@ -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 <TabContext.Provider value={value}>{children}</TabContext.Provider>;
src/utils/contexts/theme.jsx
-4
View File
@@ -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]);
src/utils/hooks/use-current-time.js
+45
View File
@@ -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);
}
src/utils/hooks/use-current-time.test.jsx
+32
View File
@@ -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 <span>{useCurrentTime(refreshInterval)}</span>;
}
describe("utils/hooks/use-current-time", () => {
beforeEach(() => {
vi.useFakeTimers();
vi.setSystemTime(1_000);
});
afterEach(() => {
vi.useRealTimers();
});
it("updates at the requested interval", () => {
render(<CurrentTime refreshInterval={5_000} />);
expect(screen.getByText("1000")).toBeInTheDocument();
act(() => {
vi.advanceTimersByTime(5_000);
});
expect(screen.getByText("6000")).toBeInTheDocument();
});
});
src/utils/hooks/window-focus.js
+10 -19
View File
@@ -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;
src/utils/hooks/window-focus.test.jsx
+3 -1
View File
@@ -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(<Fixture />);
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"));
});
src/utils/proxy/use-widget-api.js
+6 -6
View File
@@ -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);
src/utils/proxy/use-widget-api.test.js
+12
View File
@@ -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() });
src/utils/widget-fields.js
+12
View File
@@ -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,
},
};
}
src/utils/widget-fields.test.js
+35
View File
@@ -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"]);
});
});
src/widgets/arcane/component.jsx
+4 -8
View File
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const MAX_FIELDS = 4;
const DEFAULT_FIELDS = ["running", "stopped", "total", "image_updates"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
if (!widget.fields) {
widget.fields = ["running", "stopped", "total", "image_updates"];
} else if (widget.fields.length > MAX_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_FIELDS);
}
const envNotSet = widget.env == null || widget.env === "";
const { data: containers, error: containersError } = useWidgetAPI(widget, envNotSet ? "" : "containers");
src/widgets/arcane/component.test.jsx
+3 -2
View File
@@ -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(<Component service={service} />, { 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();
src/widgets/argocd/component.jsx
+5 -10
View File
@@ -2,19 +2,14 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["apps", "synced", "outOfSync", "healthy"];
export default function Component({ service: configuredService }) {
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
if (!widget.fields) {
widget.fields = ["apps", "synced", "outOfSync", "healthy"];
}
const MAX_ALLOWED_FIELDS = 4;
if (widget.fields.length > MAX_ALLOWED_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
}
const { data: appsData, error: appsError } = useWidgetAPI(widget, "applications");
const appCounts = widget.fields.map((status) => {
src/widgets/argocd/component.test.jsx
+1 -1
View File
@@ -25,7 +25,7 @@ describe("widgets/argocd/component", () => {
const service = { widget: { type: "argocd", fields: ["apps", "synced", "outOfSync", "healthy", "extra"] } };
const { container } = renderWithProviders(<Component service={service} />, { 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();
src/widgets/authentik/component.jsx
+5 -1
View File
@@ -2,10 +2,14 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useCurrentTime from "utils/hooks/use-current-time";
import useWidgetAPI from "utils/proxy/use-widget-api";
const DAY = 24 * 60 * 60 * 1000;
export default function Component({ service }) {
const { t } = useTranslation();
const currentTime = useCurrentTime();
const { widget } = service;
const isV2 = widget.version === 2;
@@ -45,7 +49,7 @@ export default function Component({ service }) {
switch (widget.version) {
// v1 is default
default:
const yesterday = new Date(Date.now()).setHours(-24);
const yesterday = currentTime - DAY;
loginsLast24H = loginsData.reduce(
(total, current) => (current.x_cord >= yesterday ? total + current.y_cord : total),
0,
src/widgets/authentik/component.test.jsx
+2 -1
View File
@@ -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;
src/widgets/backrest/component.jsx
+3 -8
View File
@@ -3,13 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const BACKREST_DEFAULT_FIELDS = ["num_success_latest", "num_failure_latest", "num_failure_30", "bytes_added_30"];
const MAX_ALLOWED_FIELDS = 4;
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, BACKREST_DEFAULT_FIELDS);
const { widget } = service;
const { data, error } = useWidgetAPI(widget, "summary");
@@ -18,12 +19,6 @@ export default function Component({ service }) {
return <Container service={service} error={error} />;
}
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 (
<Container service={service}>
src/widgets/backrest/component.test.jsx
+2 -7
View File
@@ -24,12 +24,7 @@ describe("widgets/backrest/component", () => {
const service = { widget: { type: "backrest" } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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", () => {
src/widgets/beszel/component.jsx
+7 -9
View File
@@ -3,23 +3,21 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const SUMMARY_FIELDS = ["systems", "up"];
const SYSTEM_FIELDS = ["name", "status", "cpu", "memory"];
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const defaultFields = configuredService.widget.systemId ? SYSTEM_FIELDS : SUMMARY_FIELDS;
const service = withWidgetFields(configuredService, defaultFields);
const { widget } = service;
const { systemId } = widget;
const { data: systems, error: systemsError } = useWidgetAPI(widget, "systems");
const MAX_ALLOWED_FIELDS = 4;
if (!widget.fields?.length > 0) {
widget.fields = systemId ? ["name", "status", "cpu", "memory"] : ["systems", "up"];
}
if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
}
let system = null;
let finalError = systemsError;
src/widgets/beszel/component.test.jsx
+2 -2
View File
@@ -23,7 +23,7 @@ describe("widgets/beszel/component", () => {
const service = { widget: { type: "beszel" } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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");
src/widgets/calendar/component.jsx
+4 -4
View File
@@ -38,16 +38,16 @@ const colorVariants = {
export default function Component({ service }) {
const { widget } = service;
const { i18n } = useTranslation();
const [showDate, setShowDate] = useState(null);
const [events, setEvents] = useState({});
const nowDate = DateTime.now().setLocale(i18n.language);
const currentDate = widget?.timezone ? nowDate.setZone(widget?.timezone).startOf("day") : nowDate;
const [showDate, setShowDate] = useState(null);
const { settings } = useContext(SettingsContext);
useEffect(() => {
if (!showDate) {
setShowDate(currentDate);
}
// seeded after mount, not during render: "today" is client-only and would break hydration
// eslint-disable-next-line react-hooks/set-state-in-effect
if (!showDate) setShowDate(currentDate);
}, [showDate, currentDate]);
// params for API fetch
src/widgets/calendar/integrations/ical.jsx
+53 -51
View File
@@ -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 && <Error error={{ message: `${config.type}: ${error.message ?? error}` }} />;
}
src/widgets/calendar/integrations/ical.test.jsx
+40 -1
View File
@@ -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(
<Integration
config={{ name: "Work", type: "ical" }}
params={{ start: "2099-01-01", end: "2099-01-02" }}
setEvents={vi.fn()}
hideErrors={false}
timezone="utc"
/>,
);
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(
<Integration
config={{ name: "Empty", type: "ical" }}
params={{ start: "2099-01-01", end: "2099-01-02" }}
setEvents={vi.fn()}
hideErrors={false}
timezone="utc"
/>,
);
expect(screen.getByText(/'Empty': calendar\.noEventsFound/)).toBeInTheDocument();
expect(data).toEqual(originalData);
});
it("adds parsed events within the date range", async () => {
useWidgetAPI.mockReturnValue({
data: {
src/widgets/dockhand/component.jsx
+4 -8
View File
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const MAX_FIELDS = 4;
const DEFAULT_FIELDS = ["running", "total", "cpu", "memory"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
if (!widget.fields) {
widget.fields = ["running", "total", "cpu", "memory"];
} else if (widget.fields.length > MAX_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_FIELDS);
}
const { data: stats, error: statsError } = useWidgetAPI(widget, "dashboard/stats");
if (statsError) {
src/widgets/dockhand/component.test.jsx
+5 -1
View File
@@ -22,7 +22,11 @@ describe("widgets/dockhand/component", () => {
const service = { widget: { type: "dockhand" } };
const { container } = renderWithProviders(<Component service={service} />, { 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();
src/widgets/duplicati/component.jsx
+3 -7
View File
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const DEFAULT_FIELDS = ["jobs", "errors", "lastBackup", "nextRun"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
if (!widget.fields?.length) {
widget.fields = DEFAULT_FIELDS;
} else if (widget.fields?.length > 4) {
widget.fields = widget.fields.slice(0, 4);
}
const { data, error } = useWidgetAPI(widget);
if (error) {
src/widgets/esphome/component.jsx
+5 -7
View File
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["online", "offline", "offline_alt", "total"];
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: resultData, error: resultError } = useWidgetAPI(widget);
@@ -14,12 +18,6 @@ export default function Component({ service }) {
return <Container service={service} error={resultError} />;
}
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 (
<Container service={service}>
src/widgets/esphome/component.test.jsx
+1 -1
View File
@@ -22,7 +22,7 @@ describe("widgets/esphome/component", () => {
const service = { widget: { type: "esphome" } };
const { container } = renderWithProviders(<Component service={service} />, { 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();
src/widgets/fritzbox/component.jsx
+3 -11
View File
@@ -3,11 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export const fritzboxDefaultFields = ["connectionStatus", "uptime", "maxDown", "maxUp"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, fritzboxDefaultFields);
const { widget } = service;
const { data: fritzboxData, error: fritzboxError } = useWidgetAPI(widget, "status");
@@ -15,16 +17,6 @@ export default function Component({ service }) {
return <Container service={service} error={fritzboxError} />;
}
// 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 (
<Container service={service}>
src/widgets/fritzbox/component.test.jsx
+10 -3
View File
@@ -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(<Component service={service} />, { 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(<Component service={service} />, { 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();
src/widgets/gamedig/component.jsx
+5 -11
View File
@@ -3,8 +3,12 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["map", "currentPlayers", "ping"];
export default function Component({ service: configuredService }) {
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: serverData, error: serverError } = useWidgetAPI(widget, "status");
const { t } = useTranslation();
@@ -13,16 +17,6 @@ export default function Component({ service }) {
return <Container service={service} error={serverError} />;
}
// 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 (
<Container service={service}>
src/widgets/gamedig/component.test.jsx
+2 -2
View File
@@ -22,7 +22,7 @@ describe("widgets/gamedig/component", () => {
const service = { widget: { type: "gamedig", url: "http://x" } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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");
src/widgets/glances/components/custom_tooltip.jsx
+1 -1
View File
@@ -3,7 +3,7 @@ export default function Tooltip({ active, payload, formatter }) {
return (
<div className="bg-theme-800/80 rounded-md text-theme-200 px-2 py-0">
{payload.map((pld, id) => (
<div key={Math.random()} className="first-of-type:pt-0 pt-0.5">
<div key={`${pld.dataKey ?? pld.name ?? "series"}-${id}`} className="first-of-type:pt-0 pt-0.5">
<div>
{formatter(pld.value)} {payload[id].name}
</div>
src/widgets/glances/metrics/containers.jsx
+2 -2
View File
@@ -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 }) {
<Block position={`${listYPosition} right-3 left-3`}>
<div className="pointer-events-none text-theme-900 dark:text-theme-200">
{data.map((item) => (
{visibleData.map((item) => (
<div key={item[idKey]} className="text-[0.75rem] h-[0.8rem]">
<div className="flex items-center">
<div className="w-3 h-3 mr-1.5 opacity-50">{statusMap[item[statusKey]]}</div>
src/widgets/glances/metrics/containers.test.jsx
+1
View File
@@ -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);
});
});
src/widgets/glances/metrics/cpu.jsx
+19 -17
View File
@@ -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 <Container error={error} widget={widget} />;
}
src/widgets/glances/metrics/disk.jsx
+27 -27
View File
@@ -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 <Container error={finalError} widget={widget} />;
@@ -83,7 +83,7 @@ export default function Component({ service }) {
<Container chart={chart}>
{chart && (
<ChartDual
dataPoints={ratePoints}
dataPoints={diskRates}
label={[t("glances.read"), t("glances.write")]}
max={diskData.critical}
formatter={(value) =>
src/widgets/glances/metrics/gpu.jsx
+21 -20
View File
@@ -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;
src/widgets/glances/metrics/memory.jsx
+18 -16
View File
@@ -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 <Container error={error} widget={widget} />;
src/widgets/glances/metrics/net.jsx
+26 -25
View File
@@ -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;
src/widgets/glances/metrics/process.jsx
+2 -2
View File
@@ -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 }) {
<Block position={`${listYPosition} right-3 left-3`}>
<div className="pointer-events-none text-theme-900 dark:text-theme-200">
{data.map((item) => (
{visibleData.map((item) => (
<div key={item.pid} className="text-[0.75rem] h-[0.8rem]">
<div className="flex items-center">
<div className="w-3 h-3 mr-1.5 opacity-50">{statusMap[item.status]}</div>
src/widgets/glances/metrics/process.test.jsx
+16
View File
@@ -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(<Component service={{ widget: { chart: false, version: 3 } }} />, {
settings: { hideErrors: false },
});
expect(screen.getByText("first")).toBeInTheDocument();
expect(screen.queryByText("second")).not.toBeInTheDocument();
expect(data).toHaveLength(2);
});
});
src/widgets/glances/metrics/sensor.jsx
+23 -24
View File
@@ -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 <Container error={finalError} widget={widget} />;
const { data, error } = useWidgetAPI(
service.widget,
`${apiVersion}/sensors`,
{
refreshInterval: Math.max(defaultInterval, refreshInterval),
},
{ onSuccess: handleData },
);
if (error || data?.error) {
return <Container error={error || data.error} widget={widget} />;
}
if (!data) {
src/widgets/glances/metrics/sensor.test.jsx
+13
View File
@@ -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(
<Component service={{ widget: { chart: false, version: 3, pointsLimit: 3, metric: "sensor:CPU" } }} />,
{ settings: { hideErrors: false } },
);
expect(screen.getByText("-")).toBeInTheDocument();
expect(data).toEqual([{ label: "Other", value: 42 }]);
});
});
src/widgets/glances/metrics/use-data-points.js
+17
View File
@@ -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];
}
src/widgets/glances/metrics/use-data-points.test.jsx
+23
View File
@@ -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 }]);
});
});
src/widgets/gluetun/component.jsx
+5 -5
View File
@@ -2,14 +2,14 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["public_ip", "region", "country"];
export default function Component({ service: configuredService }) {
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
if (!widget.fields) {
widget.fields = ["public_ip", "region", "country"];
}
const { data: gluetunData, error: gluetunError } = useWidgetAPI(widget, "ip");
const includePF = widget.fields.includes("port_forwarded");
const pfEndpoint = widget.version > 1 ? "port_forwarded_v2" : "port_forwarded";
src/widgets/gluetun/component.test.jsx
+1 -1
View File
@@ -22,7 +22,7 @@ describe("widgets/gluetun/component", () => {
const service = { widget: { type: "gluetun", url: "http://x" } };
const { container } = renderWithProviders(<Component service={service} />, { 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();
src/widgets/hdhomerun/component.jsx
+5 -10
View File
@@ -2,8 +2,12 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["channels", "hd"];
export default function Component({ service: configuredService }) {
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { tuner = 0 } = widget;
@@ -24,15 +28,6 @@ export default function Component({ service }) {
);
}
// Provide a default if not set in the config
if (!widget.fields) {
widget.fields = ["channels", "hd"];
}
// Limit to a maximum of 4 at a time
if (widget.fields.length > 4) {
widget.fields = widget.fields.slice(0, 4);
}
return (
<Container service={service}>
<Block label="hdhomerun.channels" value={channelsData?.length} />
src/widgets/hdhomerun/component.test.jsx
+1 -1
View File
@@ -58,7 +58,7 @@ describe("widgets/hdhomerun/component", () => {
const { container } = renderWithProviders(<Component service={service} />, { 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();
src/widgets/homebox/component.jsx
+3 -11
View File
@@ -3,11 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export const homeboxDefaultFields = ["items", "locations", "totalValue"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, homeboxDefaultFields);
const { widget } = service;
const { data: homeboxData, error: homeboxError } = useWidgetAPI(widget);
@@ -15,16 +17,6 @@ export default function Component({ service }) {
return <Container service={service} error={homeboxError} />;
}
// 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 (
<Container service={service}>
src/widgets/homebox/component.test.jsx
+2 -2
View File
@@ -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(<Component service={service} />, { 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();
src/widgets/jellyfin/component.jsx
+5 -7
View File
@@ -6,6 +6,9 @@ import { MdOutlineSmartDisplay } from "react-icons/md";
import { getURLSearchParams } from "utils/proxy/api-helpers";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const DEFAULT_FIELDS = ["movies", "series", "episodes", "songs"];
function ticksToTime(ticks) {
const milliseconds = ticks / 10000;
@@ -178,12 +181,6 @@ function CountBlocks({ service, countData }) {
const { t } = useTranslation();
const { widget } = service;
if (!widget.fields || widget.fields.length === 0) {
widget.fields = ["movies", "series", "episodes", "songs"];
} else if (widget.fields?.length > 4) {
widget.fields = widget.fields.slice(0, 4);
}
if (!countData) {
return (
<Container service={service}>
@@ -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;
src/widgets/jellyfin/component.test.jsx
+1 -1
View File
@@ -109,7 +109,7 @@ describe("widgets/jellyfin/component", () => {
renderWithProviders(<Component service={service} />);
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();
src/widgets/jellystat/component.jsx
+6 -6
View File
@@ -3,13 +3,13 @@ import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { widget } = service;
export default function Component({ service: configuredService }) {
const configuredDays = configuredService.widget.days;
const days = Number.isInteger(configuredDays) && configuredDays > 0 ? configuredDays : 30;
const widget = { ...configuredService.widget, days };
const service = { ...configuredService, widget };
// Days validation
if (!(Number.isInteger(widget.days) && 0 < widget.days)) widget.days = 30;
const { data: viewsData, error: viewsError } = useWidgetAPI(widget, "getViewsByLibraryType", { days: widget.days });
const { data: viewsData, error: viewsError } = useWidgetAPI(widget, "getViewsByLibraryType", { days });
const error = viewsError || viewsData?.message;
if (error) {
src/widgets/jellystat/component.test.jsx
+2 -2
View File
@@ -26,8 +26,8 @@ describe("widgets/jellystat/component", () => {
const service = { widget: { type: "jellystat", days: -1 } };
const { container } = renderWithProviders(<Component service={service} />, { 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();
src/widgets/karakeep/component.jsx
+3 -8
View File
@@ -3,12 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export const karakeepDefaultFields = ["bookmarks", "favorites", "archived", "highlights"];
const MAX_ALLOWED_FIELDS = 4;
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, karakeepDefaultFields);
const { widget } = service;
const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats");
@@ -17,12 +18,6 @@ export default function Component({ service }) {
return <Container service={service} error={statsError} />;
}
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 (
<Container service={service}>
src/widgets/karakeep/component.test.jsx
+3 -3
View File
@@ -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(<Component service={service} />, { 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(<Component service={service} />, { 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();
src/widgets/komodo/component.jsx
+12 -12
View File
@@ -3,11 +3,21 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const MAX_ALLOWED_FIELDS = 4;
const SUMMARY_FIELDS = ["servers", "stacks", "containers"];
const STACK_FIELDS = ["total", "running", "down", "unhealthy"];
const CONTAINER_FIELDS = ["total", "running", "stopped", "unhealthy"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const configuredWidget = configuredService.widget;
const defaultFields = configuredWidget.showSummary
? SUMMARY_FIELDS
: configuredWidget.showStacks
? STACK_FIELDS
: CONTAINER_FIELDS;
const service = withWidgetFields(configuredService, defaultFields);
const { widget } = service;
const containersEndpoint = !(!widget.showSummary && widget.showStacks) ? "containers" : "";
const { data: containersData, error: containersError } = useWidgetAPI(widget, containersEndpoint);
@@ -20,16 +30,6 @@ export default function Component({ service }) {
return <Container service={service} error={containersError ?? stacksError ?? serversError} />;
}
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)) ||
src/widgets/komodo/component.test.jsx
+15 -1
View File
@@ -25,7 +25,7 @@ describe("widgets/komodo/component", () => {
const service = { widget: { type: "komodo", showStacks: true, showSummary: false } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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)
src/widgets/maintainerr/component.jsx
+3 -8
View File
@@ -3,20 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const DEFAULT_FIELDS = ["itemsHandled", "episodesHandled", "moviesHandled", "reclaimable"];
const MAX_FIELDS = 4;
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
if (!widget.fields?.length) {
widget.fields = DEFAULT_FIELDS;
} else if (widget.fields.length > MAX_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_FIELDS);
}
const { data, error } = useWidgetAPI(widget);
if (error) {
src/widgets/ntfy/component.jsx
+5 -7
View File
@@ -3,6 +3,9 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const DEFAULT_FIELDS = ["title", "message", "priority", "lastReceived"];
const priorityLabels = {
1: "min",
@@ -20,8 +23,9 @@ function Truncated({ text }) {
);
}
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: messagesData, error: messagesError } = useWidgetAPI(widget, "messages");
@@ -30,12 +34,6 @@ export default function Component({ service }) {
return <Container service={service} error={messagesError} />;
}
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 (
<Container service={service}>
src/widgets/omada/component.jsx
+5 -7
View File
@@ -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 <Container service={service} error={omadaAPIError} />;
}
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 (
<Container service={service}>
src/widgets/pangolin/component.jsx
+4 -8
View File
@@ -3,19 +3,15 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const MAX_ALLOWED_FIELDS = 4;
const DEFAULT_FIELDS = ["sites", "resources", "targets", "traffic"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
if (!widget.fields) {
widget.fields = ["sites", "resources", "targets", "traffic"];
} else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
}
const { data: sitesData, error: sitesError } = useWidgetAPI(widget, "sites");
const { data: resourcesData, error: resourcesError } = useWidgetAPI(widget, "resources");
src/widgets/pangolin/component.test.jsx
+2 -2
View File
@@ -22,7 +22,7 @@ describe("widgets/pangolin/component", () => {
const service = { widget: { type: "pangolin" } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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", () => {
src/widgets/peanut/component.jsx
+8 -18
View File
@@ -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 (
<Container service={service}>
<Block
label="peanut.battery_charge"
value={t("common.percent", { value: upsData.battery_charge })}
highlightValue={upsData.battery_charge}
/>
<Block
label="peanut.ups_load"
value={t("common.percent", { value: upsData.ups_load })}
highlightValue={upsData.ups_load}
value={t("common.percent", { value: batteryCharge })}
highlightValue={batteryCharge}
/>
<Block label="peanut.ups_load" value={t("common.percent", { value: upsLoad })} highlightValue={upsLoad} />
<Block label="peanut.ups_status" value={status} />
</Container>
);
src/widgets/peanut/component.test.jsx
+7 -5
View File
@@ -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" });
});
});
src/widgets/pihole/component.jsx
+5 -5
View File
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["queries", "blocked", "gravity"];
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: piholeData, error: piholeError } = useWidgetAPI(widget);
@@ -15,10 +19,6 @@ export default function Component({ service }) {
return <Container service={service} error={piholeError} />;
}
if (!widget.fields) {
widget.fields = ["queries", "blocked", "gravity"];
}
if (!piholeData) {
return (
<Container service={service}>
src/widgets/portainer/component.jsx
+7 -5
View File
@@ -2,14 +2,16 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DOCKER_FIELDS = ["running", "stopped", "total"];
const KUBERNETES_FIELDS = ["applications", "services", "namespaces"];
export default function Component({ service: configuredService }) {
const defaultFields = configuredService.widget.kubernetes ? KUBERNETES_FIELDS : DOCKER_FIELDS;
const service = withWidgetFields(configuredService, defaultFields);
const { widget } = service;
if (!widget.fields) {
widget.fields = widget.kubernetes ? ["applications", "services", "namespaces"] : ["running", "stopped", "total"];
}
const { data: containersCount, error: containersError } = useWidgetAPI(
widget,
widget.kubernetes ? "" : "docker/containers",
src/widgets/portainer/component.test.jsx
+2 -2
View File
@@ -22,7 +22,7 @@ describe("widgets/portainer/component", () => {
const service = { widget: { type: "portainer", kubernetes: false } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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();
src/widgets/prometheusmetric/component.jsx
+12 -16
View File
@@ -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 <Container service={service} error={prometheusmetricError} />;
src/widgets/proxmoxbackupserver/component.jsx
+10 -2
View File
@@ -2,20 +2,28 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useCurrentTime from "utils/hooks/use-current-time";
import useWidgetAPI from "utils/proxy/use-widget-api";
const HOUR = 60 * 60 * 1000;
export default function Component({ service }) {
const { t } = useTranslation();
// hourly is plenty of precision for a 24 hour window, and `since` is part of the request key
const currentTime = useCurrentTime(HOUR);
const { widget } = service;
const taskQueryParams = {
errors: true,
limit: 100,
since: Math.floor(Date.now() / 1000) - 24 * 60 * 60,
// omitted until mounted, so the request key doesn't churn during hydration
...(currentTime !== null && { since: Math.floor(currentTime / 1000) - 24 * 60 * 60 }),
};
const { data: datastoreData, error: datastoreError } = useWidgetAPI(widget, "status/datastore-usage");
const { data: tasksData, error: tasksError } = useWidgetAPI(widget, "nodes/localhost/tasks", taskQueryParams);
const { data: tasksData, error: tasksError } = useWidgetAPI(widget, "nodes/localhost/tasks", taskQueryParams, {
keepPreviousData: true, // `since` rotates the key, don't blank the whole widget while it refetches
});
const { data: hostData, error: hostError } = useWidgetAPI(widget, "nodes/localhost/status");
if (datastoreError || tasksError || hostError) {
src/widgets/proxmoxbackupserver/component.test.jsx
+26 -22
View File
@@ -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(<Component service={{ widget: { type: "proxmoxbackupserver" } }} />, {
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(<Component service={{ widget: { type: "proxmoxbackupserver" } }} />, {
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(<Component service={{ widget: { type: "proxmoxbackupserver", datastore: "ds2" } }} />, {
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(<Component service={{ widget: { type: "proxmoxbackupserver" } }} />, {
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 },
);
});
});
src/widgets/romm/component.jsx
+3 -8
View File
@@ -3,11 +3,12 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const ROMM_DEFAULT_FIELDS = ["platforms", "totalRoms", "saves", "states"];
const MAX_ALLOWED_FIELDS = 4;
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const service = withWidgetFields(configuredService, ROMM_DEFAULT_FIELDS);
const { widget } = service;
const { t } = useTranslation();
const { data: response, error: responseError } = useWidgetAPI(widget, "statistics");
@@ -16,12 +17,6 @@ export default function Component({ service }) {
return <Container service={service} error={responseError} />;
}
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 (
<Container service={service}>
src/widgets/romm/component.test.jsx
+2 -2
View File
@@ -22,7 +22,7 @@ describe("widgets/romm/component", () => {
const service = { widget: { type: "romm" } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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)", () => {
src/widgets/seerr/component.jsx
+14 -10
View File
@@ -2,13 +2,13 @@ import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export const seerrDefaultFields = ["pending", "approved", "completed"];
const MAX_ALLOWED_FIELDS = 4;
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const service = withWidgetFields(configuredService, seerrDefaultFields);
const { widget } = service;
widget.fields = widget?.fields?.length ? widget.fields.slice(0, MAX_ALLOWED_FIELDS) : seerrDefaultFields;
const isIssueEnabled = widget.fields.includes("issues");
const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
@@ -30,16 +30,20 @@ export default function Component({ service }) {
);
}
if (
statsData.completed === undefined &&
(widget.fields.includes("completed") || widget.fields.includes("available"))
) {
// Fallback to "available" if "completed" requested but not available
widget.fields = widget.fields.map((field) => (field === "completed" ? "available" : field));
// Older Seerr versions expose "available" instead of "completed".
let renderedService = service;
if (statsData.completed === undefined && service.widget.fields.includes("completed")) {
renderedService = {
...service,
widget: {
...service.widget,
fields: service.widget.fields.map((field) => (field === "completed" ? "available" : field)),
},
};
}
return (
<Container service={service}>
<Container service={renderedService}>
<Block field="seerr.pending" label="seerr.pending" value={statsData.pending} />
<Block field="seerr.approved" label="seerr.approved" value={statsData.approved} />
<Block field="seerr.available" label="seerr.available" value={statsData.available} />
src/widgets/seerr/component.test.jsx
+5 -5
View File
@@ -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(<Component service={service} />, { 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(<Component service={service} />, { 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(<Component service={service} />, { 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(<Component service={service} />, { 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();
});
src/widgets/slskd/component.jsx
+3 -8
View File
@@ -3,12 +3,13 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
const slskdDefaultFields = ["slskStatus", "downloads", "uploads", "sharedFiles"];
const MAX_ALLOWED_FIELDS = 4;
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, slskdDefaultFields);
const { widget } = service;
const { data: appData, error: appError } = useWidgetAPI(widget, "application");
@@ -19,12 +20,6 @@ export default function Component({ service }) {
return <Container service={service} error={appError ?? downError ?? upError} />;
}
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 (
<Container service={service}>
src/widgets/slskd/component.test.jsx
+2 -2
View File
@@ -22,7 +22,7 @@ describe("widgets/slskd/component", () => {
const service = { widget: { type: "slskd" } };
const { container } = renderWithProviders(<Component service={service} />, { 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(<Component service={service} />, { 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", () => {
src/widgets/stash/component.jsx
+8 -14
View File
@@ -4,23 +4,27 @@ import { useTranslation } from "next-i18next/pages";
import { useEffect, useState } from "react";
import { formatProxyUrl } from "utils/proxy/api-helpers";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["scenes", "images"];
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const { widget } = service;
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const requestWidget = configuredService.widget;
const [stats, setStats] = useState(null);
useEffect(() => {
async function fetchStats() {
const url = formatProxyUrl(widget, "stats");
const url = formatProxyUrl(requestWidget, "stats");
const res = await fetch(url, { method: "POST" });
setStats(await res.json());
}
if (!stats) {
fetchStats();
}
}, [widget, stats]);
}, [requestWidget, stats]);
if (!stats) {
return (
@@ -31,16 +35,6 @@ export default function Component({ service }) {
);
}
// Provide a default if not set in the config
if (!widget.fields) {
widget.fields = ["scenes", "images"];
}
// Limit to a maximum of 4 at a time
if (widget.fields.length > 4) {
widget.fields = widget.fields.slice(0, 4);
}
return (
<Container service={service}>
<Block label="stash.scenes" value={t("common.number", { value: stats.scene_count })} />
src/widgets/suwayomi/component.jsx
+5 -6
View File
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["download", "nondownload", "read", "unread"];
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: suwayomiData, error: suwayomiError } = useWidgetAPI(widget);
@@ -16,11 +20,6 @@ export default function Component({ service }) {
}
if (!suwayomiData) {
if (!widget.fields || widget.fields.length === 0) {
widget.fields = ["download", "nondownload", "read", "unread"];
} else if (widget.fields.length > 4) {
widget.fields = widget.fields.slice(0, 4);
}
return (
<Container service={service}>
{widget.fields.map((field) => (
src/widgets/suwayomi/component.test.jsx
+1 -1
View File
@@ -22,7 +22,7 @@ describe("widgets/suwayomi/component", () => {
const service = { widget: { type: "suwayomi" } };
const { container } = renderWithProviders(<Component service={service} />, { 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();
src/widgets/tailscale/component.jsx
+5 -8
View File
@@ -3,10 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
import withWidgetFields from "utils/widget-fields";
export default function Component({ service }) {
const DEFAULT_FIELDS = ["address", "last_seen", "expires"];
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, DEFAULT_FIELDS);
const { widget } = service;
const { data: tailscaleData, error: tailscaleError } = useWidgetAPI(widget, "device");
@@ -25,13 +29,6 @@ export default function Component({ service }) {
);
}
const MAX_ALLOWED_FIELDS = 4;
if (widget.fields?.length == 0 || !widget.fields) {
widget.fields = ["address", "last_seen", "expires"];
} else if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
}
const {
addresses: [address],
keyExpiryDisabled,
src/widgets/tautulli/component.jsx
+1 -1
View File
@@ -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;
}
src/widgets/technitium/component.jsx
+3 -13
View File
@@ -3,14 +3,14 @@ import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next/pages";
import useWidgetAPI from "utils/proxy/use-widget-api";
const MAX_ALLOWED_FIELDS = 4;
import withWidgetFields from "utils/widget-fields";
export const technitiumDefaultFields = ["totalQueries", "totalAuthoritative", "totalCached", "totalServerFailure"];
export default function Component({ service }) {
export default function Component({ service: configuredService }) {
const { t } = useTranslation();
const service = withWidgetFields(configuredService, technitiumDefaultFields);
const { widget } = service;
const params = {
@@ -20,16 +20,6 @@ export default function Component({ service }) {
const { data: statsData, error: statsError } = useWidgetAPI(widget, "stats", params);
// Default fields
if (!widget.fields?.length > 0) {
widget.fields = technitiumDefaultFields;
}
// Limits max number of displayed fields
if (widget.fields?.length > MAX_ALLOWED_FIELDS) {
widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
}
if (statsError) {
return <Container service={service} error={statsError} />;
}

Some files were not shown because too many files have changed in this diff Show More