From d54e4af29589e265ffb15968a223888c63626973 Mon Sep 17 00:00:00 2001
From: GoEdgeLab <goedgecloud@gmail.com>
Date: Tue, 5 Apr 2022 15:38:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BF=E9=97=AE=E6=97=A5=E5=BF=97=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E5=93=8D=E5=BA=94Header=E5=92=8C=E8=AF=B7=E6=B1=82Hea?=
 =?UTF-8?q?der=E6=8E=92=E5=BA=8F=E5=90=8E=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../servers/server/log/viewPopup.html         | 42 +++++++++++--------
 .../@default/servers/server/log/viewPopup.js  | 35 ++++++++++++++++
 2 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/web/views/@default/servers/server/log/viewPopup.html b/web/views/@default/servers/server/log/viewPopup.html
index 87e3d5d7..c18c5172 100644
--- a/web/views/@default/servers/server/log/viewPopup.html
+++ b/web/views/@default/servers/server/log/viewPopup.html
@@ -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>
 
diff --git a/web/views/@default/servers/server/log/viewPopup.js b/web/views/@default/servers/server/log/viewPopup.js
index 8d223788..8da60827 100644
--- a/web/views/@default/servers/server/log/viewPopup.js
+++ b/web/views/@default/servers/server/log/viewPopup.js
@@ -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
+	})
 })
\ No newline at end of file