271 lines
9.4 KiB
Plaintext
271 lines
9.4 KiB
Plaintext
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
||
<%@ taglib uri="/jstl/c" prefix="c"%>
|
||
<%@ taglib uri="/jstl/fn" prefix="fn"%>
|
||
<%@ taglib uri="/jstl/fmt" prefix="fmt"%>
|
||
<%
|
||
String path = request.getContextPath();
|
||
String basePath = request.getScheme() + "://"
|
||
+ request.getServerName() + ":" + request.getServerPort()
|
||
+ path + "/";
|
||
request.setAttribute("vEnter","\n");
|
||
%>
|
||
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title>National Proxy</title>
|
||
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet" type="text/css" />
|
||
<script language="javascript" type="text/javascript" src="<c:url value='/js/jquery1.11.3.js'/>"></script>
|
||
<script language="javascript" type="text/javascript" src="<c:url value='/js/echarts.min.js'/>"></script>
|
||
</head>
|
||
<style>
|
||
.section{
|
||
margin: 30px 10px 30px 10px;
|
||
float: left;
|
||
width:100%;
|
||
}
|
||
.part{
|
||
height: 400px;
|
||
width: 50%;
|
||
float: left;
|
||
min-width: 600px;
|
||
}
|
||
.part{
|
||
margin-top: 60px;
|
||
}
|
||
#template{
|
||
display: none;
|
||
}
|
||
.addr{
|
||
text-align: center;
|
||
font-size: 24px;
|
||
font-weight:bold;
|
||
padding: 5px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
.pic{
|
||
float: left;
|
||
}
|
||
</style>
|
||
<script language="javascript" type="text/javascript">
|
||
var systemId = "${systemLogin}";//从session 中取出 systemId
|
||
var refreshInterval = 30000;//定时数据间隔，单位：ms
|
||
//数据源
|
||
var influxdbSource = {
|
||
"100000":{
|
||
addr:"Astana",
|
||
url:'http://10.0.5.19:8086/query'
|
||
},
|
||
"100001":{
|
||
addr:"Almaty",
|
||
url:'http://10.0.5.15:8086/query'
|
||
}
|
||
};
|
||
//配置查询相关信息
|
||
var queryInfo = {
|
||
traffic : {
|
||
title:'Intercept Traffic',
|
||
yAxisName:'packet/s',
|
||
data: {
|
||
legend:['Raw Input'],
|
||
db:'proxy_stat',
|
||
q:'SELECT sum("value_sum") / 30 FROM "[KNI]rx_pkts" WHERE time >= now() - 6h GROUP BY time(30s) fill(0)'
|
||
}
|
||
},
|
||
connections :{
|
||
title:'Intercept Connections',
|
||
yAxisName:'conn/s',
|
||
data:{
|
||
legend:['Pending','Unknown','Asymmetric','Intercept','Whitelist','Not HIT'],
|
||
db:'proxy_stat',
|
||
q:'SELECT sum("value_sum") / 30 FROM "[KNI]link_pending" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_unknown" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_asym" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_intercept" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_whitelist" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_not_hit" WHERE time >= now() - 6h GROUP BY time(30s) fill(0)'
|
||
}
|
||
},
|
||
connect_client_latency : {
|
||
title:'Connect Client Latency',
|
||
data:{
|
||
legend:['50%','60%','90%','mean','upper'],
|
||
db:'proxy_stat',
|
||
q:'SELECT mean("50_percentile_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("60_percentile_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("90_percentile_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("mean_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("upper_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear)'
|
||
}
|
||
},
|
||
connect_server_latency :{
|
||
title:'Connect Server Latency',
|
||
data:{
|
||
legend:['50%','60%','90%','99%','mean','upper'],
|
||
db:'proxy_stat',
|
||
q:'SELECT mean("50_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("60_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("90_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("99_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("mean_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("upper_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none)'
|
||
}
|
||
},
|
||
};
|
||
|
||
function renderChart(systemId){
|
||
var influxdb = influxdbSource[systemId];
|
||
var addr = influxdb.addr;
|
||
var $templateClone = $("#template").clone();
|
||
$templateClone.attr("id",systemId);
|
||
$templateClone.find(".addr").html(addr);
|
||
$("#container").append($templateClone);
|
||
$.each(queryInfo,function(key,info){
|
||
var $part = $templateClone.find("."+key);
|
||
var title = info.title;
|
||
var data = info.data;
|
||
var yAxisName = info.yAxisName;
|
||
var legengData = data.legend;
|
||
var series = [];
|
||
$.each(legengData,function(i,n){
|
||
series.push({
|
||
name: n,
|
||
symbol:"none",
|
||
type: 'line',
|
||
data: []
|
||
});
|
||
});
|
||
var Chart=echarts.init($part[0]);//初始化
|
||
Chart.showLoading({text : "loading..."});
|
||
var option = {
|
||
title: {
|
||
text: title ,
|
||
left:"center"
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function(params){
|
||
var dateTime ;
|
||
var result = "";
|
||
$.each(params,function(i,n){
|
||
console.log(n);
|
||
if(!dateTime){
|
||
dateTime = (new Date(n.value[0])).Format("yyyy-MM-dd hh:mm:ss");//n.value[0];
|
||
}
|
||
result += "<br/>" +n.marker + n.seriesName +": " + (n.value[1]?n.value[1].toFixed(0):"");
|
||
});
|
||
return dateTime + result;
|
||
}
|
||
},
|
||
legend: {
|
||
data:legengData,
|
||
left:20,
|
||
bottom:5
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
timeFormat: 'hh:mm',
|
||
splitNumber:6
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name:yAxisName,
|
||
nameLocation:"middle",
|
||
nameTextStyle:{
|
||
padding:30
|
||
}
|
||
},
|
||
series: series
|
||
};
|
||
Chart.setOption(option);
|
||
});
|
||
}
|
||
|
||
|
||
//刷新数据
|
||
function refreshData(){
|
||
$("#container > .section").each(function(i,n){
|
||
var $section = $(this);
|
||
var systemId = $section.attr("id");
|
||
var influxdb = influxdbSource[systemId];
|
||
$.each(queryInfo,function(key,info){
|
||
var $part = $section.find("."+key);
|
||
var title = info.title;
|
||
var data = info.data;
|
||
var legengData = data.legend;
|
||
$.ajax({//ajax请求获取数据
|
||
type : "POST",
|
||
url : "<c:url value='/proxy.do'/>",
|
||
headers:{
|
||
realurl:influxdb.url
|
||
},
|
||
data:{
|
||
db:data.db,//查询的数据库名
|
||
q:data.q //查询语句
|
||
},
|
||
dataType : "json",
|
||
success : function(data) {
|
||
var results = data.results;//返回的result为json格式的数据
|
||
var series = [];
|
||
$.each(results, function(index, result) {
|
||
var s = result["series"];
|
||
var values = s ? s[0].values : [];
|
||
series.push({
|
||
name: legengData[index],
|
||
type: 'line',
|
||
data: values
|
||
});
|
||
});
|
||
var Chart=echarts.getInstanceByDom($part[0]);//获取echarts实例
|
||
Chart.showLoading({text : "loading..."});
|
||
var option = { series: series };
|
||
Chart.setOption(option);
|
||
Chart.hideLoading();
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
$(function(){
|
||
if(systemId == '-1'){//显示所有地区的图表
|
||
$.each(influxdbSource,function(key,value){
|
||
renderChart(key);
|
||
});
|
||
}else{//只显示当前登录的图表
|
||
renderChart(systemId);
|
||
}
|
||
//首次加载数据
|
||
refreshData();
|
||
//定时刷新功能
|
||
setInterval(function(){
|
||
refreshData();
|
||
}, refreshInterval);
|
||
});
|
||
|
||
// 对Date的扩展，将 Date 转化为指定格式的String
|
||
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
|
||
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
|
||
// 例子：
|
||
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
|
||
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
|
||
Date.prototype.Format = function(fmt) { //author: meizz
|
||
var o = {
|
||
"M+" : this.getMonth()+1, //月份
|
||
"d+" : this.getDate(), //日
|
||
"h+" : this.getHours(), //小时
|
||
"m+" : this.getMinutes(), //分
|
||
"s+" : this.getSeconds(), //秒
|
||
"q+" : Math.floor((this.getMonth()+3)/3), //季度
|
||
"S" : this.getMilliseconds() //毫秒
|
||
};
|
||
if(/(y+)/.test(fmt))
|
||
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
|
||
for(var k in o)
|
||
if(new RegExp("("+ k +")").test(fmt))
|
||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
||
return fmt;
|
||
}
|
||
</script>
|
||
<body>
|
||
<div id="container" class="container"></div>
|
||
<div id="template" class="section" >
|
||
<div class="addr"></div>
|
||
<div class="pic">
|
||
<div class="part traffic"></div>
|
||
<div class="part connections"></div>
|
||
<div class="part connect_client_latency"></div>
|
||
<div class="part connect_server_latency"></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|