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

@@ -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
 ```
 

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)

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}

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}

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}

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>