请求统计增加即时、按天

This commit is contained in:
刘祥超
2021-06-08 15:08:38 +08:00
parent 48e1e0b631
commit 7a57180ecd
17 changed files with 597 additions and 54 deletions

View File

@@ -0,0 +1,53 @@
// Copyright 2021 Liuxiangchao iwind.liu@gmail.com. All rights reserved.
package stat
import (
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
"github.com/iwind/TeaGo/maps"
"sort"
)
type DailyRequestsAction struct {
actionutils.ParentAction
}
func (this *DailyRequestsAction) Init() {
this.Nav("", "stat", "daily")
this.SecondMenu("index")
}
func (this *DailyRequestsAction) RunGet(params struct {
ServerId int64
}) {
this.Data["serverId"] = params.ServerId
resp, err := this.RPC().ServerDailyStatRPC().FindLatestServerDailyStats(this.AdminContext(), &pb.FindLatestServerDailyStatsRequest{
ServerId: params.ServerId,
Days: 30,
})
if err != nil {
this.ErrorPage(err)
return
}
sort.Slice(resp.Stats, func(i, j int) bool {
stat1 := resp.Stats[i]
stat2 := resp.Stats[j]
return stat1.Day < stat2.Day
})
statMaps := []maps.Map{}
for _, stat := range resp.Stats {
statMaps = append(statMaps, maps.Map{
"day": stat.Day[:4] + "-" + stat.Day[4:6] + "-" + stat.Day[6:8],
"bytes": stat.Bytes,
"cachedBytes": stat.CachedBytes,
"countRequests": stat.CountRequests,
"countCachedRequests": stat.CountCachedRequests,
})
}
this.Data["dailyStats"] = statMaps
this.Show()
}

View File

@@ -0,0 +1,54 @@
// Copyright 2021 Liuxiangchao iwind.liu@gmail.com. All rights reserved.
package stat
import (
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
"github.com/iwind/TeaGo/maps"
"sort"
)
type HourlyRequestsAction struct {
actionutils.ParentAction
}
func (this *HourlyRequestsAction) Init() {
this.Nav("", "stat", "hourly")
this.SecondMenu("index")
}
func (this *HourlyRequestsAction) RunGet(params struct {
ServerId int64
}) {
this.Data["serverId"] = params.ServerId
resp, err := this.RPC().ServerDailyStatRPC().FindLatestServerHourlyStats(this.AdminContext(), &pb.FindLatestServerHourlyStatsRequest{
ServerId: params.ServerId,
Hours: 24,
})
if err != nil {
this.ErrorPage(err)
return
}
sort.Slice(resp.Stats, func(i, j int) bool {
stat1 := resp.Stats[i]
stat2 := resp.Stats[j]
return stat1.Hour < stat2.Hour
})
statMaps := []maps.Map{}
for _, stat := range resp.Stats {
statMaps = append(statMaps, maps.Map{
"day": stat.Hour[:4] + "-" + stat.Hour[4:6] + "-" + stat.Hour[6:8],
"hour": stat.Hour[8:],
"bytes": stat.Bytes,
"cachedBytes": stat.CachedBytes,
"countRequests": stat.CountRequests,
"countCachedRequests": stat.CountCachedRequests,
})
}
this.Data["hourlyStats"] = statMaps
this.Show()
}

View File

@@ -14,17 +14,18 @@ type IndexAction struct {
}
func (this *IndexAction) Init() {
this.Nav("", "stat", "")
this.Nav("", "stat", "minutely")
this.SecondMenu("index")
}
func (this *IndexAction) RunGet(params struct {
ServerId int64
}) {
{
resp, err := this.RPC().ServerDailyStatRPC().FindServerHourlyStats(this.AdminContext(), &pb.FindServerHourlyStatsRequest{
this.Data["serverId"] = params.ServerId
resp, err := this.RPC().ServerDailyStatRPC().FindLatestServerMinutelyStats(this.AdminContext(), &pb.FindLatestServerMinutelyStatsRequest{
ServerId: params.ServerId,
Hours: 24,
Minutes: 120,
})
if err != nil {
this.ErrorPage(err)
@@ -34,21 +35,20 @@ func (this *IndexAction) RunGet(params struct {
sort.Slice(resp.Stats, func(i, j int) bool {
stat1 := resp.Stats[i]
stat2 := resp.Stats[j]
return stat1.Hour < stat2.Hour
return stat1.Minute < stat2.Minute
})
statMaps := []maps.Map{}
for _, stat := range resp.Stats {
statMaps = append(statMaps, maps.Map{
"day": stat.Hour[:4] + "-" + stat.Hour[4:6] + "-" + stat.Hour[6:8],
"hour": stat.Hour[8:],
"day": stat.Minute[:4] + "-" + stat.Minute[4:6] + "-" + stat.Minute[6:8],
"minute": stat.Minute[8:10] + ":" + stat.Minute[10:12],
"bytes": stat.Bytes,
"cachedBytes": stat.CachedBytes,
"countRequests": stat.CountRequests,
"countCachedRequests": stat.CountCachedRequests,
})
}
this.Data["hourlyStats"] = statMaps
}
this.Data["minutelyStats"] = statMaps
this.Show()
}

View File

@@ -14,6 +14,8 @@ func init() {
Helper(serverutils.NewServerHelper()).
Prefix("/servers/server/stat").
Get("", new(IndexAction)).
Get("/hourlyRequests", new(HourlyRequestsAction)).
Get("/dailyRequests", new(DailyRequestsAction)).
Get("/regions", new(RegionsAction)).
Get("/providers", new(ProvidersAction)).
Get("/clients", new(ClientsAction)).

View File

@@ -0,0 +1,6 @@
<first-menu>
<menu-item :href="'/servers/server/stat?serverId=' + serverId" code="minutely">即时</menu-item>
<menu-item :href="'/servers/server/stat/hourlyRequests?serverId=' + serverId" code="hourly">按小时</menu-item>
<menu-item :href="'/servers/server/stat/dailyRequests?serverId=' + serverId" code="daily">按天</menu-item>
</first-menu>
<div class="margin"></div>

View File

@@ -0,0 +1,4 @@
.chart-box {
height: 21em;
}
/*# sourceMappingURL=dailyRequests.css.map */

View File

@@ -0,0 +1 @@
{"version":3,"sources":["dailyRequests.less"],"names":[],"mappings":"AAAA;EACC,YAAA","file":"dailyRequests.css"}

View File

@@ -0,0 +1,19 @@
{$layout}
{$var "header"}
<!-- echart -->
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
{$end}
{$template "/left_menu"}
<div class="right-box">
{$template "requests_menu"}
<div class="ui column">
<h4>请求数统计(按天)</h4>
<div class="chart-box" id="daily-requests-chart"></div>
<h4>流量统计(按天)</h4>
<div class="chart-box" id="daily-traffic-chart"></div>
</div>
</div>

View File

@@ -0,0 +1,189 @@
Tea.context(function () {
this.$delay(function () {
let that = this
this.reloadRequestsChart("daily-requests-chart", "请求数统计", this.dailyStats, function (args) {
if (args.seriesIndex == 0) {
return that.dailyStats[args.dataIndex].day + " 请求数: " + teaweb.formatNumber(that.dailyStats[args.dataIndex].countRequests)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (that.dailyStats[args.dataIndex].countRequests > 0) {
ratio = Math.round(that.dailyStats[args.dataIndex].countCachedRequests * 10000 / that.dailyStats[args.dataIndex].countRequests) / 100
}
return that.dailyStats[args.dataIndex].day + " 缓存请求数: " + teaweb.formatNumber(that.dailyStats[args.dataIndex].countCachedRequests) + ", 命中率:" + ratio + "%"
}
return ""
})
this.reloadTrafficChart("daily-traffic-chart", "流量统计", this.dailyStats, function (args) {
if (args.seriesIndex == 0) {
return that.dailyStats[args.dataIndex].day + " 流量: " + teaweb.formatBytes(that.dailyStats[args.dataIndex].bytes)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (that.dailyStats[args.dataIndex].bytes > 0) {
ratio = Math.round(that.dailyStats[args.dataIndex].cachedBytes * 10000 / that.dailyStats[args.dataIndex].bytes) / 100
}
return that.dailyStats[args.dataIndex].day + " 缓存流量: " + teaweb.formatBytes(that.dailyStats[args.dataIndex].cachedBytes) + ", 命中率:" + ratio + "%"
}
return ""
})
window.addEventListener("resize", function () {
that.resizeChart("daily-requests-chart")
that.resizeChart("daily-traffic-chart")
})
})
this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.countAxis(stats, function (v) {
return Math.max(v.countRequests, v.countCachedRequests)
})
let chart = echarts.init(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
return v.day.substr(5)
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 40,
right: 20,
bottom: 20
},
series: [
{
name: "请求数",
type: "line",
data: stats.map(function (v) {
return v.countRequests / axis.divider
}),
itemStyle: {
color: "#9DD3E8"
},
areaStyle: {
color: "#9DD3E8"
}
},
{
name: "缓存请求数",
type: "line",
data: stats.map(function (v) {
return v.countCachedRequests / axis.divider
}),
itemStyle: {
color: "#61A0A8"
},
areaStyle: {
color: "#61A0A8"
}
}
],
legend: {
data: ['请求数', '缓存请求数']
},
animation: true
}
chart.setOption(option)
chart.resize()
}
this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.bytesAxis(stats, function (v) {
return Math.max(v.bytes, v.cachedBytes)
})
let chart = echarts.init(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
return v.day.substr(5)
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 40,
right: 20,
bottom: 20
},
series: [
{
name: "流量",
type: "line",
data: stats.map(function (v) {
return v.bytes / axis.divider
}),
itemStyle: {
color: "#9DD3E8"
},
areaStyle: {
color: "#9DD3E8"
}
},
{
name: "缓存流量",
type: "line",
data: stats.map(function (v) {
return v.cachedBytes / axis.divider
}),
itemStyle: {
color: "#61A0A8"
},
areaStyle: {
color: "#61A0A8"
}
}
],
legend: {
data: ['流量', '缓存流量']
},
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()
}
})

View File

@@ -0,0 +1,3 @@
.chart-box {
height: 21em;
}

View File

@@ -0,0 +1,4 @@
.chart-box {
height: 21em;
}
/*# sourceMappingURL=hourlyRequests.css.map */

View File

@@ -0,0 +1 @@
{"version":3,"sources":["hourlyRequests.less"],"names":[],"mappings":"AAAA;EACC,YAAA","file":"hourlyRequests.css"}

View File

@@ -0,0 +1,19 @@
{$layout}
{$var "header"}
<!-- echart -->
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
{$end}
{$template "/left_menu"}
<div class="right-box">
{$template "requests_menu"}
<div class="ui column">
<h4>请求数统计(小时)</h4>
<div class="chart-box" id="hourly-requests-chart"></div>
<h4>流量统计(小时)</h4>
<div class="chart-box" id="hourly-traffic-chart"></div>
</div>
</div>

View File

@@ -0,0 +1,189 @@
Tea.context(function () {
this.$delay(function () {
let that = this
this.reloadRequestsChart("hourly-requests-chart", "请求数统计", this.hourlyStats, function (args) {
if (args.seriesIndex == 0) {
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countRequests)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (that.hourlyStats[args.dataIndex].countRequests > 0) {
ratio = Math.round(that.hourlyStats[args.dataIndex].countCachedRequests * 10000 / that.hourlyStats[args.dataIndex].countRequests) / 100
}
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countCachedRequests) + ", 命中率:" + ratio + "%"
}
return ""
})
this.reloadTrafficChart("hourly-traffic-chart", "流量统计", this.hourlyStats, function (args) {
if (args.seriesIndex == 0) {
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].bytes)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (that.hourlyStats[args.dataIndex].bytes > 0) {
ratio = Math.round(that.hourlyStats[args.dataIndex].cachedBytes * 10000 / that.hourlyStats[args.dataIndex].bytes) / 100
}
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].cachedBytes) + ", 命中率:" + ratio + "%"
}
return ""
})
window.addEventListener("resize", function () {
that.resizeChart("hourly-requests-chart")
that.resizeChart("hourly-traffic-chart")
})
})
this.reloadRequestsChart = function (chartId, name, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.countAxis(stats, function (v) {
return Math.max(v.countRequests, v.countCachedRequests)
})
let chart = echarts.init(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
return v.hour
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 40,
right: 20,
bottom: 20
},
series: [
{
name: "请求数",
type: "line",
data: stats.map(function (v) {
return v.countRequests / axis.divider
}),
itemStyle: {
color: "#9DD3E8"
},
areaStyle: {
color: "#9DD3E8"
}
},
{
name: "缓存请求数",
type: "line",
data: stats.map(function (v) {
return v.countCachedRequests / axis.divider
}),
itemStyle: {
color: "#61A0A8"
},
areaStyle: {
color: "#61A0A8"
}
}
],
legend: {
data: ['请求数', '缓存请求数']
},
animation: true
}
chart.setOption(option)
chart.resize()
}
this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
let chartBox = document.getElementById(chartId)
if (chartBox == null) {
return
}
let axis = teaweb.bytesAxis(stats, function (v) {
return Math.max(v.bytes, v.cachedBytes)
})
let chart = echarts.init(chartBox)
let option = {
xAxis: {
data: stats.map(function (v) {
return v.hour
})
},
yAxis: {
axisLabel: {
formatter: function (value) {
return value + axis.unit
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: tooltipFunc
},
grid: {
left: 50,
top: 40,
right: 20,
bottom: 20
},
series: [
{
name: "流量",
type: "line",
data: stats.map(function (v) {
return v.bytes / axis.divider
}),
itemStyle: {
color: "#9DD3E8"
},
areaStyle: {
color: "#9DD3E8"
}
},
{
name: "缓存流量",
type: "line",
data: stats.map(function (v) {
return v.cachedBytes / axis.divider
}),
itemStyle: {
color: "#61A0A8"
},
areaStyle: {
color: "#61A0A8"
}
}
],
legend: {
data: ['流量', '缓存流量']
},
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()
}
})

View File

@@ -0,0 +1,3 @@
.chart-box {
height: 21em;
}

View File

@@ -7,11 +7,13 @@
{$template "/left_menu"}
<div class="right-box">
<div class="ui column">
<h4>请求数统计(小时)</h4>
<div class="chart-box" id="hourly-requests-chart"></div>
{$template "requests_menu"}
<h4>流量统计(小时)</h4>
<div class="chart-box" id="hourly-traffic-chart"></div>
<div class="ui column">
<h4>请求数统计(即时)</h4>
<div class="chart-box" id="minutely-requests-chart"></div>
<h4>流量统计(即时)</h4>
<div class="chart-box" id="minutely-traffic-chart"></div>
</div>
</div>

View File

@@ -2,35 +2,35 @@ Tea.context(function () {
this.$delay(function () {
let that = this
this.reloadRequestsChart("hourly-requests-chart", "请求数统计", this.hourlyStats, function (args) {
this.reloadRequestsChart("minutely-requests-chart", "请求数统计", this.minutelyStats, function (args) {
if (args.seriesIndex == 0) {
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countRequests)
return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + " 请求数: " + teaweb.formatNumber(that.minutelyStats[args.dataIndex].countRequests)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (that.hourlyStats[args.dataIndex].countRequests > 0) {
ratio = Math.round(that.hourlyStats[args.dataIndex].countCachedRequests * 10000 / that.hourlyStats[args.dataIndex].countRequests) / 100
if (that.minutelyStats[args.dataIndex].countRequests > 0) {
ratio = Math.round(that.minutelyStats[args.dataIndex].countCachedRequests * 10000 / that.minutelyStats[args.dataIndex].countRequests) / 100
}
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存请求数: " + teaweb.formatNumber(that.hourlyStats[args.dataIndex].countCachedRequests) + ", 命中率:" + ratio + "%"
return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + " 缓存请求数: " + teaweb.formatNumber(that.minutelyStats[args.dataIndex].countCachedRequests) + ", 命中率:" + ratio + "%"
}
return ""
})
this.reloadTrafficChart("hourly-traffic-chart", "流量统计", this.hourlyStats, function (args) {
this.reloadTrafficChart("minutely-traffic-chart", "流量统计", this.minutelyStats, function (args) {
if (args.seriesIndex == 0) {
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].bytes)
return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + " 流量: " + teaweb.formatBytes(that.minutelyStats[args.dataIndex].bytes)
}
if (args.seriesIndex == 1) {
let ratio = 0
if (that.hourlyStats[args.dataIndex].bytes > 0) {
ratio = Math.round(that.hourlyStats[args.dataIndex].cachedBytes * 10000 / that.hourlyStats[args.dataIndex].bytes) / 100
if (that.minutelyStats[args.dataIndex].bytes > 0) {
ratio = Math.round(that.minutelyStats[args.dataIndex].cachedBytes * 10000 / that.minutelyStats[args.dataIndex].bytes) / 100
}
return that.hourlyStats[args.dataIndex].day + " " + that.hourlyStats[args.dataIndex].hour + " 缓存流量: " + teaweb.formatBytes(that.hourlyStats[args.dataIndex].cachedBytes) + ", 命中率:" + ratio + "%"
return that.minutelyStats[args.dataIndex].day + " " + that.minutelyStats[args.dataIndex].minute + " 缓存流量: " + teaweb.formatBytes(that.minutelyStats[args.dataIndex].cachedBytes) + ", 命中率:" + ratio + "%"
}
return ""
})
window.addEventListener("resize", function () {
that.resizeChart("hourly-requests-chart")
that.resizeChart("hourly-traffic-chart")
that.resizeChart("minutely-requests-chart")
that.resizeChart("minutely-traffic-chart")
})
})
@@ -48,11 +48,8 @@ Tea.context(function () {
let option = {
xAxis: {
data: stats.map(function (v) {
return v.hour
}),
axisLabel: {
interval: 0
}
return v.minute
})
},
yAxis: {
axisLabel: {
@@ -123,11 +120,8 @@ Tea.context(function () {
let option = {
xAxis: {
data: stats.map(function (v) {
return v.hour
}),
axisLabel: {
interval: 0
}
return v.minute
})
},
yAxis: {
axisLabel: {