ops / monitor-ui · Commits

Go to a project

Authored by lingmin
Commit e59a72e40ab335e66e1c2748c4b907054734dc55 1 parent 6b81da88

update

Inline Side-by-side
Showing 2 changed files with 226 additions and 30 deletions
@@ -97,6 +97,9 @@ @@ -97,6 +97,9 @@
97 <div id="infoTableDiv"> 97 <div id="infoTableDiv">
98 <ul class="nav nav-tabs" role="tablist"> 98 <ul class="nav nav-tabs" role="tablist">
99 <li role="presentation" class="active"> 99 <li role="presentation" class="active">
  100 + <a href="#allTimesPart" aria-controls="allTimesPart" role="tab" data-toggle="tab">总请求次数</a>
  101 + </li>
  102 + <li role="presentation" >
100 <a href="#timesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a> 103 <a href="#timesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
101 </li> 104 </li>
102 <li role="presentation"> 105 <li role="presentation">
@@ -104,12 +107,15 @@ @@ -104,12 +107,15 @@
104 </li> 107 </li>
105 </ul> 108 </ul>
106 <div class="tab-content" style="padding-top:10px"> 109 <div class="tab-content" style="padding-top:10px">
107 - <div role="tabpanel" class="tab-pane fade in active" id="timesPart"> 110 + <div role="tabpanel" class="tab-pane fade in active" id="allTimesPart">
108 <div id="infoTable"></div> 111 <div id="infoTable"></div>
109 </div> 112 </div>
110 - <div role="tabpanel" class="tab-pane fade" id="costPart"> 113 + <div role="tabpanel" class="tab-pane fade" id="timesPart">
111 <div id="infoTable1"></div> 114 <div id="infoTable1"></div>
112 </div> 115 </div>
  116 + <div role="tabpanel" class="tab-pane fade" id="costPart">
  117 + <div id="infoTable2"></div>
  118 + </div>
113 </div> 119 </div>
114 </div> 120 </div>
115 </div> 121 </div>
@@ -211,6 +217,26 @@ @@ -211,6 +217,26 @@
211 }); 217 });
212 }; 218 };
213 219
  220 + var getJavaService = function () {
  221 + $.ajax({
  222 + url: contextPath + "/type/queryJavaApiType",
  223 + type: 'post',
  224 + success: function (data) {
  225 + var selObj = $("#searchApiName");
  226 + selObj.empty();
  227 + selObj.append("<option value=0>" + "all" + "</option>");
  228 + $.each(data.data, function (idx, val) {
  229 + if(val.typeName == "gateway" || val.typeName == "order" || val.typeName == "promotion" || val.typeName == "product" || val.typeName == "message"
  230 + || val.typeName == "sns" || val.typeName == "user" || val.typeName == "resources" || val.typeName == "brower"){
  231 + selObj.append("<option value='" + val.typeId + "'>" + val.typeName + "</option>");
  232 + }
  233 +
  234 + });
  235 + }
  236 + });
  237 + };
  238 +
  239 +
214 $(function () { 240 $(function () {
215 //更新曲线图 241 //更新曲线图
216 getLineDate(1,1); 242 getLineDate(1,1);
@@ -218,19 +244,21 @@ @@ -218,19 +244,21 @@
218 getLineDate(2,1); 244 getLineDate(2,1);
219 getLineDate(2,2); 245 getLineDate(2,2);
220 246
221 - $("#searchApiName").select({  
222 - valueField: "typeId",  
223 - textField: "typeName",  
224 - className: "form-control",  
225 - firstText : "all",  
226 - firstValue : 0,  
227 - url: contextPath + "/type/queryJavaApiType",  
228 - loadFilter: function (data) {  
229 - return defaultLoadFilter(data);  
230 - },  
231 - value : 0  
232 - });  
233 - 247 +// $("#searchApiName").select({
  248 +// valueField: "typeId",
  249 +// textField: "typeName",
  250 +// className: "form-control",
  251 +// firstText : "all",
  252 +// firstValue : 0,
  253 +// url: contextPath + "/type/queryJavaApiType",
  254 +// loadFilter: function (data) {
  255 +// return defaultLoadFilter(data);
  256 +// },
  257 +// value : 0
  258 +// });
  259 + //获取服务名下拉列表
  260 + getJavaService();
  261 + //获取IP下拉列表
234 getJavaIp(1); 262 getJavaIp(1);
235 263
236 $("#infoTable").table({ 264 $("#infoTable").table({
@@ -246,12 +274,22 @@ @@ -246,12 +274,22 @@
246 paramObj.startTime = data.data.startTime; 274 paramObj.startTime = data.data.startTime;
247 paramObj.endTime = data.data.endTime; 275 paramObj.endTime = data.data.endTime;
248 //同步加载根据平均耗时排序的tab页列表 276 //同步加载根据平均耗时排序的tab页列表
  277 + var allObj = new Array();
249 var costObj = new Array(); 278 var costObj = new Array();
250 var errorObj = new Array(); 279 var errorObj = new Array();
251 for(var j = 0;j<data.data.content.length;j++){ 280 for(var j = 0;j<data.data.content.length;j++){
  281 + allObj.push(data.data.content[j]);
252 costObj.push(data.data.content[j]); 282 costObj.push(data.data.content[j]);
253 errorObj.push(data.data.content[j]); 283 errorObj.push(data.data.content[j]);
254 } 284 }
  285 + //按总请求次数排序
  286 + allObj.sort(function(a,b){
  287 + if(b.totalCount == a.totalCount){
  288 + return b.errorCount-a.errorCount;
  289 + }
  290 + return b.totalCount-a.totalCount;
  291 + });
  292 +
255 //按平均耗时从大到小排序ss 293 //按平均耗时从大到小排序ss
256 costObj.sort(function(a,b){ 294 costObj.sort(function(a,b){
257 if(b.avgCost == a.avgCost){ 295 if(b.avgCost == a.avgCost){
@@ -268,8 +306,9 @@ @@ -268,8 +306,9 @@
268 } 306 }
269 return b.errorCount - a.errorCount; 307 return b.errorCount - a.errorCount;
270 }); 308 });
271 - $("#infoTable").table("loadLoaclData", errorObj);  
272 - $("#infoTable1").table("loadLoaclData", costObj); 309 + $("#infoTable").table("loadLoaclData", allObj);
  310 + $("#infoTable1").table("loadLoaclData", errorObj);
  311 + $("#infoTable2").table("loadLoaclData", costObj);
273 } 312 }
274 }, 313 },
275 columns: [{ 314 columns: [{
@@ -529,6 +568,138 @@ @@ -529,6 +568,138 @@
529 }] 568 }]
530 }); 569 });
531 570
  571 + //加载表格
  572 + $("#infoTable2").table({
  573 + columnAutoWidth: false,
  574 + striped: true,
  575 + dataType: "json",
  576 + sortOrder: "desc",
  577 + columns: [{
  578 + title: "接口名",
  579 + field: "apiName",
  580 + width: "10%",
  581 + sortable: true,
  582 + formatter: function (value, rowData, rowIndex) {
  583 + var start = paramObj.startTime.split(" ");
  584 + var end = paramObj.endTime.split(" ");
  585 +
  586 + var div = $("<div>");
  587 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html(rowData.apiName).appendTo(div);
  588 + editBtn.click(function () {
  589 + var dialog = $("<div>").appendTo($("body"));
  590 + var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName="+serviceName+"&apiName="+rowData.apiName+"&serviceType="+serviceType+"&cloudType="+$("#cloudType").val()
  591 + +"&startTime1="+start[0]+"&startTime2="+start[1]+"&endTime1="+end[0]+"&endTime2="+end[1];
  592 + dialog.dialog({
  593 + backdrop: "static",
  594 + title: "API详情",
  595 + href: url,
  596 + height: "700px",
  597 + width: "900px",
  598 + buttons: [{
  599 + text: "关闭",
  600 + className: "btn-danger",
  601 + onclick: function () {
  602 + $(dialog).dialog("hide");
  603 + }
  604 + }]
  605 + });
  606 +
  607 + });
  608 + return div;
  609 + }
  610 + },{
  611 + title: "服务名",
  612 + field: "serviceName",
  613 + width: "10%",
  614 + formatter:function(value, rowData, rowIndex){
  615 + var serviceName = rowData.serviceName;
  616 + if(serviceName == null || serviceName==""){
  617 + serviceName = $("#searchApiName").select("getText");
  618 + }
  619 + return serviceName;
  620 + }
  621 + }, {
  622 + title: "总请求次数",
  623 + field: "totalCount",
  624 + width: "10%",
  625 + sortable: true
  626 + }, {
  627 + title: "请求异常次数",
  628 + field: "errorCount",
  629 + width: "10%",
  630 + sortable: true,
  631 + formatter: function (value, rowData, rowIndex) {
  632 + var div = $("<div>");
  633 + var textView = $("<span>").html(rowData.errorCount).appendTo(div);
  634 + div.append("<br>");
  635 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
  636 + var content = "";
  637 + if (rowData.errorInfo != null) {
  638 + for (var i = 0; i < rowData.errorInfo.length; i++) {
  639 + content = content + rowData.errorInfo[i] + "<br><br>";
  640 + }
  641 + }
  642 + editBtn.click(function () {
  643 + if(content != ""){
  644 + var dialog = $("<div>").appendTo($("body"));
  645 + dialog.dialog({
  646 + backdrop : "static",
  647 + title : "异常详情",
  648 + content : content,
  649 + height : "700px",
  650 + width : "1100px",
  651 + buttons : [{
  652 + text : "关闭",
  653 + className : "btn-danger",
  654 + onclick : function() {
  655 + $(dialog).dialog("hide");
  656 + }
  657 + }]
  658 + });
  659 + }
  660 + });
  661 + return div;
  662 + }
  663 + }, {
  664 + title: "平均耗时(ms)",
  665 + field: "avgCost",
  666 + width: "10%",
  667 + sortable: true,
  668 + formatter : function(value, rowData, rowIndex) {
  669 + var div = $("<div>");
  670 + var textView = $("<span>").html(rowData.avgCost).appendTo(div);
  671 + div.append("<br>");
  672 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
  673 + var content = "";
  674 + if(rowData.timeoutInfo != null){
  675 + for(var i = 0;i<rowData.timeoutInfo.length;i++){
  676 + content= content +rowData.timeoutInfo[i]+"<br><br>";
  677 + }
  678 + }
  679 + editBtn.click(function () {
  680 + if(content != ""){
  681 + var dialog = $("<div>").appendTo($("body"));
  682 + dialog.dialog({
  683 + backdrop : "static",
  684 + title : "超时详情",
  685 + content : content,
  686 + height : "700px",
  687 + width : "1100px",
  688 + buttons : [{
  689 + text : "关闭",
  690 + className : "btn-danger",
  691 + onclick : function() {
  692 + $(dialog).dialog("hide");
  693 + }
  694 + }]
  695 + });
  696 + }
  697 + });
  698 + return div;
  699 + }
  700 + }]
  701 + });
  702 +
532 }); 703 });
533 704
534 //获取曲线数据 705 //获取曲线数据
@@ -293,20 +293,42 @@ @@ -293,20 +293,42 @@
293 }); 293 });
294 } 294 }
295 295
296 - $(function () {  
297 -  
298 - $("#searchApiName").select({  
299 - valueField: "typeId",  
300 - textField: "typeName",  
301 - className: "form-control",  
302 - firstText : "all",  
303 - firstValue : 0, 296 + var getJavaService = function () {
  297 + $.ajax({
304 url: contextPath + "/type/queryJavaApiType", 298 url: contextPath + "/type/queryJavaApiType",
305 - loadFilter: function (data) {  
306 - return defaultLoadFilter(data);  
307 - },  
308 - value : 0 299 + type: 'post',
  300 + success: function (data) {
  301 + var selObj = $("#searchApiName");
  302 + selObj.empty();
  303 + selObj.append("<option value=0>" + "all" + "</option>");
  304 + $.each(data.data, function (idx, val) {
  305 + if(val.typeName == "gateway" || val.typeName == "order" || val.typeName == "promotion" || val.typeName == "product" || val.typeName == "message"
  306 + || val.typeName == "sns" || val.typeName == "user" || val.typeName == "resources" || val.typeName == "brower"){
  307 + selObj.append("<option value='" + val.typeId + "'>" + val.typeName + "</option>");
  308 + }
  309 +
309 }); 310 });
  311 + }
  312 + });
  313 + };
  314 +
  315 + $(function () {
  316 +
  317 +// $("#searchApiName").select({
  318 +// valueField: "typeId",
  319 +// textField: "typeName",
  320 +// className: "form-control",
  321 +// firstText : "all",
  322 +// firstValue : 0,
  323 +// url: contextPath + "/type/queryJavaApiType",
  324 +// loadFilter: function (data) {
  325 +// return defaultLoadFilter(data);
  326 +// },
  327 +// value : 0
  328 +// });
  329 +
  330 + //获取服务名下拉列表
  331 + getJavaService();
310 332
311 $("#ipInfoTable").table({ 333 $("#ipInfoTable").table({
312 columnAutoWidth: false, 334 columnAutoWidth: false,
@@ -330,8 +352,11 @@ @@ -330,8 +352,11 @@
330 errorObj.push(data.data.content[k]); 352 errorObj.push(data.data.content[k]);
331 costObj.push(data.data.content[k]); 353 costObj.push(data.data.content[k]);
332 } 354 }
333 - //按平均耗时从大到小排序ss 355 + //按请请求次数从大到小排序ss
334 totalObj.sort(function (a, b) { 356 totalObj.sort(function (a, b) {
  357 + if(b.totalCount == a.totalCount){
  358 + return b.errorCount-a.errorCount;
  359 + }
335 return b.totalCount - a.totalCount; 360 return b.totalCount - a.totalCount;
336 }); 361 });
337 $("#ipInfoTable").table("loadLoaclData", totalObj); 362 $("#ipInfoTable").table("loadLoaclData", totalObj);