WAF显示拦截日志

internal/rpc/rpc_client.go

@@ -13,9 +13,11 @@ import (
 	"github.com/iwind/TeaGo/maps"
 	"github.com/iwind/TeaGo/rands"
 	"google.golang.org/grpc"
+	"google.golang.org/grpc/connectivity"
 	"google.golang.org/grpc/credentials"
 	"google.golang.org/grpc/metadata"
 	"net/url"
+	"sync"
 	"time"
 )
 
@@ -23,6 +25,8 @@ import (
 type RPCClient struct {
 	apiConfig *configs.APIConfig
 	conns     []*grpc.ClientConn
+
+	locker sync.Mutex
 }
 
 // 构造新的RPC客户端
@@ -31,35 +35,16 @@ func NewRPCClient(apiConfig *configs.APIConfig) (*RPCClient, error) {
 		return nil, errors.New("api config should not be nil")
 	}
 
-	conns := []*grpc.ClientConn{}
+	client := &RPCClient{
-	for _, endpoint := range apiConfig.RPC.Endpoints {
+		apiConfig: apiConfig,
-		u, err := url.Parse(endpoint)
-		if err != nil {
-			return nil, errors.New("parse endpoint failed: " + err.Error())
-		}
-		var conn *grpc.ClientConn
-		if u.Scheme == "http" {
-			conn, err = grpc.Dial(u.Host, grpc.WithInsecure())
-		} else if u.Scheme == "https" {
-			conn, err = grpc.Dial(u.Host, grpc.WithTransportCredentials(credentials.NewTLS(&tls.Config{
-				InsecureSkipVerify: true,
-			})))
-		} else {
-			return nil, errors.New("parse endpoint failed: invalid scheme '" + u.Scheme + "'")
-		}
-		if err != nil {
-			return nil, err
-		}
-		conns = append(conns, conn)
-	}
-	if len(conns) == 0 {
-		return nil, errors.New("[RPC]no available endpoints")
 	}
 
-	return &RPCClient{
+	err := client.init()
-		apiConfig: apiConfig,
+	if err != nil {
-		conns:     conns,
+		return nil, err
-	}, nil
+	}
+
+	return client, nil
 }
 
 func (this *RPCClient) AdminRPC() pb.AdminServiceClient {
@@ -233,10 +218,66 @@ func (this *RPCClient) APIContext(apiNodeId int64) context.Context {
 	return ctx
 }
 
+// 初始化
+func (this *RPCClient) init() error {
+	// 重新连接
+	conns := []*grpc.ClientConn{}
+	for _, endpoint := range this.apiConfig.RPC.Endpoints {
+		u, err := url.Parse(endpoint)
+		if err != nil {
+			return errors.New("parse endpoint failed: " + err.Error())
+		}
+		var conn *grpc.ClientConn
+		if u.Scheme == "http" {
+			conn, err = grpc.Dial(u.Host, grpc.WithInsecure())
+		} else if u.Scheme == "https" {
+			conn, err = grpc.Dial(u.Host, grpc.WithTransportCredentials(credentials.NewTLS(&tls.Config{
+				InsecureSkipVerify: true,
+			})))
+		} else {
+			return errors.New("parse endpoint failed: invalid scheme '" + u.Scheme + "'")
+		}
+		if err != nil {
+			return err
+		}
+		conns = append(conns, conn)
+	}
+	if len(conns) == 0 {
+		return errors.New("[RPC]no available endpoints")
+	}
+	this.conns = conns
+	return nil
+}
+
 // 随机选择一个连接
 func (this *RPCClient) pickConn() *grpc.ClientConn {
+	this.locker.Lock()
+	defer this.locker.Unlock()
+
+	// 检查连接状态
+	if len(this.conns) > 0 {
+		availableConns := []*grpc.ClientConn{}
+		for _, conn := range this.conns {
+			if conn.GetState() == connectivity.Ready {
+				availableConns = append(availableConns, conn)
+			}
+		}
+
+		if len(availableConns) > 0 {
+			return availableConns[rands.Int(0, len(availableConns)-1)]
+		}
+	}
+
+	// 重新初始化
+	err := this.init()
+	if err != nil {
+		// 错误提示已经在构造对象时打印过，所以这里不再重复打印
+		return nil
+	}
+
 	if len(this.conns) == 0 {
 		return nil
 	}
+
 	return this.conns[rands.Int(0, len(this.conns)-1)]
 }

internal/web/actions/default/servers/components/waf/log.go

@@ -1,6 +1,12 @@
 package waf
 
-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"
+	timeutil "github.com/iwind/TeaGo/utils/time"
+	"regexp"
+	"strings"
+)
 
 type LogAction struct {
 	actionutils.ParentAction
@@ -10,6 +16,64 @@ func (this *LogAction) Init() {
 	this.Nav("", "", "log")
 }
 
-func (this *LogAction) RunGet(params struct{}) {
+func (this *LogAction) RunGet(params struct {
+	Day              string
+	RequestId        string
+	FirewallPolicyId int64
+}) {
+	if len(params.Day) == 0 {
+		params.Day = timeutil.Format("Y-m-d")
+	}
+
+	this.Data["path"] = this.Request.URL.Path
+	this.Data["day"] = params.Day
+	this.Data["accessLogs"] = []interface{}{}
+
+	day := params.Day
+	if len(day) > 0 && regexp.MustCompile(`\d{4}-\d{2}-\d{2}`).MatchString(day) {
+		day = strings.ReplaceAll(day, "-", "")
+		size := int64(10)
+
+		resp, err := this.RPC().HTTPAccessLogRPC().ListHTTPAccessLogs(this.AdminContext(), &pb.ListHTTPAccessLogsRequest{
+			RequestId:        params.RequestId,
+			FirewallPolicyId: params.FirewallPolicyId,
+			Day:              day,
+			Size:             size,
+		})
+		if err != nil {
+			this.ErrorPage(err)
+			return
+		}
+
+		if len(resp.AccessLogs) == 0 {
+			this.Data["accessLogs"] = []interface{}{}
+		} else {
+			this.Data["accessLogs"] = resp.AccessLogs
+		}
+		this.Data["hasMore"] = resp.HasMore
+		this.Data["nextRequestId"] = resp.RequestId
+
+		// 上一个requestId
+		this.Data["hasPrev"] = false
+		this.Data["lastRequestId"] = ""
+		if len(params.RequestId) > 0 {
+			this.Data["hasPrev"] = true
+			prevResp, err := this.RPC().HTTPAccessLogRPC().ListHTTPAccessLogs(this.AdminContext(), &pb.ListHTTPAccessLogsRequest{
+				RequestId:        params.RequestId,
+				FirewallPolicyId: params.FirewallPolicyId,
+				Day:              day,
+				Size:             size,
+				Reverse:          true,
+			})
+			if err != nil {
+				this.ErrorPage(err)
+				return
+			}
+			if int64(len(prevResp.AccessLogs)) == size {
+				this.Data["lastRequestId"] = prevResp.RequestId
+			}
+		}
+	}
+
 	this.Show()
 }

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

@@ -17,6 +17,6 @@ Vue.component("http-access-log-box", {
 		}
 	},
 	template: `<div :style="{'color': (accessLog.status >= 400) ? '#dc143c' : ''}">
-	{{accessLog.remoteAddr}} [{{accessLog.timeLocal}}] <em>&quot;{{accessLog.requestMethod}} {{accessLog.scheme}}://{{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
+	{{accessLog.remoteAddr}} [{{accessLog.timeLocal}}] <em>&quot;{{accessLog.requestMethod}} {{accessLog.scheme}}://{{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/public/js/components/server/http-firewall-config-box.js

@@ -54,7 +54,7 @@ Vue.component("http-firewall-config-box", {
 							<option value="0">[请选择]</option>
 							<option v-for="policy in vFirewallPolicies" :value="policy.id">{{policy.name}}</option>
 						</select>
-						<p class="comment" v-if="selectedPolicy != null"><span v-if="!selectedPolicy.isOn" class="red">[正在停用的策略]</span>{{selectedPolicy.description}}</p>
+						<p class="comment" v-if="selectedPolicy != null"><span v-if="!selectedPolicy.isOn" class="red">[正在停用的策略]</span>{{selectedPolicy.description}} &nbsp; <a :href="'/servers/components/waf/policy?firewallPolicyId=' + selectedPolicy.id">详情&raquo;</a> </p>
 					</div>
 				</td>
 			</tr>

web/views/@default/servers/components/waf/log.html

@@ -1,8 +1,49 @@
 {$layout}
+
+{$var "header"}
+<!-- datepicker -->
+<script type="text/javascript" src="/js/moment.min.js"></script>
+<script type="text/javascript" src="/js/pikaday.js"></script>
+<link rel="stylesheet" href="/js/pikaday.css"/>
+<link rel="stylesheet" href="/js/pikaday.theme.css"/>
+<link rel="stylesheet" href="/js/pikaday.triangle.css"/>
+{$end}
+
 {$template "/left_menu"}
 
 <div class="right-box">
 	{$template "waf_menu"}
 
-	<p class="ui message">此功能暂未开放，敬请期待。</p>
+	<first-menu>
+		<div class="item right">
+			<form class="ui form small" :action="path" autocomplete="off">
+				<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
+				<div class="ui fields inline">
+					<div class="ui field">
+						<input type="text" name="day" maxlength="10" placeholder="选择日期" style="width:7.8em" id="day-input" v-model="day"/>
+					</div>
+					<div class="ui field">
+						<button class="ui button small" type="submit">查找</button>
+					</div>
+				</div>
+			</form>
+		</div>
+	</first-menu>
+
+	<p class="comment" v-if="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 v-if="accessLogs.length > 0">
+		<a :href="path + '?requestId=' + lastRequestId + '&day=' + day + '&firewallPolicyId=' + firewallPolicyId" v-if="hasPrev">上一页</a>
+		<span v-else class="disabled">上一页</span>
+		<span class="disabled">&nbsp; | &nbsp;</span>
+		<a :href="path + '?requestId=' + nextRequestId + '&day=' + day + '&firewallPolicyId=' + firewallPolicyId" v-if="hasMore">下一页</a>
+		<span v-else class="disabled">下一页</span>
+	</div>
 </div>

web/views/@default/servers/components/waf/log.js

@@ -0,0 +1,8 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+		teaweb.datepicker("day-input", function (day) {
+			that.day = day
+		})
+	})
+})