path: root/src/components/services/Proxmox.vue

<template>
    <Generic :item="item">
      <template #content>
        <p class="title is-4">{{ item.name }}</p>
        <p class="subtitle is-6">
          <template v-if="item.subtitle">
            {{ item.subtitle }}
          </template>
          <template v-else-if="vms">
            <div v-if="loading">
              <strong>Loading...</strong>
            </div>
            <div v-else-if="error">
              <strong class="danger">Error loading info</strong>
            </div>
            <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>
      </template>
      <template #indicator>
        <i v-if="loading" class="fa fa-circle-notch fa-spin fa-2xl"></i>
        <i v-if="error" class="fa fa-exclamation-circle fa-2xl danger"></i>
      </template>
    </Generic>
  </template>
  
  <script>
  import service from "@/mixins/service.js";
  import Generic from "./Generic.vue";
  
  export default {
    name: "Proxmox",
    mixins: [service],
    props: {
      item: Object,
    },
    components: {
      Generic,
    },
    data: () => ({
      vms: {
        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: {
      statusClass(value) {
        if (value > this.item.danger_value) return 'danger';
        if (value > this.item.warning_value) return 'warning';
        return 'healthy'
      },
      fetchStatus: async function () {
        try {
          const options = {
            headers: {
              "Authorization": this.item.api_token
            }
          }
          const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options);
          // main metrics:
          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:
          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);
          this.error = true;
        }
        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>
  
  <style scoped lang="scss">
  .is-number {
    font-family: "Lato"
  }
  .healthy {
    color: green
  }
  .warning {
    color: orange
  }
  .danger {
    color: red
  }
  .metrics .margined:not(:first-child) {
    margin-left: 0.3rem;
  }
  .is-small {
    font-size: small;
  }
  </style>