komodo + beszel

src/widgets/beszel/component.jsx

@@ -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

@@ -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/komodo/component.jsx

@@ -3,11 +3,22 @@ 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, MAX_ALLOWED_FIELDS);
   const { widget } = service;
   const containersEndpoint = !(!widget.showSummary && widget.showStacks) ? "containers" : "";
   const { data: containersData, error: containersError } = useWidgetAPI(widget, containersEndpoint);
@@ -20,16 +31,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

@@ -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)