fix: health monitoring hotfix (#1970)

* fix cpu temp when not available, fix hover dropdown, resize progress rings.

* fix spelling

src/widgets/health-monitoring/HealthMonitoringCpu.tsx

@@ -23,13 +23,13 @@ const HealthMonitoringCpu = ({ info, cpuTemp, fahrenheit }: any) => {
       color: 'teal',
     },
     {
-      label: `${t('cpu.minute', { minute: 5 })}`,
+      label: `${t('cpu.minutes', { minutes: 5 })}`,
       stats: info.loadAverage['5min'],
       progress: info.loadAverage['5min'],
       color: 'blue',
     },
     {
-      label: `${t('cpu.minute', { minute: 15 })}`,
+      label: `${t('cpu.minutes', { minutes: 15 })}`,
       stats: info.loadAverage['15min'],
       progress: info.loadAverage['15min'],
       color: 'red',
@@ -40,12 +40,12 @@ const HealthMonitoringCpu = ({ info, cpuTemp, fahrenheit }: any) => {
     <Group position="center">
       <RingProgress
         roundCaps
-        size={140}
+        size={120}
         thickness={12}
         label={
           <Center style={{ flexDirection: 'column' }}>
             {info.cpuUtilization.toFixed(2)}%
-            <HoverCard width={280} shadow="md" position="top">
+            <HoverCard width={280} shadow="md" position="top" withinPortal>
               <HoverCard.Target>
                 <IconCpu size={40} />
               </HoverCard.Target>
@@ -83,27 +83,29 @@ const HealthMonitoringCpu = ({ info, cpuTemp, fahrenheit }: any) => {
           },
         ]}
       />
-      <RingProgress
-        roundCaps
-        size={140}
-        thickness={12}
-        label={
-          <Center
-            style={{
-              flexDirection: 'column',
-            }}
-          >
-            {fahrenheit ? `${toFahrenheit(cpuTemp.cputemp)}°F` : `${cpuTemp.cputemp}°C`}
-            <IconCpu size={40} />
-          </Center>
-        }
-        sections={[
-          {
-            value: cpuTemp.cputemp,
-            color: cpuTemp.cputemp < 60 ? 'green' : 'red',
-          },
-        ]}
-      />
+      {cpuTemp && (
+        <RingProgress
+          roundCaps
+          size={120}
+          thickness={12}
+          label={
+            <Center
+              style={{
+                flexDirection: 'column',
+              }}
+            >
+              {fahrenheit ? `${toFahrenheit(cpuTemp.cputemp)}°F` : `${cpuTemp.cputemp}°C`}
+              <IconCpu size={40} />
+            </Center>
+          }
+          sections={[
+            {
+              value: cpuTemp.cputemp,
+              color: cpuTemp.cputemp < 60 ? 'green' : 'red',
+            },
+          ]}
+        />
+      )}
     </Group>
   );
 };

src/widgets/health-monitoring/HealthMonitoringFileSystem.tsx

@@ -15,6 +15,10 @@ const HealthMonitoringFileSystem = ({ fileSystem }: any) => {
     available: number;
   }
 
+  const sortedFileSystem = fileSystem.slice().sort((a: FileSystemDisk, b: FileSystemDisk) => {
+    return a.devicename.localeCompare(b.devicename);
+  });
+
   return (
     <Group position="center">
       <Flex
@@ -22,15 +26,15 @@ const HealthMonitoringFileSystem = ({ fileSystem }: any) => {
         gap={{ base: 'sm', sm: 'lg' }}
         justify={{ sm: 'center' }}
       >
-        {fileSystem.map((disk: FileSystemDisk) => (
+        {sortedFileSystem.map((disk: FileSystemDisk) => (
           <RingProgress
-            size={140}
+            size={120}
             roundCaps
             thickness={12}
             label={
               <Center style={{ flexDirection: 'column' }}>
                 {disk.devicename}
-                <HoverCard width={280} shadow="md" position="top">
+                <HoverCard width={280} radius="sm" position="top-end" withinPortal>
                   <HoverCard.Target>
                     <IconServer size={40} />
                   </HoverCard.Target>

src/widgets/health-monitoring/HealthMonitoringMemory.tsx

@@ -16,12 +16,12 @@ const HealthMonitoringMemory = ({ info }: any) => {
     <Group position="center">
       <RingProgress
         roundCaps
-        size={140}
+        size={120}
         thickness={12}
         label={
           <Center style={{ flexDirection: 'column' }}>
             {usedMemoryGB}GiB
-            <HoverCard width={280} shadow="md" position="top">
+            <HoverCard width={280} shadow="md" position="top" withinPortal>
               <HoverCard.Target>
                 <IconBrain size={40} />
               </HoverCard.Target>

src/widgets/health-monitoring/HealthMonitoringTile.tsx

@@ -122,7 +122,7 @@ export const useOpenmediavaultQuery = () => {
       configName: configName!,
     },
     {
-      staleTime: 1000 * 10,
+      refetchInterval: 5000,
     }
   );
 };