Compare commits

..
Author SHA1 Message Date
ajnart 8b089c0c06 style: auto-fix lint and format 2026-07-15 09:44:07 +00:00
ajnart a253dcb7d8 fix(widgets): add typed refetchInterval presets to WidgetDefinition
The v1.69.0 caching refactor replaced Redis pub/sub with a global 30s
client polling interval. Live monitoring widgets (health-monitoring,
Dashdot, dns-hole) that previously refreshed every 5s were stuck at 30s.

Adds a typed WidgetRefetchInterval preset (fiveSeconds | never) to
WidgetDefinition. Widgets that need faster polling set fiveSeconds;
widgets that don't need polling set never (fetch on mount only, manual
refresh via context menu). Absence = global 30s default.

 nine widgets get fiveSeconds (live monitoring)
 sixteen widgets get never (slow data, mount-only)
 remaining widgets use the 30s default

Also removes inline refetchInterval from docker widget component.

Fixes #6268
2026-07-15 11:42:47 +02:00
42 changed files with 67 additions and 47 deletions

No files matched your search

@@ -93,10 +93,11 @@ export function TRPCReactProvider(props: PropsWithChildren) {
});
client.setQueryDefaults([["widget"]], { refetchInterval: queryCacheDefaultRefetchIntervalMs });
for (const { definition } of Object.values(widgetImports)) {
const def = definition as { refetchIntervalSeconds?: number; queryKey?: QueryKey; kind: string };
if (!def.refetchIntervalSeconds) continue;
const def = definition as { refetchInterval?: number | false; queryKey?: QueryKey; kind: string };
if (def.refetchInterval === undefined) continue;
const key = def.queryKey ?? [["widget", def.kind]];
client.setQueryDefaults(key, { refetchInterval: def.refetchIntervalSeconds * 1000 });
const interval = def.refetchInterval === false ? false : def.refetchInterval * 1000;
client.setQueryDefaults(key, { refetchInterval: interval });
}
return client;
});
@@ -5,8 +5,6 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("anchorNote", {
icon: IconNotes,
queryKey: [["widget", "anchorNotes"]],
refetchIntervalSeconds: 15,
supportedIntegrations: ["anchor"],
createOptions() {
return optionsBuilder.from((factory) => ({
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("archiveTeamWarrior", {
icon: IconArchive,
refetchIntervalSeconds: 300,
createOptions() {
return optionsBuilder.from((factory) => ({
showBroadcastMessage: factory.switch({
@@ -14,7 +14,6 @@ const hideUnlessAudiobookshelf = {
export const { definition, componentLoader } = createWidgetDefinition("audioStats", {
icon: IconHeadphones,
refetchIntervalSeconds: 600,
supportedIntegrations: ["navidrome", "audiobookshelf"],
integrationsRequired: true,
maxIntegrations: 1,
-1
View File
@@ -9,7 +9,6 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("calendar", {
icon: IconCalendar,
refetchIntervalSeconds: 60,
createOptions() {
return optionsBuilder.from((factory) => ({
releaseType: factory.multiSelect({
-1
View File
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("coolify", {
icon: IconCloud,
refetchIntervalSeconds: 30,
createOptions() {
return optionsBuilder.from((factory) => ({
showServers: factory.switch({
+8 -1
View File
@@ -67,10 +67,17 @@ export const createWidgetDefinition = <TKind extends WidgetKind, TDefinition ext
withDynamicImport: createWithDynamicImport(kind, definition),
});
export const widgetRefetchInterval = {
fiveSeconds: 5,
never: false,
} as const;
export type WidgetRefetchInterval = (typeof widgetRefetchInterval)[keyof typeof widgetRefetchInterval];
export interface WidgetDefinition {
icon: TablerIcon;
queryKey?: QueryKey;
refetchIntervalSeconds?: number;
refetchInterval?: WidgetRefetchInterval;
supportedIntegrations?: IntegrationKind[];
integrationsRequired?: boolean;
maxIntegrations?: number;
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../../definition";
import { IconDeviceGamepad, IconServerOff } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -10,7 +11,7 @@ export const widgetKind = "dnsHoleControls";
export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
icon: IconDeviceGamepad,
queryKey: [["widget", "dnsHole"]],
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
createOptions() {
return optionsBuilder.from((factory) => ({
showToggleAllButtons: factory.switch({
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../../definition";
import { IconAd, IconServerOff } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -10,7 +11,7 @@ export const widgetKind = "dnsHoleSummary";
export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
icon: IconAd,
queryKey: [["widget", "dnsHole"]],
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
createOptions() {
return optionsBuilder.from((factory) => ({
usePiHoleColors: factory.switch({
+1 -1
View File
@@ -184,7 +184,7 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
const t = useScopedI18n("docker");
const isTiny = width <= 256;
const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery(undefined, {});
const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery();
const containers = data?.containers ?? [];
const timestamp = useMemo(() => data?.timestamp ?? new Date(), [data?.timestamp]);
const relativeTime = useTimeAgo(timestamp);
-1
View File
@@ -26,7 +26,6 @@ const columnTranslationKeyMap = {
export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
icon: IconBrandDocker,
queryKey: [["docker", "getContainers"]],
refetchIntervalSeconds: 20,
createOptions() {
return optionsBuilder.from((factory) => ({
columns: factory.multiSelect({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconDownload } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -33,7 +34,7 @@ const columnsSort = columnsList.filter((column) =>
export const { definition, componentLoader } = createWidgetDefinition("downloads", {
icon: IconDownload,
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
createOptions() {
return optionsBuilder.from(
(factory) => ({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconWall, IconWallOff } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -7,7 +8,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("firewall", {
icon: IconWall,
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
createOptions() {
return optionsBuilder.from(() => ({}));
},
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconHeartRateMonitor, IconServerOff } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -8,7 +9,7 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options
export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
icon: IconHeartRateMonitor,
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
createOptions() {
return optionsBuilder.from(
(factory) => ({
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../../definition";
import { IconPhoto } from "@tabler/icons-react";
import z from "zod";
@@ -9,7 +10,7 @@ import { optionsBuilder } from "../../options";
export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
icon: IconPhoto,
queryKey: [["widget", "immich"]],
refetchIntervalSeconds: 900,
refetchInterval: widgetRefetchInterval.never,
supportedIntegrations: ["immich"],
integrationsRequired: true,
createOptions() {
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../../definition";
import { IconGraphFilled } from "@tabler/icons-react";
import { createWidgetDefinition } from "../../definition";
@@ -6,7 +7,7 @@ import { optionsBuilder } from "../../options";
export const { definition, componentLoader } = createWidgetDefinition("immich-serverStats", {
icon: IconGraphFilled,
queryKey: [["widget", "immich"]],
refetchIntervalSeconds: 900,
refetchInterval: widgetRefetchInterval.never,
supportedIntegrations: ["immich"],
integrationsRequired: true,
createOptions() {
+2
View File
@@ -70,7 +70,9 @@ export type {
WidgetContextMenuAction,
WidgetContextActionProps,
WidgetOptionsSettings,
WidgetRefetchInterval,
} from "./definition";
export { widgetRefetchInterval } from "./definition";
export type { WidgetComponentProps };
export type { WidgetOptionDefinition, WidgetOptionType } from "./options";
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconReportSearch, IconServerOff } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -7,7 +8,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
icon: IconReportSearch,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
openIndexerSiteInNewTab: factory.switch({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconTicket } from "@tabler/icons-react";
import { createWidgetDefinition } from "../definition";
@@ -6,7 +7,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("mediaReleases", {
icon: IconTicket,
queryKey: [["widget", "mediaRelease"]],
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
layout: factory.select({
@@ -8,8 +8,6 @@ import { optionsBuilder } from "../../options";
export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
icon: IconZoomQuestion,
queryKey: [["widget", "mediaRequests"]],
refetchIntervalSeconds: 60,
createOptions() {
return optionsBuilder.from((factory) => ({
linksTargetNewTab: factory.switch({
@@ -7,8 +7,6 @@ import { createWidgetDefinition } from "../../definition";
export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestStats", {
icon: IconChartBar,
queryKey: [["widget", "mediaRequests"]],
refetchIntervalSeconds: 60,
createOptions() {
return {};
},
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconVideo } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -7,7 +8,7 @@ import { optionsBuilder } from "../options";
export const { componentLoader, definition } = createWidgetDefinition("mediaServer", {
icon: IconVideo,
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
createOptions() {
return optionsBuilder.from((factory) => ({
showOnlyPlaying: factory.switch({ defaultValue: true, withDescription: true }),
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconTransform } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -11,7 +12,7 @@ export const views = ["workers", "queue", "statistics"] as const;
export const { componentLoader, definition } = createWidgetDefinition("mediaTranscoding", {
icon: IconTransform,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
defaultView: factory.select({
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../../definition";
import { IconBrandMinecraft } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -6,7 +7,8 @@ import { optionsBuilder } from "../../options";
export const { componentLoader, definition } = createWidgetDefinition("minecraftServerStatus", {
icon: IconBrandMinecraft,
refetchIntervalSeconds: 300,
queryKey: [["widget", "minecraft"]],
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
title: factory.text({ defaultValue: "" }),
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../../definition";
import { IconServerOff, IconTopologyFull } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -8,7 +9,7 @@ import { optionsBuilder } from "../../options";
export const { definition, componentLoader } = createWidgetDefinition("networkControllerStatus", {
icon: IconTopologyFull,
queryKey: [["widget", "networkController"]],
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
content: factory.select({
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../../definition";
import { IconServerOff, IconTopologyFull } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -7,7 +8,8 @@ import { optionsBuilder } from "../../options";
export const { definition, componentLoader } = createWidgetDefinition("networkControllerSummary", {
icon: IconTopologyFull,
refetchIntervalSeconds: 300,
queryKey: [["widget", "networkController"]],
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from(() => ({}));
},
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconMessage } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -7,7 +8,7 @@ import { optionsBuilder } from "../options";
export const { componentLoader, definition } = createWidgetDefinition("notifications", {
icon: IconMessage,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
hideLogos: factory.switch({ defaultValue: false }),
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconFileText, IconServerOff } from "@tabler/icons-react";
import { createWidgetDefinition } from "../definition";
@@ -5,7 +6,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("paperlessNgx", {
icon: IconFileText,
refetchIntervalSeconds: 900,
refetchInterval: widgetRefetchInterval.never,
supportedIntegrations: ["paperlessNgx"],
integrationsRequired: true,
createOptions() {
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconRocket } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -14,7 +15,7 @@ const relativeDateSchema = z
export const { definition, componentLoader } = createWidgetDefinition("releases", {
icon: IconRocket,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
newReleaseWithin: factory.text({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconRss } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -12,7 +13,7 @@ import { optionsBuilder } from "../options";
*/
export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
icon: IconRss,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
feedUrls: factory.multiText({
@@ -7,8 +7,6 @@ import { optionsBuilder } from "../../options";
export const { definition, componentLoader } = createWidgetDefinition("smartHome-entityState", {
icon: IconBinaryTree,
queryKey: [["widget", "smartHome"]],
refetchIntervalSeconds: 60,
createOptions() {
return optionsBuilder.from((factory) => ({
entityId: factory.text({
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconServerOff, IconSpeedboat } from "@tabler/icons-react";
import { createWidgetDefinition } from "../definition";
@@ -5,7 +6,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("speedtestTracker", {
icon: IconSpeedboat,
refetchIntervalSeconds: 600,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from(
(factory) => ({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconBuildingBank } from "@tabler/icons-react";
import { createWidgetDefinition } from "../definition";
@@ -13,7 +14,7 @@ const timeIntervalOptions = stockPriceTimeFrames.interval;
export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
icon: IconBuildingBank,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from((factory) => ({
stock: factory.text({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconServer2 } from "@tabler/icons-react";
import { createWidgetDefinition } from "../definition";
@@ -7,7 +8,7 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options
export const { definition, componentLoader } = createWidgetDefinition("systemDisks", {
icon: IconServer2,
queryKey: [["widget", "healthMonitoring"]],
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
supportedIntegrations: ["dashDot", "openmediavault", "truenas", "unraid", "synology"],
createOptions() {
return optionsBuilder.from(
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconAlignLeft, IconEyeOff, IconGraphFilled, IconListDetails, IconPhoto } from "@tabler/icons-react";
import { objectEntries } from "@homarr/common";
@@ -15,7 +16,7 @@ const labelDisplayModeOptions = {
export const { definition, componentLoader } = createWidgetDefinition("systemResources", {
icon: IconGraphFilled,
queryKey: [["widget", "healthMonitoring"]],
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
supportedIntegrations: ["dashDot", "openmediavault", "truenas", "unraid", "glances", "synology"],
createOptions() {
return optionsBuilder.from((factory) => ({
-1
View File
@@ -8,7 +8,6 @@ import { optionsBuilder } from "../options";
export const { componentLoader, definition } = createWidgetDefinition("timetable", {
icon: IconBusStop,
refetchIntervalSeconds: 60,
createOptions() {
return optionsBuilder.from((factory) => ({
baseUrl: factory.text({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconActivityHeartbeat, IconServerOff } from "@tabler/icons-react";
import { createWidgetDefinition } from "../definition";
@@ -5,7 +6,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("tracearr", {
icon: IconActivityHeartbeat,
refetchIntervalSeconds: 5,
refetchInterval: widgetRefetchInterval.fiveSeconds,
createOptions() {
return optionsBuilder.from((factory) => ({
showStreams: factory.switch({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconChartBar, IconServerOff } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -8,7 +9,7 @@ export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth
export const { definition, componentLoader } = createWidgetDefinition("umami", {
icon: IconChartBar,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
supportedIntegrations: ["umami"],
createOptions() {
return optionsBuilder.from(
-1
View File
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("ups", {
icon: IconBatteryCharging,
refetchIntervalSeconds: 60,
createOptions() {
return optionsBuilder.from((factory) => ({
showBattery: factory.switch({
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("uptimeKuma", {
icon: IconHeartbeat,
refetchIntervalSeconds: 60,
createOptions() {
return optionsBuilder.from((factory) => ({
showAverageUptime: factory.switch({
+2 -1
View File
@@ -1,3 +1,4 @@
import { widgetRefetchInterval } from "../definition";
import { IconShieldLock } from "@tabler/icons-react";
import { getIntegrationKindsByCategory } from "@homarr/definitions";
@@ -7,7 +8,7 @@ import { optionsBuilder } from "../options";
export const { componentLoader, definition } = createWidgetDefinition("vpn", {
icon: IconShieldLock,
refetchIntervalSeconds: 300,
refetchInterval: widgetRefetchInterval.never,
createOptions() {
return optionsBuilder.from(() => ({}));
},
-1
View File
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("weather", {
icon: IconCloud,
refetchIntervalSeconds: 60,
createOptions() {
return optionsBuilder.from(
(factory) => ({