Adds loading and errors icons/msgs. Adds docs.

This commit is contained in:
luixal 2022-10-11 19:00:53 +02:00 committed by Bastien Wirtz
parent 0a03fcd9cd
commit 13069da195
2 changed files with 24 additions and 3 deletions

View File

@ -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

View File

@ -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;
}
},