Authored by FengRuwei

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

# Conflicts:
#	monitor-ui-web/src/main/webapp/index.jsp
... ... @@ -52,4 +52,9 @@ public class HttpUriContants {
* ZK监控信息查询
****/
public static final String GET_ZK_INFO = "/zkMonitor/getZkMonitorRecords";
/***
* redis监控信息查询
****/
public static final String GET_REDIS_INFO = "/redisMonitor/getRedisInfo";
}
... ...
package com.ui.model.req;
import lombok.Data;
@Data
public class RedisReq extends PageRequest {
private String hostIp;
private String recordTime;
}
... ...
package com.ui.ctrl;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
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.RedisReq;
@Controller
@RequestMapping("redisInfo")
public class RedisInfoCtrl {
@Autowired
HttpRestClient httpRestClient;
Logger log = LoggerFactory.getLogger(RedisInfoCtrl.class);
@RequestMapping("/getRedisInfo")
@ResponseBody
public BaseResponse getRedisInfo(RedisReq req){
log.info("getRedisInfo with param is {} ",req);
BaseResponse response=httpRestClient.defaultPost(HttpUriContants.GET_REDIS_INFO, req, BaseResponse.class);
return response;
}
}
... ...
... ... @@ -24,3 +24,7 @@ a.api_info{
margin-right: 2px;
cursor: pointer;
}
div.api_info_container{
padding-left: 5px;
}
\ No newline at end of file
... ...
... ... @@ -34,24 +34,18 @@
<link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.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/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.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.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>
... ... @@ -87,6 +81,8 @@
</li>
<li class="" id="zkInfo"><a href="?page_type=zkInfo"><i class="icon icon-th"></i><span>ZK监控</span></a>
</li>
<li class="" id="redisInfo"><a href="?page_type=redisInfo"><i class="icon icon-th"></i><span>Redis监控</span></a>
</li>
</ul>
</div>
<!-- 右侧具体内容 -->
... ... @@ -100,7 +96,8 @@
"hostGroupList": 'jsp/host/hostGroupList.jsp',
"hostInfoList": 'jsp/host/hostInfoList.jsp',
"javaApi": 'jsp/javaapi/javaApi.jsp',
"zkInfo": '/jsp/zkInfo/zkInfoList.jsp'
"zkInfo": '/jsp/zkInfo/zkInfoList.jsp',
"redisInfo": '/jsp/redisInfo/redisInfoList.jsp'
}
var page_type = "<%=page_type %>";
var page_url = "<%=page_url %>";
... ...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">Redis监控</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Redis监控</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div>
<div class="form-inline" role="form" id="redisQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" style="float: left;">
<span class="input-group-addon">ip:</span>
<input type="text" id="ip" name="ip" class="form-control" placeholder=""/>
</div>
<div class="input-group" style="float: left;margin-left: 25px;">
<span class="input-group-addon">时间:</span>
<input type="text" id="time" name="time" class="form-control" placeholder=""/>
</div>
<button id="searchRedisInfo" class="btn btn-primary" style="margin-left: 25px;">搜索</button>
</div>
</div>
</div>
<div id="redisInfoTable">
</div>
</div>
</div>
</div>
<script>
$(function(){
$("#redisInfoTable").table({
columnAutoWidth: false,
url: contextPath + "redisInfo/getRedisInfo",
striped: true,
title: "Redis监控列表",
dataType: "json",
pagination: true,
pageSize: 10,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
columns: [{
title: "时间",
field: "redcordTime",
formatter : function(value, rowData, rowIndex) {
return rowData[0];
}
},{
title: "IP",
field: "hostIp",
formatter : function(value, rowData, rowIndex) {
return rowData[1];
}
},{
title: "角色",
field: "role",
formatter : function(value, rowData, rowIndex) {
return rowData[2];
}
},{
title: "连接数量",
field: "connected_clients",
formatter : function(value, rowData, rowIndex) {
return rowData[3];
}
},{
title: "内存总量",
field: "used_memory",
formatter : function(value, rowData, rowIndex) {
return rowData[4];
}
},{
title: "内存高峰值",
field: "used_memory_peak_human",
formatter : function(value, rowData, rowIndex) {
return rowData[5];
}
}]
});
});
//设置默认时间
$("#redisQueryDiv #time").datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss'
});
$("#searchRedisInfo").click(function(){
$("#redisInfoTable").table("load",{
hostIp:$("#redisQueryDiv #ip").val(),
redcordTime:$("#redisQueryDiv #time").val()
});
});
</script>
\ No newline at end of file
... ...