some code fix

ajnart · Feb 25, 2024 · cb41834
1 parent 29078be
commit cb41834
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 63 deletions.
diff --git a/src/widgets/health-monitoring/HealthMonitoringCpu.tsx b/src/widgets/health-monitoring/HealthMonitoringCpu.tsx
@@ -44,7 +44,7 @@ const HealthMonitoringCpu = ({ info, cpuTemp, fahrenheit }: any) => {
         thickness={12}
         label={
           <Center style={{ flexDirection: 'column' }}>
-            {info.cpuUtilization.toFixed(2)}
+            {info.cpuUtilization.toFixed(2)}%
             <HoverCard width={280} shadow="md" position="top">
               <HoverCard.Target>
                 <IconCpu size={40} />
@@ -100,7 +100,14 @@ const HealthMonitoringCpu = ({ info, cpuTemp, fahrenheit }: any) => {
         sections={[
           {
             value: cpuTemp.cputemp,
-            color: cpuTemp.cputemp > 70 ? 'red' : 'green',
+            color:
+              cpuTemp.cputemp < 35
+                ? 'green'
+                : cpuTemp.cputemp > 35 && cpuTemp.cputemp < 60
+                  ? 'yellow'
+                  : cpuTemp.cputemp > 60 && cpuTemp.cputemp < 70
+                    ? 'orange'
+                    : 'red',
           },
         ]}
       />

diff --git a/src/widgets/health-monitoring/HealthMonitoringMemory.tsx b/src/widgets/health-monitoring/HealthMonitoringMemory.tsx
@@ -37,7 +37,14 @@ const HealthMonitoringMemory = ({ info }: any) => {
         sections={[
           {
             value: percentageUsed,
-            color: percentageUsed > 80 ? 'red' : 'green',
+            color:
+              percentageUsed < 10
+                ? 'green'
+                : percentageUsed > 10 && percentageUsed < 70
+                  ? 'yellow'
+                  : percentageUsed > 70 && percentageUsed < 90
+                    ? 'orange'
+                    : 'red',
           },
         ]}
       />

diff --git a/src/widgets/health-monitoring/HealthMonitoringTile.tsx b/src/widgets/health-monitoring/HealthMonitoringTile.tsx
@@ -1,4 +1,4 @@
-import { Card, Divider, Flex, Group, RingProgress, ScrollArea, Text } from '@mantine/core';
+import { Card, Divider, Flex, Group, ScrollArea, Text } from '@mantine/core';
 import {
   IconCloudDownload,
   IconHeartRateMonitor,
@@ -40,8 +40,8 @@ const definition = defineWidget({
   gridstack: {
     minWidth: 1,
     minHeight: 1,
-    maxWidth: 10,
-    maxHeight: 10,
+    maxWidth: 6,
+    maxHeight: 6,
   },
   component: HealthMonitoringWidgetTile,
 });
@@ -62,7 +62,7 @@ function HealthMonitoringWidgetTile({ widget }: HealthMonitoringWidgetProps) {
   const formatUptime = (uptime: number) => {
     const days = Math.floor(uptime / (60 * 60 * 24));
     const remainingHours = Math.floor((uptime % (60 * 60 * 24)) / 3600);
-    return `${days} days & ${remainingHours} hours`;
+    return `${days} days, ${remainingHours} hours`;
   };
 
   return (
@@ -72,72 +72,31 @@ function HealthMonitoringWidgetTile({ widget }: HealthMonitoringWidgetProps) {
           <Group position="center">
             <IconInfoSquare size={40} />
             <Text fz="lg" tt="uppercase" fw={700} c="dimmed" align="center">
-              {t('info.uptime')}: {formatUptime(data.systemInfo.uptime)}
+              {t('info.uptime')}:
+              <br />
+              {formatUptime(data.systemInfo.uptime)}
             </Text>
             <Group position="center">
-              <RingProgress
-                size={80}
-                roundCaps
-                thickness={8}
-                label={
-                  <Text
-                    color={data.systemInfo.availablePkgUpdates === 0 ? 'green' : 'red'}
-                    weight={700}
-                    align="center"
-                    size="xl"
-                  >
-                    <IconCloudDownload size={40} />
-                  </Text>
-                }
-                sections={[
-                  {
-                    value: data.systemInfo.availablePkgUpdates === 0 ? 1 : 100,
-                    color: data.systemInfo.availablePkgUpdates === 0 ? 'green' : 'red',
-                    tooltip: 'Updates',
-                  },
-                ]}
-              />
-              <RingProgress
-                size={80}
-                roundCaps
-                thickness={8}
-                label={
-                  <Text
-                    color={data.systemInfo.rebootRequired ? 'red' : 'green'}
-                    weight={700}
-                    align="center"
-                    size="xl"
-                  >
-                    <IconStatusChange size={40} />
-                  </Text>
-                }
-                sections={[
-                  {
-                    value: data.systemInfo.rebootRequired ? 100 : 1,
-                    color: data.systemInfo.rebootRequired ? 'red' : 'green',
-                    tooltip: 'Reboot',
-                  },
-                ]}
-              />
+              {data.systemInfo.availablePkgUpdates === 0 ? (
+                ''
+              ) : (
+                <IconCloudDownload size={40} color="red" />
+              )}
+              {data.systemInfo.rebootRequired ? <IconStatusChange size={40} color="red" /> : ''}
             </Group>
           </Group>
         </Card>
-        {widget?.properties.memory && (
-          <>
-            <Divider my="sm" />
-            <HealthMonitoringMemory info={data.systemInfo} />
-          </>
-        )}