4 <p class="title is-4">{{ item.name }}</p>
5 <p class="subtitle is-6">
6 <template v-if="item.subtitle">
9 <template v-else-if="vms">
11 <strong>Loading...</strong>
13 <div v-else-if="error">
14 <strong class="danger">Error loading info</strong>
16 <div v-else class="metrics">
17 <span>VMs: <span class="is-number"><strong>{{ vms.running }}</strong>/{{vms.total}}</span></span>
18 <span>Disk: <strong class="is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</strong></span>
19 <span>Mem: <strong class="is-number" :class="statusClass(memoryUsed)">{{ memoryUsed }}%</strong></span>
20 <span>CPU: <strong class="is-number" :class="statusClass(cpuUsed)">{{ cpuUsed }}%</strong></span>
26 <i v-if="loading" class="fa fa-circle-notch fa-spin fa-2xl"></i>
27 <i v-if="error" class="fa fa-exclamation-circle fa-2xl danger"></i>
33 import service from "@/mixins/service.js";
34 import Generic from "./Generic.vue";
61 if (value > this.item.danger_value) return 'danger';
62 if (value > this.item.warning_value) return 'warning';
65 fetchStatus: async function () {
69 "Authorization": this.item.api_token
72 const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options);
74 this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(1);
75 this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(1);
76 this.cpuUsed = (status.data.cpu * 100).toFixed(1);
78 const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options);
79 this.vms.total += vms.data.length;
80 this.vms.running += vms.data.filter( i => i.status === 'running' ).length;
92 <style scoped lang="scss">
107 justify-content: space-between;