实现实时展示访问日志

internal/rpc/rpc_client.go

@@ -155,6 +155,11 @@ func (this *RPCClient) HTTPRewriteRuleRPC() pb.HTTPRewriteRuleServiceClient {
 	return pb.NewHTTPRewriteRuleServiceClient(this.pickConn())
 }
 
+// 访问日志
+func (this *RPCClient) HTTPAccessLogRPC() pb.HTTPAccessLogServiceClient {
+	return pb.NewHTTPAccessLogServiceClient(this.pickConn())
+}
+
 func (this *RPCClient) SSLCertRPC() pb.SSLCertServiceClient {
 	return pb.NewSSLCertServiceClient(this.pickConn())
 }

internal/web/actions/default/servers/server/index.go

@@ -18,5 +18,5 @@ func (this *IndexAction) RunGet(params struct {
 	ServerId int64
 }) {
 	// TODO 等看板实现后，需要跳转到看板
-	this.RedirectURL("/servers/server/settings?serverId=" + strconv.FormatInt(params.ServerId, 10))
+	this.RedirectURL("/servers/server/log?serverId=" + strconv.FormatInt(params.ServerId, 10))
 }

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

@@ -1,6 +1,11 @@
 package log
 
-import "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/actions"
+	timeutil "github.com/iwind/TeaGo/utils/time"
+)
 
 type IndexAction struct {
 	actionutils.ParentAction
@@ -11,6 +16,46 @@ func (this *IndexAction) Init() {
 	this.SecondMenu("index")
 }
 
-func (this *IndexAction) RunGet(params struct{}) {
+func (this *IndexAction) RunGet(params struct {
+	ServerId  int64
+	RequestId string
+}) {
+	this.Data["serverId"] = params.ServerId
+	this.Data["requestId"] = params.RequestId
+
 	this.Show()
 }
+
+func (this *IndexAction) RunPost(params struct {
+	ServerId  int64
+	RequestId string
+
+	Must *actions.Must
+}) {
+	isReverse := len(params.RequestId) > 0
+	accessLogsResp, err := this.RPC().HTTPAccessLogRPC().ListHTTPAccessLogs(this.AdminContext(), &pb.ListHTTPAccessLogsRequest{
+		ServerId:  params.ServerId,
+		RequestId: params.RequestId,
+		Size:      20,
+		Day:       timeutil.Format("Ymd"),
+		Reverse:   isReverse,
+	})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	accessLogs := accessLogsResp.AccessLogs
+	if len(accessLogs) == 0 {
+		accessLogs = []*pb.HTTPAccessLog{}
+	}
+	this.Data["accessLogs"] = accessLogs
+	if len(accessLogs) > 0 {
+		this.Data["requestId"] = accessLogs[0].RequestId
+	} else {
+		this.Data["requestId"] = params.RequestId
+	}
+	this.Data["hasMore"] = accessLogsResp.HasMore
+
+	this.Success()
+}

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

@@ -12,7 +12,7 @@ func init() {
 			Helper(helpers.NewUserMustAuth()).
 			Helper(serverutils.NewServerHelper()).
 			Prefix("/servers/server/log").
-			Get("", new(IndexAction)).
+			GetPost("", new(IndexAction)).
 			EndAll()
 	})
 }

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

@@ -0,0 +1,22 @@
+Vue.component("http-access-log-box", {
+	props: ["v-access-log"],
+	data: function () {
+		return {
+			accessLog: this.vAccessLog
+		}
+	},
+	methods: {
+		formatCost: function (seconds) {
+			var s = (seconds * 1000).toString();
+			var pieces = s.split(".");
+			if (pieces.length < 2) {
+				return s;
+			}
+
+			return pieces[0] + "." + pieces[1].substr(0, 3);
+		}
+	},
+	template: `<div :style="{'color': (accessLog.status >= 400) ? '#dc143c' : ''}">
+	{{accessLog.remoteAddr}} [{{accessLog.timeLocal}}] <em>&quot;{{accessLog.requestMethod}} {{accessLog.requestScheme}}://{{accessLog.host}}{{accessLog.requestURI}} <a :href="accessLog.scheme + '://' + accessLog.host + accessLog.requestURI" target="_blank" title="新窗口打开" class="disabled"><i class="external icon tiny"></i> </a> {{accessLog.proto}}&quot; </em> {{accessLog.status}} <span v-if="accessLog.attrs != null && accessLog.attrs['cache_cached'] == '1'">[cached]</span> <span v-if="accessLog.attrs != null && accessLog.attrs['waf_action'] != null && accessLog.attrs['waf_action'].length > 0">[waf {{accessLog.attrs['waf_action']}}]</span> - 耗时:{{formatCost(accessLog.requestTime)}} ms
+</div>`
+})

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

@@ -2,5 +2,12 @@
 
 {$template "/left_menu"}
 <div class="right-box">
-	<div class="ui message">此功能暂未开放，敬请期待。</div>
+	<p class="comment" v-if="isLoaded && accessLogs.length == 0">今天暂时还没有访问日志。</p>
+
+	<table class="ui table selectable" v-if="accessLogs.length > 0">
+		<!-- 这里之所以需要添加 :key，是因为要不然不会刷新显示 -->
+		<tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
+			<td><http-access-log-box :v-access-log="accessLog"></http-access-log-box></td>
+		</tr>
+	</table>
 </div>

web/views/@default/servers/server/log/index.js

@@ -0,0 +1,38 @@
+Tea.context(function () {
+	this.$delay(function () {
+		this.load()
+	})
+
+	this.hasMore = false
+	this.accessLogs = []
+	this.isLoaded = false
+
+	this.load = function () {
+		this.$post("$")
+			.params({
+				serverId: this.serverId,
+				requestId: this.requestId
+			})
+			.success(function (resp) {
+				this.accessLogs = resp.data.accessLogs.concat(this.accessLogs)
+				let max = 100
+				if (this.accessLogs.length > max) {
+					this.accessLogs = this.accessLogs.slice(0, max)
+				}
+				this.hasMore = resp.data.hasMore
+				this.requestId = resp.data.requestId
+			})
+			.done(function () {
+				if (!this.isLoaded) {
+					this.$delay(function () {
+						this.isLoaded = true
+					})
+				}
+
+				// 自动刷新
+				this.$delay(function () {
+					this.load()
+				}, 5000)
+			})
+	}
+})