feat: add custom service Healthchecks

* refs #474

2 files changed, 129 insertions, 0 deletions

diff --git a/docs/customservices.md b/docs/customservices.md
index efe8ca4..3f14f8c 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -19,6 +19,7 @@ within Homer:
 + [Emby / Jellyfin](#emby--jellyfin)
 + [Uptime Kuma](#uptime-kuma)
 + [Tautulli](#tautulli)
++ [Healthchecks](#healthchecks)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
 
@@ -223,3 +224,16 @@ endpoint pointing to Tautulli!
   type: "Tautulli"
   apikey: "MY-SUPER-SECRET-API-KEY"
 ```
+
+## Healthchecks
+
+This service displays information about the configured status checks from the Healthchecks application.
+Two lines are needed in the config.yml :
+
+```yaml
+  type: "Healthchecks"
+  apikey: "01234deb70424befb1f4ef6a23456789"
+```
+
+The url must be the root url of the Healthchecks application.
+The Healthchecks API key can be found in Settings > API Access > API key (read-only). The key is needed to access Healthchecks API.
diff --git a/src/components/services/Healhchecks.vue b/src/components/services/Healhchecks.vue
new file mode 100644
index 0000000..c60f241
--- /dev/null
+++ b/src/components/services/Healhchecks.vue
@@ -0,0 +1,115 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong v-if="up > 0" class="notif up" title="Up">
+          {{ up }}
+        </strong>
+        <strong v-if="down > 0" class="notif down" title="Down">
+          {{ down }}
+        </strong>
+        <strong v-if="grace > 0" class="notif grace" title="Grace">
+          {{ grace }}
+        </strong>
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Healthchecks",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    api: null,
+  }),
+  computed: {
+    up: function () {
+      if (!this.api) {
+        return "";
+      }
+      return this.api.checks?.filter((check) => {
+        return check.status.toLowerCase() === "up";
+      }).length;
+    },
+    down: function () {
+      if (!this.api) {
+        return "";
+      }
+      return this.api.checks?.filter((check) => {
+        return check.status.toLowerCase() === "down";
+      }).length;
+    },
+    grace: function () {
+      if (!this.api) {
+        return "";
+      }
+      return this.api.checks?.filter((check) => {
+        return check.status.toLowerCase() === "grace";
+      }).length;
+    },
+  },
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      const apikey = this.item.apikey;
+      if (!apikey) {
+        console.error(
+          "apikey is not present in config.yml for the Healthchecks entry!"
+        );
+        return;
+      }
+
+      const headers = {
+        "X-Api-Key": this.item.apikey,
+      };
+
+      this.api = await this.fetch("/api/v1/checks/", { headers }).catch((e) => {
+        console.error(e);
+      });
+    },
+  },
+};
+</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;
+
+    &.up {
+      background-color: #4fd671;
+    }
+
+    &.down {
+      background-color: #e51111;
+    }
+
+    &.grace {
+      background-color: #cdd02e;
+    }
+  }
+}
+</style>