feat(smartcard): Simplify ping card

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

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();
   },

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;