<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: {
|
'jvm.memory.max': { color: 'purple', text: 'JVM 最大内存', unit: 'MB' },
|
'jvm.memory.committed': { color: 'purple', text: 'JVM 可用内存', unit: 'MB' },
|
'jvm.memory.used': { color: 'purple', text: 'JVM 已用内存', unit: 'MB' },
|
'jvm.buffer.memory.used': { color: 'cyan', text: 'JVM 缓冲区已用内存', unit: 'MB' },
|
'jvm.buffer.count': { color: 'cyan', text: '当前缓冲区数量', unit: '个' },
|
'jvm.threads.daemon': { color: 'green', text: 'JVM 守护线程数量', unit: '个' },
|
'jvm.threads.live': { color: 'green', text: 'JVM 当前活跃线程数量', unit: '个' },
|
'jvm.threads.peak': { color: 'green', text: 'JVM 峰值线程数量', unit: '个' },
|
'jvm.classes.loaded': { color: 'orange', text: 'JVM 已加载 Class 数量', unit: '个' },
|
'jvm.classes.unloaded': { color: 'orange', text: 'JVM 未加载 Class 数量', unit: '个' },
|
'jvm.gc.memory.allocated': { color: 'pink', text: 'GC 时, 年轻代分配的内存空间', unit: 'MB' },
|
'jvm.gc.memory.promoted': { color: 'pink', text: 'GC 时, 老年代分配的内存空间', unit: 'MB' },
|
'jvm.gc.max.data.size': { color: 'pink', text: 'GC 时, 老年代的最大内存空间', unit: 'MB' },
|
'jvm.gc.live.data.size': { color: 'pink', text: 'FullGC 时, 老年代的内存空间', unit: 'MB' },
|
'jvm.gc.pause.count': { color: 'blue', text: '系统启动以来GC 次数', unit: '次' },
|
'jvm.gc.pause.totalTime': { color: 'blue', text: '系统启动以来GC 总耗时', unit: '秒' }
|
},
|
// 当一条记录中需要取出多条数据的时候需要配置该字段
|
moreInfo: {
|
'jvm.gc.pause': ['.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/jvm.memory.max'),
|
getAction('actuator/metrics/jvm.memory.committed'),
|
getAction('actuator/metrics/jvm.memory.used'),
|
getAction('actuator/metrics/jvm.buffer.memory.used'),
|
getAction('actuator/metrics/jvm.buffer.count'),
|
getAction('actuator/metrics/jvm.threads.daemon'),
|
getAction('actuator/metrics/jvm.threads.live'),
|
getAction('actuator/metrics/jvm.threads.peak'),
|
getAction('actuator/metrics/jvm.classes.loaded'),
|
getAction('actuator/metrics/jvm.classes.unloaded'),
|
getAction('actuator/metrics/jvm.gc.memory.allocated'),
|
getAction('actuator/metrics/jvm.gc.memory.promoted'),
|
getAction('actuator/metrics/jvm.gc.max.data.size'),
|
getAction('actuator/metrics/jvm.gc.live.data.size'),
|
getAction('actuator/metrics/jvm.gc.pause')
|
]).then((res) => {
|
|
let info = []
|
res.forEach((value, id) => {
|
let more = this.moreInfo[value.name]
|
if (!(more instanceof Array)) {
|
more = ['']
|
}
|
more.forEach((item, idx) => {
|
let param = value.name + item
|
let val = value.measurements[idx].value
|
|
if (param === 'jvm.memory.max'
|
|| param === 'jvm.memory.committed'
|
|| param === 'jvm.memory.used'
|
|| param === 'jvm.buffer.memory.used'
|
|| param === 'jvm.gc.memory.allocated'
|
|| param === 'jvm.gc.memory.promoted'
|
|| param === 'jvm.gc.max.data.size'
|
|| param === 'jvm.gc.live.data.size'
|
) {
|
val = this.convert(val, Number)
|
}
|
info.push({ id: param + id, param, text: 'false value', value: val })
|
})
|
})
|
this.dataSource = info
|
|
|
}).catch((e) => {
|
console.error(e)
|
this.$message.error('获取JVM信息失败')
|
}).finally(() => {
|
this.loading = false
|
this.tableLoading = false
|
})
|
},
|
|
convert(value, type) {
|
if (type === Number) {
|
return Number(value / 1048576).toFixed(3)
|
} else if (type === Date) {
|
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
}
|
return value
|
}
|
}
|
}
|
</script>
|
<style></style>
|
