ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit dee68487a0df8b0bae52e045ffb9dfaca7d13869 1 parent 9a2d8dfe

增加redis 新监控页面

Inline Side-by-side
Showing 3 changed files with 312 additions and 0 deletions
package com.ui.ctrl;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
/**
* Created by yoho on 2016/9/21.
*/
@RestController
@RequestMapping(value = "redisMonitor")
public class RedisMonitorCtrl {
@Autowired
HttpRestClient httpRestClient;
@RequestMapping("/toNewRedis")
public ModelAndView toRedisInfo() {
return new ModelAndView("redisInfo/newRedisMonitor");
}
/**
* 查询所有的twemproxy 与 独立 redis的信息
*
* @return
*/
@RequestMapping(value = "/allTwemproxy")
public BaseResponse queryAllTwemproxy() {
BaseResponse baseResponse = httpRestClient.defaultGet("/redisMonitor/allTwemproxy", BaseResponse.class);
return baseResponse;
}
/**
* 查询twemproxy下所有的redis
*/
@RequestMapping(value = "/allRedis")
public BaseResponse queryAllRedis(@RequestParam("twemproxy") String twemproxy) {
BaseResponse baseResponse = httpRestClient.defaultGet("/redisMonitor/allRedis?twemproxy=" + twemproxy, BaseResponse.class);
return baseResponse;
}
}
... ...
<%--
Created by IntelliJ IDEA.
User: yoho
Date: 2016/9/21
Time: 10:42
To change this template use File | Settings | File Templates.
--%>
<%@ page import="org.aspectj.weaver.ast.Var" %>
<%@ 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 + "/";
%>
<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/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/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.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>
<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> Home</a> <a href="#" class="current">Redis</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Redis状态预览 <font color="red">(最近2分钟)</font></h5>
</div>
</div>
<div class="container-fluid">
<div id="tRedisTable">
</div>
</div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true"
style="height: 500px;overflow :auto">
<div class="modal-dialog" style="width: 1500px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel2"></h4>
</div>
<div class="modal-body">
<div id="snapshotTable">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
</body>
<script src="<%=basePath %>js/pagination.js"></script>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_monitor").addClass("active open");
$("#li_newRedisMonitor").addClass("active");
</script>
<script type="text/javascript">
$(function () {
$("#tRedisTable").table({
url: contextPath + "redisMonitor/allTwemproxy",
striped: true,
panelClass: "panel-success",
loadFilter: function (data) {
console.log(data.data)
return defaultLoadFilter(data);
},
columns: [
{
title: "业务分类",
field: "name"
},
{
title: "地址",
field: "url"
}, {
title: "当前连接数",
width: "100px",
field: "connections"
}, {
title: "启动时长",
width: "100px",
field: "taskCtime"
}, {
title: "类型",
width: "100px",
field: "type"
}, {
title: "网络归属",
width: "100px",
field: "network"
}, {
title: "状态",
width: "100px",
field: "state"
}, {
title: "Redis",
formatter: function (value, rowData, rowIndex) {
var div = $("<pre>");
div.text(rowData.redisList);
return div;
}
}, {
//运行详情
title: "运行详情",
width: "100px",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
//查看volume——instance信息
var shotTaskInfoBtn = $("<button data-target='#updateModal' data-toggle='modal'>").addClass("btn btn-xs btn-primary").html("INFO").appendTo(div);
shotTaskInfoBtn.click(function () {
showRedisInfo(rowData);
});
div.append("&nbsp;");
div.append("&nbsp;");
div.append("&nbsp;");
return div;
}
}],
/* data: data*/
});
});
function showRedisInfo(rowData) {
var vId = rowData.volumeId;
console.log("vId:" + vId);
$("#snapshotTable").table({
url: contextPath + "redisMonitor/allRedis?twemproxy=" + rowData.url,
method: "GET",
striped: true,
panelClass: "panel-success",
loadFilter: function (data) {
console.log(data.data);
return defaultLoadFilter(data);
},
columns: [{
title: "IP",
field: "ip"
}, {
title: "Port",
width: "100px",
field: "port"
}, {
title: "角色",
width: "100px",
field: "role"
}, {
title: "最大内存",
width: "100px",
field: "maxMem"
}, {
title: "使用内存",
width: "100px",
field: "usedMem"
}, {
title: "内存使用率",
width: "100px",
field: "memUsedRate"
}, {
title: "内存碎片比率",
width: "100px",
field: "rssRate"
}, {
title: "状态",
width: "100px",
field: "status"
}, {
title: "主从",
formatter: function (value, rowData, rowIndex) {
var div = $("<pre>");
div.text(rowData.masterOrSlave);
return div;
}
}, {
title: "op/sec",
width: "100px",
field: "opSec"
}, {
title: "request/sec",
width: "100px",
field: "requestSec"
}, {
title: "命中率",
width: "100px",
field: "hitRate"
}],
/* data: data*/
});
$("#myModalLabel2").text("redis info");
$("#myModal2").modal('show');
}
</script>
</html>
... ...
... ... @@ -16,6 +16,7 @@ innerHTML += "<li id='li_javaApi'><a id='li_javaApi_a' href=''><i class='icon ic
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>";
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_newRedisMonitor'><a id='li_newRedisMonitor_a' href=''><i class='icon icon-th'></i> <span>Redis监控(new)</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>";
innerHTML += "<li id='li_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>";
innerHTML += "</ul></li>";
... ... @@ -113,6 +114,7 @@ document.getElementById("li_handledWork_a").setAttribute("href", path + "/workSy
document.getElementById("li_works_a").setAttribute("href", path + "/workSystem/toWorkList");
document.getElementById("li_aws_ebs_a").setAttribute("href", path + "/aws/toEbsManager");
document.getElementById("li_om_new_a").setAttribute("href", path + "/project/toNewOm");
document.getElementById("li_newRedisMonitor_a").setAttribute("href", path + "/redisMonitor/toNewRedis");
... ...