From d6ced037df7702c3aafb41aa916e2d711f378ca2 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 15 Jun 2026 16:04:53 +0200
Subject: [PATCH] refactor(beszel): deduplicate alerts query input and document
 systemId option

- Memoize alerts query input to avoid triple repetition
- Add system selector to docs configuration items
---
 .../docs/widgets/beszel-system-stats/index.ts |  6 ++++
 .../widgets/src/beszel-alerts/component.tsx   | 34 +++++++------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/apps/docs/docs/widgets/beszel-system-stats/index.ts b/apps/docs/docs/widgets/beszel-system-stats/index.ts
index f320a7ea9..4a9e06c79 100644
--- a/apps/docs/docs/widgets/beszel-system-stats/index.ts
+++ b/apps/docs/docs/widgets/beszel-system-stats/index.ts
@@ -8,6 +8,12 @@ export const beszelSystemStatsWidget: WidgetDefinition = {
   path: "../../widgets/beszel-system-stats",
   configuration: {
     items: [
+      {
+        name: "System",
+        description: "The Beszel system to display stats for. Searchable select populated from the integration.",
+        values: { type: "text" },
+        defaultValue: "First available system",
+      },
       {
         name: "Time period",
         description:
diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index 76ef5318e..331028770 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -36,31 +36,21 @@ export default function BeszelAlertsWidget({
   isEditMode,
 }: WidgetComponentProps<"beszelAlerts">) {
   const t = useScopedI18n("widget.beszelAlerts");
-  const { data: results = [] } = clientApi.widget.beszel.getAlerts.useQuery(
-    {
-      integrationIds,
-      includeHistory: options.showHistory,
-      maxHistoryItems: options.maxHistoryItems,
-    },
-    { staleTime: 15_000, refetchInterval: 15_000, retry: false },
+  const alertsInput = useMemo(
+    () => ({ integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }),
+    [integrationIds, options.showHistory, options.maxHistoryItems],
   );
+  const { data: results = [] } = clientApi.widget.beszel.getAlerts.useQuery(alertsInput, {
+    staleTime: 15_000,
+    refetchInterval: 15_000,
+    retry: false,
+  });
   const utils = clientApi.useUtils();
 
-  clientApi.widget.beszel.subscribeAlerts.useSubscription(
-    {
-      integrationIds,
-      includeHistory: options.showHistory,
-      maxHistoryItems: options.maxHistoryItems,
-    },
-    {
-      enabled: !isEditMode,
-      onData(data) {
-        utils.widget.beszel.getAlerts.setData(
-          {
-            integrationIds,
-            includeHistory: options.showHistory,
-            maxHistoryItems: options.maxHistoryItems,
-          },
+  clientApi.widget.beszel.subscribeAlerts.useSubscription(alertsInput, {
+    enabled: !isEditMode,
+    onData(data) {
+      utils.widget.beszel.getAlerts.setData(alertsInput,
           (prev) => {
             if (!prev) return prev;
             return prev.map((r) =>