Added PiAlert widget

public/locales/en/common.json

@@ -217,6 +217,12 @@
         "approved": "Approved",
         "available": "Available"
     },
+    "pialert": {
+        "total": "Total",
+        "connected": "Connected",
+        "new_devices": "New Devices",
+        "down_alerts": "Down Alerts"
+    },
     "pihole": {
         "queries": "Queries",
         "blocked": "Blocked",

src/widgets/components.js

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

src/widgets/pialert/component.jsx

@@ -0,0 +1,35 @@
+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: piholeData, error: piholeError } = useWidgetAPI(widget, "data");
+
+  if (piholeError) {
+    return <Container service={service} error={piholeError} />;
+  }
+
+  if (!piholeData) {
+    return (
+      <Container service={service}>
+        <Block label="pialert.total" />
+        <Block label="pialert.connected" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="pialert.total" value={t("common.number", { value: parseInt(piholeData[0], 10) })} />
+      <Block label="pialert.connected" value={t("common.number", { value: parseInt(piholeData[1], 10) })} />
+      <Block label="pialert.new_devices" value={t("common.number", { value: parseInt(piholeData[3], 10) })} />
+      <Block label="pialert.down_alerts" value={t("common.number", { value: parseInt(piholeData[4], 10) })} />
+    </Container>
+  );
+}

src/widgets/pialert/widget.js

@@ -0,0 +1,15 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  //api: "{url}/api/table_custom_endpoint.json",
+  api: "{url}/php/server/devices.php?action=getDevicesTotals",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    "data": {
+      endpoint: "data",
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -48,6 +48,7 @@ import overseerr from "./overseerr/widget";
 import paperlessngx from "./paperlessngx/widget";
 import photoprism from "./photoprism/widget";
 import proxmoxbackupserver from "./proxmoxbackupserver/widget";
+import pialert from "./pialert/widget";
 import pihole from "./pihole/widget";
 import plex from "./plex/widget";
 import portainer from "./portainer/widget";
@@ -132,6 +133,7 @@ const widgets = {
   paperlessngx,
   photoprism,
   proxmoxbackupserver,
+  pialert,
   pihole,
   plex,
   portainer,