Adds loading and errors icons/msgs. Adds docs.

2 files changed, 24 insertions, 3 deletions

diff --git a/docs/customservices.md b/docs/customservices.md
index 67baed0..417459e 100644
--- 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 981bdf1..092d077 100644
--- 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;
         }
       },