TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-12-25 11:36:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

实现WAF统计

Browse Source
This commit is contained in:
刘祥超
2021-01-26 18:41:23 +08:00
parent f7336235a1
commit 2f21effdbf
9 changed files with 391 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/views/@default/servers/server/stat/waf.css Normal file
View File

@@ -0,0 +1,26 @@
.grid {
margin-top: 2em !important;
margin-left: 2em !important;
}
.grid .column {
margin-bottom: 2em;
border-right: 1px #eee solid;
}
.grid .column div.value {
margin-top: 1.5em;
}
.grid .column div.value span {
font-size: 2em;
margin-right: 0.2em;
}
.grid .column.no-border {
border-right: 0;
}
.chart-box {
height: 20em;
}
h4 .color-span {
font-size: 0.6em;
padding: 2px 4px;
}
/*# sourceMappingURL=waf.css.map */

1
web/views/@default/servers/server/stat/waf.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA;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;;AAIF;EACC,YAAA;;AAGD,EAAG;EACF,gBAAA;EACA,gBAAA","file":"waf.css"}

47
web/views/@default/servers/server/stat/waf.html Normal file
View File

@@ -0,0 +1,47 @@
{$layout}
{$var "header"}
<!-- echart -->
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
{$end}
{$template "/left_menu"}
<div class="right-box">
<div class="ui three columns grid">
<div class="ui column">
<h4>今日拦截</h4>
<div class="value"><span>{{countDailyBlock}}</span>次</div>
</div>
<div class="ui column">
<h4>今日验证码验证</h4>
<div class="value"><span>{{countDailyCaptcha}}</span>次</div>
</div>
<div class="ui column no-border">
<h4>今日记录</h4>
<div class="value"><span>{{countDailyLog}}</span>次</div>
</div>
<div class="ui column">
<h4>本周拦截</h4>
<div class="value"><span>{{countWeeklyBlock}}</span>次</div>
</div>
<div class="ui column no-border">
<h4>本月拦截</h4>
<div class="value"><span>{{countMonthlyBlock}}</span>次</div>
</div>
</div>
<h4>近15日趋势
<span class="color-span" style="background: #9DD3E8">全部</span>
<span class="color-span" style="background: #F39494">拦截</span>
<span class="color-span" style="background: #FBD88A">验证码</span>
<span class="color-span" style="background: #879BD7">记录</span>
</h4>
<div class="chart-box" id="daily-chart"></div>
<h4>拦截类型分布</h4>
<div class="chart-box" id="group-chart"></div>
</div>

198
web/views/@default/servers/server/stat/waf.js Normal file
View File

@@ -0,0 +1,198 @@
Tea.context(function () {
this.$delay(function () {
let that = this
this.totalDailyStats = this.logDailyStats.map(function (v, k) {
return {
day: v.day,
count: that.logDailyStats[k].count + that.blockDailyStats[k].count + that.captchaDailyStats[k].count
}
})
let dailyUnit = this.processMaxUnit(this.totalDailyStats)
this.reloadLineChart("daily-chart", "规则分组", this.totalDailyStats, function (v) {
return v.day.substring(4, 6) + "-" + v.day.substring(6)
}, function (args) {
return that.logDailyStats[args.dataIndex].day.substring(4, 6) + "-" + that.logDailyStats[args.dataIndex].day.substring(6) + ": 拦截: "
+ teaweb.formatNumber(that.blockDailyStats[args.dataIndex].count) + ", 验证码: " + teaweb.formatNumber(that.captchaDailyStats[args.dataIndex].count) + ", 记录: " + teaweb.formatNumber(that.logDailyStats[args.dataIndex].count)
}, dailyUnit)
let groupUnit = this.processMaxUnit(this.groupStats)
let total = this.groupStats.$sum(function (k, v) {
return v.rawCount
})
this.reloadBarChart("group-chart", "规则分组", this.groupStats, function (v) {
return v.group.name
}, function (args) {
let percent = ""
if (total > 0) {
percent = ", 占比: " + (Math.round(that.groupStats[args.dataIndex].rawCount * 100 * 100 / total) / 100) + "%"
}
return that.groupStats[args.dataIndex].group.name + ": " + teaweb.formatNumber(that.groupStats[args.dataIndex].rawCount) + percent
}, groupUnit)
window.addEventListener("resize", function () {
that.resizeChart("daily-chart")
that.resizeChart("group-chart")
})
})
this.reloadLineChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let that = this
let chart = echarts.init(chartBox)
let option = {
xAxis: {
data: stats.map(xFunc)
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 40,
top: 10,
right: 20,
bottom: 20
},
series: [
{
name: name,
type: "line",
data: this.totalDailyStats.map(function (v, index) {
return that.totalDailyStats[index].count;
}),
areaStyle: {},
itemStyle: {
color: "#9DD3E8"
}
},
{
name: name,
type: "line",
data: this.logDailyStats.map(function (v) {
return v.count;
}),
itemStyle: {
color: "#879BD7"
}
},
{
name: name,
type: "line",
data: this.blockDailyStats.map(function (v) {
return v.count;
}),
itemStyle: {
color: "#F39494"
}
},
{
name: name,
type: "line",
data: this.captchaDailyStats.map(function (v) {
return v.count;
}),
itemStyle: {
color: "#FBD88A"
}
}
],
animation: true
}
chart.setOption(option)
chart.resize()
}
this.reloadBarChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) {
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 + unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 40,
top: 10,
right: 20,
bottom: 20
},
series: [
{
name: name,
type: "bar",
data: stats.map(function (v) {
return v.count;
}),
itemStyle: {
color: "#9DD3E8"
},
barWidth: "20em"
}
],
animation: true
}
chart.setOption(option)
chart.resize()
}
this.resizeChart = function (chartId) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let chart = echarts.init(chartBox)
chart.resize()
}
this.processMaxUnit = function (stats) {
let max = stats.$map(function (k, v) {
return v.count
}).$max()
let divider = 0
let unit = ""
if (max >= 1000 * 1000 * 1000) {
unit = "B"
divider = 1000 * 1000 * 1000
} else if (max >= 1000 * 1000) {
unit = "M"
divider = 1000 * 1000
} else if (max >= 1000) {
unit = "K"
divider = 1000
}
stats.forEach(function (v) {
v.rawCount = v.count
if (divider > 0) {
v.count /= divider
}
})
return unit
}
})

31
web/views/@default/servers/server/stat/waf.less Normal file
View File

@@ -0,0 +1,31 @@
.grid {
margin-top: 2em !important;
margin-left: 2em !important;
.column {
margin-bottom: 2em;
border-right: 1px #eee solid;
div.value {
margin-top: 1.5em;
span {
font-size: 2em;
margin-right: 0.2em;
}
}
}
.column.no-border {
border-right: 0;
}
}
.chart-box {
height: 20em;
}
h4 .color-span {
font-size: 0.6em;
padding: 2px 4px;
}