Replace entire codebase with homarr-labs/homarr

2026-01-15 21:54:44 +01:00
parent c5bc3b1559
commit 4fdd1fe351
4666 changed files with 409577 additions and 147434 deletions
@@ -0,0 +1,30 @@
+import { Center, RingProgress, Text } from "@mantine/core";
+import { IconCpu } from "@tabler/icons-react";
+
+import { progressColor } from "../system-health";
+
+export const CpuRing = ({ cpuUtilization, isTiny }: { cpuUtilization: number; isTiny: boolean }) => {
+  return (
+    <RingProgress
+      className="health-monitoring-cpu"
+      roundCaps
+      size={isTiny ? 50 : 100}
+      thickness={isTiny ? 4 : 8}
+      label={
+        <Center style={{ flexDirection: "column" }}>
+          <Text
+            className="health-monitoring-cpu-utilization-value"
+            size={isTiny ? "8px" : "xs"}
+          >{`${cpuUtilization.toFixed(2)}%`}</Text>
+          <IconCpu className="health-monitoring-cpu-utilization-icon" size={isTiny ? 8 : 16} />
+        </Center>
+      }
+      sections={[
+        {
+          value: Number(cpuUtilization.toFixed(2)),
+          color: progressColor(Number(cpuUtilization.toFixed(2))),
+        },
+      ]}
+    />
+  );
+};
@@ -0,0 +1,41 @@
+import { Center, RingProgress, Text } from "@mantine/core";
+import { IconCpu } from "@tabler/icons-react";
+
+import { progressColor } from "../system-health";
+
+export const CpuTempRing = ({
+  fahrenheit,
+  cpuTemp,
+  isTiny,
+}: {
+  fahrenheit: boolean;
+  cpuTemp: number | undefined;
+  isTiny: boolean;
+}) => {
+  if (!cpuTemp) {
+    return null;
+  }
+
+  return (
+    <RingProgress
+      className="health-monitoring-cpu-temperature"
+      roundCaps
+      size={isTiny ? 50 : 100}
+      thickness={isTiny ? 4 : 8}
+      label={
+        <Center style={{ flexDirection: "column" }}>
+          <Text className="health-monitoring-cpu-temp-value" size={isTiny ? "8px" : "xs"}>
+            {fahrenheit ? `${(cpuTemp * 1.8 + 32).toFixed(1)}°F` : `${cpuTemp.toFixed(1)}°C`}
+          </Text>
+          <IconCpu className="health-monitoring-cpu-temp-icon" size={isTiny ? 8 : 16} />
+        </Center>
+      }
+      sections={[
+        {
+          value: cpuTemp,
+          color: progressColor(cpuTemp),
+        },
+      ]}
+    />
+  );
+};
@@ -0,0 +1,47 @@
+import { Center, RingProgress, Text } from "@mantine/core";
+import { IconBrain } from "@tabler/icons-react";
+
+import { progressColor } from "../system-health";
+
+export const MemoryRing = ({ available, used, isTiny }: { available: number; used: number; isTiny: boolean }) => {
+  const memoryUsage = formatMemoryUsage(available, used);
+
+  return (
+    <RingProgress
+      className="health-monitoring-memory"
+      roundCaps
+      size={isTiny ? 50 : 100}
+      thickness={isTiny ? 4 : 8}
+      label={
+        <Center style={{ flexDirection: "column" }}>
+          <Text className="health-monitoring-memory-value" size={isTiny ? "8px" : "xs"}>
+            {memoryUsage.memUsed.GB}GiB
+          </Text>
+          <IconBrain className="health-monitoring-memory-icon" size={isTiny ? 8 : 16} />
+        </Center>
+      }
+      sections={[
+        {
+          value: Number(memoryUsage.memUsed.percent),
+          color: progressColor(Number(memoryUsage.memUsed.percent)),
+          tooltip: `${memoryUsage.memUsed.percent}%`,
+        },
+      ]}
+    />
+  );
+};
+
+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 {
+    memFree: { percent: memFreePercent, GB: memFreeGB },
+    memUsed: { percent: memUsedPercent, GB: memUsedGB },
+    memTotal: { GB: memTotalGB },
+  };
+};