From a666d7aa9390559afdcc00c0af085b142db9c181 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Fri, 8 Nov 2024 18:08:14 +0100
Subject: [PATCH] feat(smartcard): Simplify ping card

---
 docs/customservices.md           |  8 +++-----
 src/components/services/Ping.vue | 19 ++++++++++++-------
 src/mixins/service.js            |  2 +-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index 3c52191f..62715628 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -145,17 +145,15 @@ 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. 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.
+This card checks if the target link is available. All you need is 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. By default, the subtitle line shows the round trip time (RTT) of the request, unless you provide the `subtitle` property.
 
 ```yaml
 - name: "Awesome app"
   type: Ping
   logo: "assets/tools/sample.png"
-  tag: "app"
   url: "https://www.wikipedia.org/"
-  method: "head"
-  subtitle: "Bookmark example"
-  # showRtt: true
+  # method: "head"
+  # subtitle: "Bookmark example" # By default, request round trip time is displayed when subtitle is not set.
 ```
 
 ## Prometheus
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index 658aa479..8492c55c 100644
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -8,15 +8,12 @@
     <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">
+      <template v-if="item.subtitle">
           {{ item.subtitle }}
       </template>
+      <template v-else>
+        {{ rttLabel }}
+      </template>
       </p>
     </template>
   </Generic>
@@ -39,6 +36,14 @@ export default {
     status: null,
     rtt: null,
   }),
+  computed: {
+    rttLabel: function () {
+      if (this.status === 'online') {
+        return `${this.rtt}ms`;
+      }
+      return "unavailable";
+    }
+  },
   created() {
     this.fetchStatus();
   },
diff --git a/src/mixins/service.js b/src/mixins/service.js
index f058b8fe..5ace4919 100644
--- a/src/mixins/service.js
+++ b/src/mixins/service.js
@@ -48,7 +48,7 @@ export default {
 
       return fetch(url, options).then((response) => {
         if (!response.ok) {
-          throw new Error("Not 2xx response");
+          throw new Error(`Ping: target not available (${response.status} error)`);
         }
 
         return json ? response.json() : response;