mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-04 05:00:25 +08:00
优化看板打开速度/删除一些不必要的文件
This commit is contained in:
GoEdgeLab
@@ -484,6 +484,10 @@ func (this *RPCClient) ServerStatBoardRPC() pb.ServerStatBoardServiceClient {
|
|||||||
return pb.NewServerStatBoardServiceClient(this.pickConn())
|
return pb.NewServerStatBoardServiceClient(this.pickConn())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func (this *RPCClient) ServerDomainHourlyStatRPC() pb.ServerDomainHourlyStatServiceClient {
|
||||||
|
return pb.NewServerDomainHourlyStatServiceClient(this.pickConn())
|
||||||
|
}
|
||||||
|
|
||||||
func (this *RPCClient) ServerStatBoardChartRPC() pb.ServerStatBoardChartServiceClient {
|
func (this *RPCClient) ServerStatBoardChartRPC() pb.ServerStatBoardChartServiceClient {
|
||||||
return pb.NewServerStatBoardChartServiceClient(this.pickConn())
|
return pb.NewServerStatBoardChartServiceClient(this.pickConn())
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,180 +0,0 @@
|
|||||||
package boards
|
|
||||||
|
|
||||||
import (
|
|
||||||
"fmt"
|
|
||||||
teaconst "github.com/TeaOSLab/EdgeAdmin/internal/const"
|
|
||||||
"github.com/TeaOSLab/EdgeAdmin/internal/utils/numberutils"
|
|
||||||
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
|
|
||||||
"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
|
|
||||||
"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
|
|
||||||
"github.com/iwind/TeaGo/maps"
|
|
||||||
"strconv"
|
|
||||||
)
|
|
||||||
|
|
||||||
type IndexAction struct {
|
|
||||||
actionutils.ParentAction
|
|
||||||
}
|
|
||||||
|
|
||||||
func (this *IndexAction) Init() {
|
|
||||||
this.Nav("", "board", "")
|
|
||||||
this.SecondMenu("index")
|
|
||||||
}
|
|
||||||
|
|
||||||
func (this *IndexAction) RunGet(params struct {
|
|
||||||
ServerId int64
|
|
||||||
}) {
|
|
||||||
if !teaconst.IsPlus {
|
|
||||||
this.RedirectURL("/servers/server/stat?serverId=" + strconv.FormatInt(params.ServerId, 10))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
serverResp, err := this.RPC().ServerRPC().FindEnabledServer(this.AdminContext(), &pb.FindEnabledServerRequest{ServerId: params.ServerId})
|
|
||||||
if err != nil {
|
|
||||||
this.ErrorPage(err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var server = serverResp.Server
|
|
||||||
if server == nil {
|
|
||||||
this.NotFound("server", params.ServerId)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.Data["server"] = maps.Map{
|
|
||||||
"id": server.Id,
|
|
||||||
"name": server.Name,
|
|
||||||
}
|
|
||||||
|
|
||||||
this.Show()
|
|
||||||
}
|
|
||||||
|
|
||||||
func (this *IndexAction) RunPost(params struct {
|
|
||||||
ServerId int64
|
|
||||||
}) {
|
|
||||||
resp, err := this.RPC().ServerStatBoardRPC().ComposeServerStatBoard(this.AdminContext(), &pb.ComposeServerStatBoardRequest{ServerId: params.ServerId})
|
|
||||||
if err != nil {
|
|
||||||
this.ErrorPage(err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 24小时流量趋势
|
|
||||||
{
|
|
||||||
var statMaps = []maps.Map{}
|
|
||||||
for _, stat := range resp.HourlyTrafficStats {
|
|
||||||
statMaps = append(statMaps, maps.Map{
|
|
||||||
"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["hourlyStats"] = statMaps
|
|
||||||
}
|
|
||||||
|
|
||||||
// 15天流量趋势
|
|
||||||
{
|
|
||||||
var statMaps = []maps.Map{}
|
|
||||||
for _, stat := range resp.DailyTrafficStats {
|
|
||||||
statMaps = append(statMaps, maps.Map{
|
|
||||||
"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["dailyStats"] = statMaps
|
|
||||||
}
|
|
||||||
|
|
||||||
// 节点排行
|
|
||||||
{
|
|
||||||
var statMaps = []maps.Map{}
|
|
||||||
for _, stat := range resp.TopNodeStats {
|
|
||||||
statMaps = append(statMaps, maps.Map{
|
|
||||||
"nodeId": stat.NodeId,
|
|
||||||
"nodeName": stat.NodeName,
|
|
||||||
"countRequests": stat.CountRequests,
|
|
||||||
"bytes": stat.Bytes,
|
|
||||||
"countAttackRequests": stat.CountAttackRequests,
|
|
||||||
"attackBytes": stat.AttackBytes,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.Data["topNodeStats"] = statMaps
|
|
||||||
}
|
|
||||||
|
|
||||||
// 域名排行
|
|
||||||
{
|
|
||||||
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,
|
|
||||||
"countAttackRequests": stat.CountAttackRequests,
|
|
||||||
"attackBytes": stat.AttackBytes,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.Data["topDomainStats"] = statMaps
|
|
||||||
}
|
|
||||||
|
|
||||||
// 地区排行
|
|
||||||
{
|
|
||||||
var countryMaps = []maps.Map{}
|
|
||||||
for _, stat := range resp.TopCountryStats {
|
|
||||||
countryMaps = append(countryMaps, maps.Map{
|
|
||||||
"name": stat.CountryName,
|
|
||||||
"bytes": stat.Bytes,
|
|
||||||
"formattedBytes": numberutils.FormatBytes(stat.Bytes),
|
|
||||||
"countRequests": stat.CountRequests,
|
|
||||||
"countAttackRequests": stat.CountAttackRequests,
|
|
||||||
"percent": fmt.Sprintf("%.2f", stat.Percent),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.Data["topCountryStats"] = countryMaps
|
|
||||||
}
|
|
||||||
|
|
||||||
// 指标
|
|
||||||
{
|
|
||||||
var chartMaps = []maps.Map{}
|
|
||||||
for _, chart := range resp.MetricDataCharts {
|
|
||||||
var statMaps = []maps.Map{}
|
|
||||||
for _, stat := range chart.MetricStats {
|
|
||||||
statMaps = append(statMaps, maps.Map{
|
|
||||||
"keys": stat.Keys,
|
|
||||||
"time": stat.Time,
|
|
||||||
"value": stat.Value,
|
|
||||||
"count": stat.SumCount,
|
|
||||||
"total": stat.SumTotal,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
chartMaps = append(chartMaps, maps.Map{
|
|
||||||
"chart": maps.Map{
|
|
||||||
"id": chart.MetricChart.Id,
|
|
||||||
"name": chart.MetricChart.Name,
|
|
||||||
"widthDiv": chart.MetricChart.WidthDiv,
|
|
||||||
"isOn": chart.MetricChart.IsOn,
|
|
||||||
"maxItems": chart.MetricChart.MaxItems,
|
|
||||||
"type": chart.MetricChart.Type,
|
|
||||||
},
|
|
||||||
"item": maps.Map{
|
|
||||||
"id": chart.MetricChart.MetricItem.Id,
|
|
||||||
"name": chart.MetricChart.MetricItem.Name,
|
|
||||||
"period": chart.MetricChart.MetricItem.Period,
|
|
||||||
"periodUnit": chart.MetricChart.MetricItem.PeriodUnit,
|
|
||||||
"valueType": serverconfigs.FindMetricValueType(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
|
|
||||||
"valueTypeName": serverconfigs.FindMetricValueName(chart.MetricChart.MetricItem.Category, chart.MetricChart.MetricItem.Value),
|
|
||||||
"keys": chart.MetricChart.MetricItem.Keys,
|
|
||||||
},
|
|
||||||
"stats": statMaps,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.Data["metricCharts"] = chartMaps
|
|
||||||
}
|
|
||||||
|
|
||||||
this.Success()
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
package boards
|
|
||||||
|
|
||||||
import (
|
|
||||||
"github.com/TeaOSLab/EdgeAdmin/internal/configloaders"
|
|
||||||
"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/serverutils"
|
|
||||||
"github.com/TeaOSLab/EdgeAdmin/internal/web/helpers"
|
|
||||||
"github.com/iwind/TeaGo"
|
|
||||||
)
|
|
||||||
|
|
||||||
func init() {
|
|
||||||
TeaGo.BeforeStart(func(server *TeaGo.Server) {
|
|
||||||
server.
|
|
||||||
Helper(helpers.NewUserMustAuth(configloaders.AdminModuleCodeServer)).
|
|
||||||
Helper(serverutils.NewServerHelper()).
|
|
||||||
Prefix("/servers/server/boards").
|
|
||||||
GetPost("", new(IndexAction)).
|
|
||||||
EndAll()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
5
web/public/js/components/common/message-loading.js
Normal file
5
web/public/js/components/common/message-loading.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
Vue.component("loading-message", {
|
||||||
|
template: `<div class="ui message loading">
|
||||||
|
<div class="ui active inline loader small"></div> <slot></slot>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
{$layout}
|
|
||||||
{$template "/echarts"}
|
|
||||||
|
|
||||||
<!-- 加载中 -->
|
|
||||||
<div style="margin-top: 0.8em">
|
|
||||||
<div class="ui message loading" v-if="isLoading">
|
|
||||||
<div class="ui active inline loader small"></div> 数据加载中...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ui four columns grid" v-show="!isLoading">
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>在线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
|
|
||||||
<div class="value"><span class="green">{{board.countActiveNodes}}</span>个</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>离线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
|
|
||||||
<div class="value"><span :class="{red: board.countInactiveNodes > 0}">{{board.countInactiveNodes}}</span>个</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>服务</h4>
|
|
||||||
<div class="value"><span>{{board.countServers}}</span>个</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column no-border">
|
|
||||||
<h4>用户</h4>
|
|
||||||
<div class="value"><span>{{board.countUsers}}</span>个</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
|
|
||||||
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 按小时统计流量 -->
|
|
||||||
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
|
|
||||||
|
|
||||||
<!-- 按日统计流量 -->
|
|
||||||
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
|
|
||||||
<a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 按小时统计访问量 -->
|
|
||||||
<div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
|
|
||||||
|
|
||||||
<!-- 按日统计访问量 -->
|
|
||||||
<div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<!-- 域名排行 -->
|
|
||||||
<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
|
|
||||||
<div class="chart-box" id="top-domains-chart"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<!-- 节点排行 -->
|
|
||||||
<h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
|
|
||||||
<div class="chart-box" id="top-nodes-chart"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
|
|
||||||
<a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
|
|
||||||
<a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
|
|
||||||
<div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
|
|
||||||
<div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
|
|
||||||
|
|
||||||
<!-- 指标 -->
|
|
||||||
<div class="ui divider" v-if="metricCharts.length > 0"></div>
|
|
||||||
<metric-board>
|
|
||||||
<metric-chart v-for="chart in metricCharts"
|
|
||||||
:key="chart.id"
|
|
||||||
:v-chart="chart.chart"
|
|
||||||
:v-stats="chart.stats"
|
|
||||||
:v-item="chart.item">
|
|
||||||
</metric-chart>
|
|
||||||
</metric-board>
|
|
||||||
@@ -1,453 +0,0 @@
|
|||||||
Tea.context(function () {
|
|
||||||
this.isLoading = true
|
|
||||||
this.board = {}
|
|
||||||
this.metricCharts = []
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流量统计
|
|
||||||
*/
|
|
||||||
this.trafficTab = "hourly"
|
|
||||||
|
|
||||||
this.$delay(function () {
|
|
||||||
this.$post("$")
|
|
||||||
.params({
|
|
||||||
clusterId: this.clusterId
|
|
||||||
})
|
|
||||||
.timeout(30)
|
|
||||||
.success(function (resp) {
|
|
||||||
for (let k in resp.data) {
|
|
||||||
this[k] = resp.data[k]
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadHourlyTrafficChart()
|
|
||||||
this.reloadHourlyRequestsChart()
|
|
||||||
this.reloadTopNodesChart()
|
|
||||||
this.reloadTopDomainsChart()
|
|
||||||
this.reloadCPUChart()
|
|
||||||
|
|
||||||
this.isLoading = false
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
this.selectTrafficTab = function (tab) {
|
|
||||||
this.trafficTab = tab
|
|
||||||
if (tab == "hourly") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyTrafficChart()
|
|
||||||
})
|
|
||||||
} else if (tab == "daily") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadDailyTrafficChart()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadHourlyTrafficChart = function () {
|
|
||||||
let stats = this.hourlyStats
|
|
||||||
this.reloadTrafficChart("hourly-traffic-chart", "流量统计", 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.dailyStats
|
|
||||||
this.reloadTrafficChart("daily-traffic-chart", "流量统计", 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, 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 = teaweb.initChart(chartBox)
|
|
||||||
let option = {
|
|
||||||
xAxis: {
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
if (v.hour != null) {
|
|
||||||
return v.hour
|
|
||||||
}
|
|
||||||
return v.day
|
|
||||||
})
|
|
||||||
},
|
|
||||||
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"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "缓存流量",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.cachedBytes / axis.divider
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
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: true
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
chart.resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 请求数统计
|
|
||||||
*/
|
|
||||||
this.requestsTab = "hourly"
|
|
||||||
|
|
||||||
this.selectRequestsTab = function (tab) {
|
|
||||||
this.requestsTab = tab
|
|
||||||
if (tab == "hourly") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyRequestsChart()
|
|
||||||
})
|
|
||||||
} else if (tab == "daily") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadDailyRequestsChart()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadHourlyRequestsChart = function () {
|
|
||||||
let stats = this.hourlyStats
|
|
||||||
this.reloadRequestsChart("hourly-requests-chart", "请求数统计", stats, function (args) {
|
|
||||||
let index = args.dataIndex
|
|
||||||
let cachedRatio = 0
|
|
||||||
let attackRatio = 0
|
|
||||||
if (stats[index].countRequests > 0) {
|
|
||||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
return stats[index].day + " " + stats[index].hour + "时<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadDailyRequestsChart = function () {
|
|
||||||
let stats = this.dailyStats
|
|
||||||
this.reloadRequestsChart("daily-requests-chart", "请求数统计", stats, function (args) {
|
|
||||||
let index = args.dataIndex
|
|
||||||
let cachedRatio = 0
|
|
||||||
let attackRatio = 0
|
|
||||||
if (stats[index].countRequests > 0) {
|
|
||||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
return stats[index].day + "<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = teaweb.initChart(chartBox)
|
|
||||||
let option = {
|
|
||||||
xAxis: {
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
if (v.hour != null) {
|
|
||||||
return v.hour
|
|
||||||
}
|
|
||||||
if (v.day != null) {
|
|
||||||
return v.day
|
|
||||||
}
|
|
||||||
return ""
|
|
||||||
})
|
|
||||||
},
|
|
||||||
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"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "缓存请求数",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.countCachedRequests / axis.divider
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "攻击请求数",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.countAttackRequests / axis.divider;
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#F39494"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#F39494"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
data: ["请求数", "缓存请求数", "攻击请求数"]
|
|
||||||
},
|
|
||||||
animation: true
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
chart.resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 节点排行
|
|
||||||
this.reloadTopNodesChart = function () {
|
|
||||||
let that = this
|
|
||||||
let axis = teaweb.countAxis(this.topNodeStats, function (v) {
|
|
||||||
return v.countRequests
|
|
||||||
})
|
|
||||||
teaweb.renderBarChart({
|
|
||||||
id: "top-nodes-chart",
|
|
||||||
name: "节点",
|
|
||||||
values: this.topNodeStats,
|
|
||||||
x: function (v) {
|
|
||||||
return v.nodeName
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].nodeName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.countRequests / axis.divider;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
click: function (args, stats) {
|
|
||||||
window.location = "/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + that.clusterId
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 域名排行
|
|
||||||
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
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.countRequests / axis.divider;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
click: function (args, stats) {
|
|
||||||
window.location = "/servers/server?serverId=" + stats[args.dataIndex].serverId
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 系统信息
|
|
||||||
*/
|
|
||||||
this.nodeStatusTab = "cpu"
|
|
||||||
|
|
||||||
this.selectNodeStatusTab = function (tab) {
|
|
||||||
this.nodeStatusTab = tab
|
|
||||||
this.$delay(function () {
|
|
||||||
switch (tab) {
|
|
||||||
case "cpu":
|
|
||||||
this.reloadCPUChart()
|
|
||||||
break
|
|
||||||
case "memory":
|
|
||||||
this.reloadMemoryChart()
|
|
||||||
break
|
|
||||||
case "load":
|
|
||||||
this.reloadLoadChart()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadCPUChart = function () {
|
|
||||||
let axis = {unit: "%", divider: 1}
|
|
||||||
teaweb.renderLineChart({
|
|
||||||
id: "cpu-chart",
|
|
||||||
name: "CPU",
|
|
||||||
values: this.cpuValues,
|
|
||||||
x: function (v) {
|
|
||||||
return v.time
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.value * 100;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
max: 100
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadMemoryChart = function () {
|
|
||||||
let axis = {unit: "%", divider: 1}
|
|
||||||
teaweb.renderLineChart({
|
|
||||||
id: "memory-chart",
|
|
||||||
name: "内存",
|
|
||||||
values: this.memoryValues,
|
|
||||||
x: function (v) {
|
|
||||||
return v.time
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.value * 100;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
max: 100
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadLoadChart = function () {
|
|
||||||
let axis = {unit: "", divider: 1}
|
|
||||||
let max = this.loadValues.$map(function (k, v) {
|
|
||||||
return v.value
|
|
||||||
}).$max()
|
|
||||||
if (max < 10) {
|
|
||||||
max = 10
|
|
||||||
} else if (max < 20) {
|
|
||||||
max = 20
|
|
||||||
} else if (max < 100) {
|
|
||||||
max = 100
|
|
||||||
} else {
|
|
||||||
max = null
|
|
||||||
}
|
|
||||||
teaweb.renderLineChart({
|
|
||||||
id: "load-chart",
|
|
||||||
name: "负载",
|
|
||||||
values: this.loadValues,
|
|
||||||
x: function (v) {
|
|
||||||
return v.time
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100) / 100)
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.value;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
max: max
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
{$layout}
|
|
||||||
{$template "../node_menu"}
|
|
||||||
{$template "/echarts"}
|
|
||||||
|
|
||||||
<!-- 加载中 -->
|
|
||||||
<div>
|
|
||||||
<div class="ui message loading" v-if="isLoading">
|
|
||||||
<div class="ui active inline loader small"></div> 数据加载中...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 概况 -->
|
|
||||||
<div class="ui four columns grid" v-if="!isLoading">
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>在线状态</h4>
|
|
||||||
<div class="value">
|
|
||||||
<span class="green" v-if="board.isActive">在线</span>
|
|
||||||
<span class="red" v-else-if="node.isUp">离线</span>
|
|
||||||
<span class="red" v-else style="font-size: 1.5em" title="因健康检查失败而离线">健康离线</span>
|
|
||||||
<a href="" v-if="node.isOn && !node.isUp" @click.prevent="upNode(node.id)">[上线]</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>下行流量</h4>
|
|
||||||
<div class="value"><span>{{board.trafficOutBytes}}</span>/分钟</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>上行流量</h4>
|
|
||||||
<div class="value"><span>{{board.trafficInBytes}}</span>/分钟</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>连接数</h4>
|
|
||||||
<div class="value"><span>{{board.countConnections}}</span>/分钟</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>当前访问量</h4>
|
|
||||||
<div class="value"><span>{{board.countRequests}}</span>/分钟</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>当前攻击访问量</h4>
|
|
||||||
<div class="value"><span :class="{red: board.countAttackRequests != '0'}">{{board.countAttackRequests}}</span>/分钟</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>磁盘缓存用量</h4>
|
|
||||||
<div class="value"><span>{{board.cacheDiskSize}}</span><span class="small" :class="{grey: !cacheDirAvailWarning, red: cacheDirAvailWarning}" style="font-size: 0.9em" v-if="cacheDirAvail.length > 0">剩余{{cacheDirAvail}}</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>内存缓存用量</h4>
|
|
||||||
<div class="value"><span>{{board.cacheMemorySize}}</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>CPU</h4>
|
|
||||||
<div class="value"><span :class="{red: board.cpuUsage > 80}">{{board.cpuUsage}}</span>%</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>内存</h4>
|
|
||||||
<div class="value"><span :class="{red: board.memoryUsage > 80}">{{board.memoryUsage}}</span>%</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>总内存</h4>
|
|
||||||
<div class="value"><span>{{board.memoryTotalSize}}</span>G</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui column">
|
|
||||||
<h4>负载</h4>
|
|
||||||
<div class="value"><span :class="{red: board.load > 20}">{{board.load}}</span>/分钟</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
|
|
||||||
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 按小时统计流量 -->
|
|
||||||
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
|
|
||||||
|
|
||||||
<!-- 按日统计流量 -->
|
|
||||||
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
|
|
||||||
<a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 按小时统计访问量 -->
|
|
||||||
<div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
|
|
||||||
|
|
||||||
<!-- 按日统计访问量 -->
|
|
||||||
<div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<!-- 域名排行 -->
|
|
||||||
<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
|
|
||||||
<div class="chart-box" id="top-domains-chart"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<!-- CPU、内存、负载 -->
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
|
|
||||||
<a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
|
|
||||||
<a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
|
|
||||||
<div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
|
|
||||||
<div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
|
|
||||||
|
|
||||||
<!-- 缓存 -->
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
<h4 v-show="!isLoading">缓存目录用量<span v-if="cacheDirUsed.length > 0">（使用：{{cacheDirUsed}}/总量：{{cacheDirTotal}}/剩余：{{cacheDirAvail}}）</span></h4>
|
|
||||||
<div class="chart-box" id="cache-dirs-chart"></div>
|
|
||||||
|
|
||||||
<!-- 指标 -->
|
|
||||||
<div class="ui divider" v-if="metricCharts.length > 0"></div>
|
|
||||||
<metric-board>
|
|
||||||
<metric-chart v-for="chart in metricCharts"
|
|
||||||
:key="chart.id"
|
|
||||||
:v-chart="chart.chart"
|
|
||||||
:v-stats="chart.stats"
|
|
||||||
:v-item="chart.item">
|
|
||||||
</metric-chart>
|
|
||||||
</metric-board>
|
|
||||||
@@ -1,527 +0,0 @@
|
|||||||
Tea.context(function () {
|
|
||||||
this.isLoading = true
|
|
||||||
this.board = {}
|
|
||||||
this.metricCharts = []
|
|
||||||
|
|
||||||
this.upNode = function (nodeId) {
|
|
||||||
teaweb.confirm("确定要手动上线此节点吗？", function () {
|
|
||||||
this.$post("/clusters/cluster/node/up")
|
|
||||||
.params({
|
|
||||||
nodeId: nodeId
|
|
||||||
})
|
|
||||||
.refresh()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.formatCount = function (count) {
|
|
||||||
if (count < 1000) {
|
|
||||||
return count.toString()
|
|
||||||
}
|
|
||||||
if (count < 1000 * 1000) {
|
|
||||||
return (Math.round(count / 1000 * 100) / 100) + "K"
|
|
||||||
}
|
|
||||||
return (Math.round(count / 1000 / 1000 * 100) / 100) + "M"
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadBoard = function () {
|
|
||||||
this.board.trafficInBytes = teaweb.formatBytes(this.board.trafficInBytes)
|
|
||||||
this.board.trafficOutBytes = teaweb.formatBytes(this.board.trafficOutBytes)
|
|
||||||
this.board.countConnections = this.formatCount(this.board.countConnections)
|
|
||||||
this.board.countRequests = this.formatCount(this.board.countRequests)
|
|
||||||
this.board.countAttackRequests = this.formatCount(this.board.countAttackRequests)
|
|
||||||
this.board.cpuUsage = Math.round(this.board.cpuUsage * 100 * 100) / 100
|
|
||||||
this.board.memoryUsage = Math.round(this.board.memoryUsage * 100 * 100) / 100
|
|
||||||
this.board.memoryTotalSize = Math.round(this.board.memoryTotalSize / 1024 / 1024 / 1024)
|
|
||||||
this.board.load = Math.round(this.board.load * 100) / 100
|
|
||||||
this.board.cacheDiskSize = teaweb.formatBytes(this.board.cacheDiskSize)
|
|
||||||
this.board.cacheMemorySize = teaweb.formatBytes(this.board.cacheMemorySize)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流量统计
|
|
||||||
*/
|
|
||||||
this.trafficTab = "hourly"
|
|
||||||
|
|
||||||
this.$delay(function () {
|
|
||||||
this.$post("$")
|
|
||||||
.params({
|
|
||||||
clusterId: this.clusterId,
|
|
||||||
nodeId: this.node.id
|
|
||||||
})
|
|
||||||
.timeout(60)
|
|
||||||
.success(function (resp) {
|
|
||||||
for (let k in resp.data) {
|
|
||||||
this[k] = resp.data[k]
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadBoard()
|
|
||||||
|
|
||||||
this.isLoading = false
|
|
||||||
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyTrafficChart()
|
|
||||||
this.reloadHourlyRequestsChart()
|
|
||||||
this.reloadTopDomainsChart()
|
|
||||||
this.reloadCPUChart()
|
|
||||||
this.reloadCacheDirsChart()
|
|
||||||
|
|
||||||
this.renderCacheDirData()
|
|
||||||
|
|
||||||
this.refreshBoard()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
this.refreshBoard = function () {
|
|
||||||
this.$post(".data")
|
|
||||||
.params({
|
|
||||||
clusterId: this.clusterId,
|
|
||||||
nodeId: this.node.id
|
|
||||||
})
|
|
||||||
.success(function (resp) {
|
|
||||||
this.board = resp.data.board
|
|
||||||
this.loadBoard()
|
|
||||||
})
|
|
||||||
.done(function () {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.refreshBoard()
|
|
||||||
}, 30000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.selectTrafficTab = function (tab) {
|
|
||||||
this.trafficTab = tab
|
|
||||||
if (tab == "hourly") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyTrafficChart()
|
|
||||||
})
|
|
||||||
} else if (tab == "daily") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadDailyTrafficChart()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadHourlyTrafficChart = function () {
|
|
||||||
let stats = this.hourlyStats
|
|
||||||
this.reloadTrafficChart("hourly-traffic-chart", "流量统计", 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.dailyStats
|
|
||||||
this.reloadTrafficChart("daily-traffic-chart", "流量统计", 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, 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 = teaweb.initChart(chartBox)
|
|
||||||
let option = {
|
|
||||||
xAxis: {
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
if (v.hour != null) {
|
|
||||||
return v.hour
|
|
||||||
}
|
|
||||||
return v.day
|
|
||||||
})
|
|
||||||
},
|
|
||||||
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"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "缓存流量",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.cachedBytes / axis.divider
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
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: true
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
chart.resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 请求数统计
|
|
||||||
*/
|
|
||||||
this.requestsTab = "hourly"
|
|
||||||
|
|
||||||
this.selectRequestsTab = function (tab) {
|
|
||||||
this.requestsTab = tab
|
|
||||||
if (tab == "hourly") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyRequestsChart()
|
|
||||||
})
|
|
||||||
} else if (tab == "daily") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadDailyRequestsChart()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadHourlyRequestsChart = function () {
|
|
||||||
let stats = this.hourlyStats
|
|
||||||
this.reloadRequestsChart("hourly-requests-chart", "请求数统计", stats, function (args) {
|
|
||||||
let index = args.dataIndex
|
|
||||||
let cachedRatio = 0
|
|
||||||
let attackRatio = 0
|
|
||||||
if (stats[index].countRequests > 0) {
|
|
||||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
return stats[index].day + " " + stats[index].hour + "时<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadDailyRequestsChart = function () {
|
|
||||||
let stats = this.dailyStats
|
|
||||||
this.reloadRequestsChart("daily-requests-chart", "请求数统计", stats, function (args) {
|
|
||||||
let index = args.dataIndex
|
|
||||||
let cachedRatio = 0
|
|
||||||
let attackRatio = 0
|
|
||||||
if (stats[index].countRequests > 0) {
|
|
||||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
return stats[index].day + "<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = teaweb.initChart(chartBox)
|
|
||||||
let option = {
|
|
||||||
xAxis: {
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
if (v.hour != null) {
|
|
||||||
return v.hour
|
|
||||||
}
|
|
||||||
if (v.day != null) {
|
|
||||||
return v.day
|
|
||||||
}
|
|
||||||
return ""
|
|
||||||
})
|
|
||||||
},
|
|
||||||
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"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "缓存请求数",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.countCachedRequests / axis.divider
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "攻击请求数",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.countAttackRequests / axis.divider;
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#F39494"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#F39494"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
data: ["请求数", "缓存请求数", "攻击请求数"]
|
|
||||||
},
|
|
||||||
animation: true
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
chart.resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 域名排行
|
|
||||||
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
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.countRequests / axis.divider;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
click: function (args, stats) {
|
|
||||||
window.location = "/servers/server?serverId=" + stats[args.dataIndex].serverId
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 系统信息
|
|
||||||
*/
|
|
||||||
this.nodeStatusTab = "cpu"
|
|
||||||
|
|
||||||
this.selectNodeStatusTab = function (tab) {
|
|
||||||
this.nodeStatusTab = tab
|
|
||||||
this.$delay(function () {
|
|
||||||
switch (tab) {
|
|
||||||
case "cpu":
|
|
||||||
this.reloadCPUChart()
|
|
||||||
break
|
|
||||||
case "memory":
|
|
||||||
this.reloadMemoryChart()
|
|
||||||
break
|
|
||||||
case "load":
|
|
||||||
this.reloadLoadChart()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadCPUChart = function () {
|
|
||||||
let axis = {unit: "%", divider: 1}
|
|
||||||
teaweb.renderLineChart({
|
|
||||||
id: "cpu-chart",
|
|
||||||
name: "CPU",
|
|
||||||
values: this.cpuValues,
|
|
||||||
x: function (v) {
|
|
||||||
return v.time
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.value * 100;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
max: 100
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadMemoryChart = function () {
|
|
||||||
let axis = {unit: "%", divider: 1}
|
|
||||||
teaweb.renderLineChart({
|
|
||||||
id: "memory-chart",
|
|
||||||
name: "内存",
|
|
||||||
values: this.memoryValues,
|
|
||||||
x: function (v) {
|
|
||||||
return v.time
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.value * 100;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
max: 100
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadLoadChart = function () {
|
|
||||||
let axis = {unit: "", divider: 1}
|
|
||||||
let max = this.loadValues.$map(function (k, v) {
|
|
||||||
return v.value
|
|
||||||
}).$max()
|
|
||||||
if (max < 10) {
|
|
||||||
max = 10
|
|
||||||
} else if (max < 20) {
|
|
||||||
max = 20
|
|
||||||
} else if (max < 100) {
|
|
||||||
max = 100
|
|
||||||
} else {
|
|
||||||
max = null
|
|
||||||
}
|
|
||||||
teaweb.renderLineChart({
|
|
||||||
id: "load-chart",
|
|
||||||
name: "负载",
|
|
||||||
values: this.loadValues,
|
|
||||||
x: function (v) {
|
|
||||||
return v.time
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100) / 100)
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.value;
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
max: max
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.cacheDirUsed = ""
|
|
||||||
this.cacheDirTotal = ""
|
|
||||||
this.cacheDirAvail = ""
|
|
||||||
this.cacheDirAvailWarning = false
|
|
||||||
this.renderCacheDirData = function () {
|
|
||||||
if (this.cacheDirValues.length > 0) {
|
|
||||||
let lastStat = this.cacheDirValues.$last()
|
|
||||||
if (lastStat.value != null && lastStat.value.dirs != null && lastStat.value.dirs.length > 0) {
|
|
||||||
this.cacheDirUsed = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].used)
|
|
||||||
this.cacheDirTotal = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].total)
|
|
||||||
this.cacheDirAvail = teaweb.formatBytes(this.cacheDirValues.$last().value.dirs[0].avail)
|
|
||||||
this.cacheDirAvailWarning = (this.cacheDirValues.$last().value.dirs[0].avail < 1024 * 1024 * 1024 * 10)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadCacheDirsChart = function () {
|
|
||||||
let axis = {unit: "%", divider: 1}
|
|
||||||
teaweb.renderLineChart({
|
|
||||||
id: "cache-dirs-chart",
|
|
||||||
name: "缓存目录用量",
|
|
||||||
values: this.cacheDirValues,
|
|
||||||
x: function (v) {
|
|
||||||
return v.time
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
var v = stats[args.dataIndex].value.dirs[0]
|
|
||||||
return stats[args.dataIndex].time + "<br/>使用：" + teaweb.formatBytes(v.used) + "<br/>总量：" + teaweb.formatBytes(v.total) + "<br/>比例：" + (Math.ceil(v.used * 100 / v.total * 100) / 100) + "%"
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
if (v.value == null || v.value.dirs == null || v.value.dirs.length == 0) {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
v = v.value.dirs[0]
|
|
||||||
return (v.used * 100 / v.total);
|
|
||||||
},
|
|
||||||
axis: axis,
|
|
||||||
max: 100
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
{$layout}
|
|
||||||
|
|
||||||
{$var "header"}
|
|
||||||
<!-- world map -->
|
|
||||||
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
|
|
||||||
<script type="text/javascript" src="/js/world.js"></script>
|
|
||||||
<script type="text/javascript" src="/js/world-countries-map.js"></script>
|
|
||||||
{$end}
|
|
||||||
|
|
||||||
<first-menu>
|
|
||||||
<menu-item href="/servers">服务列表</menu-item>
|
|
||||||
<span class="item disabled">|</span>
|
|
||||||
<menu-item :href="'/servers/server?serverId=' + server.id" active="true">"{{server.name}}"看板</menu-item>
|
|
||||||
<span class="disabled item">|</span>
|
|
||||||
<more-items-angle
|
|
||||||
:v-data-url="'/servers/nearby?serverId=' + server.id"
|
|
||||||
:v-url="'/servers/server/boards?serverId=${serverId}'"></more-items-angle>
|
|
||||||
</first-menu>
|
|
||||||
|
|
||||||
<!-- 加载中 -->
|
|
||||||
<div style="margin-top: 0.8em">
|
|
||||||
<div class="ui message loading" v-if="isLoading">
|
|
||||||
<div class="ui active inline loader small"></div> 数据加载中...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 流量地图 -->
|
|
||||||
<div v-if="!isLoading">
|
|
||||||
<traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
|
|
||||||
</div>
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
|
|
||||||
<a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 按小时统计流量 -->
|
|
||||||
<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
|
|
||||||
|
|
||||||
<!-- 按日统计流量 -->
|
|
||||||
<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
<div class="ui menu tabular" v-show="!isLoading">
|
|
||||||
<a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
|
|
||||||
<a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 按小时统计访问量 -->
|
|
||||||
<div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
|
|
||||||
|
|
||||||
<!-- 按日统计访问量 -->
|
|
||||||
<div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<!-- 域名排行 -->
|
|
||||||
<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
|
|
||||||
<div class="chart-box" id="top-domains-chart"></div>
|
|
||||||
|
|
||||||
<div class="ui divider"></div>
|
|
||||||
|
|
||||||
<!-- 指标 -->
|
|
||||||
<div class="ui divider" v-if="metricCharts.length > 0"></div>
|
|
||||||
<metric-board>
|
|
||||||
<metric-chart v-for="chart in metricCharts"
|
|
||||||
:key="chart.id"
|
|
||||||
:v-chart="chart.chart"
|
|
||||||
:v-stats="chart.stats"
|
|
||||||
:v-item="chart.item">
|
|
||||||
</metric-chart>
|
|
||||||
</metric-board>
|
|
||||||
@@ -1,340 +0,0 @@
|
|||||||
Tea.context(function () {
|
|
||||||
this.isLoading = true
|
|
||||||
this.metricCharts = []
|
|
||||||
|
|
||||||
this.formatCount = function (count) {
|
|
||||||
if (count < 1000) {
|
|
||||||
return count.toString()
|
|
||||||
}
|
|
||||||
if (count < 1000 * 1000) {
|
|
||||||
return (Math.round(count / 1000 * 100) / 100) + "K"
|
|
||||||
}
|
|
||||||
return (Math.round(count / 1000 / 1000 * 100) / 100) + "M"
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 流量统计
|
|
||||||
*/
|
|
||||||
this.trafficTab = "hourly"
|
|
||||||
|
|
||||||
this.$delay(function () {
|
|
||||||
this.load()
|
|
||||||
})
|
|
||||||
|
|
||||||
this.load = function () {
|
|
||||||
this.$post("$")
|
|
||||||
.params({
|
|
||||||
serverId: this.server.id
|
|
||||||
})
|
|
||||||
.success(function (resp) {
|
|
||||||
for (let k in resp.data) {
|
|
||||||
this[k] = resp.data[k]
|
|
||||||
}
|
|
||||||
this.isLoading = false
|
|
||||||
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyTrafficChart()
|
|
||||||
this.reloadHourlyRequestsChart()
|
|
||||||
this.reloadTopDomainsChart()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.selectTrafficTab = function (tab) {
|
|
||||||
this.trafficTab = tab
|
|
||||||
if (tab == "hourly") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyTrafficChart()
|
|
||||||
})
|
|
||||||
} else if (tab == "daily") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadDailyTrafficChart()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadHourlyTrafficChart = function () {
|
|
||||||
let stats = this.hourlyStats
|
|
||||||
this.reloadTrafficChart("hourly-traffic-chart", "流量统计", 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.dailyStats
|
|
||||||
this.reloadTrafficChart("daily-traffic-chart", "流量统计", 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, 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 = teaweb.initChart(chartBox)
|
|
||||||
let option = {
|
|
||||||
xAxis: {
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
if (v.hour != null) {
|
|
||||||
return v.hour
|
|
||||||
}
|
|
||||||
return v.day
|
|
||||||
})
|
|
||||||
},
|
|
||||||
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"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "缓存流量",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.cachedBytes / axis.divider
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
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: true
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
chart.resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 请求数统计
|
|
||||||
*/
|
|
||||||
this.requestsTab = "hourly"
|
|
||||||
|
|
||||||
this.selectRequestsTab = function (tab) {
|
|
||||||
this.requestsTab = tab
|
|
||||||
if (tab == "hourly") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadHourlyRequestsChart()
|
|
||||||
})
|
|
||||||
} else if (tab == "daily") {
|
|
||||||
this.$delay(function () {
|
|
||||||
this.reloadDailyRequestsChart()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadHourlyRequestsChart = function () {
|
|
||||||
let stats = this.hourlyStats
|
|
||||||
this.reloadRequestsChart("hourly-requests-chart", "请求数统计", stats, function (args) {
|
|
||||||
let index = args.dataIndex
|
|
||||||
let cachedRatio = 0
|
|
||||||
let attackRatio = 0
|
|
||||||
if (stats[index].countRequests > 0) {
|
|
||||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
return stats[index].day + " " + stats[index].hour + "时<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reloadDailyRequestsChart = function () {
|
|
||||||
let stats = this.dailyStats
|
|
||||||
this.reloadRequestsChart("daily-requests-chart", "请求数统计", stats, function (args) {
|
|
||||||
let index = args.dataIndex
|
|
||||||
let cachedRatio = 0
|
|
||||||
let attackRatio = 0
|
|
||||||
if (stats[index].countRequests > 0) {
|
|
||||||
cachedRatio = Math.round(stats[index].countCachedRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
attackRatio = Math.round(stats[index].countAttackRequests * 10000 / stats[index].countRequests) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
return stats[index].day + "<br/>总请求数：" + teaweb.formatNumber(stats[index].countRequests) + "<br/>缓存请求数：" + teaweb.formatNumber(stats[index].countCachedRequests) + "<br/>缓存命中率：" + cachedRatio + "%<br/>拦截攻击数：" + teaweb.formatNumber(stats[index].countAttackRequests) + "<br/>拦截比例：" + attackRatio + "%"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = teaweb.initChart(chartBox)
|
|
||||||
let option = {
|
|
||||||
xAxis: {
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
if (v.hour != null) {
|
|
||||||
return v.hour
|
|
||||||
}
|
|
||||||
if (v.day != null) {
|
|
||||||
return v.day
|
|
||||||
}
|
|
||||||
return ""
|
|
||||||
})
|
|
||||||
},
|
|
||||||
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"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "缓存请求数",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.countCachedRequests / axis.divider
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#61A0A8"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "攻击请求数",
|
|
||||||
type: "line",
|
|
||||||
data: stats.map(function (v) {
|
|
||||||
return v.countAttackRequests / axis.divider;
|
|
||||||
}),
|
|
||||||
itemStyle: {
|
|
||||||
color: "#F39494"
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: "#F39494"
|
|
||||||
},
|
|
||||||
smooth: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
data: ["请求数", "缓存请求数", "攻击请求数"]
|
|
||||||
},
|
|
||||||
animation: true
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
chart.resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 域名排行
|
|
||||||
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
|
|
||||||
},
|
|
||||||
tooltip: function (args, stats) {
|
|
||||||
return stats[args.dataIndex].domain + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
|
|
||||||
},
|
|
||||||
value: function (v) {
|
|
||||||
return v.countRequests / axis.divider;
|
|
||||||
},
|
|
||||||
axis: axis
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user