From 441cc692f914497bef9e6f3b4d8aa122a9ff8f80 Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Mon, 15 Jun 2026 14:58:53 +0200 Subject: [PATCH] feat(beszel): add error definitions and retry config to beszel widgets Add INTERNAL_SERVER_ERROR error definitions to alerts, grid, and table widgets. Set retry: false and appropriate staleTime/refetchInterval. --- .../widgets/src/beszel-alerts/component.tsx | 21 +++++++++++++++---- packages/widgets/src/beszel-alerts/index.ts | 13 ++++++++++-- .../src/beszel-system-grid/component.tsx | 8 +++++-- .../widgets/src/beszel-system-grid/index.ts | 13 ++++++++++-- .../src/beszel-system-table/component.tsx | 20 ++++++++++++++---- .../widgets/src/beszel-system-table/index.ts | 18 +++++++++++++--- 6 files changed, 76 insertions(+), 17 deletions(-) diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx index 1048ebdae..76ef5318e 100644 --- a/packages/widgets/src/beszel-alerts/component.tsx +++ b/packages/widgets/src/beszel-alerts/component.tsx @@ -42,22 +42,35 @@ export default function BeszelAlertsWidget({ includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems, }, - { staleTime: 30 * 1000 }, + { staleTime: 15_000, refetchInterval: 15_000, retry: false }, ); const utils = clientApi.useUtils(); clientApi.widget.beszel.subscribeAlerts.useSubscription( - { integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }, + { + integrationIds, + includeHistory: options.showHistory, + maxHistoryItems: options.maxHistoryItems, + }, { enabled: !isEditMode, onData(data) { utils.widget.beszel.getAlerts.setData( - { integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }, + { + integrationIds, + includeHistory: options.showHistory, + maxHistoryItems: options.maxHistoryItems, + }, (prev) => { if (!prev) return prev; return prev.map((r) => r.integrationId === data.integrationId - ? { ...r, alerts: data.alerts.alerts, history: data.alerts.history, updatedAt: data.timestamp } + ? { + ...r, + alerts: data.alerts.alerts, + history: data.alerts.history, + updatedAt: data.timestamp, + } : r, ); }, diff --git a/packages/widgets/src/beszel-alerts/index.ts b/packages/widgets/src/beszel-alerts/index.ts index 828c88b27..5e3799a90 100644 --- a/packages/widgets/src/beszel-alerts/index.ts +++ b/packages/widgets/src/beszel-alerts/index.ts @@ -1,4 +1,4 @@ -import { IconBell } from "@tabler/icons-react"; +import { IconBell, IconServerOff } from "@tabler/icons-react"; import { z } from "zod/v4"; import { createWidgetDefinition } from "../definition"; @@ -11,7 +11,16 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelAle createOptions() { return optionsBuilder.from((factory) => ({ showHistory: factory.switch({ defaultValue: true }), - maxHistoryItems: factory.number({ defaultValue: 10, validate: z.number().min(1).max(100) }), + maxHistoryItems: factory.number({ + defaultValue: 10, + validate: z.number().min(1).max(100), + }), })); }, + errors: { + INTERNAL_SERVER_ERROR: { + icon: IconServerOff, + message: (t) => t("widget.beszelAlerts.error.internalServerError"), + }, + }, }).withDynamicImport(() => import("./component")); diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx index 6bdb7a139..b213c5e72 100644 --- a/packages/widgets/src/beszel-system-grid/component.tsx +++ b/packages/widgets/src/beszel-system-grid/component.tsx @@ -316,7 +316,11 @@ const SystemCard = ({ system, options, t, size, maxMetrics }: SystemCardProps) = radius="sm" withBorder h="100%" - style={{ overflow: "hidden", display: "flex", flexDirection: "column" as const }} + style={{ + overflow: "hidden", + display: "flex", + flexDirection: "column" as const, + }} > ({ - statusFilter: factory.select({ defaultValue: "all", options: statusOptions }), + statusFilter: factory.select({ + defaultValue: "all", + options: statusOptions, + }), showCpu: factory.switch({ defaultValue: true }), showMemory: factory.switch({ defaultValue: true }), showDisk: factory.switch({ defaultValue: true }), @@ -24,4 +27,10 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys showAgent: factory.switch({ defaultValue: true }), })); }, + errors: { + INTERNAL_SERVER_ERROR: { + icon: IconServerOff, + message: (t) => t("widget.beszelSystemGrid.error.internalServerError"), + }, + }, }).withDynamicImport(() => import("./component")); diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx index bb306d8f9..43d640b0f 100644 --- a/packages/widgets/src/beszel-system-table/component.tsx +++ b/packages/widgets/src/beszel-system-table/component.tsx @@ -34,7 +34,7 @@ type SystemRowWithKey = BeszelSystemRow & { _key: string }; interface SizeConfig { iconSize: number; - fontSize: "xs" | "10px"; + fontSize: "xs" | "sm"; progressSize: "xs" | "sm"; cellPadding: number; valueMiw: number; @@ -42,9 +42,21 @@ interface SizeConfig { const getSizeConfig = (width: number): SizeConfig => { if (width < 400) { - return { iconSize: 10, fontSize: "10px", progressSize: "xs", cellPadding: 2, valueMiw: 30 }; + return { + iconSize: 10, + fontSize: "xs", + progressSize: "xs", + cellPadding: 2, + valueMiw: 30, + }; } - return { iconSize: 14, fontSize: "xs", progressSize: "sm", cellPadding: 4, valueMiw: 38 }; + return { + iconSize: 14, + fontSize: "sm", + progressSize: "sm", + cellPadding: 4, + valueMiw: 38, + }; }; export default function BeszelSystemTableWidget({ @@ -56,7 +68,7 @@ export default function BeszelSystemTableWidget({ const t = useScopedI18n("widget.beszelSystemTable"); const { data: results = [] } = clientApi.widget.beszel.getSystems.useQuery( { integrationIds }, - { staleTime: 30 * 1000 }, + { staleTime: 5_000, refetchInterval: 5_000, retry: false }, ); const size = getSizeConfig(width); diff --git a/packages/widgets/src/beszel-system-table/index.ts b/packages/widgets/src/beszel-system-table/index.ts index 4e8f985c4..538649afd 100644 --- a/packages/widgets/src/beszel-system-table/index.ts +++ b/packages/widgets/src/beszel-system-table/index.ts @@ -1,4 +1,4 @@ -import { IconTable } from "@tabler/icons-react"; +import { IconServerOff, IconTable } from "@tabler/icons-react"; import { createWidgetDefinition } from "../definition"; import { statusOptions } from "../beszel/_shared/options"; @@ -29,9 +29,15 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys integrationsRequired: true, createOptions() { return optionsBuilder.from((factory) => ({ - statusFilter: factory.select({ defaultValue: "all", options: statusOptions }), + statusFilter: factory.select({ + defaultValue: "all", + options: statusOptions, + }), sortBy: factory.select({ defaultValue: "name", options: sortOptions }), - sortDirection: factory.select({ defaultValue: "asc", options: sortDirectionOptions }), + sortDirection: factory.select({ + defaultValue: "asc", + options: sortDirectionOptions, + }), showCpu: factory.switch({ defaultValue: true }), showMemory: factory.switch({ defaultValue: true }), showDisk: factory.switch({ defaultValue: true }), @@ -45,4 +51,10 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys showAgent: factory.switch({ defaultValue: true }), })); }, + errors: { + INTERNAL_SERVER_ERROR: { + icon: IconServerOff, + message: (t) => t("widget.beszelSystemTable.error.internalServerError"), + }, + }, }).withDynamicImport(() => import("./component"));