ops / monitor-ui · Commits

Go to a project

Authored by simba
Commit ff16240280fe69e157e8659904251ee54d4af6fb 2 parents a645c096 30b730aa

Merge branch 'master' of http://git.yoho.cn/ops/monitor-ui

Inline Side-by-side
Showing 8 changed files with 311 additions and 78 deletions
... ... @@ -59,6 +59,8 @@ public class HttpUriContants {
****/
public static final String GET_ZK_INFO = "/zkMonitor/getZkMonitorRecords";
public static final String GET_ZK_TREE = "/zkMonitor/getZkMonitorTree";
public static final String GET_ZK_DETAIL = "/zkMonitor/getZkMonitorDetail";
public static final String EDIT_ZK_DETAIL = "/zkMonitor/editZkMonitorDetail";
/***
* redis监控信息查询
... ...
package com.ui.model.req;
import lombok.Data;
@Data
public class ZkDetailReq extends PageRequest{
private String ip;
private String zkValue;
private String zkPath;
}
... ...
... ... @@ -10,6 +10,7 @@ import org.springframework.web.bind.annotation.ResponseBody;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.model.req.ZkDetailReq;
import com.ui.model.req.ZkTreeReq;
/**
... ... @@ -19,9 +20,9 @@ import com.ui.model.req.ZkTreeReq;
*/
@Controller
@RequestMapping("zkTree")
public class ZkMonitorTree {
public class ZkMonitorTreeCtrl {
Logger log = LoggerFactory.getLogger(ZkMonitorTree.class);
Logger log = LoggerFactory.getLogger(ZkMonitorTreeCtrl.class);
@Autowired
private HttpRestClient httpClient;
... ... @@ -33,4 +34,20 @@ public class ZkMonitorTree {
BaseResponse response=httpClient.defaultPost(HttpUriContants.GET_ZK_TREE, req, BaseResponse.class);
return response;
}
@RequestMapping("/getAll")
@ResponseBody
public BaseResponse getAll(ZkDetailReq req){
log.info("getAll with req is {}",req);
BaseResponse response=httpClient.defaultPost(HttpUriContants.GET_ZK_DETAIL, req, BaseResponse.class);
return response;
}
@RequestMapping("/editDetail")
@ResponseBody
public BaseResponse editDetail(ZkDetailReq req){
log.info("editDetail with req is {}",req);
BaseResponse response=httpClient.defaultPost(HttpUriContants.EDIT_ZK_DETAIL, req, BaseResponse.class);
return response;
}
}
... ...
... ... @@ -6,71 +6,25 @@
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<form class="form-horizontal" id="javaInfoForm" name="javaInfoForm">
<form class="form-horizontal" id="zkInfoForm" name="zkInfoForm">
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>服务名：</label>
<label class="col-sm-2 control-label">路径：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="apiName" name="apiName" placeholder="输入服务名" maxlength="30"
size="40"/>
<input type="text" class="form-control" id="zkPath" name="zkPath" maxlength="30" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>url：</label>
<label class="col-sm-2 control-label">值：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="apiUrl" name="apiUrl" placeholder="输入url"
size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>类别：</label>
<div class="col-sm-2">
<select id="serviceType" name="serviceType" class="form-control">
</select>
<input type="text" class="form-control" id="zkValue" name="zkValue" />
</div>
<label class="col-sm-2 control-label"> <span style="color:red">*</span>请求：</label>
<div class="col-sm-2">
<select id="apiReqMethod" name="apiReqMethod" class="form-control">
<option value="0">GET</option>
<option value="1">POST</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">是否启用：</label>
<div class="col-sm-2">
<input type="checkbox" id="apiToggle" name="apiToggle">
</div>
<label class="col-sm-2 control-label"> <span style="color:red">*</span>告警阈值：</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="apiWarnTrigger" name="apiWarnTrigger" placeholder="输入告警阈值"
maxlength="30" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">请求参数：</label>
<div class="col-sm-8">
<textarea id="apiData" name="apiData" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-8" id="messageAlert"></div>
</div>
</form>
<script>
$(function(){
$("#zkInfoForm #zkPath").val(paramObj.zkPath);
$("#zkInfoForm #zkValue").val(paramObj.zkValue);
})
</script>
\ No newline at end of file
... ...
... ... @@ -6,6 +6,74 @@
+ 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>
<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/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>css/yoho.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/bootstrap-plugin/bootstrap.form.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>
<link href="<%=basePath %>css/jquery.tagsinput.css" rel="stylesheet"/>
<script src="<%=basePath %>js/jquery.tagsinput.min.js" type="text/javascript"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
<h5 style="color: #E0EEE0;font-style:oblique;font-weight:900;font-size:200%;margin-left: 45px;margin-top: 40px;">
YOHO</h5>
</div>
<!-- 左侧菜单项 -->
<div id="sidebar">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">监控对象</a>
... ... @@ -19,7 +87,7 @@
</div>
<!-- 树 -->
<div style="float: left;width: 300px;color: #D3D3D3;height: 600px;">
<div style="float: left;width: 250px;color: #D3D3D3;height: 600px;">
<div class="widget-title" style="height: 50px;">
<h5>节点展示</h5>
</div>
... ... @@ -29,7 +97,7 @@
</div>
</div>
<!-- 列表 -->
<div class="widget-content nopadding" style="border-left: 1px solid #E5E5E5;width: 800px;float: left;">
<div class="widget-content nopadding" style="border-left: 1px solid #E5E5E5;width: 450px;float: left;">
<div class="widget-title" style="height: 50px;">
<h5>根路径</h5>
</div>
... ... @@ -39,7 +107,7 @@
</div>
</div>
</div>
<div class="widget-content nopadding" style="margin-left: 1100px;border-left: 1px solid #E5E5E5;">
<div class="widget-content nopadding" style="margin-left: 700px;border-left: 1px solid #E5E5E5;">
<div class="widget-title" style="height: 50px;">
<h5>节点详情</h5>
</div>
... ... @@ -51,28 +119,31 @@
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="<%=basePath %>/script/yoho.type.zktree.js"></script>
<script>
function toDetail(rowData){
function toDetail(rowData,ip){
$("#detailTable").show();
$(function () {
$("#detailTable").table({
url: contextPath + "/mobject/query",
striped: true,
panelClass: "panel-success",
pagination: true,
pageSize: 10,
url: contextPath + "/zkTree/getAll?ip="+ip+"&zkPath="+rowData.root,
striped : true,
pagination : true,
pageSize : 10,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
columns: [{
title: "名称",
field: "moName"
title: "路径",
width:"30%",
field: "zkPath"
}, {
title: "值",
field: "zkValue"
}, {
title: "操作",
width:"10%",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
//修改
... ... @@ -88,7 +159,78 @@ function toDetail(rowData){
});
}
function updateMObject(rowData){
/*function updateMObject(rowData){
paramObj.zkPath = rowData.zkPath;
paramObj.zkValue = rowData.zkValue;
var dialog0 = $("<div>").appendTo($("body"));
dialog0.dialog({
size : "modal-lg",
title : "修改路径",
backdrop : "static",
href : contextPath +"/jsp/zkMonitor/zkMonitorEdit.jsp",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog0).dialog("hide");
}
}, {
text : "提交",
className : "btn-success",
onclick : function() {
}
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title :"修改路径",
backdrop : "static",
content : "是否修改",
buttons : [{
text : "否",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}, {
text : "是",
className : "btn-success",
onclick : function() {
var btn = $(this);
$(dialog).dialog("hide");
$("#zkInfoForm").form("submit", {
submitUrl : contextPath + "/zkTree/editDetail.do",
submitData : {
ip : rowData.ip
},
onBeforeSubmit : function() {
if (!$(this).form("validate")) {
btn.removeAttr("disabled");
return false;
}
},
success : function(data) {
$("#detailTable").table("load", {
ip : rowData.ip,
zkPath : rowData.zkPath
});
$(dialog0).dialog("hide");
$("#inboxTemplateListTable").table("load");
$(dialog).dialog("hide");
}
});
}
}]
});
}
}]
});
}*/
</script>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script type="text/javascript">
$("#li_zkMonitor").addClass("active");
</script>
</html>
\ 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 + "/";
%>
<form class="form-horizontal" id="zkRootInfoForm" name="zkRootInfoForm">
<div class="form-group">
<label class="col-sm-2 control-label">名称：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="zkName" name="zkName" maxlength="30" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">路径：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="zkRoot" name="zkRoot" />
</div>
</div>
</form>
<script>
$(function(){
$("#zkRootInfoForm #zkName").val(paramObj.name);
$("#zkRootInfoForm #zkRoot").val(paramObj.root);
})
</script>
\ No newline at end of file
... ...
... ... @@ -7,6 +7,7 @@ innerHTML += "<li id='li_hostGroupList'><a id='li_hostGroupList_a' href=''><i cl
innerHTML += "<li id='li_hostInfoList'><a id='li_hostInfoList_a' href=''><i class='icon icon-th'></i> <span>主机管理</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_zkMonitor'><a id='li_zkMonitor_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>";
innerHTML += "<li id='li_redisInfo'><a id='li_redisInfo_a' href=''><i class='icon icon-th'></i> <span>Redis监控</span></a></li>";
innerHTML += "<li id='li_nginxview'><a id='li_nginxview_a' href=''><i class='icon icon-th'></i> <span>Nginx监控</span></a></li>";
... ... @@ -32,7 +33,7 @@ document.getElementById("li_redisInfo_a").setAttribute("href", path + "/redisInf
document.getElementById("li_nginxview_a").setAttribute("href", path + "/nginx/toNginxView");
document.getElementById("li_projectRelease_a").setAttribute("href", path + "/project/toProject");
document.getElementById("li_others_a").setAttribute("href", path + "/jsp/dashBoard/others.jsp");
document.getElementById("li_zkMonitor_a").setAttribute("href", path + "/jsp/zkMonitor/zkMonitorList.jsp");
function getUrlBasePath() {
var location = ( window.location + '').split('/');
... ...
... ... @@ -156,8 +156,7 @@ function searchType(ip){
url: contextPath + "/zkTree/getRoot",
striped: true,
panelClass: "panel-success",
pagination: true,
pageSize: 10,
pagination: false,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
... ... @@ -173,7 +172,7 @@ function searchType(ip){
value : value
}).appendTo(div);
input.click(function () {
toDetail(rowData);
toDetail(rowData,ip);
});
return div;
}
... ... @@ -188,7 +187,7 @@ function searchType(ip){
//修改
var editBtn = $("<button data-target='#updateModal' data-toggle='modal'>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
editBtn.click(function () {
updateMObject(rowData);
updateRoot(rowData);
});
return div;
}
... ... @@ -204,11 +203,86 @@ function searchType(ip){
}
/*function updateRoot(rowData){
paramObj.name = rowData.name;
paramObj.root = rowData.root;
var dialog0 = $("<div>").appendTo($("body"));
dialog0.dialog({
size : "modal-lg",
title : "修改路径",
backdrop : "static",
href : contextPath +"/jsp/zkMonitor/zkRootEdit.jsp",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog0).dialog("hide");
}
}, {
text : "提交",
className : "btn-success",
onclick : function() {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title :"修改路径",
backdrop : "static",
content : "是否修改",
buttons : [{
text : "否",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}, {
text : "是",
className : "btn-success",
onclick : function() {
var btn = $(this);
this.prop("disabled", "disabled");//提交后，按钮变灰
$("#indexTemplateEditForm").form("submit", {
submitUrl : contextPath + "/InboxTemplateController/saveInboxTemplate.do",
submitData : {
inboxTemplateId : inboxTemplateId,
inboxTemplateType : inboxTemplateType,
inboxTemplatePicPath : inboxTemplatePicPath,
category : category
},
onBeforeSubmit : function() {
if (!$(this).form("validate")) {
btn.removeAttr("disabled");
return false;
}
},
success : function(data) {
if (!data || data.code != 200) {
btn.removeAttr("disabled");
$("#indexTemplateEditForm #messageAlert").alerts({
content : data.message,
type : "danger"
});
return;
}
$(dialog0).dialog("hide");
$("#inboxTemplateListTable").table("load");
$(dialog).dialog("hide");
}
});
}
}]
});
}
}]
});
}*/
var refreshTypeTree = function () {
console.log("refresh tree");
treeData = []; //重置
$.get("type/zkTree", function (data, state) {
$.get(contextPath+"type/zkTree", function (data, state) {
console.log(state)
var jsonData = JSON.parse(data);
$.each(jsonData.data, function (n, val) {
... ...