Add support for QNAP instances with multiple volumes (#1528)

* Add support for pfSense API

* Fix linting issues

* remove a line

* rename cpu to load in default block

* Re-order container blocks to ensure defaults show

* clean up

* Add support for multiple volumes as well as defining the volume you want to track

* QNAP widget syntax corrections, translate invalid

---------

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

public/locales/en/common.json

@@ -175,7 +175,9 @@
         "cpuUsage": "CPU Usage",
         "memUsage": "MEM Usage",
         "systemTempC": "System Temp",
-        "poolUsage": "Pool Usage"
+        "poolUsage": "Pool Usage",
+        "volumeUsage": "Volume Usage",
+        "invalid": "Invalid"
     },
     "deluge": {
         "download": "Download",

src/utils/config/service-helpers.js

@@ -306,7 +306,7 @@ export function cleanServiceGroups(groups) {
           if (enableBlocks !== undefined) cleanedService.widget.enableBlocks = JSON.parse(enableBlocks);
           if (enableNowPlaying !== undefined) cleanedService.widget.enableNowPlaying = JSON.parse(enableNowPlaying);
         }
-        if (type === "diskstation") {
+        if (["diskstation", "qnap"].includes(type)) {
           if (volume) cleanedService.widget.volume = volume;
         }
       }

src/widgets/qnap/component.jsx

@@ -23,7 +23,7 @@ export default function Component({ service }) {
         <Block label="qnap.cpuUsage" />
         <Block label="qnap.memUsage" />
         <Block label="qnap.systemTempC" />
-        <Block label="qnap.poolUsage" />
+        <Block label={(widget.volume) ? "qnap.volumeUsage" : "qnap.poolUsage" } />
       </Container>
     );
   }
@@ -32,9 +32,29 @@ export default function Component({ service }) {
   const totalMemory = statusData.system.total_memory._cdata;
   const freeMemory = statusData.system.free_memory._cdata;
   const systemTempC = statusData.system.cpu_tempc._text;
+  let volumeTotalSize = 0;
+  let volumeFreeSize = 0;
+  let validVolume = true;
 
-  const volumeTotalSize = statusData.volume.volumeUse.total_size._cdata;
+  if (Array.isArray(statusData.volume.volumeUseList.volumeUse)) {
-  const volumeFreeSize = statusData.volume.volumeUse.free_size._cdata;
+    if (widget.volume) {
+      const volumeSelected = statusData.volume.volumeList.volume.findIndex(vl => vl.volumeLabel._cdata === widget.volume);
+      if (volumeSelected !== -1) {
+        volumeTotalSize = statusData.volume.volumeUseList.volumeUse[volumeSelected].total_size._cdata;
+        volumeFreeSize = statusData.volume.volumeUseList.volumeUse[volumeSelected].free_size._cdata;
+      } else {
+        validVolume = false;
+      }
+    } else {
+      statusData.volume.volumeUseList.volumeUse.forEach((volume) => {
+        volumeTotalSize += parseInt(volume.total_size._cdata, 10);
+        volumeFreeSize += parseInt(volume.free_size._cdata, 10);
+      });  
+    }
+  } else {
+    volumeTotalSize = statusData.volume.volumeUseList.volumeUse.total_size._cdata;
+    volumeFreeSize = statusData.volume.volumeUseList.volumeUse.free_size._cdata;
+  }
 
   return (
     <Container service={service}>
@@ -51,8 +71,8 @@ export default function Component({ service }) {
         value={t("common.number", { value: systemTempC, maximumFractionDigits: 1, style: "unit", unit: "celsius" })} 
       />
       <Block
-        label="qnap.poolUsage"
+        label={(widget.volume) ? "qnap.volumeUsage" : "qnap.poolUsage" }
-        value={t("common.percent", { value: (((volumeTotalSize - volumeFreeSize) / volumeTotalSize) * 100).toFixed(0) })}
+        value={(validVolume) ? t("common.percent", { value: (((volumeTotalSize - volumeFreeSize) / volumeTotalSize) * 100).toFixed(0) }) : t("qnap.invalid") }
       />
     </Container>
   );

src/widgets/qnap/proxy.js

@@ -99,6 +99,6 @@ export default async function qnapProxyHandler(req, res) {
 
   return res.status(200).send({
     system: systemStatsData.QDocRoot.func.ownContent.root,
-    volume: volumeStatsData.QDocRoot.volumeUseList
+    volume: volumeStatsData.QDocRoot
   });
 }