Added PiAlert widget [WIP] (#1493)

* Added PiAlert widget

* pialert: comments clean

* Syntax changes to piAlert widget

---------

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

public/locales/en/common.json

@@ -232,6 +232,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

@@ -57,6 +57,7 @@ const components = {
   pfsense: dynamic(() => import("./pfsense/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,37 @@
+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: pialertData, error: pialertError } = useWidgetAPI(widget, "data");
+
+  if (pialertError) {
+    return <Container service={service} error={pialertError} />;
+  }
+
+  if (!pialertData) {
+    return (
+      <Container service={service}>
+        <Block label="pialert.total" />
+        <Block label="pialert.connected" />
+        <Block label="pialert.new_devices" />
+        <Block label="pialert.down_alerts" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="pialert.total" value={t("common.number", { value: parseInt(pialertData[0], 10) })} />
+      <Block label="pialert.connected" value={t("common.number", { value: parseInt(pialertData[1], 10) })} />
+      <Block label="pialert.new_devices" value={t("common.number", { value: parseInt(pialertData[3], 10) })} />
+      <Block label="pialert.down_alerts" value={t("common.number", { value: parseInt(pialertData[4], 10) })} />
+    </Container>
+  );
+}

src/widgets/pialert/widget.js

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

src/widgets/widgets.js

@@ -51,6 +51,7 @@ import paperlessngx from "./paperlessngx/widget";
 import pfsense from "./pfsense/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";
@@ -138,6 +139,7 @@ const widgets = {
   pfsense,
   photoprism,
   proxmoxbackupserver,
+  pialert,
   pihole,
   plex,
   portainer,