访问日志中的响应Header和请求Header排序后显示

This commit is contained in:
GoEdgeLab
2022-04-05 15:38:22 +08:00
parent 6e91b2fef5
commit d54e4af295
2 changed files with 60 additions and 17 deletions

View File

@@ -72,29 +72,37 @@
</div>
<div v-if="tab == 'response'">
<table class="ui table selectable small">
<tr>
<td class="title">Status</td>
<td>{{accessLog.status}} {{accessLog.statusMessage}}</td>
</tr>
</table>
<table class="ui table selectable small">
<tr>
<td class="title">Status</td>
<td>{{accessLog.status}} {{accessLog.statusMessage}}</td>
</tr>
<tr v-if="accessLog.sentHeader != null" v-for="(v, k) in accessLog.sentHeader">
<td>{{k}}</td>
<td>{{v.values[0]}}</td>
</tr>
<tbody v-for="header in responseHeaders">
<tr v-for="value in header.values">
<td class="title">{{header.name}}</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
</div>
<div v-if="tab == 'request'">
<table class="ui table selectable small">
<tr v-if="accessLog.header != null" v-for="(v, k) in accessLog.header">
<td class="title">{{k}}</td>
<td>{{v.values[0]}}</td>
</tr>
<tr v-if="requestBody.length > 0">
<td colspan="2">
<source-code-box :type="requestContentType" width="0" height="200">{{requestBody}}</source-code-box>
</td>
</tr>
<tbody v-for="header in requestHeaders">
<tr v-for="value in header.values">
<td class="title">{{header.name}}</td>
<td>{{value}}</td>
</tr>
</tbody>
<tbody v-if="requestBody.length > 0">
<tr>
<td colspan="2">
<source-code-box :type="requestContentType" width="0" height="200">{{requestBody}}</source-code-box>
</td>
</tr>
</tbody>
</table>
</div>

View File

@@ -4,4 +4,39 @@ Tea.context(function () {
this.switchTab = function (tab) {
this.tab = tab
}
this.requestHeaders = []
if (this.accessLog.header != null) {
for (let k in this.accessLog.header) {
let v = this.accessLog.header[k]
if (typeof (v) != "object") {
continue
}
this.requestHeaders.push({
name: k,
values: v.values
})
}
}
this.requestHeaders.sort(function (v1, v2) {
return (v1.name < v2.name) ? -1 : 1
})
this.responseHeaders = []
if (this.accessLog.sentHeader != null) {
for (let k in this.accessLog.sentHeader) {
let v = this.accessLog.sentHeader[k]
if (typeof (v) != "object") {
continue
}
this.responseHeaders.push({
name: k,
values: v.values
})
}
}
this.responseHeaders.sort(function (v1, v2) {
return (v1.name < v2.name) ? -1 : 1
})
})