add nzbget service widget

package.json

@@ -13,6 +13,7 @@
     "@tailwindcss/forms": "^0.5.2",
     "dockerode": "^3.3.3",
     "js-yaml": "^4.1.0",
+    "json-rpc-2.0": "^1.3.0",
     "memory-cache": "^0.2.0",
     "next": "12.2.5",
     "node-os-utils": "^1.3.7",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ specifiers:
   eslint: 8.22.0
   eslint-config-next: 12.2.5
   js-yaml: ^4.1.0
+  json-rpc-2.0: ^1.3.0
   memory-cache: ^0.2.0
   next: 12.2.5
   node-os-utils: ^1.3.7
@@ -25,6 +26,7 @@ dependencies:
   '@tailwindcss/forms': 0.5.2_tailwindcss@3.1.8
   dockerode: 3.3.3
   js-yaml: 4.1.0
+  json-rpc-2.0: 1.3.0
   memory-cache: 0.2.0
   next: 12.2.5_biqbaboplfbrettd7655fr4n2y
   node-os-utils: 1.3.7
@@ -1489,6 +1491,10 @@ packages:
     dependencies:
       argparse: 2.0.1
 
+  /json-rpc-2.0/1.3.0:
+    resolution: {integrity: sha512-pA85D9LG4B+b8njdb8DzktltNfGPcxGJJydEg6jRqePfwhK008lRdbX7bco6aokfw9oDFw7fEe+LRxxXwP11HA==}
+    dev: false
+
   /json-schema-traverse/0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true

src/components/services/widget.jsx

@@ -3,6 +3,7 @@ import Radarr from "./widgets/radarr";
 import Ombi from "./widgets/ombi";
 import Portainer from "./widgets/portainer";
 import Emby from "./widgets/emby";
+import Nzbget from "./widgets/nzbget";
 
 const widgetMappings = {
   sonarr: Sonarr,
@@ -10,6 +11,7 @@ const widgetMappings = {
   ombi: Ombi,
   portainer: Portainer,
   emby: Emby,
+  nzbget: Nzbget,
 };
 
 export default function Widget({ service }) {

src/components/services/widgets/nzbget.jsx

@@ -0,0 +1,85 @@
+import useSWR from "swr";
+import { JSONRPCClient } from "json-rpc-2.0";
+
+import { formatBytes } from "utils/stats-helpers";
+
+export default function Nzbget({ service }) {
+  const config = service.widget;
+
+  const constructedUrl = new URL(config.url);
+  constructedUrl.pathname = "jsonrpc";
+
+  const client = new JSONRPCClient((jsonRPCRequest) =>
+    fetch(constructedUrl.toString(), {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        authorization: `Basic ${btoa(`${config.username}:${config.password}`)}`,
+      },
+      body: JSON.stringify(jsonRPCRequest),
+    }).then(async (response) => {
+      if (response.status === 200) {
+        const jsonRPCResponse = await response.json();
+        return client.receive(jsonRPCResponse);
+      } else if (jsonRPCRequest.id !== undefined) {
+        return Promise.reject(new Error(response.statusText));
+      }
+    })
+  );
+
+  const { data: statusData, error: statusError } = useSWR(
+    "status",
+    (resource) => {
+      return client.request(resource).then((response) => response);
+    },
+    {
+      refreshInterval: 1000,
+    }
+  );
+
+  if (statusError) {
+    return (
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">Nzbget API Error</div>
+      </div>
+    );
+  }
+
+  if (!statusData) {
+    return (
+      <div className="flex flex-row w-full">
+        <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+          <div className="font-thin text-sm">-</div>
+          <div className="font-bold text-xs">RATE</div>
+        </div>
+        <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+          <div className="font-thin text-sm">-</div>
+          <div className="font-bold text-xs">REMAINING</div>
+        </div>
+        <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+          <div className="font-thin text-sm">-</div>
+          <div className="font-bold text-xs">DOWNLOADED</div>
+        </div>
+      </div>
+    );
+  }
+
+  console.log(statusData);
+
+  return (
+    <div className="flex flex-row w-full">
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">{formatBytes(statusData.DownloadRate)}/s</div>
+        <div className="font-bold text-xs">RATE</div>
+      </div>
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">{Math.round((statusData.RemainingSizeMB / 1024) * 100) / 100} GB</div>
+        <div className="font-bold text-xs">REMAINING</div>
+      </div>
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+        <div className="font-thin text-sm">{Math.round((statusData.DownloadedSizeMB / 1024) * 100) / 100} GB</div>
+        <div className="font-bold text-xs">DOWNLOADED</div>
+      </div>
+    </div>
+  );
+}