mirror of https://github.com/nicolargo/glances.git
Top bar is ok
This commit is contained in:
nicolargo
parent
61480109d6
commit
7fee42f940
|
|
@ -76,9 +76,35 @@
|
|||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#ip {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#ip span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#quicklook {
|
||||
.progress {
|
||||
margin-bottom: 0px;
|
||||
min-width: 100px;
|
||||
background-color: #000;
|
||||
height: 12px;
|
||||
border-radius: 0px;
|
||||
text-align: right;
|
||||
}
|
||||
.progress-bar-ok {
|
||||
background-color: #3E7B04;
|
||||
}
|
||||
.progress-bar-careful {
|
||||
background-color: #295183;
|
||||
}
|
||||
.progress-bar-warning {
|
||||
background-color: #5D4062;
|
||||
}
|
||||
.progress-bar-critical {
|
||||
background-color: #A30000;
|
||||
}
|
||||
.cpu-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,45 +5,58 @@
|
|||
<glances-help v-else-if="args.help_tag"></glances-help>
|
||||
<main v-else>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-auto" v-if="!args.disable_system">
|
||||
<glances-plugin-system :data="data"></glances-plugin-system>
|
||||
</div>
|
||||
<div class="col" v-if="!args.disable_ip">
|
||||
<glances-plugin-ip :data="data"></glances-plugin-ip>
|
||||
</div>
|
||||
<div class="col-auto ml-auto">
|
||||
<div class="col-auto ml-auto" v-if="!args.disable_uptime">
|
||||
<glances-plugin-uptime :data="data"></glances-plugin-uptime>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col" v-if="!args.disable_cloud">
|
||||
<glances-plugin-cloud :data="data"></glances-plugin-cloud>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row separator" v-if="args.enable_separator"></div>
|
||||
<div class="row">
|
||||
<!-- <div class="col-3 d-none d-lg-block d-xl-block d-xxl-block" v-if="!args.disable_quicklook">
|
||||
<div class="row justify-content-between">
|
||||
<!-- Quicklook -->
|
||||
<div class="col-3 d-none d-lg-block d-xl-block d-xxl-block"
|
||||
v-if="!args.disable_quicklook">
|
||||
<glances-plugin-quicklook :data="data"></glances-plugin-quicklook>
|
||||
</div> -->
|
||||
<div class="col" v-if="!args.disable_cpu && !args.percpu">
|
||||
</div>
|
||||
<!-- CPU -->
|
||||
<div class="col"
|
||||
v-if="!args.disable_cpu && !args.percpu">
|
||||
<glances-plugin-cpu :data="data"></glances-plugin-cpu>
|
||||
</div>
|
||||
<!-- <div class="col-auto" v-if="!args.disable_cpu && args.percpu">
|
||||
<div class="col"
|
||||
v-if="!args.disable_cpu && args.percpu">
|
||||
<glances-plugin-percpu :data="data"></glances-plugin-percpu>
|
||||
</div> -->
|
||||
<!-- <div class="col-auto" v-if="!args.disable_gpu && hasGpu">
|
||||
</div>
|
||||
<!-- GPU -->
|
||||
<div class="col"
|
||||
v-if="!args.disable_gpu && hasGpu">
|
||||
<glances-plugin-gpu :data="data"></glances-plugin-gpu>
|
||||
</div> -->
|
||||
<div class="col" v-if="!args.disable_mem">
|
||||
</div>
|
||||
<!-- MEM -->
|
||||
<div class="col"
|
||||
v-if="!args.disable_mem">
|
||||
<glances-plugin-mem :data="data"></glances-plugin-mem>
|
||||
</div>
|
||||
<!-- <div class="col-auto" v-if="!args.disable_memswap">
|
||||
<!-- SWAP -->
|
||||
<div class="col-auto d-none d-md-block d-lg-block d-xl-block d-xxl-block"
|
||||
v-if="!args.disable_memswap">
|
||||
<glances-plugin-memswap :data="data"></glances-plugin-memswap>
|
||||
</div> -->
|
||||
<div class="col-auto ml-auto" v-if="!args.disable_load">
|
||||
</div>
|
||||
<!-- LOAD -->
|
||||
<div class="col-auto"
|
||||
v-if="!args.disable_load">
|
||||
<glances-plugin-load :data="data"></glances-plugin-load>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,85 @@
|
|||
<template>
|
||||
<section id="cpu" class="plugin">
|
||||
<!-- d-none d-xl-block d-xxl-block -->
|
||||
<!-- d-none d-xxl-block -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">CPU</th>
|
||||
<td scope="col" class="text-end" :class="getDecoration('total')">{{ total }}%</td>
|
||||
<td scope="col" v-show="idle != undefined">idle:</td>
|
||||
<td scope="col" class="text-end" v-show="idle != undefined">{{ idle }}%</td>
|
||||
<td scope="col" v-if="nice != undefined && ctx_switches != undefined">ctx_sw:</td>
|
||||
<td scope="col"
|
||||
class="text-end"
|
||||
v-if="nice != undefined && ctx_switches != undefined"
|
||||
:class="getDecoration('ctx_switches')">{{ ctx_switches }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<table class="table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="col">user:</td>
|
||||
<td scope="col" class="text-end" :class="getDecoration('user')">{{ user }}%</td>
|
||||
<td scope="col" v-show="irq != undefined">irq:</td>
|
||||
<td scope="col" class="text-end" v-show="irq != undefined">{{ irq }}%</td>
|
||||
<td scope="col" v-show="interrupts != undefined">interXXX:</td>
|
||||
<td scope="col" class="text-end" v-show="interrupts != undefined">{{ interrupts }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col">system:</td>
|
||||
<td scope="col" class="text-end" :class="getDecoration('system')">{{ system }}%</td>
|
||||
<td scope="col" v-show="nice != undefined">nice:</td>
|
||||
<td scope="col" class="text-end" v-show="nice != undefined">{{ nice }}%</td>
|
||||
<td scope="col" v-if="!isWindows && !isSunOS && soft_interrupts != undefined">sw_int:</td>
|
||||
<td scope="col" class="text-end" v-if="!isWindows && !isSunOS && soft_interrupts != undefined">{{ soft_interrupts }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-if="iowait != undefined">iowait:</td>
|
||||
<td scope="col" class="text-end" v-if="iowait != undefined" :class="getDecoration('iowait')">{{ iowait }}%</td>
|
||||
<td scope="col" v-if="iowait == undefined && dpc != undefined">dpc:</td>
|
||||
<td scope="col" class="text-end" v-if="iowait == undefined && dpc != undefined" :class="getDecoration('dpc')">{{ dpc }}%</td>
|
||||
<td scope="col" v-show="steal != undefined">steal:</td>
|
||||
<td scope="col" class="text-end" v-show="steal != undefined" :class="getDecoration('steal')">{{ steal }}%</td>
|
||||
<td scope="col" v-if="isLinux && guest != undefined">guest:</td>
|
||||
<td scope="col" class="text-end" v-if="isLinux && guest != undefined">{{ guest }}%</td>
|
||||
<td scope="col">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="col">CPU</th>
|
||||
<td scope="col" class="text-end" :class="getDecoration('total')">{{ total }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col">user:</td>
|
||||
<td scope="col" class="text-end" :class="getDecoration('user')">{{ user }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col">system:</td>
|
||||
<td scope="col" class="text-end" :class="getDecoration('system')">{{ system }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-if="iowait != undefined">iowait:</td>
|
||||
<td scope="col" class="text-end" v-if="iowait != undefined" :class="getDecoration('iowait')">{{ iowait }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<template class="d-none d-xl-block d-xxl-block">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="col" v-show="idle != undefined">idle:</td>
|
||||
<td scope="col" class="text-end" v-show="idle != undefined">{{ idle }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-show="irq != undefined">irq:</td>
|
||||
<td scope="col" class="text-end" v-show="irq != undefined">{{ irq }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-show="nice != undefined">nice:</td>
|
||||
<td scope="col" class="text-end" v-show="nice != undefined">{{ nice }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-if="iowait == undefined && dpc != undefined">dpc:</td>
|
||||
<td scope="col" class="text-end" v-if="iowait == undefined && dpc != undefined" :class="getDecoration('dpc')">{{ dpc }}%</td>
|
||||
<td scope="col" v-show="steal != undefined">steal:</td>
|
||||
<td scope="col" class="text-end" v-show="steal != undefined" :class="getDecoration('steal')">{{ steal }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template class="d-none d-xxl-block">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="col" v-if="nice != undefined && ctx_switches != undefined">ctx_sw:</td>
|
||||
<td scope="col"
|
||||
class="text-end"
|
||||
v-if="nice != undefined && ctx_switches != undefined"
|
||||
:class="getDecoration('ctx_switches')">{{ ctx_switches }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-show="interrupts != undefined">inter:</td>
|
||||
<td scope="col" class="text-end" v-show="interrupts != undefined">{{ interrupts }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-if="!isWindows && !isSunOS && soft_interrupts != undefined">sw_int:</td>
|
||||
<td scope="col" class="text-end" v-if="!isWindows && !isSunOS && soft_interrupts != undefined">{{ soft_interrupts }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-if="isLinux && guest != undefined">guest:</td>
|
||||
<td scope="col" class="text-end" v-if="isLinux && guest != undefined">{{ guest }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,73 +1,77 @@
|
|||
<template>
|
||||
<section class="plugin" id="gpu" v-if="gpus != undefined">
|
||||
<section id="gpu" class="plugin" v-if="gpus != undefined">
|
||||
<div class="title gpu-name">{{ name }}</div>
|
||||
<!-- single gpu -->
|
||||
<template v-if="gpus.length === 1">
|
||||
<div class="title gpu-name">{{ name }}</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<template v-for="(gpu, gpuId) in gpus" :key="gpuId">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">proc:</div>
|
||||
<div class="table-cell" :class="getDecoration(gpu.gpu_id, 'proc')" v-if="gpu.proc != null">{{ $filters.number(gpu.proc, 0) }}%</div>
|
||||
<div class="table-cell" v-if="gpu.proc == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">mem:</div>
|
||||
<div class="table-cell" :class="getDecoration(gpu.gpu_id, 'mem')" v-if="gpu.mem != null">{{ $filters.number(gpu.mem, 0) }}%</div>
|
||||
<div class="table-cell" v-if="gpu.mem == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">temp:</div>
|
||||
<div class="table-cell" :class="getDecoration(gpu.gpu_id, 'temperature')" v-if="gpu.temperature != null">{{ $filters.number(gpu.temperature, 0) }}°C</div>
|
||||
<div class="table-cell" v-if="gpu.temperature == null">N/A</div>
|
||||
</div>
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col">proc:</td>
|
||||
<td class="col text-end" :class="getDecoration(gpu.gpu_id, 'proc')" v-if="gpu.proc != null">{{ $filters.number(gpu.proc, 0) }}%</td>
|
||||
<td class="col text-end" v-if="gpu.proc == null">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col">mem:</td>
|
||||
<td class="col text-end" :class="getDecoration(gpu.gpu_id, 'mem')" v-if="gpu.mem != null">{{ $filters.number(gpu.mem, 0) }}%</td>
|
||||
<td class="col text-end" v-if="gpu.mem == null">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col">temp:</td>
|
||||
<td class="col text-end" :class="getDecoration(gpu.gpu_id, 'temperature')" v-if="gpu.temperature != null">{{ $filters.number(gpu.temperature, 0) }}</td>
|
||||
<td class="col text-end" v-if="gpu.temperature == null">N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- multiple gpus - one line per gpu (no mean) -->
|
||||
<template v-if="!args.meangpu && gpus.length > 1">
|
||||
<div class="title gpu-name">{{ name }}</div>
|
||||
<div class="table">
|
||||
<div class="table-row" v-for="(gpu, gpuId) in gpus" :key="gpuId">
|
||||
<div class="table-cell text-left">{{ gpu.gpu_id }}:</div>
|
||||
<div class="table-cell" :class="getDecoration(gpu.gpu_id, 'proc')" v-if="gpu.proc != null">{{ $filters.number(gpu.proc, 0) }}%</div>
|
||||
<div class="table-cell" v-if="gpu.proc == null">N/A</div>
|
||||
<div class="table-cell text-left" style="padding-left: 10px">mem:</div>
|
||||
<div class="table-cell" :class="getDecoration(gpu.gpu_id, 'mem')" v-if="gpu.mem != null">{{ $filters.number(gpu.mem, 0) }}%</div>
|
||||
<div class="table-cell" v-if="gpu.mem == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr v-for="(gpu, gpuId) in gpus" :key="gpuId">
|
||||
<td class="col">{{ gpu.gpu_id }}:</td>
|
||||
<td class="col" :class="getDecoration(gpu.gpu_id, 'proc')" v-if="gpu.proc != null">{{ $filters.number(gpu.proc, 0) }}%</td>
|
||||
<td class="col" v-if="gpu.proc == null">N/A</td>
|
||||
<td class="col">mem:</td>
|
||||
<td class="col text-end" :class="getDecoration(gpu.gpu_id, 'mem')" v-if="gpu.mem != null">{{ $filters.number(gpu.mem, 0) }}%</td>
|
||||
<td class="col text-end" v-if="gpu.mem == null">N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- multiple gpus - mean -->
|
||||
<template v-if="args.meangpu && gpus.length > 1">
|
||||
<div class="title gpu-name">{{ name }}</div>
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">proc mean:</div>
|
||||
<div class="table-cell" :class="getMeanDecoration('proc')" v-if="mean.proc != null">
|
||||
{{ $filters.number(mean.proc, 0) }}%
|
||||
</div>
|
||||
<div class="table-cell" v-if="mean.proc == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">mem mean:</div>
|
||||
<div class="table-cell" :class="getMeanDecoration('mem')" v-if="mean.mem != null">
|
||||
{{ $filters.number(mean.mem, 0) }}%
|
||||
</div>
|
||||
<div class="table-cell" v-if="mean.mem == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">temp mean:</div>
|
||||
<div
|
||||
class="table-cell"
|
||||
:class="getMeanDecoration('temperature')"
|
||||
v-if="mean.temperature != null"
|
||||
>
|
||||
{{ $filters.number(mean.temperature, 0) }}°
|
||||
</div>
|
||||
<div class="table-cell" v-if="mean.temperature == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="col">proc mean:</td>
|
||||
<td class="col" :class="getMeanDecoration('proc')" v-if="mean.proc != null">
|
||||
{{ $filters.number(mean.proc, 0) }}%
|
||||
</td>
|
||||
<td class="col" v-if="mean.proc == null">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col">mem mean:</td>
|
||||
<td class="col" :class="getMeanDecoration('mem')" v-if="mean.mem != null">
|
||||
{{ $filters.number(mean.mem, 0) }}%
|
||||
</td>
|
||||
<td class="col" v-if="mean.mem == null">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col">temp mean:</td>
|
||||
<td class="col" :class="getMeanDecoration('temperature')" v-if="mean.temperature != null">
|
||||
{{ $filters.number(mean.temperature, 0) }}
|
||||
</td>
|
||||
<td class="col" v-if="mean.temperature == null">N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,48 +2,70 @@
|
|||
<section id="mem" class="plugin">
|
||||
<!-- d-none d-xxl-block -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">MEM</th>
|
||||
<td scope="col" class="text-end" :class="getDecoration('percent')">{{ percent }}%</td>
|
||||
<td scope="col" v-show="active != undefined">
|
||||
active:
|
||||
</td>
|
||||
<td scope="col" v-show="active != undefined">
|
||||
{{ $filters.bytes(active) }}
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<table class="table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="row">total:</td>
|
||||
<td class="text-end">{{ $filters.bytes(total) }}</td>
|
||||
<td scope="col" v-show="inactive != undefined">
|
||||
inactive:
|
||||
<tr class="justify-content-between">
|
||||
<td scope="col">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="col">MEM</th>
|
||||
<td scope="col" class="text-end" :class="getDecoration('percent')">{{ percent }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row">total:</td>
|
||||
<td class="text-end">{{ $filters.bytes(total) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row">used:</td>
|
||||
<td class="text-end" :class="getDecoration('used')">{{ $filters.bytes(used, 2) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row">free:</td>
|
||||
<td class="text-end" :class="getDecoration('free')">{{ $filters.bytes(free, 2) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td scope="col" v-show="inactive != undefined">
|
||||
{{ $filters.bytes(inactive) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row">used:</td>
|
||||
<td class="text-end" :class="getDecoration('used')">{{ $filters.bytes(used, 2) }}</td>
|
||||
<td scope="col" v-show="buffers != undefined">
|
||||
buffers:
|
||||
</td>
|
||||
<td scope="col" v-show="buffers != undefined">
|
||||
{{ $filters.bytes(buffers) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row">free:</td>
|
||||
<td class="text-end" :class="getDecoration('free')">{{ $filters.bytes(free, 2) }}</td>
|
||||
<td scope="col" v-show="cached != undefined">
|
||||
cached:
|
||||
</td>
|
||||
<td scope="col" v-show="cached != undefined">
|
||||
{{ $filters.bytes(cached) }}
|
||||
<td>
|
||||
<template class="d-none d-xl-block d-xxl-block">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="col" v-show="active != undefined">
|
||||
active:
|
||||
</td>
|
||||
<td scope="col" v-show="active != undefined">
|
||||
{{ $filters.bytes(active) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-show="inactive != undefined">
|
||||
inactive:
|
||||
</td>
|
||||
<td scope="col" v-show="inactive != undefined">
|
||||
{{ $filters.bytes(inactive) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-show="buffers != undefined">
|
||||
buffers:
|
||||
</td>
|
||||
<td scope="col" v-show="buffers != undefined">
|
||||
{{ $filters.bytes(buffers) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="col" v-show="cached != undefined">
|
||||
cached:
|
||||
</td>
|
||||
<td scope="col" v-show="cached != undefined">
|
||||
{{ $filters.bytes(cached) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
<template>
|
||||
<section id="memswap" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">SWAP</div>
|
||||
<div class="table-cell" :class="getDecoration('percent')">{{ percent }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">total:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(total) }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">used:</div>
|
||||
<div class="table-cell" :class="getDecoration('used')">
|
||||
{{ $filters.bytes(used) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">free:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(free) }}</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">SWAP</th>
|
||||
<td scope="col" class="text-end" :class="getDecoration('percent')">{{ percent }}%</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="row">total:</td>
|
||||
<td class="text-end">{{ $filters.bytes(total) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row">used:</td>
|
||||
<td class="text-end" :class="getDecoration('used')">{{ $filters.bytes(used, 2) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row">free:</td>
|
||||
<td class="text-end">{{ $filters.bytes(free, 2) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,31 @@
|
|||
<template>
|
||||
<section id="percpu" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title" v-if="args.disable_quicklook">CPU</div>
|
||||
<div class="table-cell" v-if="args.disable_quicklook">total</div>
|
||||
<div class="table-cell">user</div>
|
||||
<div class="table-cell">system</div>
|
||||
<div class="table-cell">idle</div>
|
||||
<div class="table-cell">iowait</div>
|
||||
<div class="table-cell">steal</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="(percpu, percpuId) in percpuStats" :key="percpuId">
|
||||
<div class="table-cell text-left" v-if="args.disable_quicklook">
|
||||
CPU{{ percpu.cpu_number }}
|
||||
</div>
|
||||
<div class="table-cell" v-if="args.disable_quicklook">
|
||||
{{ percpu.total }}%
|
||||
</div>
|
||||
<div class="table-cell" :class="getUserAlert(percpu)">
|
||||
{{ percpu.user }}%
|
||||
</div>
|
||||
<div class="table-cell" :class="getSystemAlert(percpu)">
|
||||
{{ percpu.system }}%
|
||||
</div>
|
||||
<div class="table-cell" v-show="percpu.idle != undefined">
|
||||
{{ percpu.idle }}%
|
||||
</div>
|
||||
<div class="table-cell" v-show="percpu.iowait != undefined" :class="getIOWaitAlert(percpu)">
|
||||
{{ percpu.iowait }}%
|
||||
</div>
|
||||
<div class="table-cell" v-show="percpu.steal != undefined">
|
||||
{{ percpu.steal }}%
|
||||
</div>
|
||||
</div>
|
||||
<!-- d-none d-xl-block d-xxl-block -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" v-if="args.disable_quicklook">CPU</th>
|
||||
<td scope="col" v-if="args.disable_quicklook">total</td>
|
||||
<td scope="col">user</td>
|
||||
<td scope="col">system</td>
|
||||
<td scope="col">idle</td>
|
||||
<td scope="col">iowait</td>
|
||||
<td scope="col">steel</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(percpu, percpuId) in percpuStats" :key="percpuId">
|
||||
<td scope="col" v-if="args.disable_quicklook">CPU{{ percpu.cpu_number }}</td>
|
||||
<td scope="col" v-if="args.disable_quicklook">{{ percpu.total }}%</td>
|
||||
<td scope="col" :class="getUserAlert(percpu)">{{ percpu.user }}%</td>
|
||||
<td scope="col" :class="getSystemAlert(percpu)">{{ percpu.system }}%</td>
|
||||
<td scope="col" v-show="percpu.idle != undefined">{{ percpu.idle }}%</td>
|
||||
<td scope="col" v-show="percpu.iowait != undefined" :class="getIOWaitAlert(percpu)">{{ percpu.iowait }}%</td>
|
||||
<td scope="col" v-show="percpu.steel != undefined">{{ percpu.steel }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<div class="cpu-name text-left">
|
||||
{{ cpu_name }}
|
||||
</div>
|
||||
<!-- <div class="cpu-freq text-right" v-if="cpu_hz_current">
|
||||
{{ cpu_hz_current }}/{{ cpu_hz }}Ghz
|
||||
</div> -->
|
||||
<div class="table">
|
||||
<div class="table-row" v-if="!args.percpu">
|
||||
<div class="table-cell text-left">CPU</div>
|
||||
<div class="table-cell">
|
||||
<div class="progress">
|
||||
<div class="cpu-freq text-left" v-if="cpu_hz_current">
|
||||
Frequency: {{ cpu_hz_current }}/{{ cpu_hz }}Ghz
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-borderless">
|
||||
<tr v-if="!args.percpu">
|
||||
<td scope="col">CPU</td>
|
||||
<td scope="col" class="progress">
|
||||
<div
|
||||
:class="`progress-bar progress-bar-${getDecoration('cpu')}`"
|
||||
role="progressbar"
|
||||
|
|
@ -21,34 +21,28 @@
|
|||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell">{{ cpu }}%</div>
|
||||
</div>
|
||||
<template v-if="args.percpu">
|
||||
<div class="table-row" v-for="(percpu, percpuId) in percpus" :key="percpuId">
|
||||
<div class="table-cell text-left">CPU{{ percpu.number }}</div>
|
||||
<div class="table-cell">
|
||||
<div class="progress">
|
||||
<div
|
||||
:class="`progress-bar progress-bar-${getDecoration('cpu')}`"
|
||||
role="progressbar"
|
||||
:aria-valuenow="percpu.total"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:style="`width: ${percpu.total}%;`"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td scope="col" class="text-end">{{ cpu }}%</td>
|
||||
</tr>
|
||||
<tr v-if="args.percpu" v-for="(percpu, percpuId) in percpus" :key="percpuId">
|
||||
<td scope="col">CPU{{ percpu.number }}</td>
|
||||
<td scope="col" class="progress">
|
||||
<div
|
||||
:class="`progress-bar progress-bar-${getDecoration('cpu')}`"
|
||||
role="progressbar"
|
||||
:aria-valuenow="percpu.total"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:style="`width: ${percpu.total}%;`"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell">{{ percpu.total }}%</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="table-row" v-for="(key) in stats_list_after_cpu">
|
||||
<div class="table-cell text-left">{{ key.toUpperCase() }}</div>
|
||||
<div class="table-cell">
|
||||
<div class="progress">
|
||||
</td>
|
||||
<td scope="col" class="text-end">{{ percpu.total }}%</td>
|
||||
</tr>
|
||||
<tr v-for="(key) in stats_list_after_cpu">
|
||||
<td scope="col">{{ key.toUpperCase() }}</td>
|
||||
<td scope="col" class="progress">
|
||||
<div
|
||||
:class="`progress-bar progress-bar-${getDecoration(key)}`"
|
||||
role="progressbar"
|
||||
|
|
@ -59,10 +53,10 @@
|
|||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell">{{ stats[key] }}%</div>
|
||||
</div>
|
||||
</td>
|
||||
<td scope="col" class="text-end">{{ stats[key] }}%</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -101,10 +95,10 @@ export default {
|
|||
return this.stats.cpu_name;
|
||||
},
|
||||
cpu_hz_current() {
|
||||
return this.stats.cpu_hz_current;
|
||||
return (this.stats.cpu_hz_current / 1000000).toFixed(0);
|
||||
},
|
||||
cpu_hz() {
|
||||
return this.stats.cpu_hz;
|
||||
return (this.stats.cpu_hz / 1000000).toFixed(0);
|
||||
},
|
||||
percpus() {
|
||||
var cpu_list = this.stats.percpu.map(({ cpu_number: number, total }) => ({ number, total }))
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -116,7 +116,7 @@ class PluginModel(GlancesPluginModel):
|
|||
# "mem": 5.792331695556641,
|
||||
# "proc": 4,
|
||||
# "temperature": 26,
|
||||
# "fan_speed": 30
|
||||
# "fan_speed": 30,
|
||||
# }
|
||||
# ]
|
||||
# Two GPU sample:
|
||||
|
|
@ -128,7 +128,7 @@ class PluginModel(GlancesPluginModel):
|
|||
# "mem": 5.792331695556641,
|
||||
# "proc": 4,
|
||||
# "temperature": 26,
|
||||
# "fan_speed": 30
|
||||
# "fan_speed": 30,
|
||||
# },
|
||||
# {
|
||||
# "key": "gpu_id",
|
||||
|
|
@ -137,8 +137,8 @@ class PluginModel(GlancesPluginModel):
|
|||
# "mem": 15,
|
||||
# "proc": 8,
|
||||
# "temperature": 65,
|
||||
# "fan_speed": 75
|
||||
# }
|
||||
# "fan_speed": 75,
|
||||
# },
|
||||
# ]
|
||||
|
||||
# Update the stats
|
||||
|
|
|
|||
Loading…
Reference in New Issue