You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
283 lines
8.0 KiB
283 lines
8.0 KiB
<template>
|
|
<div class="app-container">
|
|
<el-form :inline="true" :model="searchFormData" class="demo-form-inline" size="mini" @submit.native.prevent>
|
|
<el-form-item label="接口名">
|
|
<el-input v-model="searchFormData.routeId" :clearable="true" style="width: 250px;" />
|
|
</el-form-item>
|
|
<el-form-item label="serviceId">
|
|
<el-input v-model="searchFormData.serviceId" :clearable="true" style="width: 250px;" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" native-type="submit" @click="loadTable">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
:data="pageInfo.list"
|
|
row-key="id"
|
|
lazy
|
|
empty-text="无数据"
|
|
:load="loadInstanceMonitorInfo"
|
|
>
|
|
<el-table-column
|
|
fixed
|
|
prop="instanceId"
|
|
label="网关实例"
|
|
width="200"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span v-if="!scope.row.children">{{ scope.row.instanceId }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed
|
|
prop="name"
|
|
label="接口名 (版本号)"
|
|
width="200"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.name + (scope.row.version ? ' (' + scope.row.version + ')' : '') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="serviceId"
|
|
label="serviceId"
|
|
width="150"
|
|
/>
|
|
<el-table-column
|
|
prop="maxTime"
|
|
label="最大耗时(ms)"
|
|
>
|
|
<template slot="header">
|
|
最大耗时(ms)
|
|
<el-tooltip content="耗时计算:签名验证成功后开始,应用返回结果后结束" placement="top">
|
|
<i class="el-icon-question" style="cursor: pointer"></i>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="minTime"
|
|
label="最小耗时(ms)"
|
|
/>
|
|
<el-table-column
|
|
prop="avgTime"
|
|
label="平均耗时(ms)"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.avgTime.toFixed(1) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="totalRequestCount"
|
|
label="总调用次数"
|
|
/>
|
|
<el-table-column
|
|
prop="successCount"
|
|
label="成功次数"
|
|
/>
|
|
<el-table-column
|
|
prop="errorCount"
|
|
label="失败次数"
|
|
/>
|
|
<el-table-column
|
|
prop="unsolvedErrorCount"
|
|
label="未解决错误"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-link
|
|
v-if="scope.row.unsolvedErrorCount > 0"
|
|
:underline="false"
|
|
type="danger"
|
|
style="text-decoration: underline;"
|
|
@click="onShowErrorDetail(scope.row)"
|
|
>
|
|
{{ scope.row.unsolvedErrorCount }}
|
|
</el-link>
|
|
<span v-if="scope.row.unsolvedErrorCount === 0">0</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
background
|
|
style="margin-top: 5px"
|
|
:current-page="searchFormData.pageIndex"
|
|
:page-size="searchFormData.pageSize"
|
|
:page-sizes="[5, 10, 20, 40]"
|
|
:total="pageInfo.total"
|
|
layout="total, sizes, prev, pager, next"
|
|
@size-change="onSizeChange"
|
|
@current-change="onPageIndexChange"
|
|
/>
|
|
<!-- dialog -->
|
|
<el-dialog
|
|
:title="errorMsgData.title"
|
|
:visible.sync="logDetailVisible"
|
|
:close-on-click-modal="false"
|
|
width="70%"
|
|
@close="onCloseErrorDlg"
|
|
>
|
|
<el-alert
|
|
title="修复错误后请标记解决"
|
|
:closable="false"
|
|
class="el-alert-tip"
|
|
/>
|
|
<el-table
|
|
:data="errorMsgData.pageInfo.rows"
|
|
empty-text="无错误日志"
|
|
>
|
|
<el-table-column
|
|
type="expand"
|
|
>
|
|
<template slot-scope="props">
|
|
<el-input v-model="props.row.errorMsg" type="textarea" :rows="8" readonly />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="errorMsg"
|
|
label="错误内容"
|
|
>
|
|
<template slot-scope="props">
|
|
<span v-if="props.row.errorMsg.length > 50">{{ props.row.errorMsg.substring(0, 50) }}...</span>
|
|
<span v-else>{{ props.row.errorMsg }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="instanceId"
|
|
label="实例ID"
|
|
width="150px"
|
|
/>
|
|
<el-table-column
|
|
prop="count"
|
|
label="报错次数"
|
|
width="80px"
|
|
/>
|
|
<el-table-column
|
|
prop="gmtModified"
|
|
label="报错时间"
|
|
width="160px"
|
|
/>
|
|
<el-table-column
|
|
label="操作"
|
|
width="120"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-link type="primary" @click="onSolve(scope.row)">标记解决</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
background
|
|
style="margin-top: 5px"
|
|
:current-page="errorMsgFormData.pageIndex"
|
|
:page-size="errorMsgFormData.pageSize"
|
|
:page-sizes="[5, 10, 20, 40]"
|
|
:total="errorMsgData.pageInfo.total"
|
|
layout="total, sizes, prev, pager, next"
|
|
@size-change="onErrorSizeChange"
|
|
@current-change="onErrorPageIndexChange"
|
|
/>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="logDetailVisible = false">关 闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchFormData: {
|
|
routeId: '',
|
|
serviceId: '',
|
|
pageIndex: 1,
|
|
pageSize: 20
|
|
},
|
|
pageInfo: {
|
|
list: [],
|
|
total: 0
|
|
},
|
|
logDetailVisible: false,
|
|
errorMsgFormData: {
|
|
routeId: '',
|
|
instanceId: '',
|
|
pageIndex: 1,
|
|
pageSize: 5
|
|
},
|
|
errorMsgData: {
|
|
title: '',
|
|
name: '',
|
|
version: '',
|
|
pageInfo: {
|
|
rows: [],
|
|
total: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.loadTable()
|
|
},
|
|
methods: {
|
|
loadTable: function() {
|
|
this.post('monitornew.data.page', this.searchFormData, function(resp) {
|
|
this.pageInfo = resp.data
|
|
})
|
|
},
|
|
loadErrorData: function() {
|
|
this.post('monitornew.error.page', this.errorMsgFormData, function(resp) {
|
|
this.errorMsgData.pageInfo = resp.data
|
|
this.logDetailVisible = true
|
|
})
|
|
},
|
|
loadInstanceMonitorInfo(row, treeNode, resolve) {
|
|
this.post('monitornew.routeid.data.get', { routeId: row.routeId }, resp => {
|
|
const children = resp.data
|
|
row.children = children
|
|
resolve(children)
|
|
})
|
|
},
|
|
onShowErrorDetail: function(row) {
|
|
this.errorMsgData.title = `错误日志 ${row.name}(${row.version})`
|
|
this.errorMsgData.name = row.name
|
|
this.errorMsgData.version = row.version
|
|
this.errorMsgFormData.routeId = row.routeId
|
|
this.errorMsgFormData.instanceId = row.instanceId
|
|
this.loadErrorData()
|
|
},
|
|
onSolve: function(row) {
|
|
this.confirm('确认标记为已解决吗?', function(done) {
|
|
this.post('monitornew.error.solve', { routeId: row.routeId, errorId: row.errorId }, function(resp) {
|
|
done()
|
|
this.errorMsgFormData.pageIndex = 1
|
|
this.loadErrorData()
|
|
})
|
|
})
|
|
},
|
|
onCloseErrorDlg: function() {
|
|
this.loadTable()
|
|
},
|
|
onErrorSizeChange: function(size) {
|
|
this.errorMsgFormData.pageSize = size
|
|
this.loadErrorData()
|
|
},
|
|
onErrorPageIndexChange: function(pageIndex) {
|
|
this.errorMsgFormData.pageIndex = pageIndex
|
|
this.loadErrorData()
|
|
},
|
|
onSizeChange: function(size) {
|
|
this.searchFormData.pageSize = size
|
|
this.loadTable()
|
|
},
|
|
onPageIndexChange: function(pageIndex) {
|
|
this.searchFormData.pageIndex = pageIndex
|
|
this.loadTable()
|
|
},
|
|
onAdd: function() {
|
|
this.dialogTitle = '新增IP'
|
|
this.dialogVisible = true
|
|
this.dialogFormData.id = 0
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|