2 files changed, 44 insertions, 14 deletions

diff --git a/docs/customservices.md b/docs/customservices.md
index 65f3d4c..2e74443 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -298,6 +298,11 @@ Configuration example:
   warning_value: 50
   danger_value: 80
   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
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 @@
             <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>
-              <span>Disk: <strong class="is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</strong></span>
-              <span>Mem: <strong class="is-number" :class="statusClass(memoryUsed)">{{ memoryUsed }}%</strong></span>
-              <span>CPU: <strong class="is-number" :class="statusClass(cpuUsed)">{{ cpuUsed }}%</strong></span>
+            <div v-else class="metrics" :class="{'is-size-7-mobile': item.small_font_on_small_screens, 'is-small': item.small_font_on_desktop}">
+              <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 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 v-if="isValueShown('disk')" class="margined">Disk: <span class="has-text-weight-bold is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</span></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>
           </template>
         </p>
@@ -47,13 +48,19 @@
         total: 0,
         running: 0
       },
+      lxcs: {
+        total: 0,
+        running: 0
+      },
       memoryUsed: 0,
       diskUsed: 0,
       cpuUsed: 0,
+      hide: [],
       error: false,
       loading: true
     }),
     created() {
+      if (this.item.hide) this.hide = this.item.hide;
       this.fetchStatus();
     },
     methods: {
@@ -71,13 +78,20 @@
           }
           const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options);
           // main metrics:
-          this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(1);
-          this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(1);
-          this.cpuUsed = (status.data.cpu * 100).toFixed(1);
+          const decimalsToShow = this.item.hide_decimals ? 0 : 1;
+          this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(decimalsToShow);
+          this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(decimalsToShow);
+          this.cpuUsed = (status.data.cpu * 100).toFixed(decimalsToShow);
           // vms:
-          const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options);
-          this.vms.total += vms.data.length;
-          this.vms.running += vms.data.filter( i => i.status === 'running' ).length;
+          if (this.isValueShown('vms')) {
+            const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options);
+            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;
         } catch(err) {
           console.log(err);
@@ -85,6 +99,15 @@
         }
         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>
@@ -102,9 +125,11 @@
   .danger {
     color: red
   }
-  .metrics {
-    display: flex;
-    justify-content: space-between;
+  .metrics .margined:not(:first-child) {
+    margin-left: 0.3rem;
+  }
+  .is-small {
+    font-size: small;
   }
   </style>
   
\ No newline at end of file