aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2022-11-05 15:21:18 +0100
committerBastien Wirtz <bastien.wirtz@gmail.com>2022-11-05 15:21:18 +0100
commitd32f7f6467c1456b32ea4675d17bfba1c428c2b7 (patch)
tree3d5433ce83587d8bd091087c40cdcc74ae89da21 /src/components
parentf72c0bc7811dc19499418371e08930747fe087dc (diff)
downloadhomer-d32f7f6467c1456b32ea4675d17bfba1c428c2b7.tar.gz
homer-d32f7f6467c1456b32ea4675d17bfba1c428c2b7.tar.zst
homer-d32f7f6467c1456b32ea4675d17bfba1c428c2b7.zip
Proxmox improvements
Diffstat (limited to 'src/components')
-rw-r--r--src/components/services/Proxmox.vue53
1 files changed, 39 insertions, 14 deletions
diff --git a/src/components/services/Proxmox.vue b/src/components/services/Proxmox.vue
index 1d2c2c9..2b533db 100644
--- a/src/components/services/Proxmox.vue
+++ b/src/components/services/Proxmox.vue
@@ -13,11 +13,12 @@
13 <div v-else-if="error"> 13 <div v-else-if="error">
14 <strong class="danger">Error loading info</strong> 14 <strong class="danger">Error loading info</strong>
15 </div> 15 </div>
16 <div v-else class="metrics"> 16 <div v-else class="metrics" :class="{'is-size-7-mobile': item.small_font_on_small_screens, 'is-small': item.small_font_on_desktop}">
17 <span>VMs: <span class="is-number"><strong>{{ vms.running }}</strong>/{{vms.total}}</span></span> 17 <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>
18 <span>Disk: <strong class="is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</strong></span> 18 <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>
19 <span>Mem: <strong class="is-number" :class="statusClass(memoryUsed)">{{ memoryUsed }}%</strong></span> 19 <span v-if="isValueShown('disk')" class="margined">Disk: <span class="has-text-weight-bold is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</span></span>
20 <span>CPU: <strong class="is-number" :class="statusClass(cpuUsed)">{{ cpuUsed }}%</strong></span> 20 <span v-if="isValueShown('mem')" class="margined">Mem: <span class="has-text-weight-bold is-number" :class="statusClass(memoryUsed)">{{ memoryUsed }}%</span></span>
21 <span v-if="isValueShown('cpu')" class="margined">CPU: <span class="has-text-weight-bold is-number" :class="statusClass(cpuUsed)">{{ cpuUsed }}%</span></span>
21 </div> 22 </div>
22 </template> 23 </template>
23 </p> 24 </p>
@@ -47,13 +48,19 @@
47 total: 0, 48 total: 0,
48 running: 0 49 running: 0
49 }, 50 },
51 lxcs: {
52 total: 0,
53 running: 0
54 },
50 memoryUsed: 0, 55 memoryUsed: 0,
51 diskUsed: 0, 56 diskUsed: 0,
52 cpuUsed: 0, 57 cpuUsed: 0,
58 hide: [],
53 error: false, 59 error: false,
54 loading: true 60 loading: true
55 }), 61 }),
56 created() { 62 created() {
63 if (this.item.hide) this.hide = this.item.hide;
57 this.fetchStatus(); 64 this.fetchStatus();
58 }, 65 },
59 methods: { 66 methods: {
@@ -71,13 +78,20 @@
71 } 78 }
72 const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options); 79 const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options);
73 // main metrics: 80 // main metrics:
74 this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(1); 81 const decimalsToShow = this.item.hide_decimals ? 0 : 1;
75 this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(1); 82 this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(decimalsToShow);
76 this.cpuUsed = (status.data.cpu * 100).toFixed(1); 83 this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(decimalsToShow);
84 this.cpuUsed = (status.data.cpu * 100).toFixed(decimalsToShow);
77 // vms: 85 // vms:
78 const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options); 86 if (this.isValueShown('vms')) {
79 this.vms.total += vms.data.length; 87 const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options);
80 this.vms.running += vms.data.filter( i => i.status === 'running' ).length; 88 this.parseVMsAndLXCs(vms, this.vms);
89 }
90 // lxc containers:
91 if (this.isValueShown('lxcs')) {
92 const lxcs = await this.fetch(`/api2/json/nodes/${this.item.node}/lxc`, options);
93 this.parseVMsAndLXCs(lxcs, this.lxcs);
94 }
81 this.error = false; 95 this.error = false;
82 } catch(err) { 96 } catch(err) {
83 console.log(err); 97 console.log(err);
@@ -85,6 +99,15 @@
85 } 99 }
86 this.loading = false; 100 this.loading = false;
87 }, 101 },
102 parseVMsAndLXCs(items, value) {
103 value.total += items.data.length;
104 value.running += items.data.filter( i => i.status === 'running' ).length;
105 // if no vms, hide this value:
106 if (value.total == 0) this.hide.push('lxcs');
107 },
108 isValueShown(value) {
109 return this.hide.indexOf(value) == -1;
110 }
88 }, 111 },
89 }; 112 };
90 </script> 113 </script>
@@ -102,9 +125,11 @@
102 .danger { 125 .danger {
103 color: red 126 color: red
104 } 127 }
105 .metrics { 128 .metrics .margined:not(:first-child) {
106 display: flex; 129 margin-left: 0.3rem;
107 justify-content: space-between; 130 }
131 .is-small {
132 font-size: small;
108 } 133 }
109 </style> 134 </style>
110 \ No newline at end of file 135 \ No newline at end of file