diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index b50139361..d6c1d004d 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -207,7 +207,7 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
acc.memory += safeValue(container.memoryUsage);
return acc;
},
- { cpu: 0, memory: 0 }
+ { cpu: 0, memory: 0 },
);
}, [containers]);
@@ -283,7 +283,7 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
{t("table.totalCpu", { cpu: totals.cpu.toFixed(2) })}
-
+
{t("table.totalMemory", { memory: humanFileSize(totals.memory) })}
diff --git a/packages/widgets/src/health-monitoring/index.ts b/packages/widgets/src/health-monitoring/index.ts
index 698446c28..dd176a189 100644
--- a/packages/widgets/src/health-monitoring/index.ts
+++ b/packages/widgets/src/health-monitoring/index.ts
@@ -95,6 +95,12 @@ export const { definition, componentLoader } = createWidgetDefinition("healthMon
return !integrationKinds.includes("proxmox");
},
},
+ defaultTab: {
+ shouldHide(_, integrationKinds) {
+ // The system/cluster tabs only render for Proxmox, so the default tab choice does nothing otherwise
+ return !integrationKinds.includes("proxmox");
+ },
+ },
},
);
},
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 1f0dd02e5..405838cac 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -13,7 +13,6 @@ import {
Progress,
Stack,
Text,
- Tooltip,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
@@ -33,6 +32,7 @@ import duration from "dayjs/plugin/duration";
import { clientApi } from "@homarr/api/client";
import { useRequiredBoard } from "@homarr/boards/context";
+import { humanFileSize } from "@homarr/common";
import type { TranslationFunction } from "@homarr/translation";
import { useI18n } from "@homarr/translation/client";
@@ -91,7 +91,7 @@ export const SystemHealthMonitoring = ({
return (
- {healthData.map(({ integrationId, integrationName, healthInfo, updatedAt }) => {
+ {healthData.map(({ integrationId, integrationName, healthInfo }) => {
const disksData = matchFileSystemAndSmart(healthInfo.fileSystem, healthInfo.smart);
const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes);
return (
@@ -196,11 +196,6 @@ export const SystemHealthMonitoring = ({
))}
- {
-
- {t("widget.healthMonitoring.popover.lastSeen", { lastSeen: dayjs(updatedAt).fromNow() })}
-
- }
{options.fileSystem &&
disksData.map((disk) => {
return (
@@ -214,7 +209,7 @@ export const SystemHealthMonitoring = ({
radius={board.itemRadius}
p="xs"
>
-
+
-
-
-
- {options.fahrenheit
- ? `${(disk.temperature * 1.8 + 32).toFixed(1)}°F`
- : `${disk.temperature}°C`}
-
-
+ {disk.temperature !== null && (
+
+
+
+ {options.fahrenheit
+ ? `${(disk.temperature * 1.8 + 32).toFixed(1)}°F`
+ : `${disk.temperature}°C`}
+
+
+ )}
@@ -243,37 +240,26 @@ export const SystemHealthMonitoring = ({
-
-
-
-
- {t("widget.healthMonitoring.popover.used")}
-
-
-
-
- = 1
- ? `${(Number(disk.available) / 1024 ** 4).toFixed(2)} TiB`
- : `${(Number(disk.available) / 1024 ** 3).toFixed(2)} GiB`
- }
- >
-
-
- {t("widget.healthMonitoring.popover.available")}
-
-
-
+
+
+
+
+
+ {t("widget.healthMonitoring.popover.used")} {formatFileSize(disk.used)}
+
+
+ {formatFileSize(disk.available)} {t("widget.healthMonitoring.popover.available")}
+
+
);
@@ -307,6 +293,13 @@ export const progressColor = (percentage: number) => {
else return "red";
};
+// Some integrations report file sizes as raw bytes (e.g. TrueNAS, Glances) while others pre-format
+// them (e.g. Unraid, dashdot). Format the former and pass the latter through untouched.
+const formatFileSize = (value: string) => {
+ const bytes = Number(value);
+ return Number.isFinite(bytes) ? humanFileSize(Math.round(bytes)) : value;
+};
+
interface FileSystem {
deviceName: string;
used: string;
@@ -331,7 +324,7 @@ export const matchFileSystemAndSmart = (fileSystems: FileSystem[], smartData: Sm
used: fileSystem.used,
available: fileSystem.available,
percentage: fileSystem.percentage,
- temperature: smartDisk?.temperature ?? 0,
+ temperature: smartDisk?.temperature ?? null,
overallStatus: smartDisk?.overallStatus ?? "",
};
})
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index 628c67e32..17e9b8eed 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -52,6 +52,7 @@ import * as timetable from "./timetable";
import * as tracearr from "./tracearr";
import * as umami from "./umami";
import * as ups from "./ups";
+import * as vpn from "./vpn";
import * as beszelSystemTable from "./beszel-system-table";
import * as beszelSystemGrid from "./beszel-system-grid";
import * as beszelAlerts from "./beszel-alerts";
@@ -108,6 +109,7 @@ export const widgetImports = {
uptimeKuma,
audioStats,
umami,
+ vpn,
ups,
beszelSystemTable,
beszelSystemGrid,
diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index 5c6271c09..efe2fe73d 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -1,6 +1,7 @@
"use client";
-import { Box, Card, Group, Stack, useMantineColorScheme } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { Box, Card, Group, Stack, Tooltip, useMantineColorScheme } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { useRequiredBoard } from "@homarr/boards/context";
@@ -31,6 +32,90 @@ const getDisplayText = (item: { used: string; available: string; percentage: num
}
};
+interface SystemDiskCardProps {
+ deviceName: string;
+ percentage: number;
+ displayText: string;
+ temperature: number | null | undefined;
+ healthy: boolean;
+ showBackgroundBar: boolean;
+}
+
+const SystemDiskCard = ({
+ deviceName,
+ percentage,
+ displayText,
+ temperature,
+ healthy,
+ showBackgroundBar,
+}: SystemDiskCardProps) => {
+ const board = useRequiredBoard();
+ const scheme = useMantineColorScheme();
+ const t = useI18n();
+ const valueRef = useRef(null);
+ const [valueFits, setValueFits] = useState(true);
+
+ // When the card is squeezed (small widget), the value line is clipped by the card's `overflow: hidden`.
+ // Detect that and hide it, surfacing the value in a tooltip instead. The value keeps its layout space
+ // (visibility, not display) so toggling it does not change the measurement and flap. The ref lives on
+ // the value (not the Card) so the Tooltip can attach its own ref to the Card.
+ useEffect(() => {
+ const value = valueRef.current;
+ const card = value?.offsetParent as HTMLElement | null; // the position:relative Card
+ if (!value || !card) return;
+ const measure = () => {
+ setValueFits(value.getBoundingClientRect().bottom <= card.getBoundingClientRect().bottom + 1);
+ };
+ measure();
+ const observer = new ResizeObserver(measure);
+ observer.observe(card);
+ return () => observer.disconnect();
+ }, [displayText, healthy]);
+
+ const unhealthyLabel = t("widget.systemDisks.status.unhealthy");
+
+ return (
+
+
+
+
+
+ {deviceName}
+
+
+ {displayText}
+ {!healthy && {unhealthyLabel}}
+
+
{temperature ?
{temperature}°C
: null}
-
- {item.deviceName}
-
-
- {getDisplayText(item, options.displayMode)}
- {!healthy && {t("widget.systemDisks.status.unhealthy")}}
-
-
- {smartItem?.temperature && options.showTemperatureIfAvailable ? (
-
{smartItem.temperature}°C
- ) : null}
-