collapse back to single pool.jsx file

src/widgets/truenas/component.jsx

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

src/widgets/truenas/pool.jsx

@@ -1,14 +1,19 @@
 import classNames from "classnames";
 import prettyBytes from "pretty-bytes";
 
-export default function CorePool({ name, data, healthy }) {
+export default function Pool({ name, scaleFree, scaleAllocated, healthy, data, nasType }) {
   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;
+  if (nasType === "scale") {
+    total = scaleFree + scaleAllocated;
+    allocated = scaleAllocated;
+  } else {
+    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";
 

src/widgets/truenas/scale-pool.jsx

@@ -1,31 +0,0 @@
-import classNames from "classnames";
-import prettyBytes from "pretty-bytes";
-
-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";
-
-  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>
-  );
-}