Merge branch 'main' into vuejs-3

2 files changed, 129 insertions, 0 deletions

diff --git a/docs/customservices.md b/docs/customservices.md
index 6a54400..c9ce093 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -20,6 +20,7 @@ within Homer:
 + [Uptime Kuma](#uptime-kuma)
 + [Tautulli](#tautulli)
 + [Mealie](#mealie)
++ [Healthchecks](#healthchecks)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
 
@@ -229,3 +230,16 @@ endpoint pointing to Tautulli!
 
 First off make sure to remove an existing `subtitle` as it will take precedence if set. 
 Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized or the planned meal for today if one is planned. You will have to set an API key in the field `apikey` which can be created in your Mealie installation.
+
+## 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>