jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: system resources widget (#3538)

Browse Source 
* feat: add system resources widget

* Update packages/widgets/src/system-resources/index.ts

Co-authored-by: Andre Silva <32734153+Aandree5@users.noreply.github.com>

* fix: system resources not updating

* refactor: improve logic in component

* fix: tooltip overflow

* feat: add label with last value

* feat: hide label when hovering

* fix: formatting

* fix: lint

* fix: formatting

* fix: wrong redis channel used for opnsense

---------

Co-authored-by: Andre Silva <32734153+Aandree5@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel
2025-08-04 20:12:28 +00:00
committed by GitHub
parent 1b5ccb5293
commit 3ee408bf53
24 changed files with 512 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/widgets/src/health-monitoring/rings/memory-ring.tsx
+7 -9
View File
@@ -3,7 +3,7 @@ import { IconBrain } from "@tabler/icons-react";
import { progressColor } from "../system-health";
export const MemoryRing = ({ available, used, isTiny }: { available: string; used: string; isTiny: boolean }) => {
export const MemoryRing = ({ available, used, isTiny }: { available: number; used: number; isTiny: boolean }) => {
const memoryUsage = formatMemoryUsage(available, used);
return (
@@ -31,14 +31,12 @@ export const MemoryRing = ({ available, used, isTiny }: { available: string; use
);
};
export const formatMemoryUsage = (memFree: string, memUsed: string) => {
const memFreeBytes = Number(memFree);
const memUsedBytes = Number(memUsed);
const totalMemory = memFreeBytes + memUsedBytes;
const memFreeGB = (memFreeBytes / 1024 ** 3).toFixed(2);
const memUsedGB = (memUsedBytes / 1024 ** 3).toFixed(2);
const memFreePercent = Math.round((memFreeBytes / totalMemory) * 100);
const memUsedPercent = Math.round((memUsedBytes / totalMemory) * 100);
export const formatMemoryUsage = (memFree: number, memUsed: number) => {
const totalMemory = memFree + memUsed;
const memFreeGB = (memFree / 1024 ** 3).toFixed(2);
const memUsedGB = (memUsed / 1024 ** 3).toFixed(2);
const memFreePercent = Math.round((memFree / totalMemory) * 100);
const memUsedPercent = Math.round((memUsed / totalMemory) * 100);
const memTotalGB = (totalMemory / 1024 ** 3).toFixed(2);
return {
packages/widgets/src/health-monitoring/system-health.tsx
+6 -2
View File
@@ -89,7 +89,7 @@ export const SystemHealthMonitoring = ({
<Stack h="100%" gap="sm" className="health-monitoring">
{healthData.map(({ integrationId, integrationName, healthInfo, updatedAt }) => {
const disksData = matchFileSystemAndSmart(healthInfo.fileSystem, healthInfo.smart);
const memoryUsage = formatMemoryUsage(healthInfo.memAvailable, healthInfo.memUsed);
const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes);
return (
<Stack
gap="sm"
@@ -176,7 +176,11 @@ export const SystemHealthMonitoring = ({
<CpuTempRing fahrenheit={options.fahrenheit} cpuTemp={healthInfo.cpuTemp} isTiny={isTiny} />
)}
{options.memory && (
<MemoryRing available={healthInfo.memAvailable} used={healthInfo.memUsed} isTiny={isTiny} />
<MemoryRing
available={healthInfo.memAvailableInBytes}
used={healthInfo.memUsedInBytes}
isTiny={isTiny}
/>
)}
</Flex>
{