mirror of https://github.com/nicolargo/glances.git
124 lines
4.2 KiB
Vue
124 lines
4.2 KiB
Vue
<template>
|
|
<section v-if="hasDisks" id="diskio" class="plugin">
|
|
<table class="table table-sm table-borderless margin-bottom">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">DISK I/O</th>
|
|
<th v-show="!args.diskio_iops && !args.diskio_latency" scope="col" class="text-end w-25">Rps</th>
|
|
<th v-show="!args.diskio_iops && !args.diskio_latency" scope="col" class="text-end w-25">Wps</th>
|
|
<th v-show="args.diskio_latency" scope="col" class="text-end w-25">ms/opR</th>
|
|
<th v-show="args.diskio_latency" scope="col" class="text-end w-25">ms/opW</th>
|
|
<th v-show="args.diskio_iops" scope="col" class="text-end w-25">IORps</th>
|
|
<th v-show="args.diskio_iops" scope="col" class="text-end w-25">IOWps</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(disk, diskId) in disks" :key="diskId">
|
|
<td scope="row" class="text-truncate">
|
|
{{ $filters.minSize(disk.alias ? disk.alias : disk.name, 16) }}
|
|
</td>
|
|
<td v-show="!args.diskio_iops && !args.diskio_latency" class="text-end w-25"
|
|
:class="getDecoration(disk.name, 'write_bytes_rate_per_sec')">
|
|
{{ disk.bitrate.txps }}
|
|
</td>
|
|
<td v-show="!args.diskio_iops && !args.diskio_latency" class="text-end w-25"
|
|
:class="getDecoration(disk.name, 'read_bytes_rate_per_sec')">
|
|
{{ disk.bitrate.rxps }}
|
|
</td>
|
|
<td v-show="args.diskio_latency" class="text-end w-25"
|
|
:class="getDecoration(disk.name, 'write_latency')">
|
|
{{ disk.latency.txps }}
|
|
</td>
|
|
<td v-show="args.diskio_latency" class="text-end w-25"
|
|
:class="getDecoration(disk.name, 'read_latency')">
|
|
{{ disk.latency.rxps }}
|
|
</td>
|
|
<td v-show="args.diskio_iops" class="text-end w-25">
|
|
{{ disk.count.txps }}
|
|
</td>
|
|
<td v-show="args.diskio_iops" class="text-end w-25">
|
|
{{ disk.count.rxps }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { orderBy } from "lodash";
|
|
import { bytes } from "../filters.js";
|
|
import { store } from "../store.js";
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
store,
|
|
};
|
|
},
|
|
computed: {
|
|
args() {
|
|
return this.store.args || {};
|
|
},
|
|
stats() {
|
|
return this.data.stats["diskio"];
|
|
},
|
|
view() {
|
|
return this.data.views["diskio"];
|
|
},
|
|
disks() {
|
|
const disks = this.stats
|
|
.map((diskioData) => {
|
|
return {
|
|
name: diskioData["disk_name"],
|
|
alias:
|
|
diskioData["alias"] !== undefined ? diskioData["alias"] : null,
|
|
bitrate: {
|
|
txps: bytes(diskioData["read_bytes_rate_per_sec"]),
|
|
rxps: bytes(diskioData["write_bytes_rate_per_sec"]),
|
|
},
|
|
count: {
|
|
txps: bytes(diskioData["read_count_rate_per_sec"]),
|
|
rxps: bytes(diskioData["write_count_rate_per_sec"]),
|
|
},
|
|
latency: {
|
|
txps: bytes(diskioData["read_latency"]),
|
|
rxps: bytes(diskioData["write_latency"]),
|
|
},
|
|
};
|
|
})
|
|
.filter((disk) => {
|
|
const readBytesRate = this.view[disk.name]["read_bytes_rate_per_sec"];
|
|
const writeBytesRate =
|
|
this.view[disk.name]["write_bytes_rate_per_sec"];
|
|
return (
|
|
(!readBytesRate || readBytesRate.hidden === false) &&
|
|
(!writeBytesRate || writeBytesRate.hidden === false)
|
|
);
|
|
});
|
|
return orderBy(disks, ["name"]);
|
|
},
|
|
hasDisks() {
|
|
return this.disks.length > 0;
|
|
},
|
|
},
|
|
methods: {
|
|
getDecoration(diskName, field) {
|
|
if (this.view[diskName][field] == undefined) {
|
|
if (this.view[field] == undefined) {
|
|
return;
|
|
} else {
|
|
return this.view[field].decoration.toLowerCase();
|
|
}
|
|
}
|
|
return this.view[diskName][field].decoration.toLowerCase();
|
|
},
|
|
},
|
|
};
|
|
</script>
|