add status online/offline and version of the card

docs/customservices.md

@@ -448,6 +448,9 @@ This service displays info about the total number of containers managed by your
 In order to use it, you must be using Portainer version 1.11 or later. Generate an access token from the UI and pass
 it to the apikey field.
 By default, every connected environments will be checked. To select specific ones, add an "environments" entry which can be a simple string or an array containing all the selected environments name.
+### New features:
+Displays the Portainer version from /api/status  
+Shows online/offline status depending on API reachability  
 
 See <https://docs.portainer.io/api/access#creating-an-access-token>  
 

src/components/services/Portainer.vue

@@ -1,5 +1,16 @@
 <template>
   <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="versionstring">
+          Version {{ versionstring }}
+        </template>
+      </p>
+    </template>
     <template #indicator>
       <div class="notifs">
         <strong v-if="running > 0" class="notif running" title="Running">
@@ -8,14 +19,13 @@
         <strong v-if="dead > 0" class="notif dead" title="Dead">
           {{ dead }}
         </strong>
-        <strong
+        <strong v-if="misc > 0" class="notif misc" title="Other (creating, paused, exited, etc.)">
-          v-if="misc > 0"
-          class="notif misc"
-          title="Other (creating, paused, exited, etc.)"
-        >
           {{ misc }}
         </strong>
       </div>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
     </template>
   </Generic>
 </template>
@@ -32,6 +42,8 @@ export default {
   data: () => ({
     endpoints: null,
     containers: null,
+    fetchOk: null,
+    versionstring: null,
   }),
   computed: {
     running: function () {
@@ -61,9 +73,13 @@ export default {
         );
       }).length;
     },
+    status: function () {
+      return this.fetchOk ? "online" : "offline";
+    },
   },
   created() {
     this.fetchStatus();
+    this.fetchVersion();
   },
   methods: {
     fetchStatus: async function () {
@@ -99,11 +115,54 @@ export default {
 
       this.containers = containers;
     },
+    fetchVersion: async function () {
+      const headers = {
+        "X-Api-Key": this.item.apikey,
+      };
+      this.fetch("/api/status", { headers })
+        .then((response) => {
+          this.fetchOk = true;
+          this.versionstring = response.Version;
+        })
+        .catch((e) => {
+          this.fetchOk = false;
+          console.error(e);
+        });
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+  white-space: nowrap;
+  margin-left: 0.25rem;
+
+  &.online:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.offline:before {
+    background-color: #c9404d;
+    border-color: #c42c3b;
+    box-shadow: 0 0 5px 1px #c9404d;
+  }
+
+  &:before {
+    content: " ";
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-right: 10px;
+    border: 1px solid #000;
+    border-radius: 7px;
+  }
+}
+
 .notifs {
   position: absolute;
   color: white;