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>