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>
20 'is-size-7-mobile': item.small_font_on_small_screens,
21 'is-small': item.small_font_on_desktop,
24 <span v-if="isValueShown('vms')" class="margined"
26 <span class="is-number"
27 ><span class="has-text-weight-bold">{{ vms.running }}</span
28 ><span v-if="isValueShown('vms_total')"
29 >/{{ vms.total }}</span
33 <span v-if="isValueShown('lxcs')" class="margined"
35 <span class="is-number"
36 ><span class="has-text-weight-bold">{{ lxcs.running }}</span
37 ><span v-if="isValueShown('lxcs_total')"
38 >/{{ lxcs.total }}</span
42 <span v-if="isValueShown('disk')" class="margined"
45 class="has-text-weight-bold is-number"
46 :class="statusClass(diskUsed)"
47 >{{ diskUsed }}%</span
50 <span v-if="isValueShown('mem')" class="margined"
53 class="has-text-weight-bold is-number"
54 :class="statusClass(memoryUsed)"
55 >{{ memoryUsed }}%</span
58 <span v-if="isValueShown('cpu')" class="margined"
61 class="has-text-weight-bold is-number"
62 :class="statusClass(cpuUsed)"
71 <i v-if="loading" class="fa fa-circle-notch fa-spin fa-2xl"></i>
72 <i v-if="error" class="fa fa-exclamation-circle fa-2xl danger"></i>
78 import service from "@/mixins/service.js";
79 import Generic from "./Generic.vue";
107 if (this.item.hide) this.hide = this.item.hide;
112 if (value > this.item.danger_value) return "danger";
113 if (value > this.item.warning_value) return "warning";
116 fetchStatus: async function () {
120 Authorization: this.item.api_token,
123 const status = await this.fetch(
124 `/api2/json/nodes/${this.item.node}/status`,
128 const decimalsToShow = this.item.hide_decimals ? 0 : 1;
130 (status.data.memory.used * 100) /
131 status.data.memory.total
132 ).toFixed(decimalsToShow);
134 (status.data.rootfs.used * 100) /
135 status.data.rootfs.total
136 ).toFixed(decimalsToShow);
137 this.cpuUsed = (status.data.cpu * 100).toFixed(decimalsToShow);
139 if (this.isValueShown("vms")) {
140 const vms = await this.fetch(
141 `/api2/json/nodes/${this.item.node}/qemu`,
144 this.parseVMsAndLXCs(vms, this.vms);
147 if (this.isValueShown("lxcs")) {
148 const lxcs = await this.fetch(
149 `/api2/json/nodes/${this.item.node}/lxc`,
152 this.parseVMsAndLXCs(lxcs, this.lxcs);
159 this.loading = false;
161 parseVMsAndLXCs(items, value) {
162 value.total += items.data.length;
163 value.running += items.data.filter((i) => i.status === "running").length;
164 // if no vms, hide this value:
165 if (value.total == 0) this.hide.push("lxcs");
167 isValueShown(value) {
168 return this.hide.indexOf(value) == -1;
174 <style scoped lang="scss">
187 .metrics .margined:not(:first-child) {