forked from WeBankFinTech/Scriptis
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathqueue.vue
More file actions
127 lines (127 loc) · 4.15 KB
/
queue.vue
File metadata and controls
127 lines (127 loc) · 4.15 KB
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
123
124
125
126
127
<template>
<div class="queue-manager">
<Spin
v-if="loading"
size="large"
fix/>
<div
class="queue-manager-select-warpper"
v-if="queueList.length">
<Select
v-model="current"
class="queue-manager-select"
placeholder="请选择队列"
@on-change="getQueueInfo">
<Option
v-for="(queue, index) in queueList"
:key="index"
:value="queue">{{ queue }}</Option>
</Select>
</div>
<div v-if="infos">
<div class="queue-manager-used">
<div class="queue-manager-title">资源使用率</div>
<div class="queue-manager-circle-warpper">
<v-circle
:percent="infos.queueInfo.usedPercentage.cores"
:used="infos.queueInfo.usedResources.cores.toString()"
:max="infos.queueInfo.maxResources.cores.toString()"
suffixe="核"
width="120px"
height="120px"
title="CPU"
class="queue-manager-circle"></v-circle>
<v-circle
:percent="infos.queueInfo.usedPercentage.memory"
:used="formatToGb(infos.queueInfo.usedResources.memory)"
:max="formatToGb(infos.queueInfo.maxResources.memory)"
suffixe="GB"
width="120px"
height="120px"
title="内存"></v-circle>
</div>
</div>
<div class="queue-manager-top">
<span class="queue-manager-title">资源使用排行榜</span>
<div
class="queue-manager-top-content"
v-if="infos.userResources.length">
<div
v-for="(item, index) in infos.userResources"
:key="index"
class="queue-manager-item">
<span class="queue-manager-name">{{ item.username }}</span>
<Tooltip
:content="`${formatToPercent(item.idlePercentage)}空闲 / ${formatToPercent(item.busyPercentage)}繁忙`"
placement="top">
<span class="queue-manager-status">
<span
class="queue-manager-status-busy"
:style="{'width': formatToPercent(item.busyPercentage)}"
:title="formatToPercent(item.busyPercentage)">
<i class="queue-manager-status-label"></i>
</span><span
class="queue-manager-status-idle"
:style="{'width': formatToPercent(item.busyPercentage + item.idlePercentage)}"
:title="formatToPercent(item.idlePercentage)">
<i class="queue-manager-status-label"></i>
</span>
</span>
</Tooltip>
<span class="queue-manager-total">{{ formatToPercent(item.totalPercentage) }}</span>
</div>
</div>
<div
class="queue-manager-item"
v-else>暂无</div>
</div>
</div>
</div>
</template>
<script>
import api from '@/js/service/api';
import circle from '@/js/component/circleProgress/index.vue';
export default {
components: {
'v-circle': circle,
},
data() {
return {
queueList: [],
current: '',
infos: null,
loading: true,
};
},
methods: {
getQueueList() {
this.loading = true;
api.fetch('/resourcemanager/queues').then((res) => {
this.loading = false;
this.queueList = res.queues;
this.current = this.queueList[0];
this.getQueueInfo(this.current);
}).catch((err) => {
this.loading = false;
});
},
getQueueInfo(name) {
this.loading = true;
api.fetch('/resourcemanager/queueresources', {
queuename: name,
}).then((res) => {
this.loading = false;
this.infos = res;
}).catch((err) => {
this.loading = false;
});
},
formatToPercent(val) {
return (val * 100).toFixed(0) + '%';
},
formatToGb(val) {
return (val / 1024 / 1024 / 1024).toFixed(0);
},
},
};
</script>