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

实现数据看板--WAF

Browse Source
This commit is contained in:
GoEdgeLab
2021-07-12 16:56:56 +08:00
parent 6375b543f3
commit fad6b30a8e
11 changed files with 527 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
web/views/@default/servers/server/stat/waf.js
View File

@@ -1,198 +1,182 @@
Tea.context(function () {
this.$delay(function () {
let that = this
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) {
this.countDailyBlock = teaweb.formatCount(this.countDailyBlock)
this.countDailyCaptcha = teaweb.formatCount(this.countDailyCaptcha)
this.countDailyLog = teaweb.formatCount(this.countDailyLog)
this.countWeeklyBlock = teaweb.formatCount(this.countWeeklyBlock)
this.countMonthlyBlock = teaweb.formatCount(this.countMonthlyBlock)
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)
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 dailyAxis = teaweb.countAxis(this.totalDailyStats, function (v) {
return v.count
})
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)
}, dailyAxis)
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)
let groupAxis = teaweb.countAxis(this.groupStats, function (v) {
return v.count
})
let total = this.groupStats.$sum(function (k, v) {
return v.count
})
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].count * 100 * 100 / total) / 100) + "%"
}
return that.groupStats[args.dataIndex].group.name + ": " + teaweb.formatNumber(that.groupStats[args.dataIndex].count) + percent
}, groupAxis)
window.addEventListener("resize", function () {
that.resizeChart("daily-chart")
that.resizeChart("group-chart")
})
})
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.reloadLineChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) {
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 + axis.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 / axis.divider;
}),
areaStyle: {},
itemStyle: {
color: "#9DD3E8"
}
},
{
name: name,
type: "line",
data: this.logDailyStats.map(function (v) {
return v.count / axis.divider;
}),
itemStyle: {
color: "#879BD7"
}
},
{
name: name,
type: "line",
data: this.blockDailyStats.map(function (v) {
return v.count / axis.divider;
}),
itemStyle: {
color: "#F39494"
}
},
{
name: name,
type: "line",
data: this.captchaDailyStats.map(function (v) {
return v.count / axis.divider;
}),
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.reloadBarChart = 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: 40,
top: 10,
right: 20,
bottom: 20
},
series: [
{
name: name,
type: "bar",
data: stats.map(function (v) {
return v.count / axis.divider;
}),
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
}
this.resizeChart = function (chartId) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let chart = echarts.init(chartBox)
chart.resize()
}
})