Enhancement: Add enablePools option to TrueNAS service widget (#2908)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/widgets/truenas/component.jsx

@@ -3,6 +3,7 @@ import { useTranslation } from "next-i18next";
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
+import Pool from "widgets/truenas/pool";
 
 export default function Component({ service }) {
   const { t } = useTranslation();
@@ -11,9 +12,10 @@ export default function Component({ service }) {
 
   const { data: alertData, error: alertError } = useWidgetAPI(widget, "alerts");
   const { data: statusData, error: statusError } = useWidgetAPI(widget, "status");
+  const { data: poolsData, error: poolsError } = useWidgetAPI(widget, "pools");
 
-  if (alertError || statusError) {
-    const finalError = alertError ?? statusError;
+  if (alertError || statusError || poolsError) {
+    const finalError = alertError ?? statusError ?? poolsError;
     return <Container service={service} error={finalError} />;
   }
 
@@ -27,11 +29,19 @@ export default function Component({ service }) {
     );
   }
 
+  const enablePools = widget?.enablePools && Array.isArray(poolsData) && poolsData.length > 0;
+
   return (
-    <Container service={service}>
-      <Block label="truenas.load" value={t("common.number", { value: statusData.loadavg[0] })} />
-      <Block label="truenas.uptime" value={t("common.uptime", { value: statusData.uptime_seconds })} />
-      <Block label="truenas.alerts" value={t("common.number", { value: alertData.pending })} />
-    </Container>
+    <>
+      <Container service={service}>
+        <Block label="truenas.load" value={t("common.number", { value: statusData.loadavg[0] })} />
+        <Block label="truenas.uptime" value={t("common.uptime", { value: statusData.uptime_seconds })} />
+        <Block label="truenas.alerts" value={t("common.number", { value: alertData.pending })} />
+      </Container>
+      {enablePools &&
+        poolsData.map((pool) => (
+          <Pool key={pool.id} name={pool.name} healthy={pool.healthy} allocated={pool.allocated} free={pool.free} />
+        ))}
+    </>
   );
 }

src/widgets/truenas/pool.jsx

@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import prettyBytes from "pretty-bytes";
+
+export default function Pool({ name, free, allocated, healthy }) {
+  const total = free + allocated;
+  const usedPercent = Math.round((allocated / total) * 100);
+  const statusColor = healthy ? "bg-green-500" : "bg-yellow-500";
+
+  return (
+    <div className="flex flex-row text-theme-700 dark:text-theme-200 items-center text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+      <div
+        className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+        style={{
+          width: `${usedPercent}%`,
+        }}
+      />
+      <span className="ml-2 h-2 w-2 z-10">
+        <span className={classNames("block w-2 h-2 rounded", statusColor)} />
+      </span>
+      <div className="text-xs z-10 self-center ml-2 relative h-4 grow mr-2">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden text-left">{name}</div>
+      </div>
+      <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
+        <span>
+          {prettyBytes(allocated)} / {prettyBytes(total)}
+        </span>
+        <span className="pl-2">({usedPercent}%)</span>
+      </div>
+    </div>
+  );
+}

src/widgets/truenas/widget.js

@@ -1,32 +1,9 @@
-import { jsonArrayFilter } from "utils/proxy/api-helpers";
 import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
-import genericProxyHandler from "utils/proxy/handlers/generic";
-import getServiceWidget from "utils/config/service-helpers";
+import { asJson, jsonArrayFilter } from "utils/proxy/api-helpers";
 
 const widget = {
   api: "{url}/api/v2.0/{endpoint}",
-  proxyHandler: async (req, res, map) => {
-    // choose proxy handler based on widget settings
-    const { group, service } = req.query;
-
-    if (group && service) {
-      const widgetOpts = await getServiceWidget(group, service);
-      let handler;
-      if (widgetOpts.username && widgetOpts.password) {
-        handler = genericProxyHandler;
-      } else if (widgetOpts.key) {
-        handler = credentialedProxyHandler;
-      }
-
-      if (handler) {
-        return handler(req, res, map);
-      }
-
-      return res.status(500).json({ error: "Username / password or API key required" });
-    }
-
-    return res.status(500).json({ error: "Error parsing widget request" });
-  },
+  proxyHandler: credentialedProxyHandler,
 
   mappings: {
     alerts: {
@@ -39,6 +16,17 @@ const widget = {
       endpoint: "system/info",
       validate: ["loadavg", "uptime_seconds"],
     },
+    pools: {
+      endpoint: "pool",
+      map: (data) =>
+        asJson(data).map((entry) => ({
+          id: entry.name,
+          name: entry.name,
+          healthy: entry.healthy,
+          allocated: entry.allocated,
+          free: entry.free,
+        })),
+    },
   },
 };