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

开源版本也显示域名排行、缓存流量趋势、攻击流量趋势

Browse Source
This commit is contained in:
GoEdgeLab
2021-09-19 16:10:52 +08:00
parent ba39c6e148
commit 2f1e5bad43
3 changed files with 165 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
web/views/@default/dashboard/index.js
View File

@@ -1,8 +1,23 @@
Tea.context(function () {
this.isLoading = true
this.trafficTab = "hourly"
this.metricCharts = []
this.dashboard = {}
this.$delay(function () {
this.reloadHourlyTrafficChart()
this.$post("$")
.success(function (resp) {
for (let k in resp.data) {
this[k] = resp.data[k]
}
this.isLoading = false
this.$delay(function () {
this.reloadHourlyTrafficChart()
this.reloadTopDomainsChart()
})
})
})
this.selectTrafficTab = function (tab) {
@@ -19,16 +34,48 @@ Tea.context(function () {
}
this.reloadHourlyTrafficChart = function () {
let axis = teaweb.bytesAxis(this.hourlyTrafficStats, function (v) {
let stats = this.hourlyTrafficStats
this.reloadTrafficChart("hourly-traffic-chart-box", stats, function (args) {
let index = args.dataIndex
let cachedRatio = 0
let attackRatio = 0
if (stats[index].bytes > 0) {
cachedRatio = Math.round(stats[index].cachedBytes * 10000 / stats[index].bytes) / 100
attackRatio = Math.round(stats[index].attackBytes * 10000 / stats[index].bytes) / 100
}
return stats[index].day + " " + stats[index].hour + "时<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
})
}
this.reloadDailyTrafficChart = function () {
let stats = this.dailyTrafficStats
this.reloadTrafficChart("daily-traffic-chart-box", stats, function (args) {
let index = args.dataIndex
let cachedRatio = 0
let attackRatio = 0
if (stats[index].bytes > 0) {
cachedRatio = Math.round(stats[index].cachedBytes * 10000 / stats[index].bytes) / 100
attackRatio = Math.round(stats[index].attackBytes * 10000 / stats[index].bytes) / 100
}
return stats[index].day + "<br/>总流量：" + teaweb.formatBytes(stats[index].bytes) + "<br/>缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "<br/>拦截比例：" + attackRatio + "%"
})
}
this.reloadTrafficChart = function (chartId, stats, tooltipFunc) {
let axis = teaweb.bytesAxis(stats, function (v) {
return v.bytes
})
let chartBox = document.getElementById("hourly-traffic-chart-box")
let chartBox = document.getElementById(chartId)
let chart = teaweb.initChart(chartBox)
let that = this
let option = {
xAxis: {
data: this.hourlyTrafficStats.map(function (v) {
return v.hour;
data: stats.map(function (v) {
if (v.hour != null) {
return v.hour
}
return v.day
})
},
yAxis: {
@@ -41,21 +88,19 @@ Tea.context(function () {
tooltip: {
show: true,
trigger: "item",
formatter: function (args) {
let index = args.dataIndex
return that.hourlyTrafficStats[index].hour + "时：" + teaweb.formatBytes(that.hourlyTrafficStats[index].bytes)
}
formatter: tooltipFunc
},
grid: {
left: 40,
top: 10,
right: 20
left: 50,
top: 40,
right: 20,
bottom: 20
},
series: [
{
name: "流量",
name: "总流量",
type: "line",
data: this.hourlyTrafficStats.map(function (v) {
data: stats.map(function (v) {
return v.bytes / axis.divider;
}),
itemStyle: {
@@ -68,71 +113,71 @@ Tea.context(function () {
color: "#9DD3E8"
},
smooth: true
},
{
name: "缓存流量",
type: "line",
data: stats.map(function (v) {
return v.cachedBytes / axis.divider;
}),
itemStyle: {
color: "#61A0A8"
},
lineStyle: {
color: "#61A0A8"
},
areaStyle: {},
smooth: true
},
{
name: "攻击流量",
type: "line",
data: stats.map(function (v) {
return v.attackBytes / axis.divider;
}),
itemStyle: {
color: "#F39494"
},
areaStyle: {
color: "#F39494"
},
smooth: true
}
],
legend: {
data: ["总流量", "缓存流量", "攻击流量"]
},
animation: false
}
chart.setOption(option)
chart.resize()
}
this.reloadDailyTrafficChart = function () {
let axis = teaweb.bytesAxis(this.dailyTrafficStats, function (v) {
return v.bytes
})
let chartBox = document.getElementById("daily-traffic-chart-box")
let chart = teaweb.initChart(chartBox)
let that = this
let option = {
xAxis: {
data: this.dailyTrafficStats.map(function (v) {
return v.day;
})
// 域名排行
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
},
yAxis: {
axisLabel: {
formatter: function (v) {
return v + axis.unit
}
}
tooltip: function (args, stats) {
return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
},
tooltip: {
show: true,
trigger: "item",
formatter: function (args) {
let index = args.dataIndex
return that.dailyTrafficStats[index].day + "：" + teaweb.formatBytes(that.dailyTrafficStats[index].bytes)
}
value: function (v) {
return v.countRequests / axis.divider;
},
grid: {
left: 40,
top: 10,
right: 20
},
series: [
{
name: "流量",
type: "line",
data: this.dailyTrafficStats.map(function (v) {
return v.bytes / axis.divider;
}),
itemStyle: {
color: "#9DD3E8"
},
lineStyle: {
color: "#9DD3E8"
},
areaStyle: {
color: "#9DD3E8"
},
smooth: true
}
],
animation: false
}
chart.setOption(option)
chart.resize()
axis: axis,
click: function (args, stats) {
let index = args.dataIndex
window.location = "/servers/server?serverId=" + stats[index].serverId
}
})
}
/**