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 @@
<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>
</li>
<li role="presentation" >
<a href="#timesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
</li>
<li role="presentation">
... ... @@ -104,12 +107,15 @@
</li>
</ul>
<div class="tab-content" style="padding-top:10px">
<div role="tabpanel" class="tab-pane fade in active" id="timesPart">
<div role="tabpanel" class="tab-pane fade in active" id="allTimesPart">
<div id="infoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="costPart">
<div role="tabpanel" class="tab-pane fade" id="timesPart">
<div id="infoTable1"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="costPart">
<div id="infoTable2"></div>
</div>
</div>
</div>
</div>
... ... @@ -211,6 +217,26 @@
});
};
var getJavaService = function () {
$.ajax({
url: contextPath + "/type/queryJavaApiType",
type: 'post',
success: function (data) {
var selObj = $("#searchApiName");
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"){
selObj.append("<option value='" + val.typeId + "'>" + val.typeName + "</option>");
}
});
}
});
};
$(function () {
//更新曲线图
getLineDate(1,1);
... ... @@ -218,19 +244,21 @@
getLineDate(2,1);
getLineDate(2,2);
$("#searchApiName").select({
valueField: "typeId",
textField: "typeName",
className: "form-control",
firstText : "all",
firstValue : 0,
url: contextPath + "/type/queryJavaApiType",
loadFilter: function (data) {
return defaultLoadFilter(data);
},
value : 0
});
// $("#searchApiName").select({
// valueField: "typeId",
// textField: "typeName",
// className: "form-control",
// firstText : "all",
// firstValue : 0,
// url: contextPath + "/type/queryJavaApiType",
// loadFilter: function (data) {
// return defaultLoadFilter(data);
// },
// value : 0
// });
//获取服务名下拉列表
getJavaService();
//获取IP下拉列表
getJavaIp(1);
$("#infoTable").table({
... ... @@ -246,12 +274,22 @@
paramObj.startTime = data.data.startTime;
paramObj.endTime = data.data.endTime;
//同步加载根据平均耗时排序的tab页列表
var allObj = new Array();
var costObj = new Array();
var errorObj = 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]);
}
//按总请求次数排序
allObj.sort(function(a,b){
if(b.totalCount == a.totalCount){
return b.errorCount-a.errorCount;
}
return b.totalCount-a.totalCount;
});
//按平均耗时从大到小排序ss
costObj.sort(function(a,b){
if(b.avgCost == a.avgCost){
... ... @@ -268,8 +306,9 @@
}
return b.errorCount - a.errorCount;
});
$("#infoTable").table("loadLoaclData", errorObj);
$("#infoTable1").table("loadLoaclData", costObj);
$("#infoTable").table("loadLoaclData", allObj);
$("#infoTable1").table("loadLoaclData", errorObj);
$("#infoTable2").table("loadLoaclData", costObj);
}
},
columns: [{
... ... @@ -529,6 +568,138 @@
}]
});
//加载表格
$("#infoTable2").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").html(rowData.apiName).appendTo(div);
editBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
var url = contextPath + "/javaApiMonitor/toJavaIpInfoList?serviceName="+serviceName+"&apiName="+rowData.apiName+"&serviceType="+serviceType+"&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: "总请求次数",
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);
var content = "";
if (rowData.errorInfo != null) {
for (var i = 0; i < rowData.errorInfo.length; i++) {
content = content + rowData.errorInfo[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;
}
}, {
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 () {
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;
}
}]
});
});
//获取曲线数据
... ...
... ... @@ -293,20 +293,42 @@
});
}
$(function () {
$("#searchApiName").select({
valueField: "typeId",
textField: "typeName",
className: "form-control",
firstText : "all",
firstValue : 0,
var getJavaService = function () {
$.ajax({
url: contextPath + "/type/queryJavaApiType",
loadFilter: function (data) {
return defaultLoadFilter(data);
},
value : 0
type: 'post',
success: function (data) {
var selObj = $("#searchApiName");
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"){
selObj.append("<option value='" + val.typeId + "'>" + val.typeName + "</option>");
}
});
}
});
};
$(function () {
// $("#searchApiName").select({
// valueField: "typeId",
// textField: "typeName",
// className: "form-control",
// firstText : "all",
// firstValue : 0,
// url: contextPath + "/type/queryJavaApiType",
// loadFilter: function (data) {
// return defaultLoadFilter(data);
// },
// value : 0
// });
//获取服务名下拉列表
getJavaService();
$("#ipInfoTable").table({
columnAutoWidth: false,
... ... @@ -330,8 +352,11 @@
errorObj.push(data.data.content[k]);
costObj.push(data.data.content[k]);
}
//按平均耗时从大到小排序ss
//按请请求次数从大到小排序ss
totalObj.sort(function (a, b) {
if(b.totalCount == a.totalCount){
return b.errorCount-a.errorCount;
}
return b.totalCount - a.totalCount;
});
$("#ipInfoTable").table("loadLoaclData", totalObj);
... ...