From 2f1e5bad437a75194d6857f3537c334ba8db8b7e Mon Sep 17 00:00:00 2001 From: GoEdgeLab Date: Sun, 19 Sep 2021 16:10:52 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E6=BA=90=E7=89=88=E6=9C=AC=E4=B9=9F?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=9F=9F=E5=90=8D=E6=8E=92=E8=A1=8C=E3=80=81?= =?UTF-8?q?=E7=BC=93=E5=AD=98=E6=B5=81=E9=87=8F=E8=B6=8B=E5=8A=BF=E3=80=81?= =?UTF-8?q?=E6=94=BB=E5=87=BB=E6=B5=81=E9=87=8F=E8=B6=8B=E5=8A=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/actions/default/dashboard/index.go | 41 +++- web/views/@default/dashboard/index.html | 23 ++- web/views/@default/dashboard/index.js | 181 +++++++++++------- 3 files changed, 165 insertions(+), 80 deletions(-) diff --git a/internal/web/actions/default/dashboard/index.go b/internal/web/actions/default/dashboard/index.go index f9cde459..3b8187bb 100644 --- a/internal/web/actions/default/dashboard/index.go +++ b/internal/web/actions/default/dashboard/index.go @@ -40,6 +40,10 @@ func (this *IndexAction) RunGet(params struct{}) { } } + this.Show() +} + +func (this *IndexAction) RunPost(params struct{}) { // 读取看板数据 resp, err := this.RPC().AdminRPC().ComposeAdminDashboard(this.AdminContext(), &pb.ComposeAdminDashboardRequest{ ApiVersion: teaconst.APINodeVersion, @@ -50,7 +54,7 @@ func (this *IndexAction) RunGet(params struct{}) { } this.Data["dashboard"] = maps.Map{ "defaultClusterId": resp.DefaultNodeClusterId, - + "countServers": resp.CountServers, "countNodeClusters": resp.CountNodeClusters, "countNodes": resp.CountNodes, @@ -85,8 +89,14 @@ func (this *IndexAction) RunGet(params struct{}) { statMaps := []maps.Map{} for _, stat := range resp.HourlyTrafficStats { statMaps = append(statMaps, maps.Map{ - "bytes": stat.Bytes, - "hour": stat.Hour[8:], + "bytes": stat.Bytes, + "cachedBytes": stat.CachedBytes, + "countRequests": stat.CountRequests, + "countCachedRequests": stat.CountCachedRequests, + "countAttackRequests": stat.CountAttackRequests, + "attackBytes": stat.AttackBytes, + "day": stat.Hour[4:6] + "月" + stat.Hour[6:8] + "日", + "hour": stat.Hour[8:], }) } this.Data["hourlyTrafficStats"] = statMaps @@ -97,8 +107,13 @@ func (this *IndexAction) RunGet(params struct{}) { statMaps := []maps.Map{} for _, stat := range resp.DailyTrafficStats { statMaps = append(statMaps, maps.Map{ - "bytes": stat.Bytes, - "day": stat.Day[4:6] + "月" + stat.Day[6:] + "日", + "bytes": stat.Bytes, + "cachedBytes": stat.CachedBytes, + "countRequests": stat.CountRequests, + "countCachedRequests": stat.CountCachedRequests, + "countAttackRequests": stat.CountAttackRequests, + "attackBytes": stat.AttackBytes, + "day": stat.Day[4:6] + "月" + stat.Day[6:] + "日", }) } this.Data["dailyTrafficStats"] = statMaps @@ -172,6 +187,20 @@ func (this *IndexAction) RunGet(params struct{}) { } } + // 域名排行 + { + var statMaps = []maps.Map{} + for _, stat := range resp.TopDomainStats { + statMaps = append(statMaps, maps.Map{ + "serverId": stat.ServerId, + "domain": stat.Domain, + "countRequests": stat.CountRequests, + "bytes": stat.Bytes, + }) + } + this.Data["topDomainStats"] = statMaps + } + // 指标 { var chartMaps = []maps.Map{} @@ -210,5 +239,5 @@ func (this *IndexAction) RunGet(params struct{}) { this.Data["metricCharts"] = chartMaps } - this.Show() + this.Success() } diff --git a/web/views/@default/dashboard/index.html b/web/views/@default/dashboard/index.html index 4a7cea71..5bd26583 100644 --- a/web/views/@default/dashboard/index.html +++ b/web/views/@default/dashboard/index.html @@ -1,24 +1,31 @@ {$layout} {$template "/echarts"} + +
+
+
  数据加载中... +
+
+ -
+
还没有在集群中添加节点，现在去添加？添加节点后才可部署网站服务。
-
+
升级提醒：有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本
-
+
升级提醒：有 {{apiNodeUpgradeInfo.count}} 个API节点需要升级到 v{{apiNodeUpgradeInfo.version}} 版本
-
+

集群

{{dashboard.countNodeClusters}}个
@@ -50,9 +57,9 @@
-
+
-
+
24小时流量趋势 15天流量趋势
@@ -63,6 +70,10 @@
+ +

域名访问排行 （24小时）

+
+
diff --git a/web/views/@default/dashboard/index.js b/web/views/@default/dashboard/index.js index 59d80406..acb105d2 100644 --- a/web/views/@default/dashboard/index.js +++ b/web/views/@default/dashboard/index.js @@ -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 + "时
总流量：" + teaweb.formatBytes(stats[index].bytes) + "
缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "
缓存命中率：" + cachedRatio + "%
拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "
拦截比例：" + 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 + "
总流量：" + teaweb.formatBytes(stats[index].bytes) + "
缓存流量：" + teaweb.formatBytes(stats[index].cachedBytes) + "
缓存命中率：" + cachedRatio + "%
拦截攻击流量：" + teaweb.formatBytes(stats[index].attackBytes) + "
拦截比例：" + 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 + "
请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "
流量：" + 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 + } + }) } /**