|
|
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
|
<template>
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
<a-card :bordered="false">
<a-alert type="info" :showIcon="true">
<div slot="message">
上次更新时间：{{ this.time }}
<a-divider type="vertical"/>
<a @click="handleClickUpdate">立即更新</a>
</div>
</a-alert>
<a-table
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="tableLoading"
style="margin-top: 20px;">
<template slot="param" slot-scope="text, record">
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
</template>
<template slot="text" slot-scope="text, record">
{{ textInfo[record.param].text }}
</template>
<template slot="value" slot-scope="text, record">
{{ text }} {{ textInfo[record.param].unit }}
</template>
</a-table>
</a-card>
</a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
moment.locale('zh-cn')
export default {
data() {
return {
time: '',
loading: true,
tableLoading: true,
columns: [{
title: '参数',
width: '30%',
dataIndex: 'param',
scopedSlots: { customRender: 'param' }
}, {
title: '描述',
width: '40%',
dataIndex: 'text',
scopedSlots: { customRender: 'text' }
}, {
title: '当前值',
width: '30%',
dataIndex: 'value',
scopedSlots: { customRender: 'value' }
}],
dataSource: [],
// 列表通过 textInfo 渲染出颜色、描述和单位
textInfo: {
'tomcat.sessions.created': { color: 'green', text: 'tomcat 已创建 session 数', unit: '个' },
'tomcat.sessions.expired': { color: 'green', text: 'tomcat 已过期 session 数', unit: '个' },
'tomcat.sessions.active.current': { color: 'green', text: 'tomcat 当前活跃 session 数', unit: '个' },
'tomcat.sessions.active.max': { color: 'green', text: 'tomcat 活跃 session 数峰值', unit: '个' },
'tomcat.sessions.rejected': { color: 'green', text: '超过session 最大配置后，拒绝的 session 个数', unit: '个' },
'tomcat.global.sent': { color: 'purple', text: '发送的字节数', unit: 'bytes' },
'tomcat.global.request.max': { color: 'purple', text: 'request 请求最长耗时', unit: '秒' },
'tomcat.global.request.count': { color: 'purple', text: '全局 request 请求次数', unit: '次' },
'tomcat.global.request.totalTime': { color: 'purple', text: '全局 request 请求总耗时', unit: '秒' },
'tomcat.servlet.request.max': { color: 'cyan', text: 'servlet 请求最长耗时', unit: '秒' },
'tomcat.servlet.request.count': { color: 'cyan', text: 'servlet 总请求次数', unit: '次' },
'tomcat.servlet.request.totalTime': { color: 'cyan', text: 'servlet 请求总耗时', unit: '秒' },
'tomcat.threads.current': { color: 'pink', text: 'tomcat 当前线程数（包括守护线程）', unit: '个' },
'tomcat.threads.config.max': { color: 'pink', text: 'tomcat 配置的线程最大数', unit: '个' }
},
// 当一条记录中需要取出多条数据的时候需要配置该字段
moreInfo: {
'tomcat.global.request': ['.count', '.totalTime'],
'tomcat.servlet.request': ['.count', '.totalTime']
}
}
},
mounted() {
this.loadTomcatInfo()
},
methods: {
handleClickUpdate() {
this.loadTomcatInfo()
},
loadTomcatInfo() {
this.tableLoading = true
this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
Promise.all([
getAction('actuator/metrics/tomcat.sessions.created'),
getAction('actuator/metrics/tomcat.sessions.expired'),
getAction('actuator/metrics/tomcat.sessions.active.current'),
getAction('actuator/metrics/tomcat.sessions.active.max'),
getAction('actuator/metrics/tomcat.sessions.rejected'),
|
