936 lines
36 KiB
HTML
936 lines
36 KiB
HTML
<div class="wrapper wrapper-content">
|
|
{{if eq false .isAdmin}}
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-tcpports"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins">{{or .tcp_p "0"}} / {{or .tls_p "0"}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-kcpport"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins">{{or .kcp_p "0"}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-wsports"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins">{{or .ws_p "0"}} / {{or .wss_p "0"}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-wspath"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins">{{or .ws_path "/ws"}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-serverip"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins">{{.ip}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-serverversion"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins">{{.data.version}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-minsupportversion"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins">{{.data.minVersion}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-iprestriction"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins" langtag="word-{{or .data.ipLimit "false"}}"></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if eq true .isAdmin}}
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-totalclients"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins" id="stat-clientCount">{{.data.clientCount}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
{{/*<span class="label label-primary pull-right">今日</span>*/}}
|
|
<h5 langtag="word-onlineclients"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins" id="stat-clientOnlineCount">{{.data.clientOnlineCount}}</h1>
|
|
{{/*<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>*/}}
|
|
{{/*<small>新访客</small>*/}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-tcpconnections"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins" id="stat-tcpCount">{{.data.tcpCount}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-uptime"></h5>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<h1 class="no-margins" id="stat-upTime">{{or .data.upTime ""}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-configurationinformation"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content no-padding">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<strong langtag="word-bridgingmode"></strong>
|
|
</div>
|
|
<div class="col-sm-8 text-right">
|
|
<strong>{{if index . "tcp_p"}}TCP:{{.tcp_p}} {{end}}{{if index . "kcp_p"}}KCP:{{.kcp_p}} {{end}}{{if index . "tls_p"}}TLS:{{.tls_p}} {{end}}{{if index . "ws_p"}}WS:{{.ws_p}} {{end}}{{if index . "wss_p"}}WSS:{{.wss_p}} {{end}}{{if index . "ws_path"}}Path:{{.ws_path}}{{end}}</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-httpports"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong>{{or .data.httpProxyPort "0"}} / {{or .data.httpsProxyPort "0"}}</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-iprestriction"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong langtag="word-{{or .data.ipLimit "false"}}"></strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-trafficdatapersistence"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong>{{.data.flowStoreInterval}}</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-loglevel"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong>{{.data.logLevel}}</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<strong langtag="word-p2paddr"></strong>
|
|
</div>
|
|
<div class="col-sm-8 text-right">
|
|
<strong>{{.data.p2pAddr}}</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<strong langtag="word-serverip"></strong>
|
|
</div>
|
|
<div class="col-sm-10 text-right">
|
|
<strong>{{.data.p2pIp}} | {{.data.serverIpv4}} | {{.data.serverIpv6}}</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-serverversion"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong>{{.data.version}} ({{.data.minVersion}})</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-systeminformation"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content no-padding">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-cpu"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong id="overview_cpu"></strong>
|
|
</div>
|
|
</div>
|
|
<div class="progress progress-small">
|
|
<div class="progress-bar" id="overview_cpu_bar"></div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-memory"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong id="overview_memory"></strong>
|
|
</div>
|
|
</div>
|
|
<div class="progress progress-small">
|
|
<div class="progress-bar" id="overview_memory_bar"></div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-load"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong id="overview_load"></strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-tcpconnections_established"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong id="overview_tcp"></strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-udpconnections_established"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong id="overview_udp"></strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-outbandwidth"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong id="overview_send"></strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item ">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<strong langtag="word-inbandwidth"></strong>
|
|
</div>
|
|
<div class="col-sm-6 text-right">
|
|
<strong id="overview_recv"></strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{if eq true .isAdmin}}
|
|
{{if eq true .system_info_display}}
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-load"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<div id="load" style="height: 300px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-cpu"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<div id="cpu" style="height: 300px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-memory"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<div id="memory" style="height: 300px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-connections_established"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<div id="connections" style="height: 300px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-bandwidth"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<div id="bandwidth" style="height: 300px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-trafficstatistics"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<div id="flow" style="height: 400px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title">
|
|
<h5 langtag="word-type"></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
<div id="counts" style="height:400px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{if eq true .isAdmin}}
|
|
<script>
|
|
$("#overview_cpu").text("{{.data.cpu}}%")
|
|
$("#overview_cpu_bar").width("{{.data.cpu}}%")
|
|
$("#overview_memory").text("{{.data.virtual_mem}}%")
|
|
$("#overview_memory_bar").width("{{.data.virtual_mem}}%")
|
|
$.each( JSON.parse({{.data.load}}), function(i, value) { $("#overview_load").append(' ' + value) });
|
|
$("#overview_tcp").text("{{.data.tcp}}")
|
|
$("#overview_udp").text("{{.data.udp}}")
|
|
$("#overview_send").text(changeunit({{.data.io_send}}) + "/s")
|
|
$("#overview_recv").text(changeunit({{.data.io_recv}}) + "/s")
|
|
|
|
const chartTextColor = getComputedStyle(document.documentElement)
|
|
.getPropertyValue('--text').trim();
|
|
const chartBgColor = getComputedStyle(document.documentElement)
|
|
.getPropertyValue('--bg').trim();
|
|
|
|
echarts.registerTheme('nps-theme', {
|
|
textStyle: {
|
|
color: chartTextColor,
|
|
textBorderColor: chartBgColor,
|
|
textBorderWidth: 0
|
|
},
|
|
axisPointer: { label: { color: chartTextColor, textBorderColor: chartBgColor } },
|
|
tooltip: { textStyle: { color: chartTextColor, textBorderColor: chartBgColor } },
|
|
legend: { textStyle: { color: chartTextColor, textBorderColor: chartBgColor } },
|
|
xAxis: { axisLabel: { color: chartTextColor, textBorderColor: chartBgColor } },
|
|
yAxis: { axisLabel: { color: chartTextColor, textBorderColor: chartBgColor } },
|
|
series: [{
|
|
label: {
|
|
color: chartTextColor,
|
|
textBorderColor: chartBgColor,
|
|
textBorderWidth: 0
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
color: chartTextColor,
|
|
textBorderColor: chartBgColor,
|
|
textBorderWidth: 0
|
|
}
|
|
}
|
|
}],
|
|
pie: {
|
|
label: {
|
|
color: chartTextColor,
|
|
textBorderColor: chartBgColor,
|
|
textBorderWidth: 0
|
|
},
|
|
labelLine: {
|
|
lineStyle: {
|
|
color: chartTextColor
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
chartdatas['load'] = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var str = params[0].axisValue + '<br/>';
|
|
for (i in params){
|
|
str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>' + params[i].seriesName +': '+ params[i].data +'</br>';
|
|
}
|
|
return str;
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
top: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'load1',
|
|
smooth: true,
|
|
data: [{{.data.sys1.load1}}, {{.data.sys2.load1}}, {{.data.sys3.load1}}, {{.data.sys4.load1}}, {{.data.sys5.load1}}, {{.data.sys6.load1}}, {{.data.sys7.load1}}, {{.data.sys8.load1}}, {{.data.sys9.load1}}, {{.data.sys10.load1}}]
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'load5',
|
|
smooth: true,
|
|
data: [{{.data.sys1.load5}}, {{.data.sys2.load5}}, {{.data.sys3.load5}}, {{.data.sys4.load5}}, {{.data.sys5.load5}}, {{.data.sys6.load5}}, {{.data.sys7.load5}}, {{.data.sys8.load5}}, {{.data.sys9.load5}}, {{.data.sys10.load5}}]
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'load15',
|
|
smooth: true,
|
|
data: [{{.data.sys1.load15}}, {{.data.sys2.load15}}, {{.data.sys3.load15}}, {{.data.sys4.load15}}, {{.data.sys5.load15}}, {{.data.sys6.load15}}, {{.data.sys7.load15}}, {{.data.sys8.load15}}, {{.data.sys9.load15}}, {{.data.sys10.load15}}]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartdatas['cpu'] = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var str = params[0].axisValue + '<br/>';
|
|
for (i in params){
|
|
str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>' + params[i].seriesName +': '+ params[i].data +'%</br>';
|
|
}
|
|
return str;
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
top: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
formatter: '{value} %'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'cpu',
|
|
smooth: true,
|
|
data: [{{.data.sys1.cpu}}, {{.data.sys2.cpu}}, {{.data.sys3.cpu}}, {{.data.sys4.cpu}}, {{.data.sys5.cpu}}, {{.data.sys6.cpu}}, {{.data.sys7.cpu}}, {{.data.sys8.cpu}}, {{.data.sys9.cpu}}, {{.data.sys10.cpu}}]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartdatas['memory'] = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var str = params[0].axisValue + '<br/>';
|
|
for (i in params){
|
|
str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>' + params[i].seriesName +': '+ params[i].data +'MB</br>';
|
|
}
|
|
return str;
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
top: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
formatter: '{value} MB'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'virtual_mem',
|
|
smooth: true,
|
|
data: [{{.data.sys1.virtual_mem}}, {{.data.sys2.virtual_mem}}, {{.data.sys3.virtual_mem}}, {{.data.sys4.virtual_mem}}, {{.data.sys5.virtual_mem}}, {{.data.sys6.virtual_mem}}, {{.data.sys7.virtual_mem}}, {{.data.sys8.virtual_mem}}, {{.data.sys9.virtual_mem}}, {{.data.sys10.virtual_mem}}]
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'swap_mem',
|
|
smooth: true,
|
|
data: [{{.data.sys1.swap_mem}}, {{.data.sys2.swap_mem}}, {{.data.sys3.swap_mem}}, {{.data.sys4.swap_mem}}, {{.data.sys5.swap_mem}}, {{.data.sys6.swap_mem}}, {{.data.sys7.swap_mem}}, {{.data.sys8.swap_mem}}, {{.data.sys9.swap_mem}}, {{.data.sys10.swap_mem}}]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartdatas['connections'] = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
top: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'tcp',
|
|
smooth: true,
|
|
data: [{{.data.sys1.tcp}}, {{.data.sys2.tcp}}, {{.data.sys3.tcp}}, {{.data.sys4.tcp}}, {{.data.sys5.tcp}}, {{.data.sys6.tcp}}, {{.data.sys7.tcp}}, {{.data.sys8.tcp}}, {{.data.sys9.tcp}}, {{.data.sys10.tcp}}]
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'udp',
|
|
smooth: true,
|
|
data: [{{.data.sys1.udp}}, {{.data.sys2.udp}}, {{.data.sys3.udp}}, {{.data.sys4.udp}}, {{.data.sys5.udp}}, {{.data.sys6.udp}}, {{.data.sys7.udp}}, {{.data.sys8.udp}}, {{.data.sys9.udp}}, {{.data.sys10.udp}}]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartdatas['bandwidth'] = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
var str = params[0].axisValue + '<br/>';
|
|
for (i in params){
|
|
str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>' + params[i].seriesName +': '+ changeunit(params[i].data) +'/s</br>';
|
|
}
|
|
return str;
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
top: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
formatter: function (params){
|
|
return changeunit (params);
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'in',
|
|
smooth: true,
|
|
data: [{{.data.sys1.io_recv}}, {{.data.sys2.io_recv}}, {{.data.sys3.io_recv}}, {{.data.sys4.io_recv}}, {{.data.sys5.io_recv}}, {{.data.sys6.io_recv}}, {{.data.sys7.io_recv}}, {{.data.sys8.io_recv}}, {{.data.sys9.io_recv}}, {{.data.sys10.io_recv}}]
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
stack: 'out',
|
|
smooth: true,
|
|
data: [{{.data.sys1.io_send}}, {{.data.sys2.io_send}}, {{.data.sys3.io_send}}, {{.data.sys4.io_send}}, {{.data.sys5.io_send}}, {{.data.sys6.io_send}}, {{.data.sys7.io_send}}, {{.data.sys8.io_send}}, {{.data.sys9.io_send}}, {{.data.sys10.io_send}}]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartdatas['flow'] = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (p) {
|
|
return p.seriesName + '<br>' + p.name + ':' + changeunit(p.data.value);
|
|
}
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['', '']
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{
|
|
name: '',
|
|
value:{{.data.inletFlowCount}}
|
|
},
|
|
{
|
|
name: '',
|
|
value:{{.data.exportFlowCount}}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
chartdatas['counts'] = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['', '', '', '', '', '', '']
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{
|
|
name: '',
|
|
value:{{.data.hostCount}}
|
|
},
|
|
{
|
|
name: '',
|
|
value:{{.data.tcpC}}
|
|
},
|
|
{
|
|
name: '',
|
|
value:{{.data.udpCount}}
|
|
},
|
|
{
|
|
name: '',
|
|
value:{{.data.httpProxyCount}}
|
|
},
|
|
{
|
|
name: '',
|
|
value:{{.data.socks5Count}}
|
|
},
|
|
{
|
|
name: '',
|
|
value:{{.data.secretCount}}
|
|
},
|
|
{
|
|
name: '',
|
|
value:{{.data.p2pCount}}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
window.charts = window.charts || {};
|
|
Object.keys(chartdatas).forEach(key => {
|
|
const dom = document.getElementById(key);
|
|
if (dom) {
|
|
window.charts[key] = echarts.init(dom, 'nps-theme');
|
|
window.charts[key].setOption(chartdatas[key]);
|
|
}
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
for (var key in charts) {
|
|
charts[key].resize();
|
|
}
|
|
});
|
|
|
|
let upTimeSeconds = 0;
|
|
|
|
function formatUpTime(secs) {
|
|
const d = Math.floor(secs / 86400);
|
|
secs %= 86400;
|
|
const h = Math.floor(secs / 3600);
|
|
secs %= 3600;
|
|
const m = Math.floor(secs / 60);
|
|
const s = secs % 60;
|
|
const parts = [];
|
|
if (d) parts.push(d + 'd');
|
|
if (h) parts.push(h + 'h');
|
|
if (m) parts.push(m + 'm');
|
|
parts.push(s + 's');
|
|
return parts.join(' ');
|
|
}
|
|
|
|
function ensureChart(key) {
|
|
if (!charts[key]) {
|
|
const dom = document.getElementById(key);
|
|
if (dom) {
|
|
charts[key] = echarts.init(dom, 'nps-theme');
|
|
}
|
|
}
|
|
}
|
|
|
|
function refreshStats() {
|
|
$.getJSON('{{.web_base_url}}/index/stats', function(res) {
|
|
if (res.code !== 1) return;
|
|
const d = res.data;
|
|
$('#stat-clientCount').text(d.clientCount);
|
|
$('#stat-clientOnlineCount').text(d.clientOnlineCount);
|
|
$('#stat-tcpCount').text(d.tcpCount);
|
|
const nowSecs = Math.floor(Date.now() / 1000);
|
|
upTimeSeconds = nowSecs - d.startTime;
|
|
$('#overview_cpu').text(d.cpu + '%');
|
|
$('#overview_cpu_bar').width(d.cpu + '%');
|
|
$('#overview_memory').text(d.virtual_mem + '%');
|
|
$('#overview_memory_bar').width(d.virtual_mem + '%');
|
|
const loadObj = JSON.parse(d.load);
|
|
$('#overview_load')
|
|
.empty()
|
|
.append([loadObj.load1, loadObj.load5, loadObj.load15]
|
|
.map(v => ' '+v).join(''));
|
|
$('#overview_tcp').text(d.tcp);
|
|
$('#overview_udp').text(d.udp);
|
|
$('#overview_send').text(changeunit(d.io_send) + '/s');
|
|
$('#overview_recv').text(changeunit(d.io_recv) + '/s');
|
|
});
|
|
}
|
|
|
|
$(function() {
|
|
refreshStats();
|
|
setInterval(refreshStats, 3000);
|
|
setInterval(function() {
|
|
upTimeSeconds++;
|
|
$('#stat-upTime').text(formatUpTime(upTimeSeconds));
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
{{end}} |