From 7c0680d95121972ee6e2738acf6805c521fe1cb5 Mon Sep 17 00:00:00 2001
From: brikim <bkimmle@gmail.com>
Date: Mon, 29 Jan 2024 19:13:35 -0600
Subject: [PATCH] Add a used setting for resources and glances information
 widgets. Defaults to false but when set to true displayed used values for
 memory and disk. Label is also changed to Used instead of Free when set.
 Documentation has also been updated.

---
 docs/widgets/info/glances.md                   |  1 +
 docs/widgets/info/resources.md                 | 11 +++++++++++
 src/components/widgets/glances/glances.jsx     |  8 ++++----
 src/components/widgets/resources/disk.jsx      |  6 +++---
 src/components/widgets/resources/memory.jsx    |  8 ++++----
 src/components/widgets/resources/resources.jsx |  8 +++++---
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/docs/widgets/info/glances.md b/docs/widgets/info/glances.md
index e6fc2a61..887fd073 100644
--- a/docs/widgets/info/glances.md
+++ b/docs/widgets/info/glances.md
@@ -18,6 +18,7 @@ The Glances widget allows you to monitor the resources (CPU, memory, storage, te
     uptime: true # disabled by default
     disk: / # disabled by default, use mount point of disk(s) in glances. Can also be a list (see below)
     expanded: true # show the expanded view
+    used: false # show used values instead of free
     label: MyMachine # optional
 ```
 
diff --git a/docs/widgets/info/resources.md b/docs/widgets/info/resources.md
index 35f2177b..f68250a5 100644
--- a/docs/widgets/info/resources.md
+++ b/docs/widgets/info/resources.md
@@ -68,4 +68,15 @@ You can additionally supply an optional `expanded` property set to true in order
       - /disk3
 ```
 
+You can additionally supply an optional `used` property set to true in order to show used capacity instead of free capacity for memory and disk resources. By default the used property is set to false when not supplied.
+
+```yaml
+- resources:
+    label: Memory Resouces
+    used: true
+    memory: true
+    disk:
+      - /disk1
+```
+
 ![194136533-c4238c82-4d67-41a4-b3c8-18bf26d33ac2](https://user-images.githubusercontent.com/3441425/194728642-a9885274-922b-4027-acf5-a746f58fdfce.png)
diff --git a/src/components/widgets/glances/glances.jsx b/src/components/widgets/glances/glances.jsx
index 0834b775..fc04f0a3 100644
--- a/src/components/widgets/glances/glances.jsx
+++ b/src/components/widgets/glances/glances.jsx
@@ -113,11 +113,11 @@ export default function Widget({ options }) {
         <Resource
           icon={FaMemory}
           value={t("common.bytes", {
-            value: data.mem.free,
+            value: options.used ? (data.mem.total - data.mem.free) : data.mem.free,
             maximumFractionDigits: 1,
             binary: true,
           })}
-          label={t("glances.free")}
+          label={t(options.used ? "glances.used" : "glances.free")}
           expandedValue={t("common.bytes", {
             value: data.mem.total,
             maximumFractionDigits: 1,
@@ -132,8 +132,8 @@ export default function Widget({ options }) {
         <Resource
           key={`disk_${disk.mnt_point ?? disk.device_name}`}
           icon={FiHardDrive}
-          value={t("common.bytes", { value: disk.free })}
-          label={t("glances.free")}
+          value={t("common.bytes", { value: options.used ? (disk.size - disk.free) : disk.free })}
+          label={t(options.used ? "glances.used" : "glances.free")}
           expandedValue={t("common.bytes", { value: disk.size })}
           expandedLabel={t("glances.total")}
           percentage={disk.percent}
diff --git a/src/components/widgets/resources/disk.jsx b/src/components/widgets/resources/disk.jsx
index 4cc86afb..9b6eb2a3 100644
--- a/src/components/widgets/resources/disk.jsx
+++ b/src/components/widgets/resources/disk.jsx
@@ -5,7 +5,7 @@ import { useTranslation } from "next-i18next";
 import Resource from "../widget/resource";
 import Error from "../widget/error";
 
-export default function Disk({ options, expanded, refresh = 1500 }) {
+export default function Disk({ options, expanded, refresh = 1500, used = false }) {
   const { t } = useTranslation();
 
   const { data, error } = useSWR(`/api/widgets/resources?type=disk&target=${options.disk}`, {
@@ -36,8 +36,8 @@ export default function Disk({ options, expanded, refresh = 1500 }) {
   return (
     <Resource
       icon={FiHardDrive}
-      value={t("common.bytes", { value: data.drive.available })}
-      label={t("resources.free")}
+      value={t("common.bytes", { value: used ? (data.drive.size - data.drive.available) : data.drive.available })}
+      label={t(used ? "resources.used" : "resources.free")}
       expandedValue={t("common.bytes", { value: data.drive.size })}
       expandedLabel={t("resources.total")}
       percentage={percent}
diff --git a/src/components/widgets/resources/memory.jsx b/src/components/widgets/resources/memory.jsx
index 155b7ecb..1954a44b 100644
--- a/src/components/widgets/resources/memory.jsx
+++ b/src/components/widgets/resources/memory.jsx
@@ -5,7 +5,7 @@ import { useTranslation } from "next-i18next";
 import Resource from "../widget/resource";
 import Error from "../widget/error";
 
-export default function Memory({ expanded, refresh = 1500 }) {
+export default function Memory({ expanded, refresh = 1500, used = false }) {
   const { t } = useTranslation();
 
   const { data, error } = useSWR(`/api/widgets/resources?type=memory`, {
@@ -31,12 +31,12 @@ export default function Memory({ expanded, refresh = 1500 }) {
   }
 
   const percent = Math.round((data.memory.active / data.memory.total) * 100);
-
+  
   return (
     <Resource
       icon={FaMemory}
-      value={t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
-      label={t("resources.free")}
+      value={t("common.bytes", { value: used ? (data.memory.total - data.memory.available) : data.memory.available, maximumFractionDigits: 1, binary: true })}
+      label={t(used ? "resources.used" : "resources.free")}
       expandedValue={t("common.bytes", { value: data.memory.total, maximumFractionDigits: 1, binary: true })}
       expandedLabel={t("resources.total")}
       percentage={percent}
diff --git a/src/components/widgets/resources/resources.jsx b/src/components/widgets/resources/resources.jsx
index 3b03c0e0..3893113f 100644
--- a/src/components/widgets/resources/resources.jsx
+++ b/src/components/widgets/resources/resources.jsx
@@ -12,15 +12,17 @@ export default function Resources({ options }) {
   let { refresh } = options;
   if (!refresh) refresh = 1500;
   refresh = Math.max(refresh, 1000);
+  let { used } = options;
+  if (!used) used = false;
   return (
     <Container options={options}>
       <Raw>
         <div className="flex flex-row self-center flex-wrap justify-between">
           {options.cpu && <Cpu expanded={expanded} refresh={refresh} />}
-          {options.memory && <Memory expanded={expanded} refresh={refresh} />}
+          {options.memory && <Memory expanded={expanded} refresh={refresh} used={used} />}
           {Array.isArray(options.disk)
-            ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} refresh={refresh} />)
-            : options.disk && <Disk options={options} expanded={expanded} refresh={refresh} />}
+            ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} refresh={refresh} used={used} />)
+            : options.disk && <Disk options={options} expanded={expanded} refresh={refresh} used={used} />}
           {options.cputemp && <CpuTemp expanded={expanded} units={units} refresh={refresh} />}
           {options.uptime && <Uptime refresh={refresh} />}
         </div>