实现数据看板--WAF

2025-12-26 04:06:34 +08:00 · 2021-07-12 16:56:56 +08:00
parent 6375b543f3
commit fad6b30a8e
11 changed files with 527 additions and 191 deletions
--- a/web/views/@default/dashboard/boards/waf.css
+++ b/web/views/@default/dashboard/boards/waf.css
@@ -30,4 +30,8 @@
 .chart-box {
  height: 20em;
 }
+.color-span {
+  font-size: 0.8em;
+  padding: 4px;
+}
 /*# sourceMappingURL=waf.css.map */
--- a/web/views/@default/dashboard/boards/waf.css.map
+++ b/web/views/@default/dashboard/boards/waf.css.map
@@ -1 +1 @@
-{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA","file":"waf.css"}
+{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD;EACC,gBAAA;EACA,YAAA","file":"waf.css"}
--- a/web/views/@default/dashboard/boards/waf.html
+++ b/web/views/@default/dashboard/boards/waf.html
@@ -1,3 +1,56 @@
 {$layout}
 {$template "menu"}
-{$template "/echarts"}
+{$template "/echarts"}
+
+<div class="ui four columns grid">
+    <div class="ui column">
+        <h4>今日拦截</h4>
+        <div class="value"><span>{{board.countDailyBlocks}}</span>次</div>
+    </div>
+
+    <div class="ui column">
+        <h4>今日验证码验证</h4>
+        <div class="value"><span>{{board.countDailyCaptcha}}</span>次</div>
+    </div>
+
+    <div class="ui column">
+        <h4>今日记录</h4>
+        <div class="value"><span>{{board.countDailyLogs}}</span>次</div>
+    </div>
+
+    <div class="ui column">
+        <h4>本周拦截</h4>
+        <div class="value"><span>{{board.countWeeklyBlocks}}</span>次</div>
+    </div>
+</div>
+
+<!-- 最近日志 -->
+<div v-if="accessLogs.length > 0">
+    <div class="ui divider"></div>
+    <h4>最新记录</h4>
+    <table class="ui table">
+        <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 class="ui divider"></div>
+</div>
+
+<!-- 按小时/天统计 -->
+<div class="ui menu tabular">
+    <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时趋势</a>
+    <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天趋势</a>
+    <div class="item right">
+        <span class="color-span" style="background: #F39494">拦截</span>
+        <span class="color-span" style="background: #FBD88A">验证码</span>
+        <span class="color-span" style="background: #879BD7">记录</span>
+    </div>
+</div>
+
+<div class="chart-box" id="hourly-chart" v-show="requestsTab == 'hourly'"></div>
+<div class="chart-box" id="daily-chart" v-show="requestsTab == 'daily'"></div>
+<div class="ui divider"></div>
+
+
+<h4>拦截类型分布</h4>
+<div class="chart-box" id="group-chart"></div>
--- a/web/views/@default/dashboard/boards/waf.js
+++ b/web/views/@default/dashboard/boards/waf.js
@@ -0,0 +1,166 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+
+		this.board.countDailyBlocks = teaweb.formatCount(this.board.countDailyBlocks)
+		this.board.countDailyCaptcha = teaweb.formatCount(this.board.countDailyCaptcha)
+		this.board.countDailyLogs = teaweb.formatCount(this.board.countDailyLogs)
+		this.board.countWeeklyBlocks = teaweb.formatCount(this.board.countWeeklyBlocks)
+
+		this.reloadHourlyChart()
+		this.reloadGroupChart()
+		this.reloadAccessLogs()
+	})
+
+	this.requestsTab = "hourly"
+
+	this.selectRequestsTab = function (tab) {
+		this.requestsTab = tab
+		this.$delay(function () {
+			switch (tab) {
+				case "hourly":
+					this.reloadHourlyChart()
+					break
+				case "daily":
+					this.reloadDailyChart()
+					break
+			}
+		})
+	}
+
+	this.reloadHourlyChart = function () {
+		let axis = teaweb.countAxis(this.hourlyStats, function (v) {
+			return [v.countLogs, v.countCaptcha, v.countBlocks].$max()
+		})
+		let that = this
+		this.reloadLineChart("hourly-chart", "按小时统计", this.hourlyStats, function (v) {
+			return v.hour.substring(8, 10)
+		}, function (args) {
+			let index = args.dataIndex
+			let hour = that.hourlyStats[index].hour.substring(0, 4) + "-" + that.hourlyStats[index].hour.substring(4, 6) + "-" + that.hourlyStats[index].hour.substring(6, 8) + " " + that.hourlyStats[index].hour.substring(8)
+			return hour + "时<br/>拦截: "
+				+ teaweb.formatNumber(that.hourlyStats[index].countBlocks) + "<br/>验证码: " + teaweb.formatNumber(that.hourlyStats[index].countCaptcha) + "<br/>记录: " + teaweb.formatNumber(that.hourlyStats[index].countLogs)
+		}, axis)
+	}
+
+	this.reloadDailyChart = function () {
+		let axis = teaweb.countAxis(this.dailyStats, function (v) {
+			return [v.countLogs, v.countCaptcha, v.countBlocks].$max()
+		})
+		let that = this
+		this.reloadLineChart("daily-chart", "按天统计", this.dailyStats, function (v) {
+			return v.day.substring(4, 6) + "月" + v.day.substring(6, 8) + "日"
+		}, function (args) {
+			let index = args.dataIndex
+			let day = that.dailyStats[index].day.substring(0, 4) + "-" + that.dailyStats[index].day.substring(4, 6) + "-" + that.dailyStats[index].day.substring(6, 8)
+			return day + "<br/>拦截: "
+				+ teaweb.formatNumber(that.dailyStats[index].countBlocks) + "<br/>验证码: " + teaweb.formatNumber(that.dailyStats[index].countCaptcha) + "<br/>记录: " + teaweb.formatNumber(that.dailyStats[index].countLogs)
+		}, axis)
+	}
+
+	this.reloadLineChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let chart = echarts.init(chartBox)
+		let option = {
+			xAxis: {
+				data: stats.map(xFunc)
+			},
+			yAxis: {
+				axisLabel: {
+					formatter: function (value) {
+						return value + axis.unit
+					}
+				}
+			},
+			tooltip: {
+				show: true,
+				trigger: "item",
+				formatter: tooltipFunc
+			},
+			grid: {
+				left: 42,
+				top: 10,
+				right: 20,
+				bottom: 20
+			},
+			series: [
+				{
+					name: name,
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countLogs / axis.divider;
+					}),
+					itemStyle: {
+						color: "#879BD7"
+					},
+					areaStyle: {},
+					stack: "总量"
+				},
+				{
+					name: name,
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countCaptcha / axis.divider;
+					}),
+					itemStyle: {
+						color: "#FBD88A"
+					},
+					areaStyle: {},
+					stack: "总量"
+				},
+				{
+					name: name,
+					type: "line",
+					data: stats.map(function (v) {
+						return v.countBlocks / axis.divider;
+					}),
+					itemStyle: {
+						color: "#F39494"
+					},
+					areaStyle: {},
+					stack: "总量"
+				}
+			],
+			animation: true
+		}
+		chart.setOption(option)
+		chart.resize()
+	}
+
+	this.reloadGroupChart = function () {
+		let axis = teaweb.countAxis(this.groupStats, function (v) {
+			return v.count
+		})
+		teaweb.renderBarChart({
+			id: "group-chart",
+			values: this.groupStats,
+			x: function (v) {
+				return v.name
+			},
+			value: function (v) {
+				return v.count / axis.divider
+			},
+			tooltip: function (args, stats) {
+				let index = args.dataIndex
+				return stats[index].name + ": " + stats[index].count
+			},
+			axis: axis
+		})
+	}
+
+	this.accessLogs = []
+	this.reloadAccessLogs = function () {
+		this.$post(".wafLogs")
+			.success(function (resp) {
+				if (resp.data.accessLogs != null) {
+					this.accessLogs = resp.data.accessLogs
+				}
+			})
+			.done(function () {
+				this.$delay(this.reloadAccessLogs, 10000)
+			})
+	}
+})
--- a/web/views/@default/dashboard/boards/waf.less
+++ b/web/views/@default/dashboard/boards/waf.less
@@ -43,4 +43,9 @@

 .chart-box {
 	height: 20em;
+}
+
+.color-span {
+	font-size: 0.8em;
+	padding: 4px;
 }