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

docs/customservices.md

@@ -137,16 +137,16 @@ 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.
 
 ```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"
+  showRtt: false
 ```
 
 ## Prometheus

src/components/services/Ping.vue

@@ -5,6 +5,14 @@
         {{ 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>
+      </p>
+    </template>
   </Generic>
 </template>
 
@@ -23,6 +31,7 @@ export default {
   },
   data: () => ({
     status: null,
+    rtt: null,
   }),
   created() {
     this.fetchStatus();
@@ -39,12 +48,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 +95,4 @@ export default {
   }
 }
 </style>
+