ops / monitor-ui · Commits

Go to a project

Authored by lingmin
Commit 6b81da8870f03ab5d6e9bf430bce9e052f44be82 1 parent 8b7b6132

delete

Inline Side-by-side
Showing 2 changed files with 0 additions and 737 deletions
<%@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 + "/";
String serviceType = request.getParameter("serviceType");
String serviceName = request.getParameter("serviceName");
String startTime = request.getParameter("startTime");
String endTime = request.getParameter("endTime");
%>
<!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 homeUrl = contextPath + "jsp/javaMonitor/javaMonitor.jsp";
</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='<%=basePath %>jsp/javaMonitor/javaMonitor.jsp' 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>
<input type="text" id="serviceType" name="serviceType" class="form-control" disabled>
</input>
</div>
<div class="input-group" style="margin-left: 15px">
<select id="cloudType" name="cloudType" class="form-control" style="width: 100px" onchange="getOnchange()">
<option value="1">AWS</option>
<option value="2">QCloud</option>
</select>
</div>
<div class="input-group" style="margin-left: 15px">
<span class="input-group-addon">IP：</span>
<select id="iPName" name="iPName" class="form-control" style="width: 200px" onchange="getIpOnchange()">
</select>
</div>
</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");
$("#serviceType").val(serviceName);
</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() {
var cloudType = $("#cloudType").val();
if(cloudType == null){
cloudType = 1;
}
getJavaAppType(cloudType);
$("#infoTable").table("load", {
startTime : startTime,
endTime : endTime,
serviceType : serviceType,
serviceName : serviceName,
ip:"",
cloudType :cloudType
});
}
//ip类型选择事件
function getIpOnchange() {
$("#infoTable").table("load", {
startTime : startTime,
endTime : endTime,
serviceType : serviceType,
serviceName : serviceName,
ip:$("#iPName").val(),
cloudType : $("#cloudType").val()
});
}
var getJavaAppType = function (cloudType) {
$.ajax({
url: contextPath + "/javaMonitor/queryIpList",
type: 'post',
data : {
serviceType:serviceType,
cloudType : cloudType,
serviceName : serviceName
},
dataType:'json',
success: function (data) {
var selObj = $("#iPName");
selObj.empty();
selObj.append("<option value=0>" + "all" + "</option>");
$.each(data.data, function (idx, val) {
selObj.append("<option value='" + val + "'>" + val + "</option>");
});
}
});
};
$(function () {
getJavaAppType(1);
$("#infoTable").table({
columnAutoWidth: false,
url: contextPath + "/javaMonitor/queryByServiceTypeAndIP",
queryParams : {
startTime : startTime,
endTime : endTime,
serviceType : serviceType,
serviceName : serviceName
},
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder: "desc",
onLoadSuccess: function (data) {
if(data.data != null){
//同步加载根据平均耗时排序的tab页列表
var costObj = new Array();
var errorObj = new Array();
for(var j = 0;j<data.data.length;j++){
costObj.push(data.data[j]);
errorObj.push(data.data[j]);
}
//按平均耗时从大到小排序ss
costObj.sort(function(a,b){
if(b.avgCost == a.avgCost){
return b.errorCount-a.errorCount;
}
return b.avgCost-a.avgCost;
});
//同步加载根据异常次数排序的tab页列表
//按异常次数从大到小排序
errorObj.sort(function (a, b) {
if(b.errorCount == a.errorCount){
return b.avgCost-a.avgCost;
}
return b.errorCount - a.errorCount;
});
$("#infoTable").table("loadLoaclData", errorObj);
$("#infoTable1").table("loadLoaclData", costObj);
}
},
columns: [{
title: "接口名",
field: "apiName",
width: "10%",
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").css("height","35px").html(rowData.apiName).appendTo(div);
editBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
var url = contextPath + "/javaMonitor/toJavaIpInfoList?serviceName="+rowData.serviceName+"&apiName="+rowData.apiName+"&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",
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;
}
}]
});
//加载表格
$("#infoTable1").table({
columnAutoWidth: false,
striped: true,
dataType: "json",
sortOrder: "desc",
columns: [{
title: "接口名",
field: "apiName",
width: "10%",
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",
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;
}
}]
});
});
</script>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String serviceName = request.getParameter("serviceName");
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");
%>
<body>
<form class="form-horizontal" id="javaMonitorForm" name="javaMonitorForm" style="width: 800px;margin-left: 15px">
<div class="form-group">
<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="#ipTimesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
</li>
<li role="presentation">
<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="ipTimesPart">
<div id="ipInfoTable"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="ipCostPart">
<div id="ipInfoTable1"></div>
</div>
</div>
</div>
</form>
</body>
<script>
$(function () {
var contextPath = '<%=basePath %>';
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/queryByServiceTypeAndApiName",
queryParams : {
startTime : startTime,
endTime : endTime,
serviceName : serviceName,
apiName :apiName,
cloudType : cloudType
},
striped: true,
dataType: "json",
sortable: true, //是否启用排序
sortOrder: "desc",
onLoadSuccess: function (data) {
if(data.data != null){
//同步加载根据平均耗时排序的tab页列表
var costObj = new Array();
var errorObj = new Array();
for(var j = 0;j<data.data.length;j++){
costObj.push(data.data[j]);
errorObj.push(data.data[j]);
}
//按平均耗时从大到小排序ss
costObj.sort(function(a,b){
if(b.avgCost == a.avgCost){
return b.errorCount-a.errorCount;
}
return b.avgCost-a.avgCost;
});
//同步加载根据异常次数排序的tab页列表
//按异常次数从大到小排序
errorObj.sort(function (a, b) {
if(b.errorCount == a.errorCount){
return b.avgCost-a.avgCost;
}
return b.errorCount - a.errorCount;
});
$("#javaMonitorForm #ipInfoTable").table("loadLoaclData", errorObj);
$("#javaMonitorForm #ipInfoTable1").table("loadLoaclData", costObj);
}
},
columns: [{
title: "IP",
field: "ip",
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 = $("<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++) {
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 = $("<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;
}
}]
});
//加载表格
$("#javaMonitorForm #ipInfoTable1").table({
columnAutoWidth: false,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
sortOrder: "desc",
columns: [{
title: "IP",
field: "ip",
width: "10%",
sortable: true
}, {
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 = $("<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++) {
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 = $("<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>
\ No newline at end of file