|
|
|
<%@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>
|
|
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="widget-box">
|
|
|
|
<div class="widget-title">
|
|
|
|
<h5>Java服务监控曲线</h5>
|
|
|
|
</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: 25px;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">60 minutes</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-4 control-label" role="form" id="chartterDiv"
|
|
|
|
style=" margin-top: 12px;margin-left: 15px;float: left;">
|
|
|
|
<div id="costCharts" class="input-group" style="float: left;height: 280px;width: 450px">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-4 control-label" role="form" id="chartterDiv1"
|
|
|
|
style=" margin-top: 12px;margin-left: 15px;float: left;">
|
|
|
|
<div id="timesCharts" class="input-group" style="float: left;height: 280px;width: 450px">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="widget-box">
|
|
|
|
<div class="widget-title">
|
|
|
|
<h5>Java服务监控信息</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" onchange="getOnchange()">
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<button id="searchJavaInfoBtn" class="btn btn-primary" style="margin-left: 15px">API统计详情</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="infoTableDiv">
|
|
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
|
|
<li role="presentation" class="active">
|
|
|
|
<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="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;
|
|
|
|
var refreshNameSelected = function () {
|
|
|
|
var selObj = $("#searchApiName");
|
|
|
|
$.each(java_api_type, function (idx, val) {
|
|
|
|
var value = val.value;
|
|
|
|
var text = val.text;
|
|
|
|
selObj.append("<option value='" + value + "'>" + text + "</option>");
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
var getJavaAppName = function () {
|
|
|
|
$.ajax({
|
|
|
|
url: contextPath + "/type/queryJavaApiType",
|
|
|
|
type: 'get',
|
|
|
|
success: function (data) {
|
|
|
|
if (!data || data.code != 200) {
|
|
|
|
$.toaster('获取java服务名称失败', '警告', 'warning');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$.each(data.data, function (idx, val) {
|
|
|
|
java_api_type.push({
|
|
|
|
"value": val.typeId,
|
|
|
|
"text": val.typeName
|
|
|
|
});
|
|
|
|
});
|
|
|
|
refreshNameSelected();
|
|
|
|
},
|
|
|
|
error: function (data) {
|
|
|
|
$.toaster('获取java服务名称失败', '警告', 'warning');
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
$('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');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//1min定时
|
|
|
|
function timer() {
|
|
|
|
//加载表格
|
|
|
|
$("#infoTable").table("load",{
|
|
|
|
serviceType: $("#searchApiName").val()
|
|
|
|
});
|
|
|
|
setTimeout("timer()", 60000);
|
|
|
|
}
|
|
|
|
timer();
|
|
|
|
|
|
|
|
//画图事件
|
|
|
|
function drawLine(subTitle) {
|
|
|
|
var title = {
|
|
|
|
text: '平均耗时-曲线图'
|
|
|
|
};
|
|
|
|
var subtitle = {
|
|
|
|
text: subTitle
|
|
|
|
};
|
|
|
|
var xAxis = {
|
|
|
|
// tickInterval: 7 * 24 * 3600 * 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']
|
|
|
|
};
|
|
|
|
var yAxis = {
|
|
|
|
title: {
|
|
|
|
text: 'cost (ms)'
|
|
|
|
},
|
|
|
|
plotLines: [{
|
|
|
|
value: 0,
|
|
|
|
width: 1,
|
|
|
|
color: '#808080'
|
|
|
|
}]
|
|
|
|
};
|
|
|
|
var tooltip = {
|
|
|
|
valueSuffix: ''
|
|
|
|
};
|
|
|
|
var legend = {
|
|
|
|
layout: 'vertical',
|
|
|
|
align: 'right',
|
|
|
|
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 json = {};
|
|
|
|
json.title = title;
|
|
|
|
json.subtitle = subtitle;
|
|
|
|
json.xAxis = xAxis;
|
|
|
|
json.yAxis = yAxis;
|
|
|
|
json.tooltip = tooltip;
|
|
|
|
json.legend = legend;
|
|
|
|
json.series = series;
|
|
|
|
|
|
|
|
$('#costCharts').highcharts(json);
|
|
|
|
}
|
|
|
|
|
|
|
|
//类型选择事件
|
|
|
|
function getOnchange(){
|
|
|
|
$("#infoTable").table("load", {
|
|
|
|
'serviceType': $("#searchApiName").val()
|
|
|
|
});
|
|
|
|
var name = $("#searchApiName").select("getText");
|
|
|
|
drawLine($("#searchApiName").select("getText"));
|
|
|
|
}
|
|
|
|
|
|
|
|
//获取曲线数据
|
|
|
|
function getLineDate(lineType){
|
|
|
|
$.ajax({
|
|
|
|
url: contextPath + "/type/queryJavaApiType",
|
|
|
|
type: 'get',
|
|
|
|
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();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
// getJavaAppName();
|
|
|
|
|
|
|
|
$("#searchApiName").select({
|
|
|
|
valueField: "typeId",
|
|
|
|
textField: "typeName",
|
|
|
|
className: "form-control",
|
|
|
|
url: contextPath + "/type/queryJavaApiType",
|
|
|
|
loadFilter: function (data) {
|
|
|
|
return defaultLoadFilter(data);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var title = $("#searchApiName").val();
|
|
|
|
if (title == null){
|
|
|
|
title = "gateway";
|
|
|
|
}
|
|
|
|
drawLine(title);
|
|
|
|
//加载表格
|
|
|
|
$("#infoTable").table({
|
|
|
|
columnAutoWidth: false,
|
|
|
|
url: contextPath + "/javaApi/query",
|
|
|
|
queryParams : {
|
|
|
|
'serviceType':$("#searchApiName").val()
|
|
|
|
},
|
|
|
|
striped: true,
|
|
|
|
title: "java服务监控信息列表",
|
|
|
|
dataType: "json",
|
|
|
|
sortable: true, //是否启用排序
|
|
|
|
sortOrder:"desc",
|
|
|
|
loadFilter: function (data) {
|
|
|
|
return defaultLoadFilter(data);
|
|
|
|
},
|
|
|
|
onLoadSuccess: function (data) {
|
|
|
|
|
|
|
|
//同步加载根据平均耗时的tab页列表
|
|
|
|
$("#infoTable1").table({
|
|
|
|
data: data
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onAfterShow: function () {
|
|
|
|
//refreshJavaAppStatus();
|
|
|
|
},
|
|
|
|
columns: [{
|
|
|
|
title: "IP",
|
|
|
|
field: "serviceId",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
title: "网络归属",
|
|
|
|
field: "type",
|
|
|
|
width: "10%"
|
|
|
|
}, {
|
|
|
|
title: "总请求次数",
|
|
|
|
field: "totalCount",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
title: "请求异常次数",
|
|
|
|
field: "errorCount",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
title: "平均耗时",
|
|
|
|
field: "avgCost",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
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,
|
|
|
|
data : paramObj.tableData,
|
|
|
|
striped: true,
|
|
|
|
title: "java服务监控信息列表",
|
|
|
|
dataType: "json",
|
|
|
|
sortable: true, //是否启用排序
|
|
|
|
sortOrder:"desc",
|
|
|
|
columns: [{
|
|
|
|
title: "IP",
|
|
|
|
field: "serviceId",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
title: "网络归属",
|
|
|
|
field: "type",
|
|
|
|
width: "10%"
|
|
|
|
}, {
|
|
|
|
title: "总请求次数",
|
|
|
|
field: "totalCount",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
title: "请求异常次数",
|
|
|
|
field: "errorCount",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
title: "平均耗时",
|
|
|
|
field: "avgCost",
|
|
|
|
width: "10%",
|
|
|
|
sortable:true
|
|
|
|
}, {
|
|
|
|
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%"
|
|
|
|
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//点击服务类型，同步更新列表中实例
|
|
|
|
$("#searchApiName").click(function () {
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
...
|
...
|
|
