ops / monitor-ui · Commits

Go to a project

Authored by lingmin
Commit 1d36600b212c38bb33129bacdedc8b06abe52017 1 parent 23839f3d

页面1update

Inline Side-by-side
Showing 5 changed files with 771 additions and 97 deletions
... ... @@ -153,5 +153,6 @@ public class HttpUriContants {
//java监控信息
public static final String JAVA_MONITOR_GET = "/newJavaApiInfo/queryByServiceType";
public static final String JAVA_GRAPH_GET = "/newJavaApiInfo/getJavaApiGraph";
}
... ...
... ... @@ -9,9 +9,13 @@ import lombok.Data;
@Data
public class JavaApiMonitorReq extends PageRequest {
private Integer serviceType;
private int serviceType;
private String serviceName;
private int timeInterval;
//曲线图类型，1：平均耗时，2：异常次数
private int graphType;
}
... ...
... ... @@ -9,7 +9,6 @@ import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
... ... @@ -29,21 +28,39 @@ public class JavaMonitorCtrl {
return new ModelAndView("javaMonitor/javaMonitor");
}
@RequestMapping("/toJavaMonitorList")
public ModelAndView toJavaMonitorList(Model model, String api_type) {
if (StringUtils.isBlank(api_type)) {
model.addAttribute("api_type", "ALL");
} else {
model.addAttribute("api_type", api_type);
}
return new ModelAndView("javaMonitor/javaMonitorList");
@RequestMapping("/toJavaApiInfoList")
public ModelAndView toJavaApiInfoList() {
return new ModelAndView("javaMonitor/javaApiInfoList");
}
@RequestMapping("/query")
@ResponseBody
public BaseResponse queryApiMonitorInfo(JavaApiMonitorReq req) {
//校验参数
if(StringUtils.isEmpty(req.getServiceName())){
req.setServiceName("gateway");
}
if(req.getTimeInterval() == 0){
req.setTimeInterval(1);
}
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_MONITOR_GET, req, BaseResponse.class);
return rep;
}
@RequestMapping("/getGraphData")
@ResponseBody
public BaseResponse getGraphData(JavaApiMonitorReq req) {
if(StringUtils.isEmpty(req.getServiceName())){
req.setServiceName("gateway");
}
BaseResponse rep;
try {
rep = httpClient.defaultPost(HttpUriContants.JAVA_GRAPH_GET, req, BaseResponse.class);
} catch (Exception e) {
rep = new BaseResponse(400);
rep.setMessage("getGraphData error");
}
return rep;
}
}
... ...
<%@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() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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 %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Java服务</a> <a href="#" class="current">服务监控</a><a href="#" class="current">API详情</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Java API监控信息</h5>
</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" style="float: left;">
<span class="input-group-addon">服务名：</span>
<select id="searchApiName" name="searchApiName" class="form-control" disabled>
</select>
</div>
<div class="input-group" style="margin-left: 10px">
<span class="input-group-addon">IP：</span>
<select id="iPName" name="iPName" class="form-control" onchange="getOnchange()">
</select>
</div>
</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">IP</a>
</li>
<li role="presentation">
<a href="#timesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
</li>
<li role="presentation">
<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>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_monitor").addClass("active open");
$("#li_javaMonitor").addClass("active");
</script>
<script>
var java_api_type = [];
var java_app = {};
var table_data;
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
//类型选择事件
function getOnchange(){
$("#ipInfoTable").table("load", {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText")
});
drawLine(1,"平均耗时-曲线图",$("#searchApiName").select("getText"));
drawLine(2,"异常次数-曲线图",$("#searchApiName").select("getText"));
}
$(function () {
$("#searchApiName").select({
valueField: "typeId",
textField: "typeName",
className: "form-control",
url: contextPath + "/type/queryJavaApiType",
loadFilter: function (data) {
return defaultLoadFilter(data);
},
onLoadSuccess:function(data){
if(data.length>0){
$("#ipInfoTable").table("load", {
serviceType: data[0].typeId,
serviceName: data[0].typeName,
timeInterval:$("#timeInterval").val()
});
}
}
});
$("#iPName").select({
valueField: "moId",
textField: "moHostIp",
className: "form-control",
url: contextPath + "/javaApi/details",
queryParams : {
id : $("#searchApiName").val()
},
loadFilter: function (data) {
return defaultLoadFilter(data);
},
onLoadSuccess:function(data){
// if(data.length>0){
// $("#ipInfoTable").table("load", {
// serviceType: data[0].typeId,
// serviceName: data[0].typeName
// });
// }
}
});
$("#ipInfoTable").table({
columnAutoWidth: false,
url: contextPath + "/javaMonitor/query",
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
loadFilter: function (data) {
return defaultLoadFilter(data);
},
onLoadSuccess: function (data) {
//同步加载根据异常次数排序的tab页列表
var errorObj = new Array();
for(var i = 0;i<data.length;i++){
errorObj.push(data[i]);
}
//按异常次数从大到小排序
errorObj.sort(function(a,b){
return b.errorCount-a.errorCount;
});
$("#infoTable").table("loadLoaclData", errorObj);
//同步加载根据平均耗时排序的tab页列表
var costObj = new Array();
for(var j = 0;j<data.length;j++){
costObj.push(data[j]);
}
//按平均耗时从大到小排序ss
costObj.sort(function(a,b){
return b.avgCost-a.avgCost;
});
$("#infoTable1").table("loadLoaclData", costObj);
},
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable:true
}, {
title: "网络归属",
field: "type",
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);
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 () {
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;
}
},{
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.errorInfo != null){
for(var i = 0;i<rowData.errorInfo.length;i++){
content= content +rowData.errorInfo[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;
}
}, {
title: "CPU使用率",
field: "cpuRate",
width: "10%"
},{
title: "内存使用率",
field: "memoryRate",
width: "10%"
}, {
title: "IO使用率",
field: "ioRate",
width: "10%"
}, {
title: "带宽（IN/OUT）",
field: "bandwidth",
width: "10%"
}]
});
$("#infoTable").table({
columnAutoWidth: false,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
// loadFilter: function (data) {
// return defaultLoadFilter(data);
// },
onLoadSuccess: function (data) {
},
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable:true
}, {
title: "网络归属",
field: "type",
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);
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 () {
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;
}
},{
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.errorInfo != null){
for(var i = 0;i<rowData.errorInfo.length;i++){
content= content +rowData.errorInfo[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;
}
}, {
title: "CPU使用率",
field: "cpuRate",
width: "10%"
},{
title: "内存使用率",
field: "memoryRate",
// formatter: function (value, rowData, rowIndex) {
// if (rowData.apiToggle == 0)
// return "N";
// else
// return "Y";
// },
width: "10%"
}, {
title: "IO使用率",
field: "ioRate",
width: "10%"
}, {
title: "带宽（IN/OUT）",
field: "bandwidth",
width: "15%"
}]
});
//加载表格
$("#infoTable1").table({
columnAutoWidth: false,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable:true
}, {
title: "网络归属",
field: "type",
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);
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 () {
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;
}
},{
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.errorInfo != null){
for(var i = 0;i<rowData.errorInfo.length;i++){
content= content +rowData.errorInfo[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;
}
}, {
title: "CPU使用率",
field: "cpuRate",
width: "10%"
},{
title: "内存使用率",
field: "memoryRate",
// formatter: function (value, rowData, rowIndex) {
// if (rowData.apiToggle == 0)
// return "N";
// else
// return "Y";
// },
width: "10%"
}, {
title: "IO使用率",
field: "ioRate",
width: "10%"
}, {
title: "带宽（IN/OUT）",
field: "bandwidth",
width: "15%"
}]
});
});
</script>
... ...
... ... @@ -34,19 +34,6 @@
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 300px;">
<div class="form-inline" role="form" id="timeDiv"
style=" margin-top: 12px;margin-left: 15px;float: left;">
<select id="timePeriod" name="timePeriod" class="form-control" >
<option value="1">1 minute</option>
<option value="2">10 minutes</option>
<option value="3">30 minutes</option>
<option value="4">1 hour</option>
<option value="4">5 hours</option>
<option value="4">15 hours</option>
<option value="4">1 day</option>
<option value="4">7 days</option>
</select>
</div>
<div class="col-sm-5 control-label" role="form" id="chartterDiv"
style=" margin-top: 12px;margin-left: 10px;float: left;">
<div id="costCharts" class="input-group" style="float: left;height: 280px;width: 720px">
... ... @@ -68,9 +55,16 @@
<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" style="float: left;">
<span class="input-group-addon">服务名：</span>
<select id="searchApiName" name="searchApiName" class="form-control" onchange="getOnchange()">
<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>
... ... @@ -131,31 +125,36 @@
if($("#searchApiName").val() != null && $("#searchApiName").select("getText") != null) {
$("#ipInfoTable").table("load", {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText")
serviceName: $("#searchApiName").select("getText"),
timeInterval: $("#timeInterval").val()
});
//更新曲线图
getLineDate(1);
getLineDate(2);
}
setTimeout("timer()", 60000);
}
timer();
//画图事件
function drawLine(type,title,subTitle) {
function drawLine(type,title,subTitle,yText,categories,series) {
var title = {
text: title
};
var subtitle = {
text: subTitle
text: subTitle == null? "gateway":subTitle
};
var xAxis = {
// 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']
//max : "10:00",
// min : "9:00"
// 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
};
var yAxis = {
title: {
text: 'cost (ms)'
// text: 'cost (ms)'
text: yText
},
plotLines: [{
value: 0,
... ... @@ -172,23 +171,24 @@
verticalAlign: 'middle',
borderWidth: 0
};
var series = [
{
name: '172.31.57.252',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: '172.31.57.254',
data: [1, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: '172.31.57.253',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
// var series = [
// {
// name: '172.31.57.252',
// data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
// 26.5, 23.3, 18.3, 13.9, 9.6]
// },
// {
// name: '172.31.57.254',
// data: [1, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
// 24.1, 20.1, 14.1, 8.6, 2.5]
// },
// {
// name: '172.31.57.253',
// data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
// 16.6, 14.2, 10.3, 6.6, 4.8]
// }
// ];
var series = series;
var json = {};
json.title = title;
... ... @@ -205,33 +205,51 @@
}
}
//类型选择事件
function getOnchange(){
//类型选择事件,type用于区分点击服务名称下拉(1)还是时间下拉(2)
function getOnchange(type){
$("#ipInfoTable").table("load", {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText")
serviceName: $("#searchApiName").select("getText"),
timeInterval:$("#timeInterval").val()
});
drawLine(1,"平均耗时-曲线图",$("#searchApiName").select("getText"));
drawLine(2,"异常次数-曲线图",$("#searchApiName").select("getText"));
//为1则是服务名选择
if(type == 1){
//更新曲线图
getLineDate(1);
getLineDate(2);
}
}
//获取曲线数据
function getLineDate(lineType){
$.ajax({
url: contextPath + "/type/queryJavaApiType",
type: 'get',
url: contextPath + "/javaMonitor/getGraphData",
type: 'post',
data:{
serviceType : $("#searchApiName").val(),
serviceName : $("#searchApiName").select("getText"),
graphType : lineType
},
dataType:'json',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取曲线数据失败', '警告', 'warning');
return;
}
$.each(data.data, function (idx, val) {
java_api_type.push({
"value": val.typeId,
"text": val.typeName
});
});
refreshNameSelected();
//根据Ip处理曲线数据
var categories = data.data.time;
var series = data.data.content;
var title = "";
var xText = "";
if(lineType == 1){
title = "平均耗时-曲线图";
xText = "cost(ms)";
}else{
title = "异常次数-曲线图";
xText = "error times";
}
drawLine(lineType,title,$("#searchApiName").select("getText"),xText,categories,series);
}
});
}
... ... @@ -250,7 +268,8 @@
if(data.length>0){
$("#ipInfoTable").table("load", {
serviceType: data[0].typeId,
serviceName: data[0].typeName
serviceName: data[0].typeName,
timeInterval:$("#timeInterval").val()
});
}
}
... ... @@ -265,9 +284,14 @@
sortable: true, //是否启用排序
sortOrder:"desc",
loadFilter: function (data) {
return defaultLoadFilter(data);
//记录下开始时间和结束时间
paramObj.startTime = data.startTime;
paramObj.endTime = data.endTime;
return defaultLoadFilter(data).content;
},
onLoadSuccess: function (data) {
//记录第一条ip
paramObj.ipName = data[0].ip;
//同步加载根据异常次数排序的tab页列表
var errorObj = new Array();
for(var i = 0;i<data.length;i++){
... ... @@ -308,13 +332,11 @@
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable:true
},{
title: "异常信息",
field: "errorInfo",
width: "8%",
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){
... ... @@ -341,11 +363,41 @@
});
return div;
}
}, {
title: "平均耗时",
},{
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable:true
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;
}
}, {
title: "CPU使用率",
field: "cpuRate",
... ... @@ -353,12 +405,6 @@
},{
title: "内存使用率",
field: "memoryRate",
// formatter: function (value, rowData, rowIndex) {
// if (rowData.apiToggle == 0)
// return "N";
// else
// return "Y";
// },
width: "10%"
}, {
... ... @@ -404,13 +450,11 @@
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable:true
}, {
title: "异常信息",
field: "errorInfo",
width: "20%",
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){
... ... @@ -438,10 +482,40 @@
return div;
}
},{
title: "平均耗时",
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable:true
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;
}
}, {
title: "CPU使用率",
field: "cpuRate",
... ... @@ -496,13 +570,11 @@
title: "请求异常次数",
field: "errorCount",
width: "10%",
sortable:true
}, {
title: "异常信息",
field: "errorInfo",
width: "20%",
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){
... ... @@ -530,10 +602,40 @@
return div;
}
},{
title: "平均耗时",
title: "平均耗时(ms)",
field: "avgCost",
width: "10%",
sortable:true
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;
}
}, {
title: "CPU使用率",
field: "cpuRate",
... ... @@ -566,8 +668,19 @@
if (title == null){
title = "gateway";
}
drawLine(1,"平均耗时-曲线图",$("#searchApiName").select("getText"));
drawLine(2,"异常次数-曲线图",$("#searchApiName").select("getText"));
//更新曲线图
getLineDate(1);
getLineDate(2);
//新增
$("#searchJavaInfoBtn").click(function() {
// paramObj.markingPustId = 0;
// paramObj.markingPushFlag = '1';
var url = contextPath + "/javaMonitor/toJavaApiInfoList";
var serviceType = $("#searchApiName").val();
url += "?serviceType=" + serviceType;
window.location.href = url;
});
});
... ...