mirror of
https://github.com/bastienwirtz/homer.git
synced 2025-03-13 06:49:32 +01:00
Proxmox improvements
This commit is contained in:
parent
f72c0bc781
commit
d32f7f6467
@ -298,6 +298,11 @@ Configuration example:
|
|||||||
warning_value: 50
|
warning_value: 50
|
||||||
danger_value: 80
|
danger_value: 80
|
||||||
api_token: "PVEAPIToken=root@pam!your-api-token-name=your-api-token-key"
|
api_token: "PVEAPIToken=root@pam!your-api-token-name=your-api-token-key"
|
||||||
|
# values below this line are optional (default value are false/empty):
|
||||||
|
hide_decimals: true # removes decimals from stats values.
|
||||||
|
hide: ["vms", "vms_total", "lxcs", "lxcs_total", "disk", "mem", "cpu"] # hides values included in the array
|
||||||
|
small_font_on_small_screens: true # uses small font on small screens (like mobile)
|
||||||
|
small_font_on_desktop: true # uses small font on desktops (just in case you're showing much info)
|
||||||
```
|
```
|
||||||
|
|
||||||
## qBittorrent
|
## qBittorrent
|
||||||
|
@ -13,11 +13,12 @@
|
|||||||
<div v-else-if="error">
|
<div v-else-if="error">
|
||||||
<strong class="danger">Error loading info</strong>
|
<strong class="danger">Error loading info</strong>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="metrics">
|
<div v-else class="metrics" :class="{'is-size-7-mobile': item.small_font_on_small_screens, 'is-small': item.small_font_on_desktop}">
|
||||||
<span>VMs: <span class="is-number"><strong>{{ vms.running }}</strong>/{{vms.total}}</span></span>
|
<span v-if="isValueShown('vms')" class="margined">VMs: <span class="is-number"><span class="has-text-weight-bold">{{ vms.running }}</span><span v-if="isValueShown('vms_total')">/{{vms.total}}</span></span></span>
|
||||||
<span>Disk: <strong class="is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</strong></span>
|
<span v-if="isValueShown('lxcs')" class="margined">LXCs: <span class="is-number"><span class="has-text-weight-bold">{{ lxcs.running }}</span><span v-if="isValueShown('lxcs_total')">/{{lxcs.total}}</span></span></span>
|
||||||
<span>Mem: <strong class="is-number" :class="statusClass(memoryUsed)">{{ memoryUsed }}%</strong></span>
|
<span v-if="isValueShown('disk')" class="margined">Disk: <span class="has-text-weight-bold is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</span></span>
|
||||||
<span>CPU: <strong class="is-number" :class="statusClass(cpuUsed)">{{ cpuUsed }}%</strong></span>
|
<span v-if="isValueShown('mem')" class="margined">Mem: <span class="has-text-weight-bold is-number" :class="statusClass(memoryUsed)">{{ memoryUsed }}%</span></span>
|
||||||
|
<span v-if="isValueShown('cpu')" class="margined">CPU: <span class="has-text-weight-bold is-number" :class="statusClass(cpuUsed)">{{ cpuUsed }}%</span></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</p>
|
</p>
|
||||||
@ -47,13 +48,19 @@
|
|||||||
total: 0,
|
total: 0,
|
||||||
running: 0
|
running: 0
|
||||||
},
|
},
|
||||||
|
lxcs: {
|
||||||
|
total: 0,
|
||||||
|
running: 0
|
||||||
|
},
|
||||||
memoryUsed: 0,
|
memoryUsed: 0,
|
||||||
diskUsed: 0,
|
diskUsed: 0,
|
||||||
cpuUsed: 0,
|
cpuUsed: 0,
|
||||||
|
hide: [],
|
||||||
error: false,
|
error: false,
|
||||||
loading: true
|
loading: true
|
||||||
}),
|
}),
|
||||||
created() {
|
created() {
|
||||||
|
if (this.item.hide) this.hide = this.item.hide;
|
||||||
this.fetchStatus();
|
this.fetchStatus();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -71,13 +78,20 @@
|
|||||||
}
|
}
|
||||||
const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options);
|
const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options);
|
||||||
// main metrics:
|
// main metrics:
|
||||||
this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(1);
|
const decimalsToShow = this.item.hide_decimals ? 0 : 1;
|
||||||
this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(1);
|
this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(decimalsToShow);
|
||||||
this.cpuUsed = (status.data.cpu * 100).toFixed(1);
|
this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(decimalsToShow);
|
||||||
|
this.cpuUsed = (status.data.cpu * 100).toFixed(decimalsToShow);
|
||||||
// vms:
|
// vms:
|
||||||
const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options);
|
if (this.isValueShown('vms')) {
|
||||||
this.vms.total += vms.data.length;
|
const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options);
|
||||||
this.vms.running += vms.data.filter( i => i.status === 'running' ).length;
|
this.parseVMsAndLXCs(vms, this.vms);
|
||||||
|
}
|
||||||
|
// lxc containers:
|
||||||
|
if (this.isValueShown('lxcs')) {
|
||||||
|
const lxcs = await this.fetch(`/api2/json/nodes/${this.item.node}/lxc`, options);
|
||||||
|
this.parseVMsAndLXCs(lxcs, this.lxcs);
|
||||||
|
}
|
||||||
this.error = false;
|
this.error = false;
|
||||||
} catch(err) {
|
} catch(err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
@ -85,6 +99,15 @@
|
|||||||
}
|
}
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
},
|
},
|
||||||
|
parseVMsAndLXCs(items, value) {
|
||||||
|
value.total += items.data.length;
|
||||||
|
value.running += items.data.filter( i => i.status === 'running' ).length;
|
||||||
|
// if no vms, hide this value:
|
||||||
|
if (value.total == 0) this.hide.push('lxcs');
|
||||||
|
},
|
||||||
|
isValueShown(value) {
|
||||||
|
return this.hide.indexOf(value) == -1;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -102,9 +125,11 @@
|
|||||||
.danger {
|
.danger {
|
||||||
color: red
|
color: red
|
||||||
}
|
}
|
||||||
.metrics {
|
.metrics .margined:not(:first-child) {
|
||||||
display: flex;
|
margin-left: 0.3rem;
|
||||||
justify-content: space-between;
|
}
|
||||||
|
.is-small {
|
||||||
|
font-size: small;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user