From bb5721c47348f2bc7829652228c0c46ad5d4b4a5 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Wed, 28 Sep 2022 02:32:39 +0300
Subject: [PATCH] ui polish

---
 src/components/services/widget/block.jsx       |  9 ++++++++-
 src/components/widgets/resources/cpu.jsx       | 16 +++++++++++++---
 src/components/widgets/resources/disk.jsx      | 16 +++++++++++++---
 src/components/widgets/resources/memory.jsx    | 16 +++++++++++++---
 src/components/widgets/resources/usage-bar.jsx |  2 +-
 5 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/components/services/widget/block.jsx b/src/components/services/widget/block.jsx
index e0c1858a7..295330d65 100644
--- a/src/components/services/widget/block.jsx
+++ b/src/components/services/widget/block.jsx
@@ -1,6 +1,13 @@
+import classNames from "classnames";
+
 export default function Block({ value, label }) {
   return (
-    <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+    <div
+      className={classNames(
+        "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1",
+        value === undefined ? "animate-pulse" : ""
+      )}
+    >
       <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
       <div className="font-bold text-xs uppercase">{label}</div>
     </div>
diff --git a/src/components/widgets/resources/cpu.jsx b/src/components/widgets/resources/cpu.jsx
index 7bb443215..741ffefd7 100644
--- a/src/components/widgets/resources/cpu.jsx
+++ b/src/components/widgets/resources/cpu.jsx
@@ -25,10 +25,20 @@ export default function Cpu({ expanded }) {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
         <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("docker.cpu")}</div>
+          </div>
+          {expanded && (
+            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.load")}</div>
+            </div>
+          )}
+          <UsageBar percent={100} />
         </div>
       </div>
     );
diff --git a/src/components/widgets/resources/disk.jsx b/src/components/widgets/resources/disk.jsx
index 3d57bb19f..69f560f62 100644
--- a/src/components/widgets/resources/disk.jsx
+++ b/src/components/widgets/resources/disk.jsx
@@ -25,10 +25,20 @@ export default function Disk({ options, expanded }) {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
         <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={100} />
         </div>
       </div>
     );
diff --git a/src/components/widgets/resources/memory.jsx b/src/components/widgets/resources/memory.jsx
index 4eb007e47..452634565 100644
--- a/src/components/widgets/resources/memory.jsx
+++ b/src/components/widgets/resources/memory.jsx
@@ -25,10 +25,20 @@ export default function Memory({ expanded }) {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
         <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={100} />
         </div>
       </div>
     );
diff --git a/src/components/widgets/resources/usage-bar.jsx b/src/components/widgets/resources/usage-bar.jsx
index 27c7f5cc5..c817db4c4 100644
--- a/src/components/widgets/resources/usage-bar.jsx
+++ b/src/components/widgets/resources/usage-bar.jsx
@@ -2,7 +2,7 @@ export default function UsageBar({ percent }) {
   return (
     <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-theme-200/20">
       <div
-        className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50"
+        className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000"
         style={{
           width: `${percent}%`,
         }}