ops / monitor-ui · Commits

Go to a project

Authored by lingmin
Commit 23839f3d4d7a0b303d7fe900e80894e39e3424fd 1 parent 81fb5c70

update

Inline Side-by-side
Showing 5 changed files with 269 additions and 107 deletions
... ... @@ -151,4 +151,7 @@ public class HttpUriContants {
public static final String JAVA_RESTART_GET = "/javaRestart/query";
public static final String JAVA_RESTART_STATAUS = "/javaRestart/getProjectStatus";
//java监控信息
public static final String JAVA_MONITOR_GET = "/newJavaApiInfo/queryByServiceType";
}
... ...
package com.ui.model.req;
import lombok.Data;
/**
* javaAPI监控信息
* Created by lingmin on 2016/10/21.
*/
@Data
public class JavaApiMonitorReq extends PageRequest {
private Integer serviceType;
private String serviceName;
}
... ...
package com.ui.ctrl;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.model.req.JavaApiMonitorReq;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
... ... @@ -8,6 +11,7 @@ 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;
/**
... ... @@ -35,26 +39,11 @@ public class JavaMonitorCtrl {
return new ModelAndView("javaMonitor/javaMonitorList");
}
//@RequestMapping("/all")
//@ResponseBody
//public String getJavaApiInfo() {
// String strType = "";
//
// log.debug("get all type");
//
// strType = httpClient.defaultGet(HttpUriContants.JAVA_API_GET, String.class);
//
// log.info("all type: {}", strType);
//
// return strType;
//}
//@RequestMapping("/query")
//@ResponseBody
//public BaseResponse queryMonitorInfo(JavaApiInfoReq req) {
// BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_API_GET, req, BaseResponse.class);
// return rep;
//}
@RequestMapping("/query")
@ResponseBody
public BaseResponse queryApiMonitorInfo(JavaApiMonitorReq req) {
BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_MONITOR_GET, req, BaseResponse.class);
return rep;
}
}
... ...
... ... @@ -18,7 +18,6 @@
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
<link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/dataTables.bootstra.css">
<link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css">
<script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
... ... @@ -48,7 +47,6 @@
<script src="<%=basePath %>js/jstree/jstree.min.js"></script>
<script src="<%=basePath %>js/jquery.toaster.js"></script>
<script type="text/javascript" src="<%=basePath %>js/jquery.dataTables.js"></script>
<script type="text/javascript" src="<%=basePath %>js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath %>js/echarts.simple.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/echarts.min.js"></script>
<script src="<%=basePath %>js/highcharts.js"></script>
\ No newline at end of file
... ...
... ... @@ -35,22 +35,26 @@
<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;">
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">60 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-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 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">
</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 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="float: left;height: 280px;width: 720px">
</div>
</div>
</div>
... ... @@ -75,14 +79,20 @@
<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>
<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="timesPart">
<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">
... ... @@ -104,39 +114,6 @@
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 () {
... ... @@ -151,25 +128,30 @@
//1min定时
function timer() {
//加载表格
$("#infoTable").table("load",{
serviceType: $("#searchApiName").val()
});
if($("#searchApiName").val() != null && $("#searchApiName").select("getText") != null) {
$("#ipInfoTable").table("load", {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText")
});
}
setTimeout("timer()", 60000);
}
timer();
//画图事件
function drawLine(subTitle) {
function drawLine(type,title,subTitle) {
var title = {
text: '平均耗时-曲线图'
text: title
};
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',
// 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"
};
var yAxis = {
title: {
... ... @@ -216,17 +198,21 @@
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#costCharts').highcharts(json);
if(type == 1){
$('#costCharts').highcharts(json);
}else{
$('#timesCharts').highcharts(json);
}
}
//类型选择事件
function getOnchange(){
$("#infoTable").table("load", {
'serviceType': $("#searchApiName").val()
});
var name = $("#searchApiName").select("getText");
drawLine($("#searchApiName").select("getText"));
$("#ipInfoTable").table("load", {
serviceType: $("#searchApiName").val(),
serviceName: $("#searchApiName").select("getText")
});
drawLine(1,"平均耗时-曲线图",$("#searchApiName").select("getText"));
drawLine(2,"异常次数-曲线图",$("#searchApiName").select("getText"));
}
//获取曲线数据
... ... @@ -251,7 +237,6 @@
}
$(function () {
// getJavaAppName();
$("#searchApiName").select({
valueField: "typeId",
... ... @@ -260,21 +245,20 @@
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
});
}
}
});
var title = $("#searchApiName").val();
if (title == null){
title = "gateway";
}
drawLine(title);
//加载表格
$("#infoTable").table({
$("#ipInfoTable").table({
columnAutoWidth: false,
url: contextPath + "/javaApi/query",
queryParams : {
'serviceType':$("#searchApiName").val()
},
url: contextPath + "/javaMonitor/query",
striped: true,
title: "java服务监控信息列表",
dataType: "json",
... ... @@ -284,18 +268,127 @@
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页列表
$("#infoTable1").table({
data: data
//同步加载根据平均耗时排序的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);
},
onAfterShow: function () {
//refreshJavaAppStatus();
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
},{
title: "异常信息",
field: "errorInfo",
width: "8%",
formatter : function(value, rowData, rowIndex) {
var div = $("<div>");
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: "平均耗时",
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: "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: "serviceId",
field: "ip",
width: "10%",
sortable:true
}, {
... ... @@ -313,6 +406,38 @@
width: "10%",
sortable:true
}, {
title: "异常信息",
field: "errorInfo",
width: "20%",
formatter : function(value, rowData, rowIndex) {
var div = $("<div>");
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: "平均耗时",
field: "avgCost",
width: "10%",
... ... @@ -345,11 +470,9 @@
}]
});
//加载表格
$("#infoTable1").table({
columnAutoWidth: false,
data : paramObj.tableData,
striped: true,
title: "java服务监控信息列表",
dataType: "json",
... ... @@ -357,7 +480,7 @@
sortOrder:"desc",
columns: [{
title: "IP",
field: "serviceId",
field: "ip",
width: "10%",
sortable:true
}, {
... ... @@ -375,6 +498,38 @@
width: "10%",
sortable:true
}, {
title: "异常信息",
field: "errorInfo",
width: "20%",
formatter : function(value, rowData, rowIndex) {
var div = $("<div>");
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: "平均耗时",
field: "avgCost",
width: "10%",
... ... @@ -407,13 +562,13 @@
}]
});
var title = $("#searchApiName").val();
if (title == null){
title = "gateway";
}
drawLine(1,"平均耗时-曲线图",$("#searchApiName").select("getText"));
drawLine(2,"异常次数-曲线图",$("#searchApiName").select("getText"));
//点击服务类型，同步更新列表中实例
$("#searchApiName").click(function () {
});
});
... ...