Add Proxmox Backup Server Widget (#879)

* Add Proxmox Backup Server Widget

* Clarification added to Failed Tasks

* Refactor pbs to proxmoxbackupserver

* Removing property instead of recreating object

* minor code styling of proxmoxbackupserver widget

---------

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

public/locales/en/common.json

@@ -433,5 +433,11 @@
     "cloudflared": {
         "origin_ip": "Origin IP",
         "status": "Status" 
+    },
+    "proxmoxbackupserver": {
+        "datastore_usage": "Datastore",
+        "failed_tasks_24h": "Failed Tasks 24h",
+        "cpu_usage": "CPU",
+        "memory_usage": "Memory"
     }
 }

src/utils/proxy/handlers/credentialed.js

@@ -34,6 +34,9 @@ export default async function credentialedProxyHandler(req, res, map) {
         headers.Authorization = `Bearer ${widget.key}`;
       } else if (widget.type === "proxmox") {
         headers.Authorization = `PVEAPIToken=${widget.username}=${widget.password}`;
+      } else if (widget.type === "proxmoxbackupserver") {
+        delete headers["Content-Type"];
+        headers.Authorization = `PBSAPIToken=${widget.username}:${widget.password}`;
       } else if (widget.type === "autobrr") {
         headers["X-API-Token"] = `${widget.key}`;
       } else if (widget.type === "tubearchivist") {

src/widgets/components.js

@@ -37,6 +37,7 @@ const components = {
   opnsense: dynamic(() => import("./opnsense/component")),
   overseerr: dynamic(() => import("./overseerr/component")),
   paperlessngx: dynamic(() => import("./paperlessngx/component")),
+  proxmoxbackupserver: dynamic(() => import("./proxmoxbackupserver/component")),
   pihole: dynamic(() => import("./pihole/component")),
   plex: dynamic(() => import("./plex/component")),
   portainer: dynamic(() => import("./portainer/component")),

src/widgets/proxmoxbackupserver/component.jsx

@@ -0,0 +1,45 @@
+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";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data: datastoreData, error: datastoreError } = useWidgetAPI(widget, "status/datastore-usage");
+  const { data: tasksData, error: tasksError } = useWidgetAPI(widget, "nodes/localhost/tasks");
+  const { data: hostData, error: hostError } = useWidgetAPI(widget, "nodes/localhost/status");
+
+  if (datastoreError || tasksError || hostError) {
+    const finalError = tasksError ?? datastoreError ?? hostError;
+    return <Container error={finalError} />;
+  }
+
+  if (!datastoreData || !tasksData || !hostData) {
+    return (
+      <Container service={service}>
+        <Block label="proxmoxbackupserver.datastore_usage" />
+        <Block label="proxmoxbackupserver.failed_tasks" />
+        <Block label="proxmoxbackupserver.cpu_usage" />
+        <Block label="proxmoxbackupserver.memory_usage" />
+      </Container>
+    );
+  }
+
+  const datastoreUsage = datastoreData.data[0].used / datastoreData.data[0].total * 100;
+  const cpuUsage = hostData.data.cpu * 100;
+  const memoryUsage = hostData.data.memory.used / hostData.data.memory.total * 100;
+  const failedTasks = tasksData.total >= 100 ? "99+" : tasksData.total;
+
+  return (
+    <Container service={service}>
+      <Block label="proxmoxbackupserver.datastore_usage" value={t("common.percent", { value: datastoreUsage })} />
+      <Block label="proxmoxbackupserver.failed_tasks_24h" value={failedTasks} />
+      <Block label="proxmoxbackupserver.cpu_usage" value={t("common.percent", { value: cpuUsage })} />
+      <Block label="proxmoxbackupserver.memory_usage" value={t("common.percent", { value: memoryUsage })} />
+    </Container>
+  );
+}

src/widgets/proxmoxbackupserver/widget.js

@@ -0,0 +1,22 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const since = Date.now() - (24 * 60 * 60 * 1000);
+
+const widget = {
+  api: "{url}/api2/json/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    "status/datastore-usage": {
+      endpoint: "status/datastore-usage",
+    },
+    "nodes/localhost/tasks": {
+      endpoint: `nodes/localhost/tasks?errors=true&limit=100&since=${since}`,
+    },
+    "nodes/localhost/status": {
+      endpoint: "nodes/localhost/status",
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -31,6 +31,7 @@ import ombi from "./ombi/widget";
 import opnsense from "./opnsense/widget";
 import overseerr from "./overseerr/widget";
 import paperlessngx from "./paperlessngx/widget";
+import proxmoxbackupserver from "./proxmoxbackupserver/widget";
 import pihole from "./pihole/widget";
 import plex from "./plex/widget";
 import portainer from "./portainer/widget";
@@ -92,6 +93,7 @@ const widgets = {
   opnsense,
   overseerr,
   paperlessngx,
+  proxmoxbackupserver,
   pihole,
   plex,
   portainer,