From 15d2eaec02a60d16bb956bf61c99f1b38c628510 Mon Sep 17 00:00:00 2001
From: Ramazan Sancar <ramazansancar4545@gmail.com>
Date: Mon, 25 Nov 2024 06:25:52 +0300
Subject: [PATCH 01/13] feat: Added active and total for network usage (dw,up)
 resources. upd: Docs updated for network usage. add: Widget resorce
 iconChildren param added. upd: config file default options added. upd:
 resources units type added.

---
 docs/installation/k8s.md                      |  3 +-
 docs/widgets/info/resources.md                |  3 +-
 src/components/widgets/resources/network.jsx  | 62 +++++++++++++++++++
 .../widgets/resources/resources.jsx           |  2 +
 src/components/widgets/widget/resource.jsx    |  6 +-
 src/pages/api/widgets/resources.js            | 26 ++++++++
 6 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 src/components/widgets/resources/network.jsx

diff --git a/docs/installation/k8s.md b/docs/installation/k8s.md
index 6805139b65c..24be2c341fc 100644
--- a/docs/installation/k8s.md
+++ b/docs/installation/k8s.md
@@ -175,6 +175,7 @@ data:
         expanded: true
         cpu: true
         memory: true
+        network: default
     - search:
         provider: duckduckgo
         target: _blank
@@ -370,7 +371,7 @@ prevent unnecessary re-renders on page loads and window / tab focusing. The
 procedure for enabling sticky sessions depends on your Ingress controller. Below
 is an example using Traefik as the Ingress controller.
 
-```
+```yaml
 apiVersion: traefik.io/v1alpha1
 kind: IngressRoute
 metadata:
diff --git a/docs/widgets/info/resources.md b/docs/widgets/info/resources.md
index 19323dc30c9..4a15ca04f18 100644
--- a/docs/widgets/info/resources.md
+++ b/docs/widgets/info/resources.md
@@ -20,11 +20,12 @@ _Note: unfortunately, the package used for getting CPU temp ([systeminformation]
     cpu: true
     memory: true
     disk: /disk/mount/path
+    network: default # options: 'default' or active network interface name
     cputemp: true
     tempmin: 0 # optional, minimum cpu temp
     tempmax: 100 # optional, maximum cpu temp
     uptime: true
-    units: imperial # only used by cpu temp
+    units: imperial # only used by cpu temp widget, options: 'imperial' or 'metric'
     refresh: 3000 # optional, in ms
     diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
 ```
diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
new file mode 100644
index 00000000000..7b1cb4baa9e
--- /dev/null
+++ b/src/components/widgets/resources/network.jsx
@@ -0,0 +1,62 @@
+import useSWR from "swr";
+import { FaNetworkWired, FaAngleUp, FaAngleDown } from "react-icons/fa";
+import { useTranslation } from "next-i18next";
+
+import Resource from "../widget/resource";
+import Error from "../widget/error";
+
+export default function Network({ options, refresh = 1500 }) {
+  const { t } = useTranslation();
+
+  const { data, error } = useSWR(`/api/widgets/resources?type=network${(options.network || ( options.network !== 'default' && options.network === `false`)) ? `&interfaceName=${options.network}` : '' }`, {
+    refreshInterval: refresh,
+  });
+
+  if (error || data?.error) {
+    return <Error />;
+  }
+
+  if (!data) {
+    return (
+      <Resource
+        icon={FaNetworkWired}
+        value="-"
+        label={<FaAngleUp/>}
+        expandedValue="-"
+        expandedLabel={<FaAngleDown/>}
+        percentage="0"
+        expanded="true"
+      />
+    );
+  }
+
+  return (
+    <>
+      /* Active Usage */
+      <Resource
+        icon={FaNetworkWired}
+        value={t('common.bits', { value: data?.network?.tx_sec })}
+        label={<FaAngleUp/>}
+        expandedValue={t('common.bits', { value: data?.network?.rx_sec })}
+        expandedLabel={<FaAngleDown/>}
+        percentage="0"
+        expanded="true"
+        children={<div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t('pyload.speed')}</div>}
+        iconChildren={<span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">{data.interface}</span>}
+      />
+      
+      /* Total Usage */
+      <Resource
+        icon={FaNetworkWired}
+        value={t('common.bbytes', { value: data?.network?.tx_bytes })}
+        label={<FaAngleUp/>}
+        expandedValue={t('common.bbytes', { value: data?.network?.rx_bytes })}
+        expandedLabel={<FaAngleDown/>}
+        percentage="0"
+        expanded="true"
+        children={<div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t('pyload.total')}</div>}
+        iconChildren={<span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">{data.interface}</span>}
+      />
+    </>
+  );
+}
diff --git a/src/components/widgets/resources/resources.jsx b/src/components/widgets/resources/resources.jsx
index 634e0ff5330..db26caa78ee 100644
--- a/src/components/widgets/resources/resources.jsx
+++ b/src/components/widgets/resources/resources.jsx
@@ -6,6 +6,7 @@ import Cpu from "./cpu";
 import Memory from "./memory";
 import CpuTemp from "./cputemp";
 import Uptime from "./uptime";
+import Network from "./network";
 
 export default function Resources({ options }) {
   const { expanded, units, diskUnits, tempmin, tempmax } = options;
@@ -23,6 +24,7 @@ export default function Resources({ options }) {
                 <Disk key={disk} options={{ disk }} expanded={expanded} diskUnits={diskUnits} refresh={refresh} />
               ))
             : options.disk && <Disk options={options} expanded={expanded} diskUnits={diskUnits} refresh={refresh} />}
+          {options.network && <Network options={options} refresh={refresh} />}
           {options.cputemp && (
             <CpuTemp expanded={expanded} units={units} refresh={refresh} tempmin={tempmin} tempmax={tempmax} />
           )}
diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx
index 8c9759284f0..5c848bf8c2a 100644
--- a/src/components/widgets/widget/resource.jsx
+++ b/src/components/widgets/widget/resource.jsx
@@ -3,6 +3,7 @@ import UsageBar from "../resources/usage-bar";
 export default function Resource({
   children,
   icon,
+  iconChildren,
   value,
   label,
   expandedValue = "",
@@ -17,7 +18,10 @@ export default function Resource({
     <div
       className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${additionalClassNames}`}
     >
-      <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
+      <div className="flex flex-col items-center">
+        <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
+        {iconChildren}
+      </div>
       <div className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""}`}>
         <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
           <div className="pl-0.5">{value}</div>
diff --git a/src/pages/api/widgets/resources.js b/src/pages/api/widgets/resources.js
index 66449bff0c1..879f55796af 100644
--- a/src/pages/api/widgets/resources.js
+++ b/src/pages/api/widgets/resources.js
@@ -8,6 +8,7 @@ const si = require("systeminformation");
 
 export default async function handler(req, res) {
   const { type, target } = req.query;
+  let { interfaceName } = req.query;
 
   if (type === "cpu") {
     const load = await si.currentLoad();
@@ -57,6 +58,31 @@ export default async function handler(req, res) {
     });
   }
 
+  if (type === "network"){
+    let networkData = await si.networkStats();
+    if(interfaceName !== "default" && interfaceName !== undefined && interfaceName !== "false"){
+      networkData = networkData.filter((network) => network.iface === interfaceName)['0'];
+      if(!networkData){
+        return res.status(404).json({
+          error: "Interface not found",
+        });
+      }
+    }else{
+      const interfaceDefault = await si.networkInterfaceDefault();
+      interfaceName = interfaceDefault
+      networkData = networkData.filter((network) => network.iface === interfaceDefault)['0'];
+      if(!networkData){
+        return res.status(404).json({
+          error: "Interface not found! Please specify a valid interface name.",
+        });
+      }
+    }
+    return res.status(200).json({
+      network: networkData,
+      interface: interfaceName
+    });
+  }
+
   return res.status(400).json({
     error: "invalid type",
   });

From 7f8a96a21706b42e2f4cbdb3d02f38bed7e51b51 Mon Sep 17 00:00:00 2001
From: Ramazan Sancar <ramazansancar4545@gmail.com>
Date: Mon, 25 Nov 2024 06:45:32 +0300
Subject: [PATCH 02/13] Update docs/widgets/info/resources.md

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
---
 docs/widgets/info/resources.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/widgets/info/resources.md b/docs/widgets/info/resources.md
index 4a15ca04f18..7d1ea48dc87 100644
--- a/docs/widgets/info/resources.md
+++ b/docs/widgets/info/resources.md
@@ -25,7 +25,7 @@ _Note: unfortunately, the package used for getting CPU temp ([systeminformation]
     tempmin: 0 # optional, minimum cpu temp
     tempmax: 100 # optional, maximum cpu temp
     uptime: true
-    units: imperial # only used by cpu temp widget, options: 'imperial' or 'metric'
+    units: imperial # only used by cpu temp, options: 'imperial' or 'metric'
     refresh: 3000 # optional, in ms
     diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
 ```

From 753992d390769659616e4c8c55dc87444a3f475a Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 20:04:26 -0800
Subject: [PATCH 03/13] lint & pre-commit

---
 src/components/widgets/resources/network.jsx | 139 ++++++++++---------
 src/pages/api/widgets/resources.js           |  18 +--
 2 files changed, 86 insertions(+), 71 deletions(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index 7b1cb4baa9e..8d6b5ec7df8 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -1,62 +1,77 @@
-import useSWR from "swr";
-import { FaNetworkWired, FaAngleUp, FaAngleDown } from "react-icons/fa";
-import { useTranslation } from "next-i18next";
-
-import Resource from "../widget/resource";
-import Error from "../widget/error";
-
-export default function Network({ options, refresh = 1500 }) {
-  const { t } = useTranslation();
-
-  const { data, error } = useSWR(`/api/widgets/resources?type=network${(options.network || ( options.network !== 'default' && options.network === `false`)) ? `&interfaceName=${options.network}` : '' }`, {
-    refreshInterval: refresh,
-  });
-
-  if (error || data?.error) {
-    return <Error />;
-  }
-
-  if (!data) {
-    return (
-      <Resource
-        icon={FaNetworkWired}
-        value="-"
-        label={<FaAngleUp/>}
-        expandedValue="-"
-        expandedLabel={<FaAngleDown/>}
-        percentage="0"
-        expanded="true"
-      />
-    );
-  }
-
-  return (
-    <>
-      /* Active Usage */
-      <Resource
-        icon={FaNetworkWired}
-        value={t('common.bits', { value: data?.network?.tx_sec })}
-        label={<FaAngleUp/>}
-        expandedValue={t('common.bits', { value: data?.network?.rx_sec })}
-        expandedLabel={<FaAngleDown/>}
-        percentage="0"
-        expanded="true"
-        children={<div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t('pyload.speed')}</div>}
-        iconChildren={<span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">{data.interface}</span>}
-      />
-      
-      /* Total Usage */
-      <Resource
-        icon={FaNetworkWired}
-        value={t('common.bbytes', { value: data?.network?.tx_bytes })}
-        label={<FaAngleUp/>}
-        expandedValue={t('common.bbytes', { value: data?.network?.rx_bytes })}
-        expandedLabel={<FaAngleDown/>}
-        percentage="0"
-        expanded="true"
-        children={<div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t('pyload.total')}</div>}
-        iconChildren={<span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">{data.interface}</span>}
-      />
-    </>
-  );
-}
+import useSWR from "swr";
+import { FaNetworkWired, FaAngleUp, FaAngleDown } from "react-icons/fa";
+import { useTranslation } from "next-i18next";
+
+import Resource from "../widget/resource";
+import Error from "../widget/error";
+
+export default function Network({ options, refresh = 1500 }) {
+  const { t } = useTranslation();
+
+  const { data, error } = useSWR(
+    `/api/widgets/resources?type=network${
+      options.network || (options.network !== "default" && options.network === `false`)
+        ? `&interfaceName=${options.network}`
+        : ""
+    }`,
+    {
+      refreshInterval: refresh,
+    },
+  );
+
+  if (error || data?.error) {
+    return <Error />;
+  }
+
+  if (!data) {
+    return (
+      <Resource
+        icon={FaNetworkWired}
+        value="-"
+        label={<FaAngleUp />}
+        expandedValue="-"
+        expandedLabel={<FaAngleDown />}
+        percentage="0"
+        expanded="true"
+      />
+    );
+  }
+
+  return (
+    <>
+      <Resource
+        icon={FaNetworkWired}
+        value={t("common.bits", { value: data?.network?.tx_sec })}
+        label={<FaAngleUp />}
+        expandedValue={t("common.bits", { value: data?.network?.rx_sec })}
+        expandedLabel={<FaAngleDown />}
+        percentage="0"
+        expanded="true"
+        iconChildren={
+          <span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">
+            {data.interface}
+          </span>
+        }
+      >
+        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t("pyload.speed")}</div>
+      </Resource>
+
+      <Resource
+        icon={FaNetworkWired}
+        value={t("common.bbytes", { value: data?.network?.tx_bytes })}
+        label={<FaAngleUp />}
+        expandedValue={t("common.bbytes", { value: data?.network?.rx_bytes })}
+        expandedLabel={<FaAngleDown />}
+        percentage="0"
+        expanded="true"
+        iconChildren={
+          <span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">
+            {data.interface}
+          </span>
+        }
+      >
+        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t("pyload.total")}</div>
+      </Resource>
+    </>
+  );
+}
diff --git a/src/pages/api/widgets/resources.js b/src/pages/api/widgets/resources.js
index 879f55796af..fcdb09699ec 100644
--- a/src/pages/api/widgets/resources.js
+++ b/src/pages/api/widgets/resources.js
@@ -58,20 +58,20 @@ export default async function handler(req, res) {
     });
   }
 
-  if (type === "network"){
+  if (type === "network") {
     let networkData = await si.networkStats();
-    if(interfaceName !== "default" && interfaceName !== undefined && interfaceName !== "false"){
-      networkData = networkData.filter((network) => network.iface === interfaceName)['0'];
-      if(!networkData){
+    if (interfaceName !== "default" && interfaceName !== undefined && interfaceName !== "false") {
+      networkData = networkData.filter((network) => network.iface === interfaceName)["0"];
+      if (!networkData) {
         return res.status(404).json({
           error: "Interface not found",
         });
       }
-    }else{
+    } else {
       const interfaceDefault = await si.networkInterfaceDefault();
-      interfaceName = interfaceDefault
-      networkData = networkData.filter((network) => network.iface === interfaceDefault)['0'];
-      if(!networkData){
+      interfaceName = interfaceDefault;
+      networkData = networkData.filter((network) => network.iface === interfaceDefault)["0"];
+      if (!networkData) {
         return res.status(404).json({
           error: "Interface not found! Please specify a valid interface name.",
         });
@@ -79,7 +79,7 @@ export default async function handler(req, res) {
     }
     return res.status(200).json({
       network: networkData,
-      interface: interfaceName
+      interface: interfaceName,
     });
   }
 

From 81e561304a880e534f4c6a24a6eb57a2c3a6d4b1 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 20:24:55 -0800
Subject: [PATCH 04/13] More sane defaults

---
 docs/widgets/info/resources.md               |  2 +-
 src/components/widgets/resources/network.jsx | 14 ++++----------
 src/pages/api/widgets/resources.js           | 12 ++++++------
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/docs/widgets/info/resources.md b/docs/widgets/info/resources.md
index 7d1ea48dc87..72787af4b82 100644
--- a/docs/widgets/info/resources.md
+++ b/docs/widgets/info/resources.md
@@ -20,7 +20,6 @@ _Note: unfortunately, the package used for getting CPU temp ([systeminformation]
     cpu: true
     memory: true
     disk: /disk/mount/path
-    network: default # options: 'default' or active network interface name
     cputemp: true
     tempmin: 0 # optional, minimum cpu temp
     tempmax: 100 # optional, maximum cpu temp
@@ -28,6 +27,7 @@ _Note: unfortunately, the package used for getting CPU temp ([systeminformation]
     units: imperial # only used by cpu temp, options: 'imperial' or 'metric'
     refresh: 3000 # optional, in ms
     diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
+    network: true # uses 'default' or specify a network interface name
 ```
 
 You can also pass a `label` option, which allows you to group resources under named sections,
diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index 8d6b5ec7df8..181ae0637a4 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -7,17 +7,11 @@ import Error from "../widget/error";
 
 export default function Network({ options, refresh = 1500 }) {
   const { t } = useTranslation();
+  if (options.network === true) options.network = "default";
 
-  const { data, error } = useSWR(
-    `/api/widgets/resources?type=network${
-      options.network || (options.network !== "default" && options.network === `false`)
-        ? `&interfaceName=${options.network}`
-        : ""
-    }`,
-    {
-      refreshInterval: refresh,
-    },
-  );
+  const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
+    refreshInterval: refresh,
+  });
 
   if (error || data?.error) {
     return <Error />;
diff --git a/src/pages/api/widgets/resources.js b/src/pages/api/widgets/resources.js
index fcdb09699ec..c3c4168565b 100644
--- a/src/pages/api/widgets/resources.js
+++ b/src/pages/api/widgets/resources.js
@@ -7,8 +7,7 @@ const logger = createLogger("resources");
 const si = require("systeminformation");
 
 export default async function handler(req, res) {
-  const { type, target } = req.query;
-  let { interfaceName } = req.query;
+  const { type, target, interfaceName = "default" } = req.query;
 
   if (type === "cpu") {
     const load = await si.currentLoad();
@@ -60,7 +59,9 @@ export default async function handler(req, res) {
 
   if (type === "network") {
     let networkData = await si.networkStats();
-    if (interfaceName !== "default" && interfaceName !== undefined && interfaceName !== "false") {
+    let interfaceDefault;
+    logger.debug("networkData:", JSON.stringify(networkData));
+    if (interfaceName && interfaceName !== "default") {
       networkData = networkData.filter((network) => network.iface === interfaceName)["0"];
       if (!networkData) {
         return res.status(404).json({
@@ -68,8 +69,7 @@ export default async function handler(req, res) {
         });
       }
     } else {
-      const interfaceDefault = await si.networkInterfaceDefault();
-      interfaceName = interfaceDefault;
+      interfaceDefault = await si.networkInterfaceDefault();
       networkData = networkData.filter((network) => network.iface === interfaceDefault)["0"];
       if (!networkData) {
         return res.status(404).json({
@@ -79,7 +79,7 @@ export default async function handler(req, res) {
     }
     return res.status(200).json({
       network: networkData,
-      interface: interfaceName,
+      interface: interfaceName !== "default" ? interfaceName : interfaceDefault,
     });
   }
 

From 4f03104ed16e105792430818dc74b4ae1bc9e320 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 20:30:03 -0800
Subject: [PATCH 05/13] Dont use iconchildren, dont use another widget's
 strings

---
 src/components/widgets/resources/network.jsx | 14 ++------------
 src/components/widgets/widget/resource.jsx   |  6 +-----
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index 181ae0637a4..cee0d72d77f 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -41,13 +41,8 @@ export default function Network({ options, refresh = 1500 }) {
         expandedLabel={<FaAngleDown />}
         percentage="0"
         expanded="true"
-        iconChildren={
-          <span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">
-            {data.interface}
-          </span>
-        }
       >
-        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t("pyload.speed")}</div>
+        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
       </Resource>
 
       <Resource
@@ -58,13 +53,8 @@ export default function Network({ options, refresh = 1500 }) {
         expandedLabel={<FaAngleDown />}
         percentage="0"
         expanded="true"
-        iconChildren={
-          <span class="bg-theme-100 text-theme-800 text-xs font-medium px-1 py-1 mt-1 rounded dark:bg-theme-700 dark:text-theme-300 text-center">
-            {data.interface}
-          </span>
-        }
       >
-        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{t("pyload.total")}</div>
+        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
       </Resource>
     </>
   );
diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx
index 5c848bf8c2a..8c9759284f0 100644
--- a/src/components/widgets/widget/resource.jsx
+++ b/src/components/widgets/widget/resource.jsx
@@ -3,7 +3,6 @@ import UsageBar from "../resources/usage-bar";
 export default function Resource({
   children,
   icon,
-  iconChildren,
   value,
   label,
   expandedValue = "",
@@ -18,10 +17,7 @@ export default function Resource({
     <div
       className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${additionalClassNames}`}
     >
-      <div className="flex flex-col items-center">
-        <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
-        {iconChildren}
-      </div>
+      <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
       <div className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""}`}>
         <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
           <div className="pl-0.5">{value}</div>

From ccdf9c1659083be921e857958ea194fad557c461 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 20:41:48 -0800
Subject: [PATCH 06/13] Make compact

---
 src/components/widgets/resources/network.jsx | 40 +++++++-------------
 src/components/widgets/widget/resource.jsx   |  7 +++-
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index cee0d72d77f..4db49e015f5 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -26,36 +26,24 @@ export default function Network({ options, refresh = 1500 }) {
         expandedValue="-"
         expandedLabel={<FaAngleDown />}
         percentage="0"
-        expanded="true"
       />
     );
   }
 
   return (
-    <>
-      <Resource
-        icon={FaNetworkWired}
-        value={t("common.bits", { value: data?.network?.tx_sec })}
-        label={<FaAngleUp />}
-        expandedValue={t("common.bits", { value: data?.network?.rx_sec })}
-        expandedLabel={<FaAngleDown />}
-        percentage="0"
-        expanded="true"
-      >
-        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
-      </Resource>
-
-      <Resource
-        icon={FaNetworkWired}
-        value={t("common.bbytes", { value: data?.network?.tx_bytes })}
-        label={<FaAngleUp />}
-        expandedValue={t("common.bbytes", { value: data?.network?.rx_bytes })}
-        expandedLabel={<FaAngleDown />}
-        percentage="0"
-        expanded="true"
-      >
-        <div className="pt-1 text-theme-800 dark:text-theme-200 text-xs text-center">{data.interface}</div>
-      </Resource>
-    </>
+    <Resource
+      icon={FaNetworkWired}
+      value={`${t("common.bits", { value: data?.network?.tx_sec })} / ${t("common.bits", {
+        value: data?.network?.rx_sec,
+      })}`}
+      label={data.interface}
+      expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} / ${t("common.bbytes", {
+        value: data?.network?.rx_bytes,
+      })}`}
+      expandedLabel={data.interface}
+      expanded={options.expanded}
+      wide={true}
+      percentage="0"
+    />
   );
 }
diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx
index 8c9759284f0..a7cc982b7ab 100644
--- a/src/components/widgets/widget/resource.jsx
+++ b/src/components/widgets/widget/resource.jsx
@@ -10,6 +10,7 @@ export default function Resource({
   percentage,
   expanded = false,
   additionalClassNames = "",
+  wide = false,
 }) {
   const Icon = icon;
 
@@ -18,7 +19,11 @@ export default function Resource({
       className={`flex-none flex flex-row items-center mr-3 py-1.5 information-widget-resource ${additionalClassNames}`}
     >
       <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
-      <div className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""}`}>
+      <div
+        className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""} ${
+          wide ? " min-w-[170px]" : ""
+        }`}
+      >
         <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
           <div className="pl-0.5">{value}</div>
           <div className="pr-1">{label}</div>

From 20f2a968fc91b6848d8d1d01f64d8e918be22f5d Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 20:41:51 -0800
Subject: [PATCH 07/13] Update resources.md

---
 docs/widgets/info/resources.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/widgets/info/resources.md b/docs/widgets/info/resources.md
index 72787af4b82..7fcf9c5cdf3 100644
--- a/docs/widgets/info/resources.md
+++ b/docs/widgets/info/resources.md
@@ -27,7 +27,7 @@ _Note: unfortunately, the package used for getting CPU temp ([systeminformation]
     units: imperial # only used by cpu temp, options: 'imperial' or 'metric'
     refresh: 3000 # optional, in ms
     diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
-    network: true # uses 'default' or specify a network interface name
+    network: true # optional, uses 'default' if true or specify a network interface name
 ```
 
 You can also pass a `label` option, which allows you to group resources under named sections,

From e7c5158c602c746b41e4ad259fabde5d0cdd54a9 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 21:54:37 -0800
Subject: [PATCH 08/13] Correct units

---
 src/components/widgets/resources/network.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index 4db49e015f5..feedd95daf8 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -33,7 +33,7 @@ export default function Network({ options, refresh = 1500 }) {
   return (
     <Resource
       icon={FaNetworkWired}
-      value={`${t("common.bits", { value: data?.network?.tx_sec })} / ${t("common.bits", {
+      value={`${t("common.byterate", { value: data?.network?.tx_sec })} / ${t("common.byterate", {
         value: data?.network?.rx_sec,
       })}`}
       label={data.interface}

From 9fe2622a04b503f53a2f8310b618232aabc1ad7a Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:16:44 -0800
Subject: [PATCH 09/13] Make this nice

---
 src/components/widgets/resources/network.jsx | 26 +++++++++-----------
 src/components/widgets/widget/resource.jsx   |  4 +--
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index feedd95daf8..a1ad2183ae2 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { FaNetworkWired, FaAngleUp, FaAngleDown } from "react-icons/fa";
+import { FaNetworkWired } from "react-icons/fa";
 import { useTranslation } from "next-i18next";
 
 import Resource from "../widget/resource";
@@ -7,6 +7,7 @@ import Error from "../widget/error";
 
 export default function Network({ options, refresh = 1500 }) {
   const { t } = useTranslation();
+  // eslint-disable-next-line no-param-reassign
   if (options.network === true) options.network = "default";
 
   const { data, error } = useSWR(`/api/widgets/resources?type=network&interfaceName=${options.network}`, {
@@ -21,11 +22,12 @@ export default function Network({ options, refresh = 1500 }) {
     return (
       <Resource
         icon={FaNetworkWired}
-        value="-"
-        label={<FaAngleUp />}
-        expandedValue="-"
-        expandedLabel={<FaAngleDown />}
+        value="- ↑"
+        label="- ↓"
+        expandedValue="- ↑"
+        expandedLabel="- ↓"
         percentage="0"
+        wide
       />
     );
   }
@@ -33,16 +35,12 @@ export default function Network({ options, refresh = 1500 }) {
   return (
     <Resource
       icon={FaNetworkWired}
-      value={`${t("common.byterate", { value: data?.network?.tx_sec })} / ${t("common.byterate", {
-        value: data?.network?.rx_sec,
-      })}`}
-      label={data.interface}
-      expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} / ${t("common.bbytes", {
-        value: data?.network?.rx_bytes,
-      })}`}
-      expandedLabel={data.interface}
+      value={`${t("common.byterate", { value: data?.network?.tx_sec })} ↑`}
+      label={`${t("common.byterate", { value: data?.network?.rx_sec })} ↓`}
+      expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} ↑`}
+      expandedLabel={`${t("common.bbytes", { value: data?.network?.rx_bytes })} ↓`}
       expanded={options.expanded}
-      wide={true}
+      wide
       percentage="0"
     />
   );
diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx
index a7cc982b7ab..b1f737407b6 100644
--- a/src/components/widgets/widget/resource.jsx
+++ b/src/components/widgets/widget/resource.jsx
@@ -20,8 +20,8 @@ export default function Resource({
     >
       <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5 resource-icon" />
       <div
-        className={`flex flex-col ml-3 text-left min-w-[85px] ${expanded ? " expanded" : ""} ${
-          wide ? " min-w-[170px]" : ""
+        className={`flex flex-col ml-3 text-left ${expanded ? " expanded" : ""} ${
+          wide ? " min-w-[120px]" : "min-w-[85px]"
         }`}
       >
         <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">

From 416053c9639b2ffc0cbf4871df8fd85f89e8608f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:17:26 -0800
Subject: [PATCH 10/13] Remove the unneeded optional chaining

---
 src/components/widgets/resources/network.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index a1ad2183ae2..c66c706b144 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -18,7 +18,7 @@ export default function Network({ options, refresh = 1500 }) {
     return <Error />;
   }
 
-  if (!data) {
+  if (!data || !data.network) {
     return (
       <Resource
         icon={FaNetworkWired}
@@ -35,10 +35,10 @@ export default function Network({ options, refresh = 1500 }) {
   return (
     <Resource
       icon={FaNetworkWired}
-      value={`${t("common.byterate", { value: data?.network?.tx_sec })} ↑`}
-      label={`${t("common.byterate", { value: data?.network?.rx_sec })} ↓`}
-      expandedValue={`${t("common.bbytes", { value: data?.network?.tx_bytes })} ↑`}
-      expandedLabel={`${t("common.bbytes", { value: data?.network?.rx_bytes })} ↓`}
+      value={`${t("common.byterate", { value: data.network.tx_sec })} ↑`}
+      label={`${t("common.byterate", { value: data.network.rx_sec })} ↓`}
+      expandedValue={`${t("common.bbytes", { value: data.network.tx_bytes })} ↑`}
+      expandedLabel={`${t("common.bbytes", { value: data.network.rx_bytes })} ↓`}
       expanded={options.expanded}
       wide
       percentage="0"

From 98bc4719d90d2e176a45e2cf52d6422887a4e75e Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:20:02 -0800
Subject: [PATCH 11/13] Do this with percentage bar

---
 src/components/widgets/resources/network.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index c66c706b144..20af30af34b 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -41,7 +41,7 @@ export default function Network({ options, refresh = 1500 }) {
       expandedLabel={`${t("common.bbytes", { value: data.network.rx_bytes })} ↓`}
       expanded={options.expanded}
       wide
-      percentage="0"
+      percentage={(100 * data.network.rx_sec) / (data.network.rx_sec + data.network.tx_sec)}
     />
   );
 }

From b7042bfad79326c5f311f015ca879cd6e54dddde Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:28:35 -0800
Subject: [PATCH 12/13] Units again

---
 src/components/widgets/resources/network.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/widgets/resources/network.jsx b/src/components/widgets/resources/network.jsx
index 20af30af34b..5b5cc004360 100644
--- a/src/components/widgets/resources/network.jsx
+++ b/src/components/widgets/resources/network.jsx
@@ -37,8 +37,8 @@ export default function Network({ options, refresh = 1500 }) {
       icon={FaNetworkWired}
       value={`${t("common.byterate", { value: data.network.tx_sec })} ↑`}
       label={`${t("common.byterate", { value: data.network.rx_sec })} ↓`}
-      expandedValue={`${t("common.bbytes", { value: data.network.tx_bytes })} ↑`}
-      expandedLabel={`${t("common.bbytes", { value: data.network.rx_bytes })} ↓`}
+      expandedValue={`${t("common.bytes", { value: data.network.tx_bytes })} ↑`}
+      expandedLabel={`${t("common.bytes", { value: data.network.rx_bytes })} ↓`}
       expanded={options.expanded}
       wide
       percentage={(100 * data.network.rx_sec) / (data.network.rx_sec + data.network.tx_sec)}

From dd2fbfd9c8f1fb215f99a9eee9516e20236bd61f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:34:18 -0800
Subject: [PATCH 13/13] More fixes

---
 src/pages/api/widgets/resources.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/api/widgets/resources.js b/src/pages/api/widgets/resources.js
index c3c4168565b..fa7cc7663bd 100644
--- a/src/pages/api/widgets/resources.js
+++ b/src/pages/api/widgets/resources.js
@@ -62,7 +62,7 @@ export default async function handler(req, res) {
     let interfaceDefault;
     logger.debug("networkData:", JSON.stringify(networkData));
     if (interfaceName && interfaceName !== "default") {
-      networkData = networkData.filter((network) => network.iface === interfaceName)["0"];
+      networkData = networkData.filter((network) => network.iface === interfaceName)[0];
       if (!networkData) {
         return res.status(404).json({
           error: "Interface not found",
@@ -70,10 +70,10 @@ export default async function handler(req, res) {
       }
     } else {
       interfaceDefault = await si.networkInterfaceDefault();
-      networkData = networkData.filter((network) => network.iface === interfaceDefault)["0"];
+      networkData = networkData.filter((network) => network.iface === interfaceDefault)[0];
       if (!networkData) {
         return res.status(404).json({
-          error: "Interface not found! Please specify a valid interface name.",
+          error: "Default interface not found",
         });
       }
     }