Add expanded view for resource widgets

public/locales/en/common.json

@@ -27,7 +27,8 @@
     "resources": {
         "total": "Total",
         "free": "Free",
-        "used": "Used"
+        "used": "Used",
+        "load": "Load"
     },
     "docker": {
         "rx": "RX",

src/components/widgets/resources/cpu.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import UsageBar from "./usage-bar";
 
-export default function Cpu() {
+export default function Cpu({ expanded }) {
   const { t } = useTranslation();
 
   const { data, error } = useSWR(`/api/widgets/resources?type=cpu`, {
@@ -39,11 +39,29 @@ export default function Cpu() {
   return (
     <div className="flex-none flex flex-row items-center mr-3 py-1.5">
       <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left font-mono min-w-[80px]">
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <div className="text-theme-800 dark:text-theme-200 text-xs">
+        <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          {t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}{" "}
+          <div className="pl-0.5">
-          {t("docker.cpu")}
+            {t("common.number", {
+              value: data.cpu.usage,
+              style: "unit",
+              unit: "percent",
+              maximumFractionDigits: 0,
+            })}
+          </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">
+              {t("common.number", {
+                value: data.cpu.load,
+                maximumFractionDigits: 2,
+              })}
+            </div>
+            <div className="pr-1">{t("resources.load")}</div>
+          </div>
+        )}
         <UsageBar percent={percent} />
       </div>
     </div>

src/components/widgets/resources/disk.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import UsageBar from "./usage-bar";
 
-export default function Disk({ options }) {
+export default function Disk({ options, expanded }) {
   const { t } = useTranslation();
 
   const { data, error } = useSWR(`/api/widgets/resources?type=disk&target=${options.disk}`, {
@@ -37,15 +37,19 @@ export default function Disk({ options }) {
   const percent = Math.round((data.drive.usedGb / data.drive.totalGb) * 100);
 
   return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
       <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[80px]">
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          {t("common.bytes", { value: data.drive.freeGb * 1024 * 1024 * 1024 })} {t("resources.free")}
+          <div className="pl-0.5">{t("common.bytes", { value: data.drive.freeGb * 1024 * 1024 * 1024 })}</div>
-        </span>
+          <div className="pr-1">{t("resources.free")}</div>
-        <span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
-          {t("common.bytes", { value: data.drive.totalGb * 1024 * 1024 * 1024 })} {t("resources.total")}
         </span>
+        {expanded && (
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">{t("common.bytes", { value: data.drive.totalGb * 1024 * 1024 * 1024 })}</div>
+            <div className="pr-1">{t("resources.total")}</div>
+          </span>
+        )}
         <UsageBar percent={percent} />
       </div>
     </div>

src/components/widgets/resources/memory.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import UsageBar from "./usage-bar";
 
-export default function Memory() {
+export default function Memory({ expanded }) {
   const { t } = useTranslation();
 
   const { data, error } = useSWR(`/api/widgets/resources?type=memory`, {
@@ -37,15 +37,27 @@ export default function Memory() {
   const percent = Math.round((data.memory.usedMemMb / data.memory.totalMemMb) * 100);
 
   return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
       <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[80px]">
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          {t("common.bytes", { value: data.memory.freeMemMb * 1024 * 1024 })} {t("resources.free")}
+          <div className="pl-0.5">
-        </span>
+            {t("common.bytes", { value: data.memory.freeMemMb * 1024 * 1024, maximumFractionDigits: 0, binary: true })}
-        <span className="text-theme-800 dark:text-theme-200 text-xs hidden group-hover:block">
+          </div>
-          {t("common.bytes", { value: data.memory.usedMemMb * 1024 * 1024 })} {t("resources.used")}
+          <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">
+              {t("common.bytes", {
+                value: data.memory.totalMemMb * 1024 * 1024,
+                maximumFractionDigits: 0,
+                binary: true,
+              })}
+            </div>
+            <div className="pr-1">{t("resources.total")}</div>
+          </span>
+        )}
         <UsageBar percent={percent} />
       </div>
     </div>

src/components/widgets/resources/resources.jsx

@@ -3,14 +3,16 @@ import Cpu from "./cpu";
 import Memory from "./memory";
 
 export default function Resources({ options }) {
+  console.log(options);
+  const { expanded } = options;
   return (
     <div className="flex flex-col max-w:full sm:basis-auto self-center m-auto flex-wrap">
       <div className="flex flex-row self-center flex-wrap justify-between">
-        {options.cpu && <Cpu />}
+        {options.cpu && <Cpu expanded={expanded} />}
-        {options.memory && <Memory />}
+        {options.memory && <Memory expanded={expanded} />}
         {Array.isArray(options.disk)
-          ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} />)
+          ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} />)
-          : options.disk && <Disk options={options} />}
+          : options.disk && <Disk options={options} expanded={expanded} />}
       </div>
       {options.label && (
         <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>