<template>
|
<a-skeleton active :loading="loading" :paragraph="{rows: 17}">
|
<a-card :bordered="false" class="card-area">
|
|
<a-alert type="info" :showIcon="true">
|
<div slot="message">
|
共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
|
<a-divider type="vertical"/>
|
<a @click="handleClickUpdate">立即刷新</a>
|
</div>
|
</a-alert>
|
|
<!-- 表格区域 -->
|
<a-table
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="pagination"
|
:loading="tableLoading"
|
:scroll="{ x: 900 }"
|
style="margin-top: 20px;"
|
@change="handleTableChange">
|
|
<template slot="timeTaken" slot-scope="text">
|
<a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
|
<a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
|
<a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
|
<a-tag v-else color="red">{{ text }} ms</a-tag>
|
</template>
|
|
<template slot="responseStatus" slot-scope="text">
|
<a-tag v-if="text < 200" color="pink">{{ text }} </a-tag>
|
<a-tag v-else-if="text < 201" color="green">{{ text }} </a-tag>
|
<a-tag v-else-if="text < 399" color="cyan">{{ text }} </a-tag>
|
<a-tag v-else-if="text < 403" color="orange">{{ text }} </a-tag>
|
<a-tag v-else-if="text < 501" color="red">{{ text }} </a-tag>
|
<span v-else>{{ text }}</span>
|
</template>
|
|
<template slot="requestMethod" slot-scope="text">
|
<a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
|
<a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
|
<a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
|
<a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
|
<span v-else>{{ text }} ms</span>
|
</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 {
|
advanced: false,
|
dataSource: [],
|
pagination: {
|
defaultPageSize: 10,
|
defaultCurrent: 1,
|
pageSizeOptions: ['10', '20', '30', '40', '100'],
|
showQuickJumper: true,
|
showSizeChanger: true,
|
showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
|
},
|
loading: true,
|
tableLoading: true
|
}
|
},
|
computed: {
|
columns() {
|
return [{
|
title: '请求时间',
|
dataIndex: 'timestamp',
|
customRender(text) {
|
return moment(text).format('YYYY-MM-DD HH:mm:ss')
|
}
|
}, {
|
title: '请求方法',
|
dataIndex: 'request.method',
|
scopedSlots: { customRender: 'requestMethod' },
|
filters: [
|
{ text: 'GET', value: 'GET' },
|
{ text: 'POST', value: 'POST' },
|
{ text: 'PUT', value: 'PUT' },
|
{ text: 'DELETE', value: 'DELETE' }
|
],
|
filterMultiple: true,
|
onFilter: (value, record) => record.request.method.includes(value)
|
}, {
|
title: '请求URL',
|
dataIndex: 'request.uri',
|
customRender(text) {
|
return text.split('?')[0]
|
}
|
}, {
|
title: '响应状态',
|
dataIndex: 'response.status',
|
scopedSlots: { customRender: 'responseStatus' }
|
}, {
|
title: '请求耗时',
|
dataIndex: 'timeTaken',
|
scopedSlots: { customRender: 'timeTaken' }
|
}]
|
}
|
},
|
mounted() {
|
this.fetch()
|
},
|
methods: {
|
|
handleClickUpdate() {
|
this.fetch()
|
},
|
|
handleTableChange() {
|
this.fetch()
|
},
|
|
fetch() {
|
this.tableLoading = true
|
getAction('actuator/httptrace').then((data) => {
|
let filterData = []
|
for (let d of data.traces) {
|
if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
|
filterData.push(d)
|
}
|
}
|
this.dataSource = filterData
|
}).catch((e) => {
|
console.error(e)
|
this.$message.error('获取HTTP信息失败')
|
}).finally(() => {
|
this.loading = false
|
this.tableLoading = false
|
})
|
}
|
|
}
|
}
|
</script>
|
<style></style>
|
