1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
<template>
<section id="percpu" class="plugin">
<div class="table" v-for="(cpus, cpusChunkId) in cpusChunks" :key="cpusChunkId">
<div class="table-row">
<div class="table-cell text-left title">
<span v-if="cpusChunkId === 0">PER CPU</span>
</div>
<div class="table-cell" v-for="(percpu, percpuId) in cpus" :key="percpuId">
{{ percpu.total }}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">user:</div>
<div
class="table-cell"
v-for="(percpu, percpuId) in cpus"
:key="percpuId"
:class="getUserAlert(percpu)"
>
{{ percpu.user }}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">system:</div>
<div
class="table-cell"
v-for="(percpu, percpuId) in cpus"
:key="percpuId"
:class="getSystemAlert(percpu)"
>
{{ percpu.system }}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">idle:</div>
<div class="table-cell" v-for="(percpu, percpuId) in cpus" :key="percpuId">
{{ percpu.idle }}%
</div>
</div>
<div class="table-row" v-if="cpus[0].iowait">
<div class="table-cell text-left">iowait:</div>
<div
class="table-cell"
v-for="(percpu, percpuId) in cpus"
:key="percpuId"
:class="getSystemAlert(percpu)"
>
{{ percpu.iowait }}%
</div>
</div>
<div class="table-row" v-if="cpus[0].steal">
<div class="table-cell text-left">steal:</div>
<div
class="table-cell"
v-for="(percpu, percpuId) in cpus"
:key="percpuId"
:class="getSystemAlert(percpu)"
>
{{ percpu.steal }}%
</div>
</div>
</div>
</section>
</template>
<script>
import { GlancesHelper } from '../services.js';
import { chunk } from 'lodash';
export default {
props: {
data: {
type: Object
}
},
computed: {
percpuStats() {
return this.data.stats['percpu'];
},
cpusChunks() {
const retval = this.percpuStats.map((cpuData) => {
return {
number: cpuData.cpu_number,
total: cpuData.total,
user: cpuData.user,
system: cpuData.system,
idle: cpuData.idle,
iowait: cpuData.iowait,
steal: cpuData.steal
};
});
return chunk(retval, 4);
}
},
methods: {
getUserAlert(cpu) {
return GlancesHelper.getAlert('percpu', 'percpu_user_', cpu.user);
},
getSystemAlert(cpu) {
return GlancesHelper.getAlert('percpu', 'percpu_system_', cpu.system);
}
}
};
</script>
|
