Display round-trip time on the subtitle of the custom service ping (#800

)

* Show rtt on subtitle of custom service ping

* Display subtitle when showRtt is false and handle offline service RTT

- Ensure the subtitle is still displayed even if `showRtt` is set to false.
- When `showRtt` is true and the service is not online, display "N/A" instead of omitting the RTT value.

docs/customservices.md

@@ -145,16 +145,17 @@ API key can be generated in Settings > Administration > Auth Tokens
 
 ## Ping
 
-For Ping you need to set the type to Ping and provide a url. By default the HEAD method is used but it can be configured to use GET using the optional `method` property.
+For Ping you need to set the type to Ping and provide a url. By default the HEAD method is used but it can be configured to use GET using the optional `method` property. You can also choose to show the round trip time (RTT) by setting `showRtt` to true, default is false. The RTT will be displayed in the subtitle section.
 
 ```yaml
 - name: "Awesome app"
   type: Ping
   logo: "assets/tools/sample.png"
-  subtitle: "Bookmark example"
   tag: "app"
   url: "https://www.reddit.com/r/selfhosted/"
   method: "head"
+  subtitle: "Bookmark example"
+  # showRtt: true
 ```
 
 ## Prometheus

src/components/services/Ping.vue

@@ -5,6 +5,20 @@
         {{ status }}
       </div>
     </template>
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+      <template v-if="status === 'online' && item.showRtt">
+        {{ rtt }} ms
+      </template>
+      <template v-else-if="status === 'offline' && item.showRtt">
+        N/A
+      </template>
+      <template v-else-if="!item.showRtt && item.subtitle">
+          {{ item.subtitle }}
+      </template>
+      </p>
+    </template>
   </Generic>
 </template>
 
@@ -23,6 +37,7 @@ export default {
   },
   data: () => ({
     status: null,
+    rtt: null,
   }),
   created() {
     this.fetchStatus();
@@ -39,12 +54,17 @@ export default {
         return;
       }
 
+      const startTime = performance.now();
+
       this.fetch("/", { method, cache: "no-cache" }, false)
         .then(() => {
           this.status = "online";
+          const endTime = performance.now();
+          this.rtt = Math.round(endTime - startTime);
         })
         .catch(() => {
           this.status = "offline";
+          this.rtt = null; // Reset rtt on failure
         });
     },
   },
@@ -81,3 +101,4 @@ export default {
   }
 }
 </style>
+