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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<template>
<section id="quicklook" class="plugin">
<div class="cpu-name">
{{ cpu_name }}
</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="`progress-bar progress-bar-${getDecoration('cpu')}`"
role="progressbar"
:aria-valuenow="cpu"
aria-valuemin="0"
aria-valuemax="100"
:style="`width: ${cpu}%;`"
>
</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>
</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">
<div
:class="`progress-bar progress-bar-${getDecoration(key)}`"
role="progressbar"
:aria-valuenow="stats[key]"
aria-valuemin="0"
aria-valuemax="100"
:style="`width: ${stats[key]}%;`"
>
</div>
</div>
</div>
<div class="table-cell">{{ stats[key] }}%</div>
</div>
</div>
</section>
</template>
<script>
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['quicklook'];
},
view() {
return this.data.views['quicklook'];
},
cpu() {
return this.stats.cpu;
},
cpu_name() {
return this.stats.cpu_name;
},
cpu_hz_current() {
return this.stats.cpu_hz_current;
},
cpu_hz() {
return this.stats.cpu_hz;
},
percpus() {
return this.stats.percpu.map(({ cpu_number: number, total }) => ({
number,
total
}));
},
stats_list_after_cpu() {
return this.view.list.filter((key) => !key.includes('cpu'));
},
},
methods: {
getDecoration(value) {
if (this.view[value] === undefined) {
return;
}
return this.view[value].decoration.toLowerCase();
}
}
};
</script>
|
