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

fix: negative curve radius system health (#2197)

Browse Source
This commit is contained in:
Meier Lukas
2025-01-30 22:14:26 +01:00
committed by GitHub
parent 96fd5cc35e
commit c75d4f0f58
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/widgets/src/health-monitoring/system-health.tsx
View File

@@ -318,14 +318,15 @@ export const matchFileSystemAndSmart = (fileSystems: FileSystem[], smartData: Sm
const CpuRing = ({ cpuUtilization }: { cpuUtilization: number }) => { const CpuRing = ({ cpuUtilization }: { cpuUtilization: number }) => {
const { width, ref } = useElementSize(); const { width, ref } = useElementSize();
const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
return ( return (
<Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu"> <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu">
<RingProgress <RingProgress
className="health-monitoring-cpu-utilization" className="health-monitoring-cpu-utilization"
roundCaps roundCaps
size={width * 0.95} size={fallbackWidth * 0.95}
thickness={width / 10} thickness={fallbackWidth / 10}
label={ label={
<Center style={{ flexDirection: "column" }}> <Center style={{ flexDirection: "column" }}>
<Text <Text
@@ -348,13 +349,14 @@ const CpuRing = ({ cpuUtilization }: { cpuUtilization: number }) => {
const CpuTempRing = ({ fahrenheit, cpuTemp }: { fahrenheit: boolean; cpuTemp: number }) => { const CpuTempRing = ({ fahrenheit, cpuTemp }: { fahrenheit: boolean; cpuTemp: number }) => {
const { width, ref } = useElementSize(); const { width, ref } = useElementSize();
const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
return ( return (
<Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu-temperature"> <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu-temperature">
<RingProgress <RingProgress
className="health-monitoring-cpu-temp" className="health-monitoring-cpu-temp"
roundCaps roundCaps
size={width * 0.95} size={fallbackWidth * 0.95}
thickness={width / 10} thickness={fallbackWidth / 10}
label={ label={
<Center style={{ flexDirection: "column" }}> <Center style={{ flexDirection: "column" }}>
<Text className="health-monitoring-cpu-temp-value" size="3cqmin"> <Text className="health-monitoring-cpu-temp-value" size="3cqmin">
@@ -376,6 +378,7 @@ const CpuTempRing = ({ fahrenheit, cpuTemp }: { fahrenheit: boolean; cpuTemp: nu
const MemoryRing = ({ available, used }: { available: string; used: string }) => { const MemoryRing = ({ available, used }: { available: string; used: string }) => {
const { width, ref } = useElementSize(); const { width, ref } = useElementSize();
const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
const memoryUsage = formatMemoryUsage(available, used); const memoryUsage = formatMemoryUsage(available, used);
return ( return (
@@ -383,8 +386,8 @@ const MemoryRing = ({ available, used }: { available: string; used: string }) =>
<RingProgress <RingProgress
className="health-monitoring-memory-use" className="health-monitoring-memory-use"
roundCaps roundCaps
size={width * 0.95} size={fallbackWidth * 0.95}
thickness={width / 10} thickness={fallbackWidth / 10}
label={ label={
<Center style={{ flexDirection: "column" }}> <Center style={{ flexDirection: "column" }}>
<Text className="health-monitoring-memory-value" size="3cqmin"> <Text className="health-monitoring-memory-value" size="3cqmin">