访问日志实现记录和显示requestBody

internal/web/actions/default/servers/server/log/viewPopup.go

@@ -5,6 +5,7 @@ import (
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
 	"github.com/iwind/TeaGo/maps"
 	"net/http"
+	"strings"
 )
 
 type ViewPopupAction struct {
@@ -98,5 +99,19 @@ func (this *ViewPopupAction) RunGet(params struct {
 	}
 	this.Data["region"] = regionMap
 
+	// 请求内容
+	this.Data["requestBody"] = string(accessLog.RequestBody)
+	this.Data["requestContentType"] = "text/plain"
+
+	requestContentType, ok := accessLog.Header["Content-Type"]
+	if ok {
+		if len(requestContentType.Values) > 0 {
+			var contentType = requestContentType.Values[0]
+			if strings.HasSuffix(contentType, "/json") || strings.Contains(contentType, "/json;") {
+				this.Data["requestContentType"] = "application/json"
+			}
+		}
+	}
+
 	this.Show()
 }

web/public/js/components/common/source-code-box.js

@@ -1,7 +1,7 @@
 let sourceCodeBoxIndex = 0
 
 Vue.component("source-code-box", {
-	props: ["name", "type", "id", "read-only"],
+	props: ["name", "type", "id", "read-only", "width", "height"],
 	mounted: function () {
 		let readOnly = this.readOnly
 		if (typeof readOnly != "boolean") {
@@ -15,6 +15,11 @@ Vue.component("source-code-box", {
 		} else if (valueBox.innerText != null) {
 			value = valueBox.innerText
 		}
+
+		this.createEditor(box, value, readOnly)
+	},
+	methods: {
+		createEditor: function (box, value, readOnly) {
 			let boxEditor = CodeMirror.fromTextArea(box, {
 				theme: "idea",
 				lineNumbers: true,
@@ -31,12 +36,26 @@ Vue.component("source-code-box", {
 			})
 			boxEditor.setValue(value)
 
+			let width = this.width
+			let height = this.height
+			if (width != null && height != null) {
+				width = parseInt(width)
+				height = parseInt(height)
+				if (!isNaN(width) && !isNaN(height)) {
+					if (width <= 0) {
+						width = box.parentNode.offsetWidth
+					}
+					boxEditor.setSize(width, height)
+				}
+			}
+
 			let info = CodeMirror.findModeByMIME(this.type)
 			if (info != null) {
 				boxEditor.setOption("mode", info.mode)
 				CodeMirror.modeURL = "/codemirror/mode/%N/%N.js"
 				CodeMirror.autoLoadMode(boxEditor, info.mode)
 			}
+		}
 	},
 	data: function () {
 		let index = sourceCodeBoxIndex++

web/public/js/components/server/http-access-log-config-box.js

@@ -34,7 +34,8 @@ Vue.component("http-access-log-config-box", {
 		})
 
 		return {
-			accessLog: accessLog
+			accessLog: accessLog,
+			hasRequestBodyField: this.vFields.$contains(8)
 		}
 	},
 	methods: {
@@ -44,6 +45,7 @@ Vue.component("http-access-log-config-box", {
 			}).map(function (v) {
 				return v.code
 			})
+			this.hasRequestBodyField = this.accessLog.fields.$contains(8)
 		}
 	},
 	template: `<div>
@@ -64,12 +66,19 @@ Vue.component("http-access-log-config-box", {
 		</tbody>
 		<tbody  v-show="((!vIsLocation && !vIsGroup) || accessLog.isPrior) && accessLog.isOn">
 			<tr>
-				<td>要存储的访问日志字段</td>
+				<td>基础信息</td>
+				<td><p class="comment" style="padding-top: 0">默认记录客户端IP、请求URL等基础信息。</p></td>
+			</tr>
+			<tr>
+				<td>高级信息</td>
 				<td>
-					<div class="ui checkbox" v-for="field in vFields" style="width:10em;margin-bottom:0.8em">
+					<div class="ui checkbox" v-for="(field, index) in vFields" style="width:10em;margin-bottom:0.8em">
-						<input type="checkbox" v-model="field.isChecked" @change="changeFields"/>
+						<input type="checkbox" v-model="field.isChecked" @change="changeFields" :id="'access-log-field-' + index"/>
-						<label>{{field.name}}</label>
+						<label :for="'access-log-field-' + index">{{field.name}}</label>
 					</div>
+					<p class="comment">在基础信息之外要存储的信息。
+						<span class="red" v-if="hasRequestBodyField">记录"请求Body"将会显著消耗更多的系统资源，建议仅在调试时启用，最大记录尺寸为2MB。</span>
+					</p>
 				</td>
 			</tr>
 			<tr>

web/views/@default/servers/server/log/viewPopup.html

@@ -1,4 +1,5 @@
 {$layout "layout_popup"}
+{$template "/code_editor"}
 
 <div class="ui menu tabular tiny">
 	<a class="item" :class="{active: tab == 'summary'}" @click.prevent="switchTab('summary')">综合信息</a>
@@ -87,6 +88,11 @@
 			<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>
 	</table>
 </div>