feat: modernize dashboard widgets

packages/widgets/src/patchmon/component.tsx

@@ -75,7 +75,13 @@ const getLayoutMode = (width: number, height: number): LayoutMode => {
   return "comfortable";
 };
 
-export default function PatchMonWidget({ integrationIds, options, width, height }: WidgetComponentProps<"patchmon">) {
+export default function PatchMonWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"patchmon">) {
   const t = useScopedI18n("widget.patchmon");
   const integrationId = integrationIds[0] ?? "";
   const { data: stats } = clientApi.widget.patchmon.getStats.useQuery({ integrationId }, { staleTime: 60 * 1000 });
@@ -98,18 +104,20 @@ export default function PatchMonWidget({ integrationIds, options, width, height
     .map(([, statKey]) => statKey);
 
   const colorContext = { totalHosts: stats.totalHosts };
-  const layout = getLayoutMode(width, height);
-  const isLandscape = width / height > 2.5;
+  const advanced = displayMode === "advanced";
+  const layout = advanced ? "spacious" : getLayoutMode(width, height);
+  const isLandscape = !advanced && width / height > 2.5;
   const isTinySquare = width < 160 && height < 160;
   const isShortLandscape = width >= 160 && height < 160;
-  const isCompactSurface = isTinySquare || isShortLandscape;
+  const isCompactSurface = !advanced && (isTinySquare || isShortLandscape);
   const isNarrow = width < 180;
   const osDisplayMode = options.osDisplayMode as "bars" | "donut";
   const showOsData = options.showOsDistribution && stats.osDistribution.length > 0;
 
   const showIcons = layout !== "mini";
   const showLabels = layout !== "mini";
-  const showHero = options.showComplianceHero && (!isLandscape || isCompactSurface) && width >= 90 && height >= 90;
+  const showHero =
+    options.showComplianceHero && (advanced || !isLandscape || isCompactSurface) && width >= 90 && height >= 90;
   const showHeroText = showHero && shouldShowComplianceHeroText(width);
   const showHeroRingOnly = showHero && !showHeroText;
   const compactPrimaryContent = isCompactSurface
@@ -120,10 +128,10 @@ export default function PatchMonWidget({ integrationIds, options, width, height
       })
     : null;
   const showStats = visibleStatKeys.length > 0 && !isCompactSurface;
-  const showOsSection = showOsData && !isCompactSurface && height > 200;
+  const showOsSection = showOsData && !isCompactSurface && (advanced || height > 200);
   const showCompactFooter = isCompactSurface && height >= 110;
-  const showFooter = isCompactSurface ? showCompactFooter : !isLandscape && height > 220;
-  const showOsLegend = osDisplayMode === "donut" && width >= 380 && height >= 300;
+  const showFooter = advanced || (isCompactSurface ? showCompactFooter : !isLandscape && height > 220);
+  const showOsLegend = osDisplayMode === "donut" && (advanced || (width >= 380 && height >= 300));
 
   const hasContent = compactPrimaryContent !== null || showStats || showOsSection || showHero;
 
@@ -272,10 +280,10 @@ export default function PatchMonWidget({ integrationIds, options, width, height
     </div>
   );
 
-  const needsScroll = layout === "mini" || layout === "compact";
+  const needsScroll = !advanced && (layout === "mini" || layout === "compact");
 
   return (
-    <div className={classes.root}>
+    <div className={classes.root} data-display-mode={displayMode}>
       {showHero && (
         <ComplianceHero
           compliancePercent={compliancePercent}

packages/widgets/src/patchmon/index.ts

@@ -8,8 +8,10 @@ import { patchmonOptionsSuperRefine } from "./threshold-validation";
 
 export const { definition, componentLoader } = createWidgetDefinition("patchmon", {
   icon: IconShieldCheck,
+  queryKey: [["widget", "patchmon"]],
   supportedIntegrations: ["patchmon"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
@@ -188,18 +190,42 @@ export const { definition, componentLoader } = createWidgetDefinition("patchmon"
         useCustomThresholds: {
           shouldHide: (options) => !options.enableThresholdColors,
         },
-        hostsNeedingUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
+        hostsNeedingUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
         totalOutdatedPackagesThresholdMode: {
           shouldHide: (options) =>
             !options.enableThresholdColors || !options.useCustomThresholds || !options.showTotalOutdatedPackages,

packages/widgets/src/patchmon/os-distribution-section.tsx

@@ -9,16 +9,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./component.module.css";
 
-const OS_COLORS = [
-  "blue.6",
-  "orange.6",
-  "green.6",
-  "grape.6",
-  "cyan.6",
-  "pink.6",
-  "yellow.6",
-  "teal.6",
-] as const;
+const OS_COLORS = ["blue.6", "orange.6", "green.6", "grape.6", "cyan.6", "pink.6", "yellow.6", "teal.6"] as const;
 
 interface OsDistributionSectionProps {
   entries: PatchMonOsDistributionEntry[];
@@ -73,13 +64,7 @@ export function OsDistributionSection({
         )}
         <div className={`${classes.osDonutContent} ${showLegend ? classes.osDonutContentWithLegend : ""}`}>
           <div className={classes.osDonut}>
-            <DonutChart
-              data={chartData}
-              size={donutSize}
-              withTooltip
-              tooltipDataSource="segment"
-              paddingAngle={2}
-            />
+            <DonutChart data={chartData} size={donutSize} withTooltip tooltipDataSource="segment" paddingAngle={2} />
           </div>
           {showLegend && (
             <div className={classes.osLegend}>
@@ -115,7 +100,12 @@ export function OsDistributionSection({
       <div className={classes.compactOsBars}>
         {compactEntries.map((entry, i) => (
           <div key={`${entry.name}-${entry.osVersion ?? ""}`} className={classes.compactOsBar}>
-            <Text size="xs" className={classes.compactOsLabel} truncate="end" title={formatOsLabel(entry, showOsVersion)}>
+            <Text
+              size="xs"
+              className={classes.compactOsLabel}
+              truncate="end"
+              title={formatOsLabel(entry, showOsVersion)}
+            >
               {formatOsLabel(entry, showOsVersion)}
             </Text>
             <Group gap={6} wrap="nowrap" className={classes.osBarGroup}>

packages/widgets/src/patchmon/stat-colors.ts

@@ -13,11 +13,7 @@ export type PatchMonStatKey =
 
 export type ColorablePatchMonStatKey = Extract<
   PatchMonStatKey,
-  | "hostsNeedingUpdates"
-  | "securityUpdates"
-  | "hostsWithSecurityUpdates"
-  | "upToDateHosts"
-  | "totalOutdatedPackages"
+  "hostsNeedingUpdates" | "securityUpdates" | "hostsWithSecurityUpdates" | "upToDateHosts" | "totalOutdatedPackages"
 >;
 
 export type StatSeverity = "green" | "yellow" | "red" | "neutral";

packages/widgets/src/patchmon/test/stat-colors.spec.ts

@@ -117,11 +117,16 @@ describe("resolveStatColor options", () => {
   test("handles zero total hosts for percent-based stats", () => {
     expect(resolveStatColor("upToDateHosts", 0, { totalHosts: 0 }, defaultOptions)).toBe("green");
     expect(
-      resolveStatColor("hostsNeedingUpdates", 1, { totalHosts: 0 }, {
-        ...defaultOptions,
-        useCustomThresholds: true,
-        hostsNeedingUpdatesThresholdMode: "percent",
-      }),
+      resolveStatColor(
+        "hostsNeedingUpdates",
+        1,
+        { totalHosts: 0 },
+        {
+          ...defaultOptions,
+          useCustomThresholds: true,
+          hostsNeedingUpdatesThresholdMode: "percent",
+        },
+      ),
     ).toBe("red");
   });
 

packages/widgets/src/patchmon/test/threshold-validation.spec.ts

@@ -23,25 +23,27 @@ const baseOptions = {
   totalOutdatedPackagesCriticalAt: 50,
 };
 
-const optionsSchema = z.object({
-  hostsNeedingUpdatesWarningAt: z.number().int().min(0),
-  hostsNeedingUpdatesCriticalAt: z.number().int().min(0),
-  securityUpdatesWarningAt: z.number().int().min(0),
-  securityUpdatesCriticalAt: z.number().int().min(0),
-  hostsWithSecurityUpdatesWarningAt: z.number().int().min(0),
-  hostsWithSecurityUpdatesCriticalAt: z.number().int().min(0),
-  upToDateHostsWarningAt: z.number().int().min(0),
-  upToDateHostsCriticalAt: z.number().int().min(0),
-  totalOutdatedPackagesWarningAt: z.number().int().min(0),
-  totalOutdatedPackagesCriticalAt: z.number().int().min(0),
-  enableThresholdColors: z.boolean(),
-  useCustomThresholds: z.boolean(),
-  hostsNeedingUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  securityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  hostsWithSecurityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  upToDateHostsThresholdMode: z.enum(["absolute", "percent"]),
-  totalOutdatedPackagesThresholdMode: z.enum(["absolute", "percent"]),
-}).superRefine(patchmonOptionsSuperRefine);
+const optionsSchema = z
+  .object({
+    hostsNeedingUpdatesWarningAt: z.number().int().min(0),
+    hostsNeedingUpdatesCriticalAt: z.number().int().min(0),
+    securityUpdatesWarningAt: z.number().int().min(0),
+    securityUpdatesCriticalAt: z.number().int().min(0),
+    hostsWithSecurityUpdatesWarningAt: z.number().int().min(0),
+    hostsWithSecurityUpdatesCriticalAt: z.number().int().min(0),
+    upToDateHostsWarningAt: z.number().int().min(0),
+    upToDateHostsCriticalAt: z.number().int().min(0),
+    totalOutdatedPackagesWarningAt: z.number().int().min(0),
+    totalOutdatedPackagesCriticalAt: z.number().int().min(0),
+    enableThresholdColors: z.boolean(),
+    useCustomThresholds: z.boolean(),
+    hostsNeedingUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    securityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    hostsWithSecurityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    upToDateHostsThresholdMode: z.enum(["absolute", "percent"]),
+    totalOutdatedPackagesThresholdMode: z.enum(["absolute", "percent"]),
+  })
+  .superRefine(patchmonOptionsSuperRefine);
 
 describe("patchmonOptionsSuperRefine", () => {
   test("accepts percent thresholds within 0-100", () => {