From 8e9cc733fd3f48642b15bcc59ec5f9700a8bde56 Mon Sep 17 00:00:00 2001
From: GoEdgeLab <goedgecloud@gmail.com>
Date: Sat, 9 Oct 2021 16:01:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF-WAF?=
 =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E5=A2=9E=E5=8A=A0=E8=8A=82=E7=82=B9=E6=8B=A6?=
 =?UTF-8?q?=E6=88=AA=E6=8E=92=E8=A1=8C=E5=92=8C=E5=9F=9F=E5=90=8D=E6=8B=A6?=
 =?UTF-8?q?=E6=88=AA=E6=8E=92=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/views/@default/dashboard/boards/waf.html | 12 ++++-
 web/views/@default/dashboard/boards/waf.js   | 56 ++++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/web/views/@default/dashboard/boards/waf.html b/web/views/@default/dashboard/boards/waf.html
index 104ddcf1..505dd537 100644
--- a/web/views/@default/dashboard/boards/waf.html
+++ b/web/views/@default/dashboard/boards/waf.html
@@ -53,4 +53,14 @@
 
 
 <h4>拦截类型分布</h4>
-<div class="chart-box" id="group-chart"></div>
\ No newline at end of file
+<div class="chart-box" id="group-chart"></div>
+
+<!-- 域名排行 -->
+<h4 v-show="!isLoading">域名拦截排行 <span>（24小时）</span></h4>
+<div class="chart-box" id="top-domains-chart"></div>
+
+<div class="ui divider"></div>
+
+<!-- 节点排行 -->
+<h4 v-show="!isLoading">节点拦截排行 <span>（24小时）</span></h4>
+<div class="chart-box" id="top-nodes-chart"></div>
\ No newline at end of file
diff --git a/web/views/@default/dashboard/boards/waf.js b/web/views/@default/dashboard/boards/waf.js
index aedb6e27..8aebf12f 100644
--- a/web/views/@default/dashboard/boards/waf.js
+++ b/web/views/@default/dashboard/boards/waf.js
@@ -1,4 +1,6 @@
 Tea.context(function () {
+	this.isLoading = false
+
 	this.$delay(function () {
 		let that = this
 
@@ -10,6 +12,8 @@ Tea.context(function () {
 		this.reloadHourlyChart()
 		this.reloadGroupChart()
 		this.reloadAccessLogs()
+		this.reloadTopNodesChart()
+		this.reloadTopDomainsChart()
 	})
 
 	this.requestsTab = "hourly"
@@ -183,4 +187,56 @@ Tea.context(function () {
 			}
 		}
 	}
+
+	// 节点排行
+	this.reloadTopNodesChart = function () {
+		let that = this
+		let axis = teaweb.countAxis(this.topNodeStats, function (v) {
+			return v.countRequests
+		})
+		teaweb.renderBarChart({
+			id: "top-nodes-chart",
+			name: "节点",
+			values: this.topNodeStats,
+			x: function (v) {
+				return v.nodeName
+			},
+			tooltip: function (args, stats) {
+				return stats[args.dataIndex].nodeName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
+			},
+			value: function (v) {
+				return v.countRequests / axis.divider;
+			},
+			axis: axis,
+			click: function (args, stats) {
+				window.location = "/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + that.clusterId
+			}
+		})
+	}
+
+	// 域名排行
+	this.reloadTopDomainsChart = function () {
+		let axis = teaweb.countAxis(this.topDomainStats, function (v) {
+			return v.countRequests
+		})
+		teaweb.renderBarChart({
+			id: "top-domains-chart",
+			name: "域名",
+			values: this.topDomainStats,
+			x: function (v) {
+				return v.domain
+			},
+			tooltip: function (args, stats) {
+				return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
+			},
+			value: function (v) {
+				return v.countRequests / axis.divider;
+			},
+			axis: axis,
+			click: function (args, stats) {
+				let index = args.dataIndex
+				window.location = "/servers/server?serverId=" + stats[index].serverId
+			}
+		})
+	}
 })
\ No newline at end of file