updates readme, improves error states, cleans dummy data

docs/customservices.md

@@ -18,6 +18,7 @@ within Homer:
 - [Docker Socket Proxy](#docker-socket-proxy)
 - [Emby / Jellyfin](#emby--jellyfin)
 - [FreshRSS](#freshrss)
+- [Gatus](#gatus)
 - [Gitea / Forgejo](#gitea--forgejo)
 - [Glances](#glances)
 - [Gotify](#gotify)
@@ -154,6 +155,16 @@ The FreshRSS service displays unread and subscriptions counts from your FreshRSS
   updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
 ```
 
+## Gatus
+
+This service displays a count of the monitors and the average response time.
+
+```yaml
+- name: Gatus
+  type: Gatus
+  url: http://gatus.containers.lan
+```
+
 ## Gitea / Forgejo
 
 This service displays a version string instead of a subtitle. Example configuration:
@@ -477,6 +488,7 @@ The following configuration is available for the PiHole service.
 ```
 
 **Remarks:**
+
 - If PiHole web interface is password protected, obtain the `apikey` from Settings > API/Web interface > Show API token.
 - For PiHole instances using API v6, set `apiVersion: 6` in your configuration. This enables session management and proper authentication handling.
 
@@ -553,7 +565,7 @@ This service displays status information of a Proxmox node (VMs running and disk
 The API Token (or the user assigned to that token if not separated permissions is checked) are this:
 
 | Path                | Permission | Comments                                                          |
-|---------------------|------------|-------------------------------------------------------------------|
+| ------------------- | ---------- | ----------------------------------------------------------------- |
 | /nodes/\<your-node> | Sys.Audit  |                                                                   |
 | /vms/\<id-vm>       | VM.Audit   | You need to have this permission on any VM you want to be counted |
 

dummy-data/gatus/api/v1/endpoints/statuses

@@ -1,11 +1,11 @@
 [
     {
-        "name": "name",
+        "name": "name1",
-        "key": "_name",
+        "key": "_name1",
         "results": [
             {
                 "status": 200,
-                "hostname": "name.containers.lan",
+                "hostname": "name1.containers.lan",
                 "duration": 13304419,
                 "conditionResults": [
                     {
@@ -19,13 +19,13 @@
         ]
     },
     {
-        "name": "name",
+        "name": "name2",
-        "key": "_name",
+        "key": "_name2",
         "results": [
             {
                 "status": 200,
-                "hostname": "name.containers.lan",
+                "hostname": "name2.containers.lan",
-                "duration": 13304419,
+                "duration": 23304419,
                 "conditionResults": [
                     {
                         "condition": "[STATUS] == 200",
@@ -38,12 +38,12 @@
         ]
     },
     {
-        "name": "name",
+        "name": "name3",
-        "key": "_name",
+        "key": "_name3",
         "results": [
             {
                 "status": 403,
-                "hostname": "name.containers.lan",
+                "hostname": "name3.containers.lan",
                 "duration": 13304419,
                 "conditionResults": [
                     {

src/components/services/Gatus.vue

@@ -6,11 +6,13 @@
         <template v-if="item.subtitle">
           {{ item.subtitle }}
         </template>
-        <template v-else-if="statusMessage.up !== false">
+        <template v-else-if="statusMessage !== false">
           <i class="fa-solid fa-signal"></i> {{ statusMessage.up }}
+          <template v-if="avgRespTime > 0">
             <span class="separator"> | </span>
             <i class="fa-solid fa-stopwatch"></i> {{ statusMessage.avgRes }}
           </template>
+        </template>
       </p>
     </template>
     <template #indicator>
@@ -42,7 +44,7 @@ export default {
       return this.up + this.down;
     },
     percentageGood: function () {
-      if (this.up == 0) return 0;
+      if (this.up == 0 || this.total == 0) return 0;
       return Math.round((this.up / this.total) * 100);
     },
     status: function () {
@@ -52,7 +54,6 @@ export default {
       return "warn";
     },
     statusMessage: function () {
-      if (this.up == 0 && this.down == 0) return false;
       return {
         up: `${this.up}/${this.total}`,
         avgRes: `${Math.round(this.avgRespTime * 100) / 100} ms avg.`,