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

---------

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

docs/widgets/services/truenas.md

@@ -9,6 +9,8 @@ Allowed fields: `["load", "uptime", "alerts"]`.
 
 To create an API Key, follow [the official TrueNAS documentation](https://www.truenas.com/docs/scale/scaletutorials/toptoolbar/managingapikeys/).
 
+A detailed pool listing is disabled by default, but can be enabled with the `enablePools` option.
+
 ```yaml
 widget:
   type: truenas
@@ -16,4 +18,5 @@ widget:
   username: user # not required if using api key
   password: pass # not required if using api key
   key: yourtruenasapikey # not required if using username / password
+  enablePools: true # optional, defaults to false
 ```

src/utils/config/service-helpers.js

@@ -442,6 +442,9 @@ export function cleanServiceGroups(groups) {
           // sonarr, radarr
           enableQueue,
 
+          // truenas
+          enablePools,
+
           // unifi
           site,
         } = cleanedService.widget;
@@ -511,6 +514,9 @@ export function cleanServiceGroups(groups) {
         if (["sonarr", "radarr"].includes(type)) {
           if (enableQueue !== undefined) cleanedService.widget.enableQueue = JSON.parse(enableQueue);
         }
+        if (type === "truenas") {
+          if (enablePools !== undefined) cleanedService.widget.enablePools = JSON.parse(enablePools);
+        }
         if (["diskstation", "qnap"].includes(type)) {
           if (volume) cleanedService.widget.volume = volume;
         }

src/utils/proxy/handlers/credentialed.js

@@ -29,11 +29,15 @@ export default async function credentialedProxyHandler(req, res, map) {
       } else if (widget.type === "gotify") {
         headers["X-gotify-Key"] = `${widget.key}`;
       } else if (
-        ["authentik", "cloudflared", "ghostfolio", "mealie", "tailscale", "truenas", "pterodactyl"].includes(
-          widget.type,
-        )
+        ["authentik", "cloudflared", "ghostfolio", "mealie", "tailscale", "pterodactyl"].includes(widget.type)
       ) {
         headers.Authorization = `Bearer ${widget.key}`;
+      } else if (widget.type === "truenas") {
+        if (widget.key) {
+          headers.Authorization = `Bearer ${widget.key}`;
+        } else {
+          headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
+        }
       } else if (widget.type === "proxmox") {
         headers.Authorization = `PVEAPIToken=${widget.username}=${widget.password}`;
       } else if (widget.type === "proxmoxbackupserver") {

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>
+      {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,
+        })),
+    },
   },
 };