ops / monitor-ui · Commits

Go to a project

Authored by lingmin
Commit 81fb5c705020219fbdc7d0d29bbeaf4de33f22fd 1 parent 0718c12c

javaApi监控增加

Inline Side-by-side
Showing 7 changed files with 732 additions and 1 deletions
package com.ui.ctrl;
import com.ui.http.HttpRestClient;
import org.apache.commons.lang.StringUtils;
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.servlet.ModelAndView;
/**
* Created by lingmin on 2016/10/19.
*/
@Controller
@RequestMapping("javaMonitor")
public class JavaMonitorCtrl {
Logger log = LoggerFactory.getLogger(JavaMonitorCtrl.class);
@Autowired
private HttpRestClient httpClient;
@RequestMapping("/toJavaMonitor")
public ModelAndView toJavaMonitor() {
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("/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;
//}
}
... ...
div.dataTables_length label {
float: left;
text-align: left;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
float: right;
}
div.dataTables_info {
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
table.table {
clear: both;
margin-bottom: 6px !important;
max-width: none !important;
}
table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
cursor: pointer;
*cursor: hand;
}
table.table thead .sorting { background: url('http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/sort_desc.png') no-repeat center right; }
table.table thead .sorting_asc_disabled { background: url('http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/sort_desc_disabled.png') no-repeat center right; }
table.dataTable th:active {
outline: none;
}
/* Scrolling */
div.dataTables_scrollHead table {
margin-bottom: 0 !important;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
div.dataTables_scrollHead table thead tr:last-child th:first-child,
div.dataTables_scrollHead table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.dataTables_scrollBody table {
border-top: none;
margin-bottom: 0 !important;
}
div.dataTables_scrollBody tbody tr:first-child th,
div.dataTables_scrollBody tbody tr:first-child td {
border-top: none;
}
div.dataTables_scrollFoot table {
border-top: none;
}
/*
* TableTools styles
*/
.table tbody tr.active td,
.table tbody tr.active th {
background-color: #08C;
color: white;
}
.table tbody tr.active:hover td,
.table tbody tr.active:hover th {
background-color: #0075b0 !important;
}
.table-striped tbody tr.active:nth-child(odd) td,
.table-striped tbody tr.active:nth-child(odd) th {
background-color: #017ebc;
}
table.DTTT_selectable tbody tr {
cursor: pointer;
*cursor: hand;
}
div.DTTT .btn {
color: #333 !important;
font-size: 12px;
}
div.DTTT .btn:hover {
text-decoration: none !important;
}
ul.DTTT_dropdown.dropdown-menu a {
color: #333 !important; /* needed only when demo_page.css is included */
}
ul.DTTT_dropdown.dropdown-menu li {
position: relative;
}
ul.DTTT_dropdown.dropdown-menu li:hover a {
background-color: #0088cc;
color: white !important;
}
/* TableTools information display */
div.DTTT_print_info.modal {
height: 150px;
margin-top: -75px;
text-align: center;
}
div.DTTT_print_info h6 {
font-weight: normal;
font-size: 28px;
line-height: 28px;
margin: 1em;
}
div.DTTT_print_info p {
font-size: 14px;
line-height: 20px;
}
/*
* FixedColumns styles
*/
div.DTFC_LeftHeadWrapper table,
div.DTFC_LeftFootWrapper table,
div.DTFC_RightHeadWrapper table,
div.DTFC_RightFootWrapper table,
table.DTFC_Cloned tr.even {
background-color: white;
}
div.DTFC_RightHeadWrapper table ,
div.DTFC_LeftHeadWrapper table {
margin-bottom: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightBodyWrapper table,
div.DTFC_LeftBodyWrapper table {
border-top: none;
margin-bottom: 0 !important;
}
div.DTFC_RightBodyWrapper tbody tr:first-child th,
div.DTFC_RightBodyWrapper tbody tr:first-child td,
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
div.DTFC_RightFootWrapper table,
div.DTFC_LeftFootWrapper table {
border-top: none;
}
... ...
... ... @@ -94,6 +94,8 @@
</li>
<li class="" id="hostInfoList"><a href="?page_type=hostInfoList"><i class="icon icon-th"></i> <span>主机管理</span></a>
</li>
<li class="" id="javaMonitor"><a href="?page_type=javaMonitor"><i class="icon icon-th"></i><span>JAVA服务监控</span></a>
</li>
<li class="" id="javaApi"><a href="?page_type=javaApi"><i class="icon icon-th"></i><span>JAVA服务信息</span></a>
</li>
<li class="" id="zkInfo"><a href="?page_type=zkInfo"><i class="icon icon-th"></i><span>ZK监控</span></a>
... ... @@ -123,6 +125,7 @@
"mobjectInfo": 'jsp/mobject/mobjectInfo.jsp',
"hostGroupList": 'jsp/host/hostGroupList.jsp',
"hostInfoList": 'jsp/host/hostInfoList.jsp',
"javaMonitor": 'jsp/javaMonitor/javaMonitor.jsp',
"javaApi": 'jsp/javaapi/javaApi.jsp',
"zkInfo": '/jsp/zkInfo/zkInfoList.jsp',
"redisInfo": '/jsp/redisInfo/redisInfoList.jsp',
... ...
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
<link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
<link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
<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>
<script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>/js/unicorn.js"></script>
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
<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
... ...
<%@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>
... ...
... ... @@ -145,6 +145,7 @@
selObj.val(api_type);
}
};
var getTypeName = function (typeId) {
for (var i = 0; i < java_api_type.length; i++) {
... ...
... ... @@ -11,7 +11,8 @@ innerHTML += "<div id='sidebar'><ul>";
innerHTML += "<li id='li_dashboard'><a id='li_dashboard_a' href=''><i class='icon icon-th'></i> <span>Dashboard</span></a></li>";
/*监控*/
innerHTML += "<li class='submenu' id='li_monitor'><a id='li_monitor_a' href='#'><i class='icon icon-th-list'></i> <span>监控</span><span class='label'>6</span></a><ul>";
innerHTML += "<li class='submenu' id='li_monitor'><a id='li_monitor_a' href='#'><i class='icon icon-th-list'></i> <span>监控</span><span class='label'>8</span></a><ul>";
innerHTML += "<li id='li_javaMonitor'><a id='li_javaMonitor_a' href=''><i class='icon icon-th'></i> <span>JAVA服务监控</span></a></li>";
innerHTML += "<li id='li_javaApi'><a id='li_javaApi_a' href=''><i class='icon icon-th'></i> <span>JAVA服务信息</span></a></li>";
innerHTML += "<li id='li_zkInfo'><a id='li_zkInfo_a' href=''><i class='icon icon-th'></i> <span>ZK监控</span></a></li>";
innerHTML += "<li id='li_rabbitview'><a id='li_rabbitview_a' href=''><i class='icon icon-th'></i> <span>Rabbitmq监控</span></a></li>";
... ... @@ -86,6 +87,7 @@ document.getElementById("li_dashboard_a").setAttribute("href", path + "/dashboar
document.getElementById("li_mobjectInfo_a").setAttribute("href", path + "/mobject/toMobject");
document.getElementById("li_hostGroupList_a").setAttribute("href", path + "/hostGroup/toHostGroup");
document.getElementById("li_hostInfoList_a").setAttribute("href", path + "/hostInfoList/toHostInfos");
document.getElementById("li_javaMonitor_a").setAttribute("href", path + "/javaMonitor/toJavaMonitor");
document.getElementById("li_javaApi_a").setAttribute("href", path + "/javaApi/toJavaApi");
document.getElementById("li_zkInfo_a").setAttribute("href", path + "/zkMonitor/tozkMonitor");
document.getElementById("li_rabbitview_a").setAttribute("href", path + "/rabbitmq/toRabbitmq");
... ...