|
|
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
|
|
|
<%@page language="java" contentType="text/html;charset=utf-8" %>
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
|
<%
|
|
|
|
String path = request.getContextPath();
|
|
|
|
String basePath = request.getScheme() + "://"
|
|
...
|
...
|
@@ -7,96 +7,111 @@ |
|
|
|
+ path + "/";
|
|
|
|
String serviceType = request.getParameter("serviceType");
|
|
|
|
String serviceName = request.getParameter("serviceName");
|
|
|
|
String startTime = request.getParameter("startTime");
|
|
|
|
String endTime = request.getParameter("endTime");
|
|
|
|
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");
|
|
|
|
%>
|
|
|
|
|
|
|
|
<!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"/>
|
|
|
|
<script>
|
|
|
|
var contextPath = '<%=basePath %>';
|
|
|
|
var serviceType = "<%=serviceType %>";
|
|
|
|
var serviceName = "<%=serviceName%>";
|
|
|
|
var startTime = "<%=startTime%>>";
|
|
|
|
var endTime = "<%=endTime%>>";
|
|
|
|
var apiName = "<%=apiName%>>";
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- 右侧具体内容 -->
|
|
|
|
<form class="form-horizontal" id="javaIpInfoForm" name="javaIpInfoForm">
|
|
|
|
<form class="form-horizontal" id="javaMonitorForm" name="javaMonitorForm" style="width: 800px;margin-left: 15px">
|
|
|
|
<div class="form-group">
|
|
|
|
<div class="col-sm-5" >
|
|
|
|
<span class="input-group-addon">服务名：</span>
|
|
|
|
<input type="text" id="serviceType" name="serviceType" class="form-control" disabled>
|
|
|
|
</input>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-5" >
|
|
|
|
<span class="input-group-addon">接口名：</span>
|
|
|
|
<input type="text" id="apiName" name="apiName" class="form-control" disabled>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<label class="col-sm-2 control-label"> 服务名：</label>
|
|
|
|
<div class="col-sm-8">
|
|
|
|
<input type="text" class="form-control" id="serviceName" name="serviceName"
|
|
|
|
size="40"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-sm-2 control-label"></span>接口名：</label>
|
|
|
|
<div class="col-sm-8">
|
|
|
|
<input type="text" class="form-control" id="apiName" name="apiName"
|
|
|
|
size="40"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
|
|
<li role="presentation" class="active">
|
|
|
|
<a href="#timesPartIpInfo" aria-controls="timesPartIpInfo" role="tab" data-toggle="tab">异常次数</a>
|
|
|
|
<a href="#ipTimesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
|
|
|
|
</li>
|
|
|
|
<li role="presentation">
|
|
|
|
<a href="#costPartIpInfo" aria-controls="costPartIpInfo" role="tab" data-toggle="tab">平均耗时</a>
|
|
|
|
<a href="#ipCostPart" 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="timesPartIpInfo">
|
|
|
|
<div role="tabpanel" class="tab-pane fade in active" id="ipTimesPart">
|
|
|
|
<div id="ipInfoTable"></div>
|
|
|
|
</div>
|
|
|
|
<div role="ipInfoTable2" class="tab-pane fade" id="costPartIpInfo">
|
|
|
|
<div id="infoTable1"></div>
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="ipCostPart">
|
|
|
|
<div id="ipInfoTable1"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
$("#serviceType").val(serviceName);
|
|
|
|
$("#apiName").val(apiName);
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
|
|
$("#javaIpInfoForm #ipInfoTable").table({
|
|
|
|
var contextPath = '<%=basePath %>';
|
|
|
|
var serviceType = "<%=serviceType %>";
|
|
|
|
var serviceName = "<%=serviceName%>";
|
|
|
|
var startTime = "<%=startTime1%>"+" "+"<%=startTime2%>";
|
|
|
|
var endTime = "<%=endTime1%>"+" "+"<%=endTime2%>";
|
|
|
|
var apiName = "<%=apiName%>";
|
|
|
|
var cloudType = "<%=cloudType%>";
|
|
|
|
|
|
|
|
$("#javaMonitorForm #serviceName").val(serviceName);
|
|
|
|
$("#javaMonitorForm #apiName").val(apiName);
|
|
|
|
|
|
|
|
|
|
|
|
$("#javaMonitorForm #ipInfoTable").table({
|
|
|
|
columnAutoWidth: false,
|
|
|
|
url: contextPath + "/javaMonitor/query",
|
|
|
|
url: contextPath + "/javaMonitor/queryByServiceTypeAndApiName",
|
|
|
|
queryParams : {
|
|
|
|
startTime : startTime,
|
|
|
|
endTime : endTime,
|
|
|
|
serviceType : serviceType,
|
|
|
|
serviceName : serviceName,
|
|
|
|
apiName :apiName,
|
|
|
|
cloudType : cloudType
|
|
|
|
},
|
|
|
|
striped: true,
|
|
|
|
title: "java服务监控信息列表",
|
|
|
|
dataType: "json",
|
|
|
|
sortable: true, //是否启用排序
|
|
|
|
sortOrder: "desc",
|
|
|
|
loadFilter: function (data) {
|
|
|
|
return defaultLoadFilter(data);
|
|
|
|
},
|
|
|
|
onLoadSuccess: function (data) {
|
|
|
|
if(data != null){
|
|
|
|
if(data.data != null){
|
|
|
|
//同步加载根据平均耗时排序的tab页列表
|
|
|
|
var costObj = new Array();
|
|
|
|
for(var j = 0;j<data.data.length;j++){
|
|
|
|
costObj.push(data.data[j]);
|
|
|
|
}
|
|
|
|
//按平均耗时从大到小排序ss
|
|
|
|
costObj.sort(function(a,b){
|
|
|
|
return b.avgCost-a.avgCost;
|
|
|
|
});
|
|
|
|
|
|
|
|
//同步加载根据异常次数排序的tab页列表
|
|
|
|
var errorObj = new Array();
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
errorObj.push(data[i]);
|
|
|
|
for (var i = 0; i < data.data.length; i++) {
|
|
|
|
errorObj.push(data.data[i]);
|
|
|
|
}
|
|
|
|
//按异常次数从大到小排序
|
|
|
|
errorObj.sort(function (a, b) {
|
|
|
|
return b.errorCount - a.errorCount;
|
|
|
|
});
|
|
|
|
$("#javaIpInfoForm #ipInfoTable2").table("loadLoaclData", errorObj);
|
|
|
|
$("#javaMonitorForm #ipInfoTable").table("loadLoaclData", errorObj);
|
|
|
|
$("#javaMonitorForm #ipInfoTable1").table("loadLoaclData", costObj);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
columns: [{
|
|
|
|
title: "IP",
|
|
|
|
field: "ip",
|
|
|
|
width: "10%",
|
|
|
|
sortable: true
|
|
|
|
width: "10%"
|
|
|
|
}, {
|
|
|
|
title: "总请求次数",
|
|
|
|
field: "totalCount",
|
|
...
|
...
|
@@ -111,7 +126,7 @@ |
|
|
|
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);
|
|
|
|
var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
|
|
|
|
var content = "";
|
|
|
|
if (rowData.errorInfo != null) {
|
|
|
|
for (var i = 0; i < rowData.errorInfo.length; i++) {
|
|
...
|
...
|
@@ -119,21 +134,23 @@ |
|
|
|
}
|
|
|
|
}
|
|
|
|
editBtn.click(function () {
|
|
|
|
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(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;
|
|
|
|
}
|
|
...
|
...
|
@@ -141,54 +158,60 @@ |
|
|
|
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);
|
|
|
|
// var content = "";
|
|
|
|
// if(rowData.timeoutInfo != null){
|
|
|
|
// for(var i = 0;i<rowData.timeoutInfo.length;i++){
|
|
|
|
// content= content +rowData.timeoutInfo[i]+"<br><br>";
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// editBtn.click(function () {
|
|
|
|
// var dialog = $("<div>").appendTo($("body"));
|
|
|
|
// dialog.dialog({
|
|
|
|
// backdrop : "static",
|
|
|
|
// title : "超时详情",
|
|
|
|
// content : content,
|
|
|
|
// height : "60%",
|
|
|
|
// width : "50%",
|
|
|
|
// buttons : [{
|
|
|
|
// text : "关闭",
|
|
|
|
// className : "btn-danger",
|
|
|
|
// onclick : function() {
|
|
|
|
// $(dialog).dialog("hide");
|
|
|
|
// }
|
|
|
|
// }]
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// return div;
|
|
|
|
// }
|
|
|
|
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);
|
|
|
|
var content = "";
|
|
|
|
if(rowData.timeoutInfo != null){
|
|
|
|
for(var i = 0;i<rowData.timeoutInfo.length;i++){
|
|
|
|
content= content +rowData.timeoutInfo[i]+"<br><br>";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
editBtn.click(function () {
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
|
|
|
|
//加载表格
|
|
|
|
$("#javaIpInfoForm #ipInfoTable2").table({
|
|
|
|
$("#javaMonitorForm #ipInfoTable1").table({
|
|
|
|
columnAutoWidth: false,
|
|
|
|
striped: true,
|
|
|
|
title: "java服务监控信息列表",
|
|
|
|
dataType: "json",
|
|
|
|
sortable: true, //是否启用排序
|
|
|
|
sortOrder: "desc",
|
|
|
|
columns: [{
|
|
|
|
title: "IP",
|
|
|
|
field: "ip",
|
|
|
|
width: "10%",
|
|
|
|
sortable: true
|
|
|
|
},{
|
|
|
|
}, {
|
|
|
|
title: "总请求次数",
|
|
|
|
field: "totalCount",
|
|
|
|
width: "10%",
|
|
|
|
sortable: true
|
|
|
|
}, {
|
|
|
|
title: "请求异常次数",
|
|
|
|
field: "errorCount",
|
|
|
|
width: "10%",
|
|
...
|
...
|
@@ -197,7 +220,7 @@ |
|
|
|
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);
|
|
|
|
var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
|
|
|
|
var content = "";
|
|
|
|
if (rowData.errorInfo != null) {
|
|
|
|
for (var i = 0; i < rowData.errorInfo.length; i++) {
|
|
...
|
...
|
@@ -205,21 +228,23 @@ |
|
|
|
}
|
|
|
|
}
|
|
|
|
editBtn.click(function () {
|
|
|
|
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(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;
|
|
|
|
}
|
|
...
|
...
|
@@ -227,41 +252,41 @@ |
|
|
|
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);
|
|
|
|
// var content = "";
|
|
|
|
// if(rowData.timeoutInfo != null){
|
|
|
|
// for(var i = 0;i<rowData.timeoutInfo.length;i++){
|
|
|
|
// content= content +rowData.timeoutInfo[i]+"<br><br>";
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// editBtn.click(function () {
|
|
|
|
// var dialog = $("<div>").appendTo($("body"));
|
|
|
|
// dialog.dialog({
|
|
|
|
// backdrop : "static",
|
|
|
|
// title : "超时详情",
|
|
|
|
// content : content,
|
|
|
|
// height : "60%",
|
|
|
|
// width : "50%",
|
|
|
|
// buttons : [{
|
|
|
|
// text : "关闭",
|
|
|
|
// className : "btn-danger",
|
|
|
|
// onclick : function() {
|
|
|
|
// $(dialog).dialog("hide");
|
|
|
|
// }
|
|
|
|
// }]
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// return div;
|
|
|
|
// }
|
|
|
|
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);
|
|
|
|
var content = "";
|
|
|
|
if(rowData.timeoutInfo != null){
|
|
|
|
for(var i = 0;i<rowData.timeoutInfo.length;i++){
|
|
|
|
content= content +rowData.timeoutInfo[i]+"<br><br>";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
editBtn.click(function () {
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
\ No newline at end of file |
...
|
...
|
|
