From b11bee7d64f1da71fcfd58ab7423832c7e1bdc28 Mon Sep 17 00:00:00 2001
From: 3thibaut1304 <thibaut.husser@free.fr>
Date: Wed, 26 Mar 2025 21:10:41 +0100
Subject: [PATCH] add status online/offline and version of the card

---
 docs/customservices.md                |  5 +-
 src/components/services/Portainer.vue | 69 +++++++++++++++++++++++++--
 2 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index 7ddaaaa..09809f2 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -448,8 +448,11 @@ 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>
+See <https://docs.portainer.io/api/access#creating-an-access-token>  
 
 ```yaml
 - name: "Portainer"
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index f7c8634..603d1b9 100644
--- a/src/components/services/Portainer.vue
+++ b/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
-          v-if="misc > 0"
-          class="notif misc"
-          title="Other (creating, paused, exited, etc.)"
-        >
+        <strong 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;