fix: health monitoring hotfix (#1970)

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

* fix spelling

public/locales/en/modules/health-monitoring.json

@@ -12,7 +12,8 @@
       "cpu": {
         "label": "CPU",
         "load": "Load Average",
-        "minute": "{{minute}} minute"
+        "minute": "{{minute}} minute",
+        "minutes": "{{minutes}} minutes"
       },
       "memory": {
         "label": "Memory",

src/server/api/routers/openmediavault.ts

@@ -76,51 +76,67 @@ export const openmediavaultRouter = createTRPCRouter({
           input
         );
 
-        const cookies = authResponse.headers['set-cookie'] || [];
-        sessionId = cookies
-          .find(
-            (cookie: any) =>
-              cookie.includes('X-OPENMEDIAVAULT-SESSIONID') ||
-              cookie.includes('OPENMEDIAVAULT-SESSIONID')
-          )
-          ?.split(';')[0];
-        loginToken = cookies
-          .find(
-            (cookie: any) =>
-              cookie.includes('X-OPENMEDIAVAULT-LOGIN') || cookie.includes('OPENMEDIAVAULT-LOGIN')
-          )
-          ?.split(';')[0];
+        if (authResponse.data.response.sessionid) {
+          sessionId = authResponse.data.response.sessionid;
+        } else {
+          const cookies = authResponse.headers['set-cookie'] || [];
+          sessionId = cookies
+            .find((cookie: any) => cookie.includes('X-OPENMEDIAVAULT-SESSIONID'))
+            ?.split(';')[0];
+
+          loginToken = cookies
+            .find((cookie: any) => cookie.includes('X-OPENMEDIAVAULT-LOGIN'))
+            ?.split(';')[0];
+        }
       }
 
-      const [systemInfoResponse, fileSystemResponse, cpuTempResponse] = await Promise.all([
+      const responses = await Promise.allSettled([
         makeOpenMediaVaultRPCCall(
           'system',
           'getInformation',
           {},
-          { Cookie: `${loginToken};${sessionId}` },
+          loginToken
+            ? { Cookie: `${loginToken};${sessionId}` }
+            : { 'X-OPENMEDIAVAULT-SESSIONID': sessionId as string },
           input
         ),
         makeOpenMediaVaultRPCCall(
           'filesystemmgmt',
           'enumerateMountedFilesystems',
           { includeroot: true },
-          { Cookie: `${loginToken};${sessionId}` },
+          loginToken
+            ? { Cookie: `${loginToken};${sessionId}` }
+            : { 'X-OPENMEDIAVAULT-SESSIONID': sessionId as string },
           input
         ),
         makeOpenMediaVaultRPCCall(
           'cputemp',
           'get',
           {},
-          { Cookie: `${loginToken};${sessionId}` },
+          loginToken
+            ? { Cookie: `${loginToken};${sessionId}` }
+            : { 'X-OPENMEDIAVAULT-SESSIONID': sessionId as string },
           input
         ),
       ]);
 
+      const systemInfoResponse =
+        responses[0].status === 'fulfilled' && responses[0].value
+          ? responses[0].value.data?.response
+          : null;
+      const fileSystemResponse =
+        responses[1].status === 'fulfilled' && responses[1].value
+          ? responses[1].value.data?.response
+          : null;
+      const cpuTempResponse =
+        responses[2].status === 'fulfilled' && responses[2].value
+          ? responses[2].value.data?.response
+          : null;
+
       return {
-        authenticated: authResponse ? authResponse.data.response.authenticated : true,
-        systemInfo: systemInfoResponse?.data.response,
-        fileSystem: fileSystemResponse?.data.response,
-        cpuTemp: cpuTempResponse?.data.response,
+        systemInfo: systemInfoResponse,
+        fileSystem: fileSystemResponse,
+        cpuTemp: cpuTempResponse,
       };
     }),
 });

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,
     }
   );
 };