1、新增代理流量展示功能
This commit is contained in:
fangshunjian
22
WebRoot/js/echarts.min.js
vendored
Normal file
22
WebRoot/js/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
270
WebRoot/page/detection/monitorData/grafana.jsp
Normal file
270
WebRoot/page/detection/monitorData/grafana.jsp
Normal file
@@ -0,0 +1,270 @@
|
||||
<%@ 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.19:8086/query'
|
||||
} */
|
||||
};
|
||||
//配置查询相关信息
|
||||
var queryInfo = {
|
||||
traffic : {
|
||||
title:'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:'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:"49%"
|
||||
},
|
||||
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 : influxdb.url,
|
||||
crossDomain:true,//请求偏向外域
|
||||
data:{
|
||||
db:data.db,//查询的数据库名
|
||||
q:data.q //查询语句
|
||||
},
|
||||
dataType : "json",
|
||||
success : function(data) {
|
||||
console.log(data);
|
||||
var results = data.results;//返回的result为json格式的数据
|
||||
var series = [];
|
||||
$.each(results, function(index, result) {
|
||||
var s = result["series"];
|
||||
var values = s ? s[0].values : [];
|
||||
console.log(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 };
|
||||
console.log(option);
|
||||
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>
|
||||
Reference in New Issue
Block a user