ops / monitor-ui · Commits

Go to a project

Authored by lingmin
Commit b13877e9185cc6282759559ea1c1a615fcf3fe9b 1 parent 96bd99c8 master ... dev1019 dev_addtag_ui dev_autoscal_java dev_config_center dev_deploy_image_ui dev_deploy_node dev_deploy_uic_ui dev_deploy_yohosearchservice dev_dock_release_ui dev_docker2_ui dev_host_topo_ui dev_linlong dev_master dev_mip_hbasesource dev_mysql_ui dev_nginx_checkbox dev_nginx_ui dev_sql分页 dev_store_ui dev_switch_nginx dev_ui_topo feature/add-footer-div-20220127 ge_search_compare monitor-ui-fyzh monitor_ui qcloudOnly ralph 短信

页面3update

Inline Side-by-side
Showing 6 changed files with 391 additions and 285 deletions
... ... @@ -156,5 +156,6 @@ public class HttpUriContants {
public static final String JAVA_GRAPH_GET = "/newJavaApiInfo/getJavaApiGraph";
public static final String JAVA_IP_LIST = "/newJavaApiInfo/getIPList";
public static final String JAVA_API_LIST = "/newJavaApiInfo/queryByServiceTypeAndIP";
public static final String JAVA_IP_API_LIST= "/newJavaApiInfo/queryByServiceTypeAndApiName";
}
... ...
... ... @@ -27,4 +27,6 @@ public class JavaApiMonitorReq extends PageRequest {
private String ip;
private String apiName;
}
... ...
... ... @@ -33,6 +33,11 @@ public class JavaMonitorCtrl {
return new ModelAndView("javaMonitor/javaApiInfoList");
}
@RequestMapping("/toJavaIpInfoList")
public ModelAndView toJavaIpInfoList() {
return new ModelAndView("javaMonitor/javaIpInfoList");
}
@RequestMapping("/query")
@ResponseBody
public BaseResponse queryApiMonitorInfo(JavaApiMonitorReq req) {
... ... @@ -77,8 +82,27 @@ public class JavaMonitorCtrl {
@RequestMapping("/queryByServiceTypeAndIP")
@ResponseBody
public BaseResponse queryByServiceTypeAndIP(JavaApiMonitorReq req) {
if(req.getCloudType() == 0){
req.setCloudType(1);
}
if ("0".equals(req.getIp())) {
req.setIp("");
}
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_API_LIST, req, BaseResponse.class);
return rep;
}
@RequestMapping("/queryByServiceTypeAndApiName")
@ResponseBody
public BaseResponse queryByServiceTypeAndApiName(JavaApiMonitorReq req) {
if(req.getCloudType() == 0){
req.setCloudType(1);
}
if ("0".equals(req.getIp())) {
req.setIp("");
}
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_IP_API_LIST, req, BaseResponse.class);
return rep;
}
}
... ...
... ... @@ -19,8 +19,8 @@
var contextPath = '<%=basePath %>';
var serviceType = "<%=serviceType %>";
var serviceName = "<%=serviceName%>";
var startTime = "<%=startTime%>>";
var endTime = "<%=endTime%>>"
var startTime = "<%=startTime%>";
var endTime = "<%=endTime%>";
var homeUrl = contextPath + "jsp/javaMonitor/javaMonitor.jsp";
</script>
<title>YOHO!运维</title>
... ... @@ -162,68 +162,66 @@
serviceName : serviceName
},
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.length;j++){
costObj.push(data[j]);
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;
});
$("#infoTable1").table("loadLoaclData", errorObj);
return costObj;
$("#infoTable").table("loadLoaclData", errorObj);
$("#infoTable1").table("loadLoaclData", costObj);
}
},
columns: [{
title: "接口名",
field: "apiName",
width: "10%",
sortable: true
// formatter: function (value, rowData, rowIndex) {
// var div = $("<div>");
// var editBtn = $("<button>").addClass("btn btn-xs btn-success").html(rowData.ip).appendTo(div);
// editBtn.click(function () {
// var dialog = $("<div>").appendTo($("body"));
// dialog.dialog({
// backdrop: "static",
// title: "API详情",
// href: contextPath + "jsp/javaMonitor/javaIpInfoList.jsp",
// height: "80%",
// width: "60%",
// buttons: [{
// text: "关闭",
// className: "btn-info",
// onclick: function () {
// $(dialog).dialog("hide");
// }
// }]
// });
//
// });
// return div;
// }
formatter: function (value, rowData, rowIndex) {
var start = startTime.split(" ");
var end = 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 + "/javaMonitor/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: "totalCount",
... ... @@ -271,36 +269,38 @@
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;
// }
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;
}
}]
});
... ... @@ -308,15 +308,41 @@
$("#infoTable1").table({
columnAutoWidth: false,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortable: true, //是否启用排序
sortOrder: "desc",
columns: [{
title: "接口名",
field: "apiName",
width: "10%",
sortable: true
sortable: true,
formatter: function (value, rowData, rowIndex) {
var start = startTime.split(" ");
var end = 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 + "/javaMonitor/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: "totalCount",
... ... @@ -363,37 +389,39 @@
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 = $("<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;
}
}]
});
... ...
<%@ 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
... ...
... ... @@ -36,15 +36,29 @@
<div class="widget-title" style="height: 400px;">
<div class="col-sm-5 control-label" role="form" id="chartterDiv"
style=" margin-top: 12px;margin-left: 10px;">
<div id="costCharts" class="input-group" style="height: 380px;width: 760px">
<div id="costAwsCharts" class="input-group" style="height: 380px;width: 760px">
</div>
</div>
<div class="col-sm-5 control-label" role="form" id="chartterDiv1"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div id="timesCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
<div id="costQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
</div>
</div>
</div>
<div class="widget-title" style="height: 400px;">
<div class="col-sm-5 control-label" role="form" id="chartterDiv3"
style=" margin-top: 12px;margin-left: 10px;">
<div id="timesAwsCharts" class="input-group" style="height: 380px;width: 760px">
</div>
</div>
<div class="col-sm-5 control-label" role="form" id="chartterDiv4"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div id="timesQcloudCharts" class="input-group" style="height: 380px;width: 760px;margin-left: 100px">
</div>
</div>
</div>
</div>
</div>
<div class="widget-box">
... ... @@ -139,9 +153,12 @@
//画图事件
function drawLine(type,title,subTitle,yText,categories,series) {
var title = {
text: title
var title1 = {
text: title+"(AWS)"
};
var title2 = {
text: title+"(Qcloud)"
};
var subtitle = {
text: subTitle == null? "gateway":subTitle
};
... ... @@ -177,31 +194,43 @@
// 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;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
//解析series,区分aws.qcloud
var awsData = new Array();
var qcData = new Array();
if(series != null){
for(var i =0;i<series.length;i++){
if(series[i].cloudType == 1){
awsData.push(series[i])
}else{
qcData.push(series[i])
}
}
}
var json1 = {};
json1.title = title1;
json1.subtitle = subtitle;
json1.xAxis = xAxis;
json1.yAxis = yAxis;
json1.tooltip = tooltip;
json1.legend = legend;
json1.series = awsData;
var json2 = {};
json2.title = title2;
json2.subtitle = subtitle;
json2.xAxis = xAxis;
json2.yAxis = yAxis;
json2.tooltip = tooltip;
json2.legend = legend;
json2.series = qcData;
if(type == 1){
$('#costCharts').highcharts(json);
$('#costAwsCharts').highcharts(json1);
$('#costQcloudCharts').highcharts(json2);
}else{
$('#timesCharts').highcharts(json);
$('#timesAwsCharts').highcharts(json1);
$('#timesQcloudCharts').highcharts(json2);
}
}
... ... @@ -279,7 +308,6 @@
columnAutoWidth: false,
url: contextPath + "/javaMonitor/query",
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
... ... @@ -415,7 +443,7 @@
width: "10%"
},{
title: "带宽（IN/OUT）(KBps)",
title: "带宽（IN/OUT）(Mbps)",
field: "bandwidth",
width: "10%"
... ... @@ -425,7 +453,6 @@
$("#infoTable").table({
columnAutoWidth: false,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
... ... @@ -539,7 +566,7 @@
width: "10%"
},{
title: "带宽（IN/OUT）(KBps)",
title: "带宽（IN/OUT）(Mbps)",
field: "bandwidth",
width: "15%"
... ... @@ -550,7 +577,6 @@
$("#infoTable1").table({
columnAutoWidth: false,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortable: true, //是否启用排序
sortOrder:"desc",
... ... @@ -660,7 +686,7 @@
width: "10%"
},{
title: "带宽（IN/OUT）(KBps)",
title: "带宽（IN/OUT）(Mbps)",
field: "bandwidth",
width: "15%"
... ...