Add NetAlertx service integration

docs/customservices.md

@@ -33,6 +33,7 @@ Available services are located in `src/components/`:
 - [Mealie](#mealie)
 - [Medusa](#medusa)
 - [Miniflux](#miniflux)
+- [NetAlertx](#netalertx)
 - [Nextcloud](#nextcloud)
 - [OctoPrint / Moonraker](#octoprintmoonraker)
 - [Olivetin](#olivetin)
@@ -406,6 +407,24 @@ Displays the number of unread articles from your Miniflux RSS reader.
 
 **API Key**: Generate an API key in Miniflux web interface under **Settings > API Keys > Create a new API key**
 
+## NetAlertx
+
+Displays network monitoring stats (connected devices, alerts, network activity) from your NetAlertx server.
+
+```yaml
+- name: "NetAlertx"
+  type: "NetAlertx"
+  logo: "assets/tools/sample.png"
+  url: https://my-service.url
+  apikey: "<---insert-api-key-here--->"
+  # endpoint: "https://my-service-api.url" # Optional: alternative base URL used to fetch service data when necessary.
+  updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
+```
+
+**API Key**: Generate an API key in NetAlertx web interface under **Settings > API Access > Generate API Key** or in your installation documentation.
+
+**Note**: NetAlertx is the modern fork/rename of PiAlert. Both integrations are available in Homer for compatibility.
+
 ## Nextcloud
 
 Displays Nextcloud version and shows if Nextcloud is online, offline, or in [maintenance

dummy-data/netalertx/devices/totals

@@ -0,0 +1,6 @@
+{
+  "total": 45,
+  "connected": 38,
+  "new": 2,
+  "down": 3
+}

src/components/services/NetAlertx.vue

@@ -0,0 +1,105 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong class="notif total" title="Total Devices">
+          {{ total }}
+        </strong>
+        <strong class="notif connected" title="Connected Devices">
+          {{ connected }}
+        </strong>
+        <strong class="notif newdevices" title="New Devices">
+          {{ newdevices }}
+        </strong>
+        <strong class="notif alert" title="Down Alerts">
+          {{ downalert }}
+        </strong>
+        <strong
+          v-if="serverError"
+          class="notif alert"
+          title="Connection error to NetAlertx server, check the url in config.yml"
+          >?</strong
+        >
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+
+export default {
+  name: "NetAlertx",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  data: () => {
+    return {
+      total: 0,
+      connected: 0,
+      newdevices: 0,
+      downalert: 0,
+      serverError: false,
+    };
+  },
+  created() {
+    const updateInterval = parseInt(this.item.updateInterval, 10) || 0;
+    if (updateInterval > 0) {
+      setInterval(() => this.fetchStatus(), updateInterval);
+    }
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      this.fetch("/devices/totals", { headers: { Authorization: `Bearer ${this.item.apikey}` } })
+        .then((response) => {
+          this.total = response.total || response[0] || 0;
+          this.connected = response.connected || response[1] || 0;
+          this.newdevices = response.new || response[3] || 0;
+          this.downalert = response.down || response[4] || 0;
+          this.serverError = false;
+        })
+        .catch((e) => {
+          console.log(e);
+          this.serverError = true;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.notifs {
+  position: absolute;
+  color: white;
+  font-family: sans-serif;
+  top: 0.3em;
+  right: 0.5em;
+
+  .notif {
+    display: inline-block;
+    padding: 0.2em 0.35em;
+    border-radius: 0.25em;
+    position: relative;
+    margin-left: 0.3em;
+    font-size: 0.8em;
+
+    &.total {
+      background-color: #4fb5d6;
+    }
+
+    &.connected {
+      background-color: #4fd671;
+    }
+
+    &.newdevices {
+      background-color: #d08d2e;
+    }
+
+    &.alert {
+      background-color: #e51111;
+    }
+  }
+}
+</style>