ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit 8c7a08b041baf996900bc3b35bbbd5d344da8b9a 2 parents f2398634 b0228444

Merge branch 'dev1019'

Inline Side-by-side
Showing 7 changed files with 1622 additions and 552 deletions
... ... @@ -179,5 +179,8 @@ public class HttpUriContants {
public static final String JAVA_API_LIST = "/newJavaApiInfo/queryByServiceTypeAndIP";
public static final String JAVA_IP_API_LIST= "/newJavaApiInfo/queryByServiceTypeAndApiName";
public static final String JAVA_API_GRAPH_GET = "/newJavaApiInfo/getServiceNameJavaApiGraph";
public static final String JAVA_TIME_OUT_GET = "/newJavaApiInfo/queryTimeoutInfoListByIp";
public static final String JAVA_TIME_OUT_INFO_GET = "/newJavaApiInfo/queryTimeoutInfoListByApiName";
public static final String JAVA_ERROR_GET = "/newJavaApiInfo/queryErrorInfoListByIp";
public static final String JAVA_ERROR_INFO_GET = "/newJavaApiInfo/queryErrorInfoListByApiName";
}
... ...
... ... @@ -88,40 +88,55 @@ public class JavaMonitorCtrl {
return rep;
}
@RequestMapping("/queryByServiceTypeAndIP")
@RequestMapping("/queryTimeoutInfoListByIp")
@ResponseBody
public BaseResponse queryByServiceTypeAndIP(JavaApiMonitorReq req) {
if(req.getCloudType() == 0){
req.setCloudType(1);
public BaseResponse queryTimeoutInfoListByIp(JavaApiMonitorReq req) {
//0-gateway的默认，-1-all的默认
if(req.getServiceType() == 0){
req.setServiceType(-1);
}
if ("0".equals(req.getIp())) {
req.setIp("");
}
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_TIME_OUT_GET, req, BaseResponse.class);
return rep;
}
@RequestMapping("/queryTimeoutInfoListByApiName")
@ResponseBody
public BaseResponse queryTimeoutInfoListByApiName(JavaApiMonitorReq req) {
//0-gateway的默认，-1-all的默认
if(req.getServiceType() == 0){
req.setServiceType(-1);
}
if(StringUtils.isEmpty(req.getServiceName())){
req.setServiceName("all");
if ("0".equals(req.getIp())) {
req.setIp("");
}
if(req.getTimeInterval() == 0){
req.setTimeInterval(1);
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_TIME_OUT_INFO_GET, req, BaseResponse.class);
return rep;
}
@RequestMapping("/queryErrorInfoListByIp")
@ResponseBody
public BaseResponse queryErrorInfoListByIp(JavaApiMonitorReq req) {
//0-gateway的默认，-1-all的默认
if(req.getServiceType() == 0){
req.setServiceType(-1);
}
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_API_LIST, req, BaseResponse.class);
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_ERROR_GET, req, BaseResponse.class);
return rep;
}
@RequestMapping("/queryByServiceTypeAndApiName")
@RequestMapping("/queryErrorInfoListByApiName")
@ResponseBody
public BaseResponse queryByServiceTypeAndApiName(JavaApiMonitorReq req) {
if(req.getCloudType() == 0){
req.setCloudType(1);
public BaseResponse queryErrorInfoListByApiName(JavaApiMonitorReq req) {
//0-gateway的默认，-1-all的默认
if(req.getServiceType() == 0){
req.setServiceType(-1);
}
if ("0".equals(req.getIp())) {
req.setIp("");
}
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_IP_API_LIST, req, BaseResponse.class);
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_ERROR_INFO_GET, req, BaseResponse.class);
return rep;
}
}
... ...
... ... @@ -41,7 +41,8 @@
</div>
<div class="col-sm-5 control-label" role="form" id="chartterDiv1"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div id="costQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
<div id="costQcloudCharts" class="input-group"
style="height: 380px;width: 760px;margin-left: 100px">
</div>
</div>
</div>
... ... @@ -54,7 +55,8 @@
</div>
<div class="col-sm-5 control-label" role="form" id="chartterDiv4"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div id="timesQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
<div id="timesQcloudCharts" class="input-group"
style="height: 380px;width: 760px;margin-left: 100px">
</div>
</div>
</div>
... ... @@ -70,26 +72,30 @@
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" id="timeDiv" style="float: left;">
<select id="timeInterval" name="timeInterval" class="form-control" onchange="getOnchange(1)">
<select id="timeInterval" name="timeInterval" class="form-control"
onchange="getOnchange(1)">
<option value="1">1 minute</option>
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
</select>
</div>
<div class="input-group" style="margin-left: 10px">
<span class="input-group-addon" >服务名：</span>
<select id="searchApiName" name="searchApiName" class="form-control" onchange="getOnchange(2)">
<span class="input-group-addon">服务名：</span>
<select id="searchApiName" name="searchApiName" class="form-control"
onchange="getOnchange(2)">
</select>
</div>
<div class="input-group" style="margin-left: 15px">
<select id="cloudType" name="cloudType" class="form-control" style="width: 100px" onchange="getOnchange(2)">
<select id="cloudType" name="cloudType" class="form-control" style="width: 100px"
onchange="getOnchange(2)">
<option value="1">AWS</option>
<option value="2">QCloud</option>
</select>
</div>
<div class="input-group" style="margin-left: 15px">
<span class="input-group-addon">IP：</span>
<select id="iPName" name="iPName" class="form-control" style="width: 200px" onchange="getIpOnchange()">
<select id="iPName" name="iPName" class="form-control" style="width: 200px"
onchange="getIpOnchange()">
</select>
</div>
</div>
... ... @@ -97,9 +103,12 @@
<div id="infoTableDiv">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#allTimesPart" aria-controls="allTimesPart" role="tab" data-toggle="tab">总请求次数</a>
<a href="#allTimesPart" aria-controls="allTimesPart" role="tab" data-toggle="tab">压力</a>
</li>
<li role="presentation" >
<li role="presentation">
<a href="#totalPart" aria-controls="totalPart" role="tab" data-toggle="tab">总请求次数</a>
</li>
<li role="presentation">
<a href="#timesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
</li>
<li role="presentation">
... ... @@ -110,6 +119,9 @@
<div role="tabpanel" class="tab-pane fade in active" id="allTimesPart">
<div id="infoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="totalPart">
<div id="infoTable3"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="timesPart">
<div id="infoTable1"></div>
</div>
... ... @@ -143,19 +155,19 @@
//1min定时
function timer() {
//加载表格
if($("#searchApiName").val() != null && $("#iPName").val() != null) {
if ($("#searchApiName").val() != null && $("#iPName").val() != null) {
$("#infoTable").table("load", {
serviceType : $("#searchApiName").val(),
serviceName : $("#searchApiName").select("getText"),
ip:$("#iPName").val(),
cloudType : $("#cloudType").val(),
timeInterval : $("#timeInterval").val()
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: $("#iPName").val(),
cloudType: $("#cloudType").val(),
timeInterval: $("#timeInterval").val()
});
//更新曲线图
getLineDate(1,1);
getLineDate(1,2);
getLineDate(2,1);
getLineDate(2,2);
getLineDate(1, 1);
getLineDate(1, 2);
getLineDate(2, 1);
getLineDate(2, 2);
}
setTimeout("timer()", 60000);
}
... ... @@ -164,15 +176,15 @@
//类型选择事件
function getOnchange(type) {
$("#infoTable").table("load", {
serviceType : $("#searchApiName").val(),
serviceName : $("#searchApiName").select("getText"),
ip:"",
cloudType :$("#cloudType").val(),
timeInterval : $("#timeInterval").val()
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: "",
cloudType: $("#cloudType").val(),
timeInterval: $("#timeInterval").val()
});
if(type != 1){
if (type != 1) {
var cloudType = $("#cloudType").val();
if(cloudType == null){
if (cloudType == null) {
cloudType = 1;
}
getJavaIp(cloudType);
... ... @@ -182,30 +194,30 @@
//ip类型选择事件
function getIpOnchange() {
$("#infoTable").table("load", {
serviceType : $("#searchApiName").val(),
serviceName : $("#searchApiName").select("getText"),
ip:$("#iPName").val(),
cloudType : $("#cloudType").val(),
timeInterval : $("#timeInterval").val()
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: $("#iPName").val(),
cloudType: $("#cloudType").val(),
timeInterval: $("#timeInterval").val()
});
}
var getJavaIp = function (cloudType) {
var serviceType = $("#searchApiName").val();
var serviceName = $("#searchApiName").select("getText");
if(serviceType == null){
if (serviceType == null) {
serviceType = -1;
serviceName = "all";
}
$.ajax({
url: contextPath + "/javaApiMonitor/queryIpList",
type: 'post',
data : {
serviceType:serviceType,
cloudType : cloudType,
serviceName :serviceName
data: {
serviceType: serviceType,
cloudType: cloudType,
serviceName: serviceName
},
dataType:'json',
dataType: 'json',
success: function (data) {
var selObj = $("#iPName");
selObj.empty();
... ... @@ -226,8 +238,8 @@
selObj.empty();
selObj.append("<option value=0>" + "all" + "</option>");
$.each(data.data, function (idx, val) {
if(val.typeName == "gateway" || val.typeName == "order" || val.typeName == "promotion" || val.typeName == "product" || val.typeName == "message"
|| val.typeName == "sns" || val.typeName == "user" || val.typeName == "resources" || val.typeName == "brower"){
if (val.typeName == "gateway" || val.typeName == "order" || val.typeName == "promotion" || val.typeName == "product" || val.typeName == "message"
|| val.typeName == "sns" || val.typeName == "users" || val.typeName == "resources" || val.typeName == "brower" || val.typeName == "browser") {
selObj.append("<option value='" + val.typeId + "'>" + val.typeName + "</option>");
}
... ... @@ -239,10 +251,10 @@
$(function () {
//更新曲线图
getLineDate(1,1);
getLineDate(1,2);
getLineDate(2,1);
getLineDate(2,2);
getLineDate(1, 1);
getLineDate(1, 2);
getLineDate(2, 1);
getLineDate(2, 2);
// $("#searchApiName").select({
// valueField: "typeId",
... ... @@ -269,7 +281,7 @@
sortable: true, //是否启用排序
sortOrder: "desc",
onLoadSuccess: function (data) {
if(data.data != null){
if (data.data != null) {
//记录开始时间，结束时间
paramObj.startTime = data.data.startTime;
paramObj.endTime = data.data.endTime;
... ... @@ -277,38 +289,49 @@
var allObj = new Array();
var costObj = new Array();
var errorObj = new Array();
for(var j = 0;j<data.data.content.length;j++){
var pressObj = new Array();
for (var j = 0; j < data.data.content.length; j++) {
allObj.push(data.data.content[j]);
costObj.push(data.data.content[j]);
errorObj.push(data.data.content[j]);
pressObj.push(data.data.content[j]);
}
//按压力排序
pressObj.sort(function (a, b) {
if (b.totalCost == a.totalCost) {
return b.totalCount - a.totalCount;
}
return b.totalCost - a.totalCost;
});
//按总请求次数排序
allObj.sort(function(a,b){
if(b.totalCount == a.totalCount){
return b.errorCount-a.errorCount;
allObj.sort(function (a, b) {
if (b.totalCount == a.totalCount) {
return b.totalCost - a.totalCost;
}
return b.totalCount-a.totalCount;
return b.totalCount - a.totalCount;
});
//按平均耗时从大到小排序ss
costObj.sort(function(a,b){
if(b.avgCost == a.avgCost){
return b.errorCount-a.errorCount;
costObj.sort(function (a, b) {
if (b.avgCost == a.avgCost) {
return b.errorCount - a.errorCount;
}
return b.avgCost-a.avgCost;
return b.avgCost - a.avgCost;
});
//同步加载根据异常次数排序的tab页列表
//按异常次数从大到小排序
errorObj.sort(function (a, b) {
if(b.errorCount == a.errorCount){
return b.avgCost-a.avgCost;
if (b.errorCount == a.errorCount) {
return b.avgCost - a.avgCost;
}
return b.errorCount - a.errorCount;
});
$("#infoTable").table("loadLoaclData", allObj);
$("#infoTable").table("loadLoaclData", pressObj);
$("#infoTable1").table("loadLoaclData", errorObj);
$("#infoTable2").table("loadLoaclData", costObj);
$("#infoTable3").table("loadLoaclData", allObj);
}
},
columns: [{
... ... @@ -320,11 +343,11 @@
var end = paramObj.endTime.split(" ");
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height","35px").html(rowData.apiName).appendTo(div);
var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height", "35px").html(rowData.apiName).appendTo(div);
editBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName="+rowData.serviceName+"&apiName="+rowData.apiName+"&cloudType="+$("#cloudType").val()
+"&startTime1="+start[0]+"&startTime2="+start[1]+"&endTime1="+end[0]+"&endTime2="+end[1];
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName=" + rowData.serviceName + "&apiName=" + rowData.apiName + "&cloudType=" + $("#cloudType").val()
+ "&startTime1=" + start[0] + "&startTime2=" + start[1] + "&endTime1=" + end[0] + "&endTime2=" + end[1];
dialog.dialog({
backdrop: "static",
title: "API详情",
... ... @@ -347,14 +370,18 @@
title: "服务名",
field: "serviceName",
width: "10%",
formatter:function(value, rowData, rowIndex){
formatter: function (value, rowData, rowIndex) {
var serviceName = rowData.serviceName;
if(serviceName == null || serviceName==""){
if (serviceName == null || serviceName == "") {
serviceName = $("#searchApiName").select("getText");
}
return serviceName;
}
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
... ... @@ -370,28 +397,55 @@
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + rowData.errorInfo[i] + "<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
// var content = "";
// if (rowData.errorInfo != null) {
// for (var i = 0; i < rowData.errorInfo.length; i++) {
// content = content + rowData.errorInfo[i] + "<br><br>";
// }
// }
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}]
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
});
}
});
... ... @@ -402,40 +456,68 @@
field: "avgCost",
width: "10%",
sortable: true,
formatter : function(value, rowData, rowIndex) {
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
// var content = "";
// if(rowData.timeoutInfo != null){
// for(var i = 0;i<rowData.timeoutInfo.length;i++){
// var temp = new Array();
// temp = rowData.timeoutInfo[i].split("+---");
// if(temp != null && temp.length>0){
// for(var j = 0;j<temp.length;j++){
// content= content + temp[j] + "<br>";
// }
// }
// content= content +"<br><br>";
// }
// }
if (rowData.timeoutCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}
content= content +"<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}]
}
});
}
});
... ... @@ -460,11 +542,11 @@
var end = paramObj.endTime.split(" ");
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height","35px").html(rowData.apiName).appendTo(div);
var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height", "35px").html(rowData.apiName).appendTo(div);
editBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName="+rowData.serviceName+"&apiName="+rowData.apiName+"&cloudType="+$("#cloudType").val()
+"&startTime1="+start[0]+"&startTime2="+start[1]+"&endTime1="+end[0]+"&endTime2="+end[1];
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName=" + rowData.serviceName + "&apiName=" + rowData.apiName + "&cloudType=" + $("#cloudType").val()
+ "&startTime1=" + start[0] + "&startTime2=" + start[1] + "&endTime1=" + end[0] + "&endTime2=" + end[1];
dialog.dialog({
backdrop: "static",
title: "API详情",
... ... @@ -483,18 +565,22 @@
});
return div;
}
},{
}, {
title: "服务名",
field: "serviceName",
width: "10%",
formatter:function(value, rowData, rowIndex){
formatter: function (value, rowData, rowIndex) {
var serviceName = rowData.serviceName;
if(serviceName == null || serviceName==""){
if (serviceName == null || serviceName == "") {
serviceName = $("#searchApiName").select("getText");
}
return serviceName;
}
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
... ... @@ -510,27 +596,49 @@
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + rowData.errorInfo[i] + "<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}]
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
});
}
});
... ... @@ -541,40 +649,56 @@
field: "avgCost",
width: "10%",
sortable: true,
formatter : function(value, rowData, rowIndex) {
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
if (rowData.timeoutCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}
content= content +"<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (data.data != null) {
for (var i = 0; i <data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}]
}
});
}
});
... ... @@ -599,11 +723,11 @@
var end = paramObj.endTime.split(" ");
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height","35px").html(rowData.apiName).appendTo(div);
var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height", "35px").html(rowData.apiName).appendTo(div);
editBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName="+rowData.serviceName+"&apiName="+rowData.apiName+"&cloudType="+$("#cloudType").val()
+"&startTime1="+start[0]+"&startTime2="+start[1]+"&endTime1="+end[0]+"&endTime2="+end[1];
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName=" + rowData.serviceName + "&apiName=" + rowData.apiName + "&cloudType=" + $("#cloudType").val()
+ "&startTime1=" + start[0] + "&startTime2=" + start[1] + "&endTime1=" + end[0] + "&endTime2=" + end[1];
dialog.dialog({
backdrop: "static",
title: "API详情",
... ... @@ -622,18 +746,22 @@
});
return div;
}
},{
}, {
title: "服务名",
field: "serviceName",
width: "10%",
formatter:function(value, rowData, rowIndex){
formatter: function (value, rowData, rowIndex) {
var serviceName = rowData.serviceName;
if(serviceName == null || serviceName==""){
if (serviceName == null || serviceName == "") {
serviceName = $("#searchApiName").select("getText");
}
return serviceName;
}
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
... ... @@ -650,27 +778,50 @@
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + rowData.errorInfo[i] + "<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}]
}
});
}
});
... ... @@ -681,40 +832,239 @@
field: "avgCost",
width: "10%",
sortable: true,
formatter : function(value, rowData, rowIndex) {
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
if (rowData.timeoutCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
});
}
});
return div;
}
}]
});
//加载表格
$("#infoTable3").table({
columnAutoWidth: false,
striped: true,
dataType: "json",
sortOrder: "desc",
columns: [{
title: "接口名",
field: "apiName",
width: "10%",
sortable: true,
formatter: function (value, rowData, rowIndex) {
var start = paramObj.startTime.split(" ");
var end = paramObj.endTime.split(" ");
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height", "35px").html(rowData.apiName).appendTo(div);
editBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName=" + rowData.serviceName + "&apiName=" + rowData.apiName + "&cloudType=" + $("#cloudType").val()
+ "&startTime1=" + start[0] + "&startTime2=" + start[1] + "&endTime1=" + end[0] + "&endTime2=" + end[1];
dialog.dialog({
backdrop: "static",
title: "API详情",
href: url,
height: "700px",
width: "900px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
});
return div;
}
}, {
title: "服务名",
field: "serviceName",
width: "10%",
formatter: function (value, rowData, rowIndex) {
var serviceName = rowData.serviceName;
if (serviceName == null || serviceName == "") {
serviceName = $("#searchApiName").select("getText");
}
return serviceName;
}
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
sortable: true
}, {
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.errorCount).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
content= content +"<br><br>";
}
});
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
});
return div;
}
}, {
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
if (rowData.timeoutCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByApiName",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: rowData.serviceName,
apiName: rowData.apiName,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType: $("#cloudType").val(),
ip: $("#iPName").val()
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}]
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
});
}
});
... ... @@ -723,29 +1073,30 @@
}]
});
});
//获取曲线数据
function getLineDate(lineType,cloudType){
function getLineDate(lineType, cloudType) {
paramObj.serviceType = 0;
paramObj.serviceName = "";
if($("#searchApiName").val() != null){
if ($("#searchApiName").val() != null) {
paramObj.serviceType = $("#searchApiName").val();
}
if($("#searchApiName").select("getText") != null){
if ($("#searchApiName").select("getText") != null) {
paramObj.serviceName = $("#searchApiName").select("getText");
}
$.ajax({
url: contextPath + "/javaApiMonitor/getApiGraphData",
type: 'post',
data:{
serviceType : paramObj.serviceType,
serviceName : paramObj.serviceName,
graphType : lineType,
cloudType : cloudType
data: {
serviceType: paramObj.serviceType,
serviceName: paramObj.serviceName,
graphType: lineType,
cloudType: cloudType
},
dataType:'json',
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取曲线数据失败', '警告', 'warning');
... ... @@ -756,31 +1107,31 @@
var series = data.data.content;
var title = "";
var xText = "";
if(lineType == 1){
if (lineType == 1) {
title = "平均耗时-曲线图";
xText = "cost(ms)";
}else{
} else {
title = "异常次数-曲线图";
xText = "error times";
}
var subTitle = $("#searchApiName").select("getText");
if(subTitle == "all"){
if (subTitle == "all") {
subTitle = "gateway"
}
drawLine(lineType,title,xText,categories,series,cloudType);
drawLine(lineType, title, xText, categories, series, cloudType);
}
});
}
//画图事件
function drawLine(type,title,yText,categories,series,cloudType) {
function drawLine(type, title, yText, categories, series, cloudType) {
var titleText = "(AWS)";
if(cloudType == 2){
if (cloudType == 2) {
titleText = "(Qcloud)"
}
var title = {
text: title+titleText
text: title + titleText
};
var subtitle = {
text: ""
... ... @@ -789,7 +1140,7 @@
// tickInterval: 5*60* 1000, // one week
// categories: ['16:40','16:42','16:44', '16:46','16:48', '16:50',
// '16:52', '16:54', '16:56', '16:58', '17:00', '17:02']
categories:categories
categories: categories
};
var yAxis = {
title: {
... ... @@ -828,15 +1179,15 @@
json.legend = legend;
json.series = series;
if(type == 1 && cloudType == 1){
if (type == 1 && cloudType == 1) {
$('#costAwsCharts').highcharts(json);
}else if(type == 1 && cloudType == 2){
} else if (type == 1 && cloudType == 2) {
$('#costQcloudCharts').highcharts(json);
}else if (type == 2 && cloudType == 1){
} else if (type == 2 && cloudType == 1) {
$('#timesAwsCharts').highcharts(json);
}else{
} else {
$('#timesQcloudCharts').highcharts(json);
}
}
... ...
... ... @@ -32,6 +32,12 @@
<div class="form-group">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#ipPressPart" aria-controls="pressPart" role="tab" data-toggle="tab">压力</a>
</li>
<li role="presentation">
<a href="#allPart" aria-controls="allPart" role="tab" data-toggle="tab">总请求次数</a>
</li>
<li role="presentation">
<a href="#ipTimesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
</li>
<li role="presentation">
... ... @@ -39,9 +45,15 @@
</li>
</ul>
<div class="tab-content" style="padding-top:10px">
<div role="tabpanel" class="tab-pane fade in active" id="ipTimesPart">
<div role="tabpanel" class="tab-pane fade in active" id="ipPressPart">
<div id="ipInfoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="allPart">
<div id="ipInfoTable3"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="ipTimesPart">
<div id="ipInfoTable2"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="ipCostPart">
<div id="ipInfoTable1"></div>
</div>
... ... @@ -68,7 +80,7 @@
$("#javaMonitorForm #ipInfoTable").table({
columnAutoWidth: false,
url: contextPath + "/javaMonitor/queryByServiceTypeAndApiName",
url: contextPath + "/javaApiMonitor/queryByServiceTypeAndApiName",
queryParams : {
startTime : startTime,
endTime : endTime,
... ... @@ -85,10 +97,30 @@
//同步加载根据平均耗时排序的tab页列表
var costObj = new Array();
var errorObj = new Array();
var pressObj = new Array();
var allObj = new Array();
for(var j = 0;j<data.data.length;j++){
costObj.push(data.data[j]);
errorObj.push(data.data[j]);
allObj.push(data.data[j]);
pressObj.push(data.data[j]);
}
//按压力排序
pressObj.sort(function(a,b){
if(b.totalCost == a.totalCost){
return b.totalCount-a.totalCount;
}
return b.totalCost-a.totalCost;
});
//按总请求次数排序
allObj.sort(function(a,b){
if(b.totalCount == a.totalCount){
return b.totalCost-a.totalCost;
}
return b.totalCount-a.totalCount;
});
//按平均耗时从大到小排序ss
costObj.sort(function(a,b){
if(b.avgCost == a.avgCost){
... ... @@ -105,8 +137,10 @@
}
return b.errorCount - a.errorCount;
});
$("#javaMonitorForm #ipInfoTable").table("loadLoaclData", errorObj);
$("#javaMonitorForm #ipInfoTable").table("loadLoaclData", pressObj);
$("#javaMonitorForm #ipInfoTable2").table("loadLoaclData", errorObj);
$("#javaMonitorForm #ipInfoTable1").table("loadLoaclData", costObj);
$("#javaMonitorForm #ipInfoTable3").table("loadLoaclData", allObj);
}
},
columns: [{
... ... @@ -114,6 +148,10 @@
field: "ip",
width: "10%"
},{
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
... ... @@ -132,7 +170,7 @@
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + rowData.errorInfo[i] + "<br><br>";
content = content + "<pre>"+ rowData.errorInfo[i]+"</pre>";
}
}
if(content != ""){
... ... @@ -166,17 +204,19 @@
div.append("<br>");
var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
editBtn.click(function () {
var contentDiv = $("<div>");
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
}
}
content= content +"<br><br>";
// var temp = new Array();
// temp = rowData.timeoutInfo[i].split("+---");
// if(temp != null && temp.length>0){
// for(var j = 0;j<temp.length;j++){
// content= content + temp[j] + "<br>";
// }
// }
content = content + "<pre>"+ rowData.timeoutInfo[i]+"</pre>";
}
}
if(content != ""){
... ... @@ -206,7 +246,6 @@
$("#javaMonitorForm #ipInfoTable1").table({
columnAutoWidth: false,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortOrder: "desc",
columns: [{
... ... @@ -214,7 +253,108 @@
field: "ip",
width: "10%",
sortable: true
},{
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
sortable: true
}, {
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.errorCount).appendTo(div);
div.append("<br>");
var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
editBtn.click(function () {
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + "<pre>"+ rowData.errorInfo[i]+"</pre>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}]
});
}
});
return div;
}
}, {
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable: true,
formatter : function(value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
content = content + "<pre>"+ rowData.timeoutInfo[i]+"</pre>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}]
});
}
});
return div;
}
}]
});
//加载表格
$("#javaMonitorForm #ipInfoTable2").table({
columnAutoWidth: false,
striped: true,
dataType: "json",
sortOrder: "desc",
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable: true
},{
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
... ... @@ -233,7 +373,7 @@
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + rowData.errorInfo[i] + "<br><br>";
content = content + "<pre>"+ rowData.errorInfo[i]+"</pre>";
}
}
if(content != ""){
... ... @@ -270,14 +410,104 @@
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
content = content + "<pre>"+ rowData.timeoutInfo[i]+"</pre>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}
content= content +"<br><br>";
}]
});
}
});
return div;
}
}]
});
//加载表格
$("#javaMonitorForm #ipInfoTable3").table({
columnAutoWidth: false,
striped: true,
dataType: "json",
sortOrder: "desc",
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable: true
},{
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
sortable: true
}, {
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.errorCount).appendTo(div);
div.append("<br>");
var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
editBtn.click(function () {
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + "<pre>"+ rowData.errorInfo[i]+"</pre>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}]
});
}
});
return div;
}
}, {
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable: true,
formatter : function(value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
content = content + "<pre>"+ rowData.timeoutInfo[i]+"</pre>";
}
}
if(content != ""){
... ...
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String serviceName = request.getParameter("serviceName");
String startTime1 = request.getParameter("startTime1");
String endTime1 = request.getParameter("endTime1");
String startTime2 = request.getParameter("startTime2");
String endTime2 = request.getParameter("endTime2");
String apiName = request.getParameter("apiName");
String cloudType = request.getParameter("cloudType");
String ip = request.getParameter("ip");
%>
<body>
<form class="form-horizontal" id="javaCostLogInfoForm" name="javaCostLogInfoForm" style="width: 800px;margin-left: 15px">
<div class="form-group">
<div id="costLogInfoTable">
</div>
</div>
</form>
</body>
<script>
$(function () {
var contextPath = '<%=basePath %>';
var serviceName = "<%=serviceName%>";
var startTime = "<%=startTime1%>"+" "+"<%=startTime2%>";
var endTime = "<%=endTime1%>"+" "+"<%=endTime2%>";
var apiName = "<%=apiName%>";
var cloudType = "<%=cloudType%>";
var ip = "<%=ip%>";
$("#javaCostLogInfoForm #costLogInfoTable").table({
columnAutoWidth: false,
url: contextPath + "/javaMonitor/queryByServiceTypeAndApiName",
queryParams : {
startTime : startTime,
endTime : endTime,
serviceName : serviceName,
apiName :apiName,
cloudType : cloudType,
ip : ip
},
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder: "desc",
pagination : true,
pageSize : 5,
columns: [{
title: "超时详情",
field: "ip",
width: "100%"
}],
formatter : function(value, rowData, rowIndex) {
var content = "";
if (rowData.timeoutInfo != null) {
var temp = rowData.timeoutInfo[i].split("+---");
if (temp != null && temp.length > 0) {
for (var j = 0; j < temp.length; j++) {
content = content + temp[j] + "<br>";
}
}
}
return content;
}
});
});
</script>
\ No newline at end of file
... ...
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String serviceName = request.getParameter("serviceName");
String startTime1 = request.getParameter("startTime1");
String endTime1 = request.getParameter("endTime1");
String startTime2 = request.getParameter("startTime2");
String endTime2 = request.getParameter("endTime2");
String apiName = request.getParameter("apiName");
String cloudType = request.getParameter("cloudType");
String ip = request.getParameter("ip");
%>
<body>
<form class="form-horizontal" id="javaLogInfoForm" name="javaLogInfoForm" style="width: 800px;margin-left: 15px">
<div class="form-group">
<div id="logInfoTable">
</div>
</div>
</form>
</body>
<script>
$(function () {
var contextPath = '<%=basePath %>';
var serviceName = "<%=serviceName%>";
var startTime = "<%=startTime1%>"+" "+"<%=startTime2%>";
var endTime = "<%=endTime1%>"+" "+"<%=endTime2%>";
var apiName = "<%=apiName%>";
var cloudType = "<%=cloudType%>";
var ip = "<%=ip%>";
$("#javaLogInfoForm #logInfoTable").table({
columnAutoWidth: false,
url: contextPath + "/javaMonitor/queryByServiceTypeAndApiName",
queryParams : {
startTime : startTime,
endTime : endTime,
serviceName : serviceName,
apiName :apiName,
cloudType : cloudType,
ip : ip
},
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder: "desc",
pagination : true,
pageSize : 5,
columns: [{
title: "异常详情",
field: "ip",
width: "100%"
}],
onLoadSuccess : function(data){
}
});
});
</script>
\ No newline at end of file
... ...
... ... @@ -10,7 +10,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="/jsp/common/include.jsp" flush="true" />
<jsp:include page="/jsp/common/include.jsp" flush="true"/>
<script>
var contextPath = '<%=basePath %>';
</script>
... ... @@ -41,7 +41,8 @@
</div>
<div class="col-sm-5 control-label" role="form" id="chartterDiv1"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div id="costQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
<div id="costQcloudCharts" class="input-group"
style="height: 380px;width: 760px;margin-left: 100px">
</div>
</div>
</div>
... ... @@ -54,7 +55,8 @@
</div>
<div class="col-sm-5 control-label" role="form" id="chartterDiv4"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div id="timesQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
<div id="timesQcloudCharts" class="input-group"
style="height: 380px;width: 760px;margin-left: 100px">
</div>
</div>
</div>
... ... @@ -67,27 +69,32 @@
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" id="timeDiv" style="float: left;">
<select id="timeInterval" name="timeInterval" class="form-control" onchange="getOnchange(2)">
<option value="1">1 minute</option>
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
</select>
</div>
<div class="input-group" style="margin-left: 10px">
<span class="input-group-addon" >服务名：</span>
<select id="searchApiName" name="searchApiName" class="form-control" onchange="getOnchange(1)">
</select>
</div>
<%--<button id="searchJavaInfoBtn" class="btn btn-primary" style="margin-left: 15px">API统计详情</button>--%>
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" id="timeDiv" style="float: left;">
<select id="timeInterval" name="timeInterval" class="form-control"
onchange="getOnchange(2)">
<option value="1">1 minute</option>
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
</select>
</div>
<div class="input-group" style="margin-left: 10px">
<span class="input-group-addon">服务名：</span>
<select id="searchApiName" name="searchApiName" class="form-control"
onchange="getOnchange(1)">
</select>
</div>
<%--<button id="searchJavaInfoBtn" class="btn btn-primary" style="margin-left: 15px">API统计详情</button>--%>
</div>
</div>
<div id="infoTableDiv">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#ipPart" aria-controls="ipPart" role="tab" data-toggle="tab">总请求次数</a>
<a href="#ipPart" aria-controls="ipPart" role="tab" data-toggle="tab">压力</a>
</li>
<li role="presentation" >
<a href="#totalPart" aria-controls="totalPart" role="tab" data-toggle="tab">总请求次数</a>
</li>
<li role="presentation">
<a href="#timesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
... ... @@ -96,17 +103,20 @@
<a href="#costPart" aria-controls="costPart" role="tab" data-toggle="tab">平均耗时</a>
</li>
</ul>
<div class="tab-content" style="padding-top:10px">
<div role="tabpanel" class="tab-pane fade in active" id="ipPart">
<div id="ipInfoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="timesPart">
<div id="infoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="costPart">
<div id="infoTable1"></div>
</div>
<div class="tab-content" style="padding-top:10px">
<div role="tabpanel" class="tab-pane fade in active" id="ipPart">
<div id="ipInfoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="totalPart">
<div id="infoTable2"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="timesPart">
<div id="infoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="costPart">
<div id="infoTable1"></div>
</div>
</div>
</div>
</div>
</div>
... ... @@ -133,7 +143,7 @@
//1min定时
function timer() {
//加载表格
if($("#searchApiName").val() != null && $("#searchApiName").select("getText") != null) {
if ($("#searchApiName").val() != null && $("#searchApiName").select("getText") != null) {
$("#ipInfoTable").table("load", {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
... ... @@ -149,21 +159,21 @@
//画图事件
function drawLine(type,title,subTitle,yText,categories,series) {
function drawLine(type, title, subTitle, yText, categories, series) {
var title1 = {
text: title+"(AWS)"
text: title + "(AWS)"
};
var title2 = {
text: title + "(Qcloud)"
};
var title2 = {
text: title+"(Qcloud)"
};
var subtitle = {
text: subTitle == null? "gateway":subTitle
text: subTitle == null ? "gateway" : subTitle
};
var xAxis = {
// tickInterval: 5*60* 1000, // one week
// tickInterval: 5*60* 1000, // one week
// categories: ['16:40','16:42','16:44', '16:46','16:48', '16:50',
// '16:52', '16:54', '16:56', '16:58', '17:00', '17:02']
categories:categories
categories: categories
};
var yAxis = {
title: {
... ... @@ -192,18 +202,18 @@
// 26.5, 23.3, 18.3, 13.9, 9.6]
// },
// ];
//解析series,区分aws.qcloud
var awsData = new Array();
var qcData = new Array();
if(series != null){
for(var i =0;i<series.length;i++){
if(series[i].cloudType == 1){
awsData.push(series[i])
}else{
qcData.push(series[i])
}
}
}
//解析series,区分aws.qcloud
var awsData = new Array();
var qcData = new Array();
if (series != null) {
for (var i = 0; i < series.length; i++) {
if (series[i].cloudType == 1) {
awsData.push(series[i])
} else {
qcData.push(series[i])
}
}
}
var json1 = {};
json1.title = title1;
json1.subtitle = subtitle;
... ... @@ -213,33 +223,33 @@
json1.legend = legend;
json1.series = awsData;
var json2 = {};
json2.title = title2;
json2.subtitle = subtitle;
json2.xAxis = xAxis;
json2.yAxis = yAxis;
json2.tooltip = tooltip;
json2.legend = legend;
json2.series = qcData;
if(type == 1){
$('#costAwsCharts').highcharts(json1);
$('#costQcloudCharts').highcharts(json2);
}else{
$('#timesAwsCharts').highcharts(json1);
$('#timesQcloudCharts').highcharts(json2);
}
var json2 = {};
json2.title = title2;
json2.subtitle = subtitle;
json2.xAxis = xAxis;
json2.yAxis = yAxis;
json2.tooltip = tooltip;
json2.legend = legend;
json2.series = qcData;
if (type == 1) {
$('#costAwsCharts').highcharts(json1);
$('#costQcloudCharts').highcharts(json2);
} else {
$('#timesAwsCharts').highcharts(json1);
$('#timesQcloudCharts').highcharts(json2);
}
}
//类型选择事件,type用于区分点击服务名称下拉(1)还是时间下拉(2)
function getOnchange(type){
$("#ipInfoTable").table("load", {
function getOnchange(type) {
$("#ipInfoTable").table("load", {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
timeInterval:$("#timeInterval").val()
});
timeInterval: $("#timeInterval").val()
});
//为1则是服务名选择
if(type == 1){
if (type == 1) {
//更新曲线图
getLineDate(1);
getLineDate(2);
... ... @@ -248,25 +258,25 @@
//获取曲线数据
function getLineDate(lineType){
function getLineDate(lineType) {
paramObj.serviceType = 0;
paramObj.serviceName = "";
if($("#searchApiName").val() != null){
if ($("#searchApiName").val() != null) {
paramObj.serviceType = $("#searchApiName").val();
}
if($("#searchApiName").select("getText") != null){
if ($("#searchApiName").select("getText") != null) {
paramObj.serviceName = $("#searchApiName").select("getText");
}
$.ajax({
url: contextPath + "/javaMonitor/getGraphData",
type: 'post',
data:{
serviceType : paramObj.serviceType,
serviceName : paramObj.serviceName,
graphType : lineType
},
dataType:'json',
data: {
serviceType: paramObj.serviceType,
serviceName: paramObj.serviceName,
graphType: lineType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取曲线数据失败', '警告', 'warning');
... ... @@ -277,18 +287,18 @@
var series = data.data.content;
var title = "";
var xText = "";
if(lineType == 1){
if (lineType == 1) {
title = "平均耗时-曲线图";
xText = "cost(ms)";
}else{
} else {
title = "异常次数-曲线图";
xText = "error times";
}
var subTitle = $("#searchApiName").select("getText");
if(subTitle == "all"){
if (subTitle == "all") {
subTitle = "gateway"
}
drawLine(lineType,title,subTitle,xText,categories,series);
drawLine(lineType, title, subTitle, xText, categories, series);
}
});
}
... ... @@ -302,8 +312,8 @@
selObj.empty();
selObj.append("<option value=0>" + "all" + "</option>");
$.each(data.data, function (idx, val) {
if(val.typeName == "gateway" || val.typeName == "order" || val.typeName == "promotion" || val.typeName == "product" || val.typeName == "message"
|| val.typeName == "sns" || val.typeName == "user" || val.typeName == "resources" || val.typeName == "brower"){
if (val.typeName == "gateway" || val.typeName == "order" || val.typeName == "promotion" || val.typeName == "product" || val.typeName == "message"
|| val.typeName == "sns" || val.typeName == "users" || val.typeName == "resources" || val.typeName == "brower" || val.typeName == "browser") {
selObj.append("<option value='" + val.typeId + "'>" + val.typeName + "</option>");
}
... ... @@ -336,30 +346,41 @@
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
sortOrder: "desc",
onLoadSuccess: function (data) {
if(data.data!= null && data.data.content != null) {
if (data.data != null && data.data.content != null) {
//记录下开始时间和结束时间
// paramObj.startTime = data.data.startTime;
// paramObj.endTime = data.data.endTime;
paramObj.startTime = data.data.startTime;
paramObj.endTime = data.data.endTime;
//根据总请求次数排序
var totalObj = new Array();
var pressObj = new Array();
var errorObj = new Array();
var costObj = new Array();
var totalObj = new Array();
for (var k = 0; k < data.data.content.length; k++) {
totalObj.push(data.data.content[k]);
errorObj.push(data.data.content[k]);
costObj.push(data.data.content[k]);
pressObj.push(data.data.content[k]);
}
//按请请求次数从大到小排序ss
totalObj.sort(function (a, b) {
if(b.totalCount == a.totalCount){
return b.errorCount-a.errorCount;
if (b.totalCount == a.totalCount) {
return b.totalCost - a.totalCost;
}
return b.totalCount - a.totalCount;
});
$("#ipInfoTable").table("loadLoaclData", totalObj);
$("#infoTable2").table("loadLoaclData", totalObj);
//按压力从大到小排序ss
pressObj.sort(function (a, b) {
if (b.totalCost == a.totalCost) {
return b.totalCount - a.totalCount;
}
return b.totalCost - a.totalCost;
});
$("#ipInfoTable").table("loadLoaclData", pressObj);
//同步加载根据异常次数排序的tab页列表
//按异常次数从大到小排序
... ... @@ -386,119 +407,174 @@
title: "IP",
field: "ip",
width: "10%",
sortable:true
sortable: true
}, {
title: "网络归属",
field: "type",
field: "cloudName",
width: "10%"
},{
}, {
title: "服务名",
field: "serviceNames",
width: "10%",
formatter:function(value, rowData, rowIndex){
formatter: function (value, rowData, rowIndex) {
var serviceNames = rowData.serviceNames;
if(serviceNames == null || serviceNames==""){
if (serviceNames == null || serviceNames == "") {
serviceNames = $("#searchApiName").select("getText");
}
return serviceNames;
}
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
sortable:true
sortable: true
}, {
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable:true,
formatter : function(value, rowData, rowIndex) {
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.errorCount).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
//点击获取异常详情
editBtn.click(function () {
var content = "";
if(rowData.errorInfo != null){
for(var i = 0;i<rowData.errorInfo.length;i++){
content= content +rowData.errorInfo[i]+"<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
// var content = "";
// if(rowData.errorInfo != null){
// for(var i = 0;i<rowData.errorInfo.length;i++){
// content= content +rowData.errorInfo[i]+"<br><br>";
// }
// }
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}]
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
});
}
});
return div;
}
},{
}, {
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable:true,
formatter : function(value, rowData, rowIndex) {
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
//点击获取超时详情
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
if (rowData.timeoutCount > 0) {
// for (var i = 0; i < rowData.timeoutInfo.length; i++) {
// var temp = rowData.timeoutInfo[i];
// content = content + temp.replaceAll("\n", "<br>") + "<br><br>";
// }
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}
content= content +"<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
}
}]
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
});
}
});
return div;
}
}, {
}, {
title: "CPU使用率",
field: "cpuRate",
width: "10%"
},{
}, {
title: "可用内存/总内存(MB)",
field: "memoryRate",
width: "10%"
},{
}, {
title: "带宽（IN/OUT）(Mbps)",
field: "bandwidth",
width: "10%"
... ... @@ -511,7 +587,7 @@
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
sortOrder: "desc",
// loadFilter: function (data) {
// return defaultLoadFilter(data);
// },
... ... @@ -521,114 +597,154 @@
title: "IP",
field: "ip",
width: "10%",
sortable:true
sortable: true
}, {
title: "网络归属",
field: "type",
field: "cloudName",
width: "10%"
},{
}, {
title: "服务名",
field: "serviceNames",
width: "10%",
formatter:function(value, rowData, rowIndex){
formatter: function (value, rowData, rowIndex) {
var serviceNames = rowData.serviceNames;
if(serviceNames == null || serviceNames==""){
if (serviceNames == null || serviceNames == "") {
serviceNames = $("#searchApiName").select("getText");
}
return serviceNames;
}
},{
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
sortable:true
sortable: true
}, {
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable:true,
formatter : function(value, rowData, rowIndex) {
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.errorCount).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.errorInfo != null){
for(var i = 0;i<rowData.errorInfo.length;i++){
content= content +rowData.errorInfo[i]+"<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}]
}
});
}
});
return div;
}
},{
}, {
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable:true,
formatter : function(value, rowData, rowIndex) {
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
if (rowData.timeoutCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}
content= content +"<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}]
}
});
}
});
return div;
}
}, {
}, {
title: "CPU使用率",
field: "cpuRate",
width: "10%"
},{
}, {
title: "可用内存/总内存(MB)",
field: "memoryRate",
// formatter: function (value, rowData, rowIndex) {
... ... @@ -639,7 +755,7 @@
// },
width: "10%"
},{
}, {
title: "带宽（IN/OUT）(Mbps)",
field: "bandwidth",
width: "15%"
... ... @@ -653,121 +769,333 @@
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
sortOrder: "desc",
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable:true
sortable: true
}, {
title: "网络归属",
field: "type",
field: "cloudName",
width: "10%"
}, {
title: "服务名",
field: "serviceNames",
width: "10%",
formatter:function(value, rowData, rowIndex){
formatter: function (value, rowData, rowIndex) {
var serviceNames = rowData.serviceNames;
if(serviceNames == null || serviceNames==""){
if (serviceNames == null || serviceNames == "") {
serviceNames = $("#searchApiName").select("getText");
}
return serviceNames;
}
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
sortable:true
sortable: true
}, {
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable:true,
formatter : function(value, rowData, rowIndex) {
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.errorCount).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.errorInfo != null){
for(var i = 0;i<rowData.errorInfo.length;i++){
content= content +rowData.errorInfo[i]+"<br><br>";
}
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "异常详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}]
}
});
}
});
return div;
}
},{
}, {
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable:true,
formatter : function(value, rowData, rowIndex) {
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
var content = "";
if(rowData.timeoutInfo != null){
for(var i = 0;i<rowData.timeoutInfo.length;i++){
var temp = new Array();
temp = rowData.timeoutInfo[i].split("+---");
if(temp != null && temp.length>0){
for(var j = 0;j<temp.length;j++){
content= content + temp[j] + "<br>";
if (rowData.timeoutCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
});
}
});
return div;
}
}, {
title: "CPU使用率",
field: "cpuRate",
width: "10%"
}, {
title: "可用内存/总内存(MB)",
field: "memoryRate",
// formatter: function (value, rowData, rowIndex) {
// if (rowData.apiToggle == 0)
// return "N";
// else
// return "Y";
// },
width: "10%"
}, {
title: "带宽（IN/OUT）(Mbps)",
field: "bandwidth",
width: "15%"
}]
});
//加载表格
$("#infoTable2").table({
columnAutoWidth: false,
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder: "desc",
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable: true
}, {
title: "网络归属",
field: "cloudName",
width: "10%"
}, {
title: "服务名",
field: "serviceNames",
width: "10%",
formatter: function (value, rowData, rowIndex) {
var serviceNames = rowData.serviceNames;
if (serviceNames == null || serviceNames == "") {
serviceNames = $("#searchApiName").select("getText");
}
return serviceNames;
}
}, {
title: "压力(s)",
field: "totalCost",
width: "10%"
}, {
title: "总请求次数",
field: "totalCount",
width: "10%",
sortable: true
}, {
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.errorCount).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
if (rowData.errorCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryErrorInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
if (data.data != null) {
for (var i = 0; i <data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "异常详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
content= content +"<br><br>";
}
});
}
if(content != ""){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop : "static",
title : "超时详情",
content : content,
height : "700px",
width : "1100px",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
});
return div;
}
}, {
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable: true,
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var textView = $("<span>").html(rowData.avgCost).appendTo(div);
div.append("<br>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
editBtn.click(function () {
if (rowData.timeoutCount > 0) {
var content = "";
$.ajax({
url: contextPath + "/javaMonitor/queryTimeoutInfoListByIp",
type: 'post',
data: {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText"),
ip: rowData.ip,
startTime: paramObj.startTime,
endTime: paramObj.endTime,
cloudType : rowData.cloudType
},
dataType: 'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取详情数据失败', '警告', 'warning');
return;
}
}]
if (data.data != null) {
for (var i = 0; i < data.data.length; i++) {
content = content + "<pre>"+ data.data[i]+"</pre>";
}
if (content != "") {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
backdrop: "static",
title: "超时详情",
content: content,
height: "700px",
width: "1100px",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
}
}
});
}
});
return div;
}
}, {
}, {
title: "CPU使用率",
field: "cpuRate",
width: "10%"
},{
}, {
title: "可用内存/总内存(MB)",
field: "memoryRate",
// formatter: function (value, rowData, rowIndex) {
... ... @@ -778,7 +1106,7 @@
// },
width: "10%"
},{
}, {
title: "带宽（IN/OUT）(Mbps)",
field: "bandwidth",
width: "15%"
... ... @@ -787,7 +1115,7 @@
});
var title = $("#searchApiName").val();
if (title == null){
if (title == null) {
title = "gateway";
}
//更新曲线图
... ...