nps/web/views/index/index.html

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 langtag="word-connectionport"></h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{.p}}</h1>
                </div>
            </div>
        </div>
        <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">{{.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">{{.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">{{.data.tcpCount}}</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-6">
                                    <strong langtag="word-bridgingmode"></strong>
                                </div>
                                <div class="col-sm-6 text-right">
                                    <strong>{{.data.bridgeType}}</strong>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong langtag="word-httpport"></strong>
                                </div>
                                <div class="col-sm-6 text-right">
                                    <strong>{{.data.httpProxyPort}}</strong>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong langtag="word-httpsport"></strong>
                                </div>
                                <div class="col-sm-6 text-right">
                                    <strong>{{.data.httpsProxyPort}}</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-{{.data.ipLimit}}"></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-6">
                                    <strong langtag="word-p2pport"></strong>
                                </div>
                                <div class="col-sm-6 text-right">
                                    <strong>{{.data.p2pPort}}</strong>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item ">
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong langtag="word-serveriP"></strong>
                                </div>
                                <div class="col-sm-6 text-right">
                                    <strong>{{.data.serverIp}}</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}}</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 id="overview_cpu_bar" class="progress-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 id="overview_memory_bar" class="progress-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>
    </div>

{{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>
</div>

<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('&emsp;' + 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")

	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.addEventListener('resize', () => {
        for(var key in charts){
            charts[key].resize();
        }
    });
</script>