Feature: Add peaNUT Widget (#2450)

---------

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

docs/widgets/services/peanut.md

@@ -0,0 +1,21 @@
+---
+title: PeaNUT
+description: PeaNUT Widget Configuration
+---
+
+This widget adds support for [Network UPS Tools](https://networkupstools.org/) via a third party tool, [PeaNUT](https://github.com/Brandawg93/PeaNUT).
+
+The default ups name is `ups`. To configure more than one ups, you must create multiple peanut services.
+
+Allowed fields: `["battery_charge", "ups_load", "ups_status"]`
+
+!!! note
+
+    This widget requires an additional tool, [PeaNUT](https://github.com/Brandawg93/PeaNUT), as noted. Other projects exist to achieve similar results using a `customapi` widget, for example [NUTCase](https://github.com/ArthurMitchell42/nutcase#using-nutcase-homepage).
+
+```yaml
+widget:
+  type: peanut
+  url: http://peanut.host.or.ip:port
+  key: nameofyourups
+```

mkdocs.yml

@@ -96,6 +96,7 @@ nav:
       - widgets/services/opnsense.md
       - widgets/services/overseerr.md
       - widgets/services/paperlessngx.md
+      - widgets/services/peanut.md
       - widgets/services/pfsense.md
       - widgets/services/photoprism.md
       - widgets/services/pialert.md

public/locales/en/common.json

@@ -544,6 +544,14 @@
         "inbox": "Inbox",
         "total": "Total"
     },
+    "peanut": {
+        "battery_charge": "Battery Charge",
+        "ups_load": "UPS Load",
+        "ups_status": "UPS Status",
+        "online": "Online",
+        "on_battery": "On Battery",
+        "low_battery": "Low Battery"
+    },
     "nextdns": {
         "wait": "Please Wait",
         "no_devices": "No Device Data Received"

src/widgets/components.js

@@ -35,6 +35,7 @@ const components = {
   gotify: dynamic(() => import("./gotify/component")),
   grafana: dynamic(() => import("./grafana/component")),
   hdhomerun: dynamic(() => import("./hdhomerun/component")),
+  peanut: dynamic(() => import("./peanut/component")),
   homeassistant: dynamic(() => import("./homeassistant/component")),
   homebridge: dynamic(() => import("./homebridge/component")),
   healthchecks: dynamic(() => import("./healthchecks/component")),

src/widgets/peanut/component.jsx

@@ -0,0 +1,49 @@
+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 { widget } = service;
+  const { t } = useTranslation();
+
+  const { data: upsData, error: upsError } = useWidgetAPI(widget, "devices");
+
+  if (upsError) {
+    return <Container service={service} error={upsError} />;
+  }
+
+  if (!upsData) {
+    return (
+      <Container service={service}>
+        <Block label="peanut.battery_charge" />
+        <Block label="peanut.ups_load" />
+        <Block label="peanut.ups_status" />
+      </Container>
+    );
+  }
+
+  let status;
+  switch (upsData.ups_status) {
+    case "OL":
+      status = t("peanut.online");
+      break;
+    case "OB":
+      status = t("peanut.on_battery");
+      break;
+    case "LB":
+      status = t("peanut.low_battery");
+      break;
+    default:
+      status = upsData.ups_status;
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="peanut.battery_charge" value={t("common.percent", { value: upsData.battery_charge })} />
+      <Block label="peanut.ups_load" value={t("common.percent", { value: upsData.ups_load })} />
+      <Block label="peanut.ups_status" value={status} />
+    </Container>
+  );
+}

src/widgets/peanut/widget.js

@@ -0,0 +1,14 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}/{key}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    devices: {
+      endpoint: "devices",
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -62,6 +62,7 @@ import opnsense from "./opnsense/widget";
 import overseerr from "./overseerr/widget";
 import openmediavault from "./openmediavault/widget";
 import paperlessngx from "./paperlessngx/widget";
+import peanut from "./peanut/widget";
 import pfsense from "./pfsense/widget";
 import photoprism from "./photoprism/widget";
 import proxmoxbackupserver from "./proxmoxbackupserver/widget";
@@ -166,6 +167,7 @@ const widgets = {
   overseerr,
   openmediavault,
   paperlessngx,
+  peanut,
   pfsense,
   photoprism,
   proxmoxbackupserver,