ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit ca03179b73bbb5aa7cfee1414c307fdf7d2525ab 2 parents 489a8040 b13877e9

Merge branch 'dev1019'

Inline Side-by-side
Showing 6 changed files with 372 additions and 266 deletions
@@ -162,5 +162,6 @@ public class HttpUriContants { @@ -162,5 +162,6 @@ public class HttpUriContants {
162 public static final String JAVA_GRAPH_GET = "/newJavaApiInfo/getJavaApiGraph"; 162 public static final String JAVA_GRAPH_GET = "/newJavaApiInfo/getJavaApiGraph";
163 public static final String JAVA_IP_LIST = "/newJavaApiInfo/getIPList"; 163 public static final String JAVA_IP_LIST = "/newJavaApiInfo/getIPList";
164 public static final String JAVA_API_LIST = "/newJavaApiInfo/queryByServiceTypeAndIP"; 164 public static final String JAVA_API_LIST = "/newJavaApiInfo/queryByServiceTypeAndIP";
  165 + public static final String JAVA_IP_API_LIST= "/newJavaApiInfo/queryByServiceTypeAndApiName";
165 166
166 } 167 }
@@ -27,4 +27,6 @@ public class JavaApiMonitorReq extends PageRequest { @@ -27,4 +27,6 @@ public class JavaApiMonitorReq extends PageRequest {
27 27
28 private String ip; 28 private String ip;
29 29
  30 + private String apiName;
  31 +
30 } 32 }
@@ -33,6 +33,11 @@ public class JavaMonitorCtrl { @@ -33,6 +33,11 @@ public class JavaMonitorCtrl {
33 return new ModelAndView("javaMonitor/javaApiInfoList"); 33 return new ModelAndView("javaMonitor/javaApiInfoList");
34 } 34 }
35 35
  36 + @RequestMapping("/toJavaIpInfoList")
  37 + public ModelAndView toJavaIpInfoList() {
  38 + return new ModelAndView("javaMonitor/javaIpInfoList");
  39 + }
  40 +
36 @RequestMapping("/query") 41 @RequestMapping("/query")
37 @ResponseBody 42 @ResponseBody
38 public BaseResponse queryApiMonitorInfo(JavaApiMonitorReq req) { 43 public BaseResponse queryApiMonitorInfo(JavaApiMonitorReq req) {
@@ -77,8 +82,27 @@ public class JavaMonitorCtrl { @@ -77,8 +82,27 @@ public class JavaMonitorCtrl {
77 @RequestMapping("/queryByServiceTypeAndIP") 82 @RequestMapping("/queryByServiceTypeAndIP")
78 @ResponseBody 83 @ResponseBody
79 public BaseResponse queryByServiceTypeAndIP(JavaApiMonitorReq req) { 84 public BaseResponse queryByServiceTypeAndIP(JavaApiMonitorReq req) {
  85 + if(req.getCloudType() == 0){
  86 + req.setCloudType(1);
  87 + }
  88 + if ("0".equals(req.getIp())) {
  89 + req.setIp("");
  90 + }
80 BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_API_LIST, req, BaseResponse.class); 91 BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_API_LIST, req, BaseResponse.class);
81 return rep; 92 return rep;
82 } 93 }
83 94
  95 + @RequestMapping("/queryByServiceTypeAndApiName")
  96 + @ResponseBody
  97 + public BaseResponse queryByServiceTypeAndApiName(JavaApiMonitorReq req) {
  98 + if(req.getCloudType() == 0){
  99 + req.setCloudType(1);
  100 + }
  101 + if ("0".equals(req.getIp())) {
  102 + req.setIp("");
  103 + }
  104 + BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_IP_API_LIST, req, BaseResponse.class);
  105 + return rep;
  106 + }
  107 +
84 } 108 }
@@ -19,8 +19,8 @@ @@ -19,8 +19,8 @@
19 var contextPath = '<%=basePath %>'; 19 var contextPath = '<%=basePath %>';
20 var serviceType = "<%=serviceType %>"; 20 var serviceType = "<%=serviceType %>";
21 var serviceName = "<%=serviceName%>"; 21 var serviceName = "<%=serviceName%>";
22 - var startTime = "<%=startTime%>>";  
23 - var endTime = "<%=endTime%>>" 22 + var startTime = "<%=startTime%>";
  23 + var endTime = "<%=endTime%>";
24 var homeUrl = contextPath + "jsp/javaMonitor/javaMonitor.jsp"; 24 var homeUrl = contextPath + "jsp/javaMonitor/javaMonitor.jsp";
25 </script> 25 </script>
26 <title>YOHO!运维</title> 26 <title>YOHO!运维</title>
@@ -162,68 +162,66 @@ @@ -162,68 +162,66 @@
162 serviceName : serviceName 162 serviceName : serviceName
163 }, 163 },
164 striped: true, 164 striped: true,
165 - title: "java服务监控信息列表",  
166 dataType: "json", 165 dataType: "json",
167 sortable: true, //是否启用排序 166 sortable: true, //是否启用排序
168 sortOrder: "desc", 167 sortOrder: "desc",
169 - loadFilter: function (data) {  
170 - return defaultLoadFilter(data);  
171 - },  
172 onLoadSuccess: function (data) { 168 onLoadSuccess: function (data) {
173 - if(data != null){ 169 + if(data.data != null){
174 //同步加载根据平均耗时排序的tab页列表 170 //同步加载根据平均耗时排序的tab页列表
175 var costObj = new Array(); 171 var costObj = new Array();
176 - for(var j = 0;j<data.length;j++){  
177 - costObj.push(data[j]); 172 + for(var j = 0;j<data.data.length;j++){
  173 + costObj.push(data.data[j]);
178 } 174 }
179 //按平均耗时从大到小排序ss 175 //按平均耗时从大到小排序ss
180 costObj.sort(function(a,b){ 176 costObj.sort(function(a,b){
181 return b.avgCost-a.avgCost; 177 return b.avgCost-a.avgCost;
182 }); 178 });
183 179
184 -  
185 //同步加载根据异常次数排序的tab页列表 180 //同步加载根据异常次数排序的tab页列表
186 var errorObj = new Array(); 181 var errorObj = new Array();
187 - for (var i = 0; i < data.length; i++) {  
188 - errorObj.push(data[i]); 182 + for (var i = 0; i < data.data.length; i++) {
  183 + errorObj.push(data.data[i]);
189 } 184 }
190 //按异常次数从大到小排序 185 //按异常次数从大到小排序
191 errorObj.sort(function (a, b) { 186 errorObj.sort(function (a, b) {
192 return b.errorCount - a.errorCount; 187 return b.errorCount - a.errorCount;
193 }); 188 });
194 - $("#infoTable1").table("loadLoaclData", errorObj);  
195 -  
196 - return costObj; 189 + $("#infoTable").table("loadLoaclData", errorObj);
  190 + $("#infoTable1").table("loadLoaclData", costObj);
197 } 191 }
198 }, 192 },
199 columns: [{ 193 columns: [{
200 title: "接口名", 194 title: "接口名",
201 field: "apiName", 195 field: "apiName",
202 width: "10%", 196 width: "10%",
203 - sortable: true  
204 -// formatter: function (value, rowData, rowIndex) {  
205 -// var div = $("<div>");  
206 -// var editBtn = $("<button>").addClass("btn btn-xs btn-success").html(rowData.ip).appendTo(div);  
207 -// editBtn.click(function () {  
208 -// var dialog = $("<div>").appendTo($("body"));  
209 -// dialog.dialog({  
210 -// backdrop: "static",  
211 -// title: "API详情",  
212 -// href: contextPath + "jsp/javaMonitor/javaIpInfoList.jsp",  
213 -// height: "80%",  
214 -// width: "60%",  
215 -// buttons: [{  
216 -// text: "关闭",  
217 -// className: "btn-info",  
218 -// onclick: function () {  
219 -// $(dialog).dialog("hide");  
220 -// }  
221 -// }]  
222 -// });  
223 -//  
224 -// });  
225 -// return div;  
226 -// } 197 + formatter: function (value, rowData, rowIndex) {
  198 + var start = startTime.split(" ");
  199 + var end = endTime.split(" ");
  200 +
  201 + var div = $("<div>");
  202 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html(rowData.apiName).appendTo(div);
  203 + editBtn.click(function () {
  204 + var dialog = $("<div>").appendTo($("body"));
  205 + var url = contextPath + "/javaMonitor/toJavaIpInfoList?serviceName="+serviceName+"&apiName="+rowData.apiName+"&serviceType="+serviceType+"&cloudType="+$("#cloudType").val()
  206 + +"&startTime1="+start[0]+"&startTime2="+start[1]+"&endTime1="+end[0]+"&endTime2="+end[1];
  207 + dialog.dialog({
  208 + backdrop: "static",
  209 + title: "API详情",
  210 + href: url,
  211 + height: "700px",
  212 + width: "900px",
  213 + buttons: [{
  214 + text: "关闭",
  215 + className: "btn-danger",
  216 + onclick: function () {
  217 + $(dialog).dialog("hide");
  218 + }
  219 + }]
  220 + });
  221 +
  222 + });
  223 + return div;
  224 + }
227 }, { 225 }, {
228 title: "总请求次数", 226 title: "总请求次数",
229 field: "totalCount", 227 field: "totalCount",
@@ -271,36 +269,38 @@ @@ -271,36 +269,38 @@
271 field: "avgCost", 269 field: "avgCost",
272 width: "10%", 270 width: "10%",
273 sortable: true, 271 sortable: true,
274 -// formatter : function(value, rowData, rowIndex) {  
275 -// var div = $("<div>");  
276 -// var textView = $("<span>").html(rowData.avgCost).appendTo(div);  
277 -// div.append("<br>");  
278 -// var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);  
279 -// var content = "";  
280 -// if(rowData.timeoutInfo != null){  
281 -// for(var i = 0;i<rowData.timeoutInfo.length;i++){  
282 -// content= content +rowData.timeoutInfo[i]+"<br><br>";  
283 -// }  
284 -// }  
285 -// editBtn.click(function () {  
286 -// var dialog = $("<div>").appendTo($("body"));  
287 -// dialog.dialog({  
288 -// backdrop : "static",  
289 -// title : "超时详情",  
290 -// content : content,  
291 -// height : "60%",  
292 -// width : "50%",  
293 -// buttons : [{  
294 -// text : "关闭",  
295 -// className : "btn-danger",  
296 -// onclick : function() {  
297 -// $(dialog).dialog("hide");  
298 -// }  
299 -// }]  
300 -// });  
301 -// });  
302 -// return div;  
303 -// } 272 + formatter : function(value, rowData, rowIndex) {
  273 + var div = $("<div>");
  274 + var textView = $("<span>").html(rowData.avgCost).appendTo(div);
  275 + div.append("<br>");
  276 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
  277 + var content = "";
  278 + if(rowData.timeoutInfo != null){
  279 + for(var i = 0;i<rowData.timeoutInfo.length;i++){
  280 + content= content +rowData.timeoutInfo[i]+"<br><br>";
  281 + }
  282 + }
  283 + editBtn.click(function () {
  284 + if(content != ""){
  285 + var dialog = $("<div>").appendTo($("body"));
  286 + dialog.dialog({
  287 + backdrop : "static",
  288 + title : "超时详情",
  289 + content : content,
  290 + height : "700px",
  291 + width : "1100px",
  292 + buttons : [{
  293 + text : "关闭",
  294 + className : "btn-danger",
  295 + onclick : function() {
  296 + $(dialog).dialog("hide");
  297 + }
  298 + }]
  299 + });
  300 + }
  301 + });
  302 + return div;
  303 + }
304 }] 304 }]
305 }); 305 });
306 306
@@ -308,15 +308,41 @@ @@ -308,15 +308,41 @@
308 $("#infoTable1").table({ 308 $("#infoTable1").table({
309 columnAutoWidth: false, 309 columnAutoWidth: false,
310 striped: true, 310 striped: true,
311 - title: "java服务监控信息列表",  
312 dataType: "json", 311 dataType: "json",
313 - sortable: true, //是否启用排序  
314 sortOrder: "desc", 312 sortOrder: "desc",
315 columns: [{ 313 columns: [{
316 title: "接口名", 314 title: "接口名",
317 field: "apiName", 315 field: "apiName",
318 width: "10%", 316 width: "10%",
319 - sortable: true 317 + sortable: true,
  318 + formatter: function (value, rowData, rowIndex) {
  319 + var start = startTime.split(" ");
  320 + var end = endTime.split(" ");
  321 +
  322 + var div = $("<div>");
  323 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html(rowData.apiName).appendTo(div);
  324 + editBtn.click(function () {
  325 + var dialog = $("<div>").appendTo($("body"));
  326 + var url = contextPath + "/javaMonitor/toJavaIpInfoList?serviceName="+serviceName+"&apiName="+rowData.apiName+"&serviceType="+serviceType+"&cloudType="+$("#cloudType").val()
  327 + +"&startTime1="+start[0]+"&startTime2="+start[1]+"&endTime1="+end[0]+"&endTime2="+end[1];
  328 + dialog.dialog({
  329 + backdrop: "static",
  330 + title: "API详情",
  331 + href: url,
  332 + height: "700px",
  333 + width: "900px",
  334 + buttons: [{
  335 + text: "关闭",
  336 + className: "btn-danger",
  337 + onclick: function () {
  338 + $(dialog).dialog("hide");
  339 + }
  340 + }]
  341 + });
  342 +
  343 + });
  344 + return div;
  345 + }
320 }, { 346 }, {
321 title: "总请求次数", 347 title: "总请求次数",
322 field: "totalCount", 348 field: "totalCount",
@@ -363,37 +389,39 @@ @@ -363,37 +389,39 @@
363 title: "平均耗时(ms)", 389 title: "平均耗时(ms)",
364 field: "avgCost", 390 field: "avgCost",
365 width: "10%", 391 width: "10%",
366 - sortable: true  
367 -// formatter : function(value, rowData, rowIndex) {  
368 -// var div = $("<div>");  
369 -// var textView = $("<span>").html(rowData.avgCost).appendTo(div);  
370 -// div.append("<br>");  
371 -// var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);  
372 -// var content = "";  
373 -// if(rowData.timeoutInfo != null){  
374 -// for(var i = 0;i<rowData.timeoutInfo.length;i++){  
375 -// content= content +rowData.timeoutInfo[i]+"<br><br>";  
376 -// }  
377 -// }  
378 -// editBtn.click(function () {  
379 -// var dialog = $("<div>").appendTo($("body"));  
380 -// dialog.dialog({  
381 -// backdrop : "static",  
382 -// title : "超时详情",  
383 -// content : content,  
384 -// height : "60%",  
385 -// width : "50%",  
386 -// buttons : [{  
387 -// text : "关闭",  
388 -// className : "btn-danger",  
389 -// onclick : function() {  
390 -// $(dialog).dialog("hide");  
391 -// }  
392 -// }]  
393 -// });  
394 -// });  
395 -// return div;  
396 -// } 392 + sortable: true,
  393 + formatter : function(value, rowData, rowIndex) {
  394 + var div = $("<div>");
  395 + var textView = $("<span>").html(rowData.avgCost).appendTo(div);
  396 + div.append("<br>");
  397 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
  398 + var content = "";
  399 + if(rowData.timeoutInfo != null){
  400 + for(var i = 0;i<rowData.timeoutInfo.length;i++){
  401 + content= content +rowData.timeoutInfo[i]+"<br><br>";
  402 + }
  403 + }
  404 + editBtn.click(function () {
  405 + if(content != ""){
  406 + var dialog = $("<div>").appendTo($("body"));
  407 + dialog.dialog({
  408 + backdrop : "static",
  409 + title : "超时详情",
  410 + content : content,
  411 + height : "700px",
  412 + width : "1100px",
  413 + buttons : [{
  414 + text : "关闭",
  415 + className : "btn-danger",
  416 + onclick : function() {
  417 + $(dialog).dialog("hide");
  418 + }
  419 + }]
  420 + });
  421 + }
  422 + });
  423 + return div;
  424 + }
397 }] 425 }]
398 }); 426 });
399 427
  1 +<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
1 <%@page language="java" contentType="text/html;charset=utf-8" %> 2 <%@page language="java" contentType="text/html;charset=utf-8" %>
2 -<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
3 <% 3 <%
4 String path = request.getContextPath(); 4 String path = request.getContextPath();
5 String basePath = request.getScheme() + "://" 5 String basePath = request.getScheme() + "://"
@@ -7,96 +7,111 @@ @@ -7,96 +7,111 @@
7 + path + "/"; 7 + path + "/";
8 String serviceType = request.getParameter("serviceType"); 8 String serviceType = request.getParameter("serviceType");
9 String serviceName = request.getParameter("serviceName"); 9 String serviceName = request.getParameter("serviceName");
10 - String startTime = request.getParameter("startTime");  
11 - String endTime = request.getParameter("endTime"); 10 + String startTime1 = request.getParameter("startTime1");
  11 + String endTime1 = request.getParameter("endTime1");
  12 + String startTime2 = request.getParameter("startTime2");
  13 + String endTime2 = request.getParameter("endTime2");
12 String apiName = request.getParameter("apiName"); 14 String apiName = request.getParameter("apiName");
  15 + String cloudType = request.getParameter("cloudType");
13 %> 16 %>
14 -  
15 -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
16 -<html>  
17 -<head>  
18 - <jsp:include page="/jsp/common/include.jsp" flush="true"/>  
19 - <script>  
20 - var contextPath = '<%=basePath %>';  
21 - var serviceType = "<%=serviceType %>";  
22 - var serviceName = "<%=serviceName%>";  
23 - var startTime = "<%=startTime%>>";  
24 - var endTime = "<%=endTime%>>";  
25 - var apiName = "<%=apiName%>>";  
26 - </script>  
27 -</head>  
28 <body> 17 <body>
29 -<!-- 右侧具体内容 -->  
30 -<form class="form-horizontal" id="javaIpInfoForm" name="javaIpInfoForm"> 18 +<form class="form-horizontal" id="javaMonitorForm" name="javaMonitorForm" style="width: 800px;margin-left: 15px">
31 <div class="form-group"> 19 <div class="form-group">
32 - <div class="col-sm-5" >  
33 - <span class="input-group-addon">服务名：</span>  
34 - <input type="text" id="serviceType" name="serviceType" class="form-control" disabled>  
35 - </input> 20 + <label class="col-sm-2 control-label"> 服务名：</label>
  21 + <div class="col-sm-8">
  22 + <input type="text" class="form-control" id="serviceName" name="serviceName"
  23 + size="40"/>
  24 + </div>
36 </div> 25 </div>
37 - <div class="col-sm-5" >  
38 - <span class="input-group-addon">接口名：</span>  
39 - <input type="text" id="apiName" name="apiName" class="form-control" disabled>  
40 - </select> 26 + <div class="form-group">
  27 + <label class="col-sm-2 control-label"></span>接口名：</label>
  28 + <div class="col-sm-8">
  29 + <input type="text" class="form-control" id="apiName" name="apiName"
  30 + size="40"/>
41 </div> 31 </div>
42 </div> 32 </div>
43 <div class="form-group"> 33 <div class="form-group">
44 <ul class="nav nav-tabs" role="tablist"> 34 <ul class="nav nav-tabs" role="tablist">
45 <li role="presentation" class="active"> 35 <li role="presentation" class="active">
46 - <a href="#timesPartIpInfo" aria-controls="timesPartIpInfo" role="tab" data-toggle="tab">异常次数</a> 36 + <a href="#ipTimesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
47 </li> 37 </li>
48 <li role="presentation"> 38 <li role="presentation">
49 - <a href="#costPartIpInfo" aria-controls="costPartIpInfo" role="tab" data-toggle="tab">平均耗时</a> 39 + <a href="#ipCostPart" aria-controls="costPart" role="tab" data-toggle="tab">平均耗时</a>
50 </li> 40 </li>
51 </ul> 41 </ul>
52 <div class="tab-content" style="padding-top:10px"> 42 <div class="tab-content" style="padding-top:10px">
53 - <div role="tabpanel" class="tab-pane fade in active" id="timesPartIpInfo"> 43 + <div role="tabpanel" class="tab-pane fade in active" id="ipTimesPart">
54 <div id="ipInfoTable"></div> 44 <div id="ipInfoTable"></div>
55 </div> 45 </div>
56 - <div role="ipInfoTable2" class="tab-pane fade" id="costPartIpInfo">  
57 - <div id="infoTable1"></div> 46 + <div role="tabpanel" class="tab-pane fade" id="ipCostPart">
  47 + <div id="ipInfoTable1"></div>
58 </div> 48 </div>
59 </div> 49 </div>
60 </div> 50 </div>
61 </form> 51 </form>
62 </body> 52 </body>
  53 +
63 <script> 54 <script>
64 - $("#serviceType").val(serviceName);  
65 - $("#apiName").val(apiName);  
66 -</script>  
67 -<script> 55 +
  56 +
68 $(function () { 57 $(function () {
69 58
70 - $("#javaIpInfoForm #ipInfoTable").table({ 59 + var contextPath = '<%=basePath %>';
  60 + var serviceType = "<%=serviceType %>";
  61 + var serviceName = "<%=serviceName%>";
  62 + var startTime = "<%=startTime1%>"+" "+"<%=startTime2%>";
  63 + var endTime = "<%=endTime1%>"+" "+"<%=endTime2%>";
  64 + var apiName = "<%=apiName%>";
  65 + var cloudType = "<%=cloudType%>";
  66 +
  67 + $("#javaMonitorForm #serviceName").val(serviceName);
  68 + $("#javaMonitorForm #apiName").val(apiName);
  69 +
  70 +
  71 + $("#javaMonitorForm #ipInfoTable").table({
71 columnAutoWidth: false, 72 columnAutoWidth: false,
72 - url: contextPath + "/javaMonitor/query", 73 + url: contextPath + "/javaMonitor/queryByServiceTypeAndApiName",
  74 + queryParams : {
  75 + startTime : startTime,
  76 + endTime : endTime,
  77 + serviceType : serviceType,
  78 + serviceName : serviceName,
  79 + apiName :apiName,
  80 + cloudType : cloudType
  81 + },
73 striped: true, 82 striped: true,
74 - title: "java服务监控信息列表",  
75 dataType: "json", 83 dataType: "json",
76 sortable: true, //是否启用排序 84 sortable: true, //是否启用排序
77 sortOrder: "desc", 85 sortOrder: "desc",
78 - loadFilter: function (data) {  
79 - return defaultLoadFilter(data);  
80 - },  
81 onLoadSuccess: function (data) { 86 onLoadSuccess: function (data) {
82 - if(data != null){ 87 + if(data.data != null){
  88 + //同步加载根据平均耗时排序的tab页列表
  89 + var costObj = new Array();
  90 + for(var j = 0;j<data.data.length;j++){
  91 + costObj.push(data.data[j]);
  92 + }
  93 + //按平均耗时从大到小排序ss
  94 + costObj.sort(function(a,b){
  95 + return b.avgCost-a.avgCost;
  96 + });
  97 +
83 //同步加载根据异常次数排序的tab页列表 98 //同步加载根据异常次数排序的tab页列表
84 var errorObj = new Array(); 99 var errorObj = new Array();
85 - for (var i = 0; i < data.length; i++) {  
86 - errorObj.push(data[i]); 100 + for (var i = 0; i < data.data.length; i++) {
  101 + errorObj.push(data.data[i]);
87 } 102 }
88 //按异常次数从大到小排序 103 //按异常次数从大到小排序
89 errorObj.sort(function (a, b) { 104 errorObj.sort(function (a, b) {
90 return b.errorCount - a.errorCount; 105 return b.errorCount - a.errorCount;
91 }); 106 });
92 - $("#javaIpInfoForm #ipInfoTable2").table("loadLoaclData", errorObj); 107 + $("#javaMonitorForm #ipInfoTable").table("loadLoaclData", errorObj);
  108 + $("#javaMonitorForm #ipInfoTable1").table("loadLoaclData", costObj);
93 } 109 }
94 }, 110 },
95 columns: [{ 111 columns: [{
96 title: "IP", 112 title: "IP",
97 field: "ip", 113 field: "ip",
98 - width: "10%",  
99 - sortable: true 114 + width: "10%"
100 }, { 115 }, {
101 title: "总请求次数", 116 title: "总请求次数",
102 field: "totalCount", 117 field: "totalCount",
@@ -111,7 +126,7 @@ @@ -111,7 +126,7 @@
111 var div = $("<div>"); 126 var div = $("<div>");
112 var textView = $("<span>").html(rowData.errorCount).appendTo(div); 127 var textView = $("<span>").html(rowData.errorCount).appendTo(div);
113 div.append("<br>"); 128 div.append("<br>");
114 - var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div); 129 + var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
115 var content = ""; 130 var content = "";
116 if (rowData.errorInfo != null) { 131 if (rowData.errorInfo != null) {
117 for (var i = 0; i < rowData.errorInfo.length; i++) { 132 for (var i = 0; i < rowData.errorInfo.length; i++) {
@@ -119,21 +134,23 @@ @@ -119,21 +134,23 @@
119 } 134 }
120 } 135 }
121 editBtn.click(function () { 136 editBtn.click(function () {
  137 + if(content != ""){
122 var dialog = $("<div>").appendTo($("body")); 138 var dialog = $("<div>").appendTo($("body"));
123 dialog.dialog({ 139 dialog.dialog({
124 - backdrop: "static",  
125 - title: "异常详情",  
126 - content: content, 140 + backdrop : "static",
  141 + title : "异常详情",
  142 + content : content,
127 height : "700px", 143 height : "700px",
128 width : "1100px", 144 width : "1100px",
129 - buttons: [{  
130 - text: "关闭",  
131 - className: "btn-danger",  
132 - onclick: function () { 145 + buttons : [{
  146 + text : "关闭",
  147 + className : "btn-danger",
  148 + onclick : function() {
133 $(dialog).dialog("hide"); 149 $(dialog).dialog("hide");
134 } 150 }
135 }] 151 }]
136 }); 152 });
  153 + }
137 }); 154 });
138 return div; 155 return div;
139 } 156 }
@@ -141,54 +158,60 @@ @@ -141,54 +158,60 @@
141 title: "平均耗时(ms)", 158 title: "平均耗时(ms)",
142 field: "avgCost", 159 field: "avgCost",
143 width: "10%", 160 width: "10%",
144 - sortable: true  
145 -// formatter : function(value, rowData, rowIndex) {  
146 -// var div = $("<div>");  
147 -// var textView = $("<span>").html(rowData.avgCost).appendTo(div);  
148 -// div.append("<br>");  
149 -// var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);  
150 -// var content = "";  
151 -// if(rowData.timeoutInfo != null){  
152 -// for(var i = 0;i<rowData.timeoutInfo.length;i++){  
153 -// content= content +rowData.timeoutInfo[i]+"<br><br>";  
154 -// }  
155 -// }  
156 -// editBtn.click(function () {  
157 -// var dialog = $("<div>").appendTo($("body"));  
158 -// dialog.dialog({  
159 -// backdrop : "static",  
160 -// title : "超时详情",  
161 -// content : content,  
162 -// height : "60%",  
163 -// width : "50%",  
164 -// buttons : [{  
165 -// text : "关闭",  
166 -// className : "btn-danger",  
167 -// onclick : function() {  
168 -// $(dialog).dialog("hide");  
169 -// }  
170 -// }]  
171 -// });  
172 -// });  
173 -// return div;  
174 -// } 161 + sortable: true,
  162 + formatter : function(value, rowData, rowIndex) {
  163 + var div = $("<div>");
  164 + var textView = $("<span>").html(rowData.avgCost).appendTo(div);
  165 + div.append("<br>");
  166 + var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
  167 + var content = "";
  168 + if(rowData.timeoutInfo != null){
  169 + for(var i = 0;i<rowData.timeoutInfo.length;i++){
  170 + content= content +rowData.timeoutInfo[i]+"<br><br>";
  171 + }
  172 + }
  173 + editBtn.click(function () {
  174 + if(content != ""){
  175 + var dialog = $("<div>").appendTo($("body"));
  176 + dialog.dialog({
  177 + backdrop : "static",
  178 + title : "超时详情",
  179 + content : content,
  180 + height : "700px",
  181 + width : "1100px",
  182 + buttons : [{
  183 + text : "关闭",
  184 + className : "btn-danger",
  185 + onclick : function() {
  186 + $(dialog).dialog("hide");
  187 + }
  188 + }]
  189 + });
  190 + }
  191 + });
  192 + return div;
  193 + }
175 }] 194 }]
176 }); 195 });
177 196
178 //加载表格 197 //加载表格
179 - $("#javaIpInfoForm #ipInfoTable2").table({ 198 + $("#javaMonitorForm #ipInfoTable1").table({
180 columnAutoWidth: false, 199 columnAutoWidth: false,
181 striped: true, 200 striped: true,
182 title: "java服务监控信息列表", 201 title: "java服务监控信息列表",
183 dataType: "json", 202 dataType: "json",
184 - sortable: true, //是否启用排序  
185 sortOrder: "desc", 203 sortOrder: "desc",
186 columns: [{ 204 columns: [{
187 title: "IP", 205 title: "IP",
188 field: "ip", 206 field: "ip",
189 width: "10%", 207 width: "10%",
190 sortable: true 208 sortable: true
191 - },{ 209 + }, {
  210 + title: "总请求次数",
  211 + field: "totalCount",
  212 + width: "10%",
  213 + sortable: true
  214 + }, {
192 title: "请求异常次数", 215 title: "请求异常次数",
193 field: "errorCount", 216 field: "errorCount",
194 width: "10%", 217 width: "10%",
@@ -197,7 +220,7 @@ @@ -197,7 +220,7 @@
197 var div = $("<div>"); 220 var div = $("<div>");
198 var textView = $("<span>").html(rowData.errorCount).appendTo(div); 221 var textView = $("<span>").html(rowData.errorCount).appendTo(div);
199 div.append("<br>"); 222 div.append("<br>");
200 - var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div); 223 + var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
201 var content = ""; 224 var content = "";
202 if (rowData.errorInfo != null) { 225 if (rowData.errorInfo != null) {
203 for (var i = 0; i < rowData.errorInfo.length; i++) { 226 for (var i = 0; i < rowData.errorInfo.length; i++) {
@@ -205,21 +228,23 @@ @@ -205,21 +228,23 @@
205 } 228 }
206 } 229 }
207 editBtn.click(function () { 230 editBtn.click(function () {
  231 + if(content != ""){
208 var dialog = $("<div>").appendTo($("body")); 232 var dialog = $("<div>").appendTo($("body"));
209 dialog.dialog({ 233 dialog.dialog({
210 - backdrop: "static",  
211 - title: "异常详情",  
212 - content: content, 234 + backdrop : "static",
  235 + title : "异常详情",
  236 + content : content,
213 height : "700px", 237 height : "700px",
214 width : "1100px", 238 width : "1100px",
215 - buttons: [{  
216 - text: "关闭",  
217 - className: "btn-danger",  
218 - onclick: function () { 239 + buttons : [{
  240 + text : "关闭",
  241 + className : "btn-danger",
  242 + onclick : function() {
219 $(dialog).dialog("hide"); 243 $(dialog).dialog("hide");
220 } 244 }
221 }] 245 }]
222 }); 246 });
  247 + }
223 }); 248 });
224 return div; 249 return div;
225 } 250 }
@@ -227,41 +252,41 @@ @@ -227,41 +252,41 @@
227 title: "平均耗时(ms)", 252 title: "平均耗时(ms)",
228 field: "avgCost", 253 field: "avgCost",
229 width: "10%", 254 width: "10%",
230 - sortable: true  
231 -// formatter : function(value, rowData, rowIndex) {  
232 -// var div = $("<div>");  
233 -// var textView = $("<span>").html(rowData.avgCost).appendTo(div);  
234 -// div.append("<br>");  
235 -// var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);  
236 -// var content = "";  
237 -// if(rowData.timeoutInfo != null){  
238 -// for(var i = 0;i<rowData.timeoutInfo.length;i++){  
239 -// content= content +rowData.timeoutInfo[i]+"<br><br>";  
240 -// }  
241 -// }  
242 -// editBtn.click(function () {  
243 -// var dialog = $("<div>").appendTo($("body"));  
244 -// dialog.dialog({  
245 -// backdrop : "static",  
246 -// title : "超时详情",  
247 -// content : content,  
248 -// height : "60%",  
249 -// width : "50%",  
250 -// buttons : [{  
251 -// text : "关闭",  
252 -// className : "btn-danger",  
253 -// onclick : function() {  
254 -// $(dialog).dialog("hide");  
255 -// }  
256 -// }]  
257 -// });  
258 -// });  
259 -// return div;  
260 -// } 255 + sortable: true,
  256 + formatter : function(value, rowData, rowIndex) {
  257 + var div = $("<div>");
  258 + var textView = $("<span>").html(rowData.avgCost).appendTo(div);
  259 + div.append("<br>");
  260 + var editBtn = $("<input type='button'>").val("详情").addClass("btn btn-xs btn-success").appendTo(div);
  261 + var content = "";
  262 + if(rowData.timeoutInfo != null){
  263 + for(var i = 0;i<rowData.timeoutInfo.length;i++){
  264 + content= content +rowData.timeoutInfo[i]+"<br><br>";
  265 + }
  266 + }
  267 + editBtn.click(function () {
  268 + if(content != ""){
  269 + var dialog = $("<div>").appendTo($("body"));
  270 + dialog.dialog({
  271 + backdrop : "static",
  272 + title : "超时详情",
  273 + content : content,
  274 + height : "700px",
  275 + width : "1100px",
  276 + buttons : [{
  277 + text : "关闭",
  278 + className : "btn-danger",
  279 + onclick : function() {
  280 + $(dialog).dialog("hide");
  281 + }
261 }] 282 }]
262 }); 283 });
263 - 284 + }
  285 + });
  286 + return div;
  287 + }
  288 + }]
264 }); 289 });
265 290
266 - 291 + });
267 </script> 292 </script>
@@ -36,15 +36,29 @@ @@ -36,15 +36,29 @@
36 <div class="widget-title" style="height: 400px;"> 36 <div class="widget-title" style="height: 400px;">
37 <div class="col-sm-5 control-label" role="form" id="chartterDiv" 37 <div class="col-sm-5 control-label" role="form" id="chartterDiv"
38 style=" margin-top: 12px;margin-left: 10px;"> 38 style=" margin-top: 12px;margin-left: 10px;">
39 - <div id="costCharts" class="input-group" style="height: 380px;width: 760px"> 39 + <div id="costAwsCharts" class="input-group" style="height: 380px;width: 760px">
40 </div> 40 </div>
41 </div> 41 </div>
42 <div class="col-sm-5 control-label" role="form" id="chartterDiv1" 42 <div class="col-sm-5 control-label" role="form" id="chartterDiv1"
43 style=" margin-top: 12px;margin-left: 25px;float: left;"> 43 style=" margin-top: 12px;margin-left: 25px;float: left;">
44 - <div id="timesCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px"> 44 + <div id="costQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
  48 +
  49 + <div class="widget-title" style="height: 400px;">
  50 + <div class="col-sm-5 control-label" role="form" id="chartterDiv3"
  51 + style=" margin-top: 12px;margin-left: 10px;">
  52 + <div id="timesAwsCharts" class="input-group" style="height: 380px;width: 760px">
  53 + </div>
  54 + </div>
  55 + <div class="col-sm-5 control-label" role="form" id="chartterDiv4"
  56 + style=" margin-top: 12px;margin-left: 25px;float: left;">
  57 + <div id="timesQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
  58 + </div>
  59 + </div>
  60 + </div>
  61 +
48 </div> 62 </div>
49 </div> 63 </div>
50 <div class="widget-box"> 64 <div class="widget-box">
@@ -139,8 +153,11 @@ @@ -139,8 +153,11 @@
139 153
140 //画图事件 154 //画图事件
141 function drawLine(type,title,subTitle,yText,categories,series) { 155 function drawLine(type,title,subTitle,yText,categories,series) {
142 - var title = {  
143 - text: title 156 + var title1 = {
  157 + text: title+"(AWS)"
  158 + };
  159 + var title2 = {
  160 + text: title+"(Qcloud)"
144 }; 161 };
145 var subtitle = { 162 var subtitle = {
146 text: subTitle == null? "gateway":subTitle 163 text: subTitle == null? "gateway":subTitle
@@ -177,31 +194,43 @@ @@ -177,31 +194,43 @@
177 // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 194 // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
178 // 26.5, 23.3, 18.3, 13.9, 9.6] 195 // 26.5, 23.3, 18.3, 13.9, 9.6]
179 // }, 196 // },
180 -// {  
181 -// name: '172.31.57.254',  
182 -// data: [1, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,  
183 -// 24.1, 20.1, 14.1, 8.6, 2.5]  
184 -// },  
185 -// {  
186 -// name: '172.31.57.253',  
187 -// data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,  
188 -// 16.6, 14.2, 10.3, 6.6, 4.8]  
189 -// }  
190 // ]; 197 // ];
191 - var series = series;  
192 -  
193 - var json = {};  
194 - json.title = title;  
195 - json.subtitle = subtitle;  
196 - json.xAxis = xAxis;  
197 - json.yAxis = yAxis;  
198 - json.tooltip = tooltip;  
199 - json.legend = legend;  
200 - json.series = series; 198 + //解析series,区分aws.qcloud
  199 + var awsData = new Array();
  200 + var qcData = new Array();
  201 + if(series != null){
  202 + for(var i =0;i<series.length;i++){
  203 + if(series[i].cloudType == 1){
  204 + awsData.push(series[i])
  205 + }else{
  206 + qcData.push(series[i])
  207 + }
  208 + }
  209 + }
  210 + var json1 = {};
  211 + json1.title = title1;
  212 + json1.subtitle = subtitle;
  213 + json1.xAxis = xAxis;
  214 + json1.yAxis = yAxis;
  215 + json1.tooltip = tooltip;
  216 + json1.legend = legend;
  217 + json1.series = awsData;
  218 +
  219 + var json2 = {};
  220 + json2.title = title2;
  221 + json2.subtitle = subtitle;
  222 + json2.xAxis = xAxis;
  223 + json2.yAxis = yAxis;
  224 + json2.tooltip = tooltip;
  225 + json2.legend = legend;
  226 + json2.series = qcData;
  227 +
201 if(type == 1){ 228 if(type == 1){
202 - $('#costCharts').highcharts(json); 229 + $('#costAwsCharts').highcharts(json1);
  230 + $('#costQcloudCharts').highcharts(json2);
203 }else{ 231 }else{
204 - $('#timesCharts').highcharts(json); 232 + $('#timesAwsCharts').highcharts(json1);
  233 + $('#timesQcloudCharts').highcharts(json2);
205 } 234 }
206 } 235 }
207 236
@@ -279,7 +308,6 @@ @@ -279,7 +308,6 @@
279 columnAutoWidth: false, 308 columnAutoWidth: false,
280 url: contextPath + "/javaMonitor/query", 309 url: contextPath + "/javaMonitor/query",
281 striped: true, 310 striped: true,
282 - title: "java服务监控信息列表",  
283 dataType: "json", 311 dataType: "json",
284 sortable: true, //是否启用排序 312 sortable: true, //是否启用排序
285 sortOrder:"desc", 313 sortOrder:"desc",
@@ -415,7 +443,7 @@ @@ -415,7 +443,7 @@
415 width: "10%" 443 width: "10%"
416 444
417 },{ 445 },{
418 - title: "带宽（IN/OUT）(KBps)", 446 + title: "带宽（IN/OUT）(Mbps)",
419 field: "bandwidth", 447 field: "bandwidth",
420 width: "10%" 448 width: "10%"
421 449
@@ -425,7 +453,6 @@ @@ -425,7 +453,6 @@
425 $("#infoTable").table({ 453 $("#infoTable").table({
426 columnAutoWidth: false, 454 columnAutoWidth: false,
427 striped: true, 455 striped: true,
428 - title: "java服务监控信息列表",  
429 dataType: "json", 456 dataType: "json",
430 sortable: true, //是否启用排序 457 sortable: true, //是否启用排序
431 sortOrder:"desc", 458 sortOrder:"desc",
@@ -539,7 +566,7 @@ @@ -539,7 +566,7 @@
539 width: "10%" 566 width: "10%"
540 567
541 },{ 568 },{
542 - title: "带宽（IN/OUT）(KBps)", 569 + title: "带宽（IN/OUT）(Mbps)",
543 field: "bandwidth", 570 field: "bandwidth",
544 width: "15%" 571 width: "15%"
545 572
@@ -550,7 +577,6 @@ @@ -550,7 +577,6 @@
550 $("#infoTable1").table({ 577 $("#infoTable1").table({
551 columnAutoWidth: false, 578 columnAutoWidth: false,
552 striped: true, 579 striped: true,
553 - title: "java服务监控信息列表",  
554 dataType: "json", 580 dataType: "json",
555 sortable: true, //是否启用排序 581 sortable: true, //是否启用排序
556 sortOrder:"desc", 582 sortOrder:"desc",
@@ -660,7 +686,7 @@ @@ -660,7 +686,7 @@
660 width: "10%" 686 width: "10%"
661 687
662 },{ 688 },{
663 - title: "带宽（IN/OUT）(KBps)", 689 + title: "带宽（IN/OUT）(Mbps)",
664 field: "bandwidth", 690 field: "bandwidth",
665 width: "15%" 691 width: "15%"
666 692