From 81e3b0bd1e35570e927f7aad536c501a1e4a068c Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Wed, 7 Sep 2022 17:17:01 +0300
Subject: [PATCH] cleanup resource widget design

---
 src/components/widgets/resources/cpu.jsx      | 27 ++++++++++--------
 src/components/widgets/resources/disk.jsx     | 28 ++++++++++++-------
 src/components/widgets/resources/memory.jsx   | 26 +++++++++++------
 .../widgets/resources/resources.jsx           |  4 +--
 4 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/components/widgets/resources/cpu.jsx b/src/components/widgets/resources/cpu.jsx
index 541f1a421..1e6cd438c 100644
--- a/src/components/widgets/resources/cpu.jsx
+++ b/src/components/widgets/resources/cpu.jsx
@@ -11,9 +11,8 @@ export default function Cpu() {
     return (
       <div className="flex-none flex flex-row items-center justify-center">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">API Error</span>
         </div>
       </div>
     );
@@ -23,24 +22,28 @@ export default function Cpu() {
     return (
       <div className="flex-none flex flex-row items-center justify-center">
         <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left font-mono">
+        <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-xs">- Usage</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- Load</span>
         </div>
       </div>
     );
   }
 
+  const percent = data.cpu.usage;
+
   return (
     <div className="flex-none flex flex-row items-center justify-center">
       <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left font-mono">
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          <span className="whitespace-pre">{`${Math.round(data.cpu.usage)}%`.padEnd(3, " ")} Usage</span>
-        </span>
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {`${(Math.round(data.cpu.load * 100) / 100).toFixed(1)}`.padEnd(3, " ")} Load
-        </span>
+      <div className="flex flex-col ml-3 text-left font-mono min-w-[50px]">
+        <div className="text-theme-800 dark:text-theme-200 text-xs">{`${Math.round(data.cpu.usage)}%`}</div>
+        <div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+          <div
+            className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
+            style={{
+              width: `${percent}%`,
+            }}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/widgets/resources/disk.jsx b/src/components/widgets/resources/disk.jsx
index f78a3a2e1..4121c9ff5 100644
--- a/src/components/widgets/resources/disk.jsx
+++ b/src/components/widgets/resources/disk.jsx
@@ -14,8 +14,7 @@ export default function Disk({ options }) {
       <div className="flex-none flex flex-row items-center justify-center">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">API Error</span>
         </div>
       </div>
     );
@@ -26,23 +25,32 @@ export default function Disk({ options }) {
       <div className="flex-none flex flex-row items-center justify-center">
         <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- Free</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- Used</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
         </div>
       </div>
     );
   }
 
+  const percent = Math.round((data.drive.usedGb / data.drive.totalGb) * 100);
+
   return (
-    <div className="flex-none flex flex-row items-center justify-center">
+    <div className="flex-none flex flex-row items-center justify-center group">
       <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left font-mono">
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {formatBytes(data.drive.freeGb * 1024 * 1024 * 1024)} Free
+      <div className="flex flex-col ml-3 text-left font-mono ">
+        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
+          {formatBytes(data.drive.freeGb * 1024 * 1024 * 1024, 0)} Free
         </span>
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {formatBytes(data.drive.usedGb * 1024 * 1024 * 1024)} Used
+        <span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
+          {formatBytes(data.drive.totalGb * 1024 * 1024 * 1024, 0)} Total
         </span>
+        <div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+          <div
+            className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
+            style={{
+              width: `${percent}%`,
+            }}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/widgets/resources/memory.jsx b/src/components/widgets/resources/memory.jsx
index e8d60ccc5..4224785e5 100644
--- a/src/components/widgets/resources/memory.jsx
+++ b/src/components/widgets/resources/memory.jsx
@@ -14,8 +14,7 @@ export default function Memory() {
       <div className="flex-none flex flex-row items-center justify-center">
         <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">API Error</span>
         </div>
       </div>
     );
@@ -26,23 +25,32 @@ export default function Memory() {
       <div className="flex-none flex flex-row items-center justify-center">
         <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
         <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Used</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Free</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
         </div>
       </div>
     );
   }
 
+  const percent = Math.round((data.memory.usedMemMb / data.memory.totalMemMb) * 100);
+
   return (
-    <div className="flex-none flex flex-row items-center justify-center">
+    <div className="flex-none flex flex-row items-center justify-center group">
       <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
       <div className="flex flex-col ml-3 text-left font-mono">
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
-          {formatBytes(data.memory.usedMemMb * 1024 * 1024)} Used
-        </span>
-        <span className="text-theme-800 dark:text-theme-200 text-xs">
+        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
           {formatBytes(data.memory.freeMemMb * 1024 * 1024)} Free
         </span>
+        <span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
+          {formatBytes(data.memory.usedMemMb * 1024 * 1024)} Used
+        </span>
+        <div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+          <div
+            className="bg-theme-600 h-1 rounded-full dark:bg-theme-500"
+            style={{
+              width: `${percent}%`,
+            }}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/widgets/resources/resources.jsx b/src/components/widgets/resources/resources.jsx
index 711e97fb7..4275cf263 100644
--- a/src/components/widgets/resources/resources.jsx
+++ b/src/components/widgets/resources/resources.jsx
@@ -11,9 +11,7 @@ export default function Resources({ options }) {
         {options.disk && <Disk options={options} />}
       </div>
       {options.label && (
-        <div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">
-          {options.label}
-        </div>
+        <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
       )}
     </div>
   );