- <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,
+ <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,