Adds loading and errors icons/msgs. Adds docs.

diff --git a/docs/customservices.md b/docs/customservices.md
index 67baed0402e85c8b9bbc9a1db9e8656a69bc64f7..417459eac8ffd143084b85948a40ab2044764e7a 100644 (file)
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -250,6 +250,17 @@ The Healthchecks API key can be found in Settings > API Access > API key (read-o
 
 This service displays status information of a Proxmox node (VMs running and disk, memory and cpu used). It uses the proxmox API and [API Tokens](https://pve.proxmox.com/pve-docs/pveum-plain.html) for authorization so you need to generate one to set in the yaml config. You can set it up in Proxmox under Permissions > API Tokens. You also need to know the realm the user of the API Token is assigned to (by default pam).
 
+The API Token (or the user asigned to that token if not separated permissions is checked) are this:
+
+| Path               | Permission | Comments                                                          |
+| ------------------ | ---------- |                                                                   |
+| /nodes/<your-node> | Sys.Audit  |                                                                   |
+| /vms/<id-vm>       | VM.Audit   | You need to have this permission on any VM you want to be counted |
+
+It is highly recommended that you create and API Token with only these permissions on a read-only mode.
+
+If you get errors, they will be shown on browser's dev console. Main issues tend to be CORS related as Proxmox does not include CORS headers and you have to desploy it behind a reverse proxy and make the proxy add this headers.
+
 Configuration example:
 
 ```yaml

diff --git a/src/components/services/Proxmox.vue b/src/components/services/Proxmox.vue
index 981bdf1ca5ac0502254307e1a5843c9942b019d9..092d07739f47669b332f000b7dbe337b4a95fbde 100644 (file)
--- a/src/components/services/Proxmox.vue
+++ b/src/components/services/Proxmox.vue
@@ -7,8 +7,11 @@
             {{ item.subtitle }}
           </template>
           <template v-else-if="vms">
-            <div v-if="error">
-              <strong class="danger">Error loading info!</strong>
+            <div v-if="loading">
+              <strong>Loading...</strong>
+            </div>
+            <div v-else-if="error">
+              <strong class="danger">Error loading info</strong>
             </div>
             <div v-else class="metrics">
               <span>VMs: <span class="is-number"><strong>{{ vms.running }}</strong>/{{vms.total}}</span></span>
@@ -19,6 +22,10 @@
           </template>
         </p>
       </template>
+      <template #indicator>
+        <i v-if="loading" class="fa fa-circle-notch fa-spin fa-2xl"></i>
+        <i v-if="error" class="fa fa-exclamation-circle fa-2xl danger"></i>
+      </template>
     </Generic>
   </template>
   
@@ -43,7 +50,8 @@
       memoryUsed: 0,
       diskUsed: 0,
       cpuUsed: 0,
-      error: false
+      error: false,
+      loading: true
     }),
     created() {
       this.fetchStatus();
@@ -71,8 +79,10 @@
           this.vms.total += vms.data.length;
           this.vms.running += vms.data.filter( i => i.status === 'running' ).length;
           this.error = false;
+          this.loading = false;
         } catch(err) {
           console.log(err);
+          this.loading = false;
           this.error = true;
         }
       },