mirror of https://github.com/bastienwirtz/homer
Apply lint
Bastien Wirtz
parent
d32f7f6467
commit
24b6dedbe1
|
|
@ -13,12 +13,56 @@
|
||||||
<div v-else-if="error">
|
<div v-else-if="error">
|
||||||
<strong class="danger">Error loading info</strong>
|
<strong class="danger">Error loading info</strong>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="metrics" :class="{'is-size-7-mobile': item.small_font_on_small_screens, 'is-small': item.small_font_on_desktop}">
|
<div
|
||||||
<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>
|
v-else
|
||||||
<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>
|
class="metrics"
|
||||||
<span v-if="isValueShown('disk')" class="margined">Disk: <span class="has-text-weight-bold is-number" :class="statusClass(diskUsed)">{{ diskUsed }}%</span></span>
|
:class="{
|
||||||
<span v-if="isValueShown('mem')" class="margined">Mem: <span class="has-text-weight-bold is-number" :class="statusClass(memoryUsed)">{{ memoryUsed }}%</span></span>
|
'is-size-7-mobile': item.small_font_on_small_screens,
|
||||||
<span v-if="isValueShown('cpu')" class="margined">CPU: <span class="has-text-weight-bold is-number" :class="statusClass(cpuUsed)">{{ cpuUsed }}%</span></span>
|
'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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -28,13 +72,13 @@
|
||||||
<i v-if="error" class="fa fa-exclamation-circle fa-2xl danger"></i>
|
<i v-if="error" class="fa fa-exclamation-circle fa-2xl danger"></i>
|
||||||
</template>
|
</template>
|
||||||
</Generic>
|
</Generic>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import service from "@/mixins/service.js";
|
import service from "@/mixins/service.js";
|
||||||
import Generic from "./Generic.vue";
|
import Generic from "./Generic.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Proxmox",
|
name: "Proxmox",
|
||||||
mixins: [service],
|
mixins: [service],
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -46,18 +90,18 @@
|
||||||
data: () => ({
|
data: () => ({
|
||||||
vms: {
|
vms: {
|
||||||
total: 0,
|
total: 0,
|
||||||
running: 0
|
running: 0,
|
||||||
},
|
},
|
||||||
lxcs: {
|
lxcs: {
|
||||||
total: 0,
|
total: 0,
|
||||||
running: 0
|
running: 0,
|
||||||
},
|
},
|
||||||
memoryUsed: 0,
|
memoryUsed: 0,
|
||||||
diskUsed: 0,
|
diskUsed: 0,
|
||||||
cpuUsed: 0,
|
cpuUsed: 0,
|
||||||
hide: [],
|
hide: [],
|
||||||
error: false,
|
error: false,
|
||||||
loading: true
|
loading: true,
|
||||||
}),
|
}),
|
||||||
created() {
|
created() {
|
||||||
if (this.item.hide) this.hide = this.item.hide;
|
if (this.item.hide) this.hide = this.item.hide;
|
||||||
|
|
@ -65,35 +109,50 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
statusClass(value) {
|
statusClass(value) {
|
||||||
if (value > this.item.danger_value) return 'danger';
|
if (value > this.item.danger_value) return "danger";
|
||||||
if (value > this.item.warning_value) return 'warning';
|
if (value > this.item.warning_value) return "warning";
|
||||||
return 'healthy'
|
return "healthy";
|
||||||
},
|
},
|
||||||
fetchStatus: async function () {
|
fetchStatus: async function () {
|
||||||
try {
|
try {
|
||||||
const options = {
|
const options = {
|
||||||
headers: {
|
headers: {
|
||||||
"Authorization": this.item.api_token
|
Authorization: this.item.api_token,
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
const status = await this.fetch(`/api2/json/nodes/${this.item.node}/status`, options);
|
const status = await this.fetch(
|
||||||
|
`/api2/json/nodes/${this.item.node}/status`,
|
||||||
|
options
|
||||||
|
);
|
||||||
// main metrics:
|
// main metrics:
|
||||||
const decimalsToShow = this.item.hide_decimals ? 0 : 1;
|
const decimalsToShow = this.item.hide_decimals ? 0 : 1;
|
||||||
this.memoryUsed = ( (status.data.memory.used * 100) / status.data.memory.total ).toFixed(decimalsToShow);
|
this.memoryUsed = (
|
||||||
this.diskUsed = ( (status.data.rootfs.used * 100) / status.data.rootfs.total ).toFixed(decimalsToShow);
|
(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);
|
this.cpuUsed = (status.data.cpu * 100).toFixed(decimalsToShow);
|
||||||
// vms:
|
// vms:
|
||||||
if (this.isValueShown('vms')) {
|
if (this.isValueShown("vms")) {
|
||||||
const vms = await this.fetch(`/api2/json/nodes/${this.item.node}/qemu`, options);
|
const vms = await this.fetch(
|
||||||
|
`/api2/json/nodes/${this.item.node}/qemu`,
|
||||||
|
options
|
||||||
|
);
|
||||||
this.parseVMsAndLXCs(vms, this.vms);
|
this.parseVMsAndLXCs(vms, this.vms);
|
||||||
}
|
}
|
||||||
// lxc containers:
|
// lxc containers:
|
||||||
if (this.isValueShown('lxcs')) {
|
if (this.isValueShown("lxcs")) {
|
||||||
const lxcs = await this.fetch(`/api2/json/nodes/${this.item.node}/lxc`, options);
|
const lxcs = await this.fetch(
|
||||||
|
`/api2/json/nodes/${this.item.node}/lxc`,
|
||||||
|
options
|
||||||
|
);
|
||||||
this.parseVMsAndLXCs(lxcs, this.lxcs);
|
this.parseVMsAndLXCs(lxcs, this.lxcs);
|
||||||
}
|
}
|
||||||
this.error = false;
|
this.error = false;
|
||||||
} catch(err) {
|
} catch (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
this.error = true;
|
this.error = true;
|
||||||
}
|
}
|
||||||
|
|
@ -101,35 +160,34 @@
|
||||||
},
|
},
|
||||||
parseVMsAndLXCs(items, value) {
|
parseVMsAndLXCs(items, value) {
|
||||||
value.total += items.data.length;
|
value.total += items.data.length;
|
||||||
value.running += items.data.filter( i => i.status === 'running' ).length;
|
value.running += items.data.filter((i) => i.status === "running").length;
|
||||||
// if no vms, hide this value:
|
// if no vms, hide this value:
|
||||||
if (value.total == 0) this.hide.push('lxcs');
|
if (value.total == 0) this.hide.push("lxcs");
|
||||||
},
|
},
|
||||||
isValueShown(value) {
|
isValueShown(value) {
|
||||||
return this.hide.indexOf(value) == -1;
|
return this.hide.indexOf(value) == -1;
|
||||||
}
|
|
||||||
},
|
},
|
||||||
};
|
},
|
||||||
</script>
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.is-number {
|
.is-number {
|
||||||
font-family: "Lato"
|
font-family: "Lato";
|
||||||
}
|
}
|
||||||
.healthy {
|
.healthy {
|
||||||
color: green
|
color: green;
|
||||||
}
|
}
|
||||||
.warning {
|
.warning {
|
||||||
color: orange
|
color: orange;
|
||||||
}
|
}
|
||||||
.danger {
|
.danger {
|
||||||
color: red
|
color: red;
|
||||||
}
|
}
|
||||||
.metrics .margined:not(:first-child) {
|
.metrics .margined:not(:first-child) {
|
||||||
margin-left: 0.3rem;
|
margin-left: 0.3rem;
|
||||||
}
|
}
|
||||||
.is-small {
|
.is-small {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue