add support for core api formatting

docs/widgets/services/truenas.md

@@ -11,6 +11,8 @@ To create an API Key, follow [the official TrueNAS documentation](https://www.tr
 
 A detailed pool listing is disabled by default, but can be enabled with the `enablePools` option.
 
+The Scale and Core API's provide information on the pools in different manners. The `nasType` option choses which API response parsing should be used.
+
 ```yaml
 widget:
   type: truenas
@@ -19,4 +21,5 @@ widget:
   password: pass # not required if using api key
   key: yourtruenasapikey # not required if using username / password
   enablePools: true # optional, defaults to false
+  nasType: scale # defaults to scale, values are core or scale
 ```

src/utils/config/service-helpers.js

@@ -448,6 +448,7 @@ export function cleanServiceGroups(groups) {
 
           // truenas
           enablePools,
+          nasType,
 
           // unifi
           site,
@@ -520,6 +521,11 @@ export function cleanServiceGroups(groups) {
         }
         if (type === "truenas") {
           if (enablePools !== undefined) cleanedService.widget.enablePools = JSON.parse(enablePools);
+          if (nasType) {
+            cleanedService.widget.nasType = nasType;
+          } else {
+            cleanedService.widget.nasType = "scale";
+          }
         }
         if (["diskstation", "qnap"].includes(type)) {
           if (volume) cleanedService.widget.volume = volume;

src/widgets/truenas/component.jsx

@@ -3,7 +3,8 @@ 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";
+import ScalePool from "widgets/truenas/scale-pool";
+import CorePool from "widgets/truenas/core-pool";
 
 export default function Component({ service }) {
   const { t } = useTranslation();
@@ -30,6 +31,8 @@ export default function Component({ service }) {
   }
 
   const enablePools = widget?.enablePools && Array.isArray(poolsData) && poolsData.length > 0;
+  const scaleDeployment = widget?.nasType === "scale";
+  const coreDeployment = widget?.nasType === "core";
 
   return (
     <>
@@ -39,9 +42,19 @@ export default function Component({ service }) {
         <Block label="truenas.alerts" value={t("common.number", { value: alertData.pending })} />
       </Container>
       {enablePools &&
+        scaleDeployment &&
         poolsData.map((pool) => (
-          <Pool key={pool.id} name={pool.name} healthy={pool.healthy} allocated={pool.allocated} free={pool.free} />
+          <ScalePool
+            key={pool.id}
+            name={pool.name}
+            healthy={pool.healthy}
+            allocated={pool.allocated}
+            free={pool.free}
+          />
         ))}
+      {enablePools &&
+        coreDeployment &&
+        poolsData.map((pool) => <CorePool key={pool.id} name={pool.name} healthy={pool.healthy} data={pool.data} />)}
     </>
   );
 }

src/widgets/truenas/core-pool.jsx

@@ -0,0 +1,37 @@
+import classNames from "classnames";
+import prettyBytes from "pretty-bytes";
+
+export default function CorePool({ name, data, healthy }) {
+  let total = 0;
+  let allocated = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    total += data[i].stats.size;
+    allocated += data[i].stats.allocated;
+  }
+  // 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/scale-pool.jsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import prettyBytes from "pretty-bytes";
 
-export default function Pool({ name, free, allocated, healthy }) {
+export default function ScalePool({ name, free, allocated, healthy }) {
   const total = free + allocated;
   const usedPercent = Math.round((allocated / total) * 100);
   const statusColor = healthy ? "bg-green-500" : "bg-yellow-500";

src/widgets/truenas/widget.js

@@ -25,6 +25,7 @@ const widget = {
           healthy: entry.healthy,
           allocated: entry.allocated,
           free: entry.free,
+          data: entry.topology.data,
         })),
     },
   },