|
|
|
<%@ 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 + "/";
|
|
|
|
%>
|
|
|
|
<script type="text/javascript" src="<%=basePath %>/js/jquery.min.js"></script>
|
|
|
|
<script language="JavaScript" src="<%=basePath %>/js/charts/FusionCharts.js"></script>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
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 class="row-fluid"
|
|
|
|
style="border: solid 1px #CDC9C9; padding: 10px">
|
|
|
|
<div class="span12">
|
|
|
|
<div class="section section-visible">
|
|
|
|
<h3 style="margin-left: 16px;">REDIS(最近两分钟)</h3>
|
|
|
|
<div id="redisAppendDiv">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- row -->
|
|
|
|
</div>
|
|
|
|
<div class="widget-content nopadding" id="charDiv">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="modal fade" style="margin-top: 60px;" id="myRedisProxyDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
|
<div class="modal-dialog">
|
|
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
|
|
<button type="button" class="close" data-dismiss="modal"
|
|
|
|
aria-hidden="true">×</button>
|
|
|
|
<h4 class="modal-title" id="myModalLabel"></h4>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body" id="redislistDetail">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- /.modal-content -->
|
|
|
|
</div>
|
|
|
|
<!-- /.modal -->
|
|
|
|
</div>
|
|
|
|
<div id="testDiv"></div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var myMasterRedis=new Array();
|
|
|
|
var mySlaveRedis=new Array();
|
|
|
|
$.ajax({
|
|
|
|
url: contextPath + "/redisInfo/getRedisInfo",
|
|
|
|
type: 'post',
|
|
|
|
url: contextPath + "redisInfo/getRedisInfo",
|
|
|
|
type: 'get',
|
|
|
|
async: false,
|
|
|
|
dataType: "json",
|
|
|
|
success: function (data) {
|
|
|
|
if(data.data!=null&&data.data!=''){
|
|
|
|
$.each(data.data, function (n, value) {
|
|
|
|
var idDiv="chartdiv"+n;
|
|
|
|
$("#charDiv").prepend('<div id="'+idDiv+'" align="center" style="width:600px;">FusionCharts. </div>');
|
|
|
|
var chart0 = new FusionCharts("<%=basePath %>/js/charts/DragNode.swf", "ChartId", "1200", "650", "0");
|
|
|
|
chart0.setXMLData(value);
|
|
|
|
chart0.render(idDiv);
|
|
|
|
var time="";
|
|
|
|
var awsHtml = '';
|
|
|
|
if(data.data != null){
|
|
|
|
$.each(data.data,function(name,value) {
|
|
|
|
var contentHtml="";
|
|
|
|
var topNode="";
|
|
|
|
var activeCount=0;
|
|
|
|
var failedCount=0;
|
|
|
|
var successIp='';
|
|
|
|
var failedIp="";
|
|
|
|
$.each(value, function (n, obj) {
|
|
|
|
if(obj.level==0){
|
|
|
|
topNode=obj.nodeFrom;
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if(obj.level==1){
|
|
|
|
if(obj.isFailed==1){
|
|
|
|
successIp=successIp+'<a href="#" style="color: white;" onclick="displatyTetail(\''+obj.nodeTo+'\')">'+obj.nodeTo+'('+obj.paramMonitor+')</a><br/>';
|
|
|
|
activeCount=activeCount+1;
|
|
|
|
}else if(obj.isFailed==0){
|
|
|
|
failedCount=failedCount+1;
|
|
|
|
failedIp=failedIp+obj.nodeTo+'<br/>';
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if(obj.level==2){
|
|
|
|
if(obj.isSlave==0){
|
|
|
|
myMasterRedis.push(obj);
|
|
|
|
}else if(obj.isSlave==1){
|
|
|
|
mySlaveRedis.push(obj);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
contentHtml='<div class="col-md-4" id="aws" style="height: 300px;">'+
|
|
|
|
'<div class="panel panel-success-alt noborder" style="background-color: #5cb85c;">'+
|
|
|
|
'<div class="panel-heading noborder">'+
|
|
|
|
'<div>'+ '<div style="margin-left: 18px;"><img src="img/log_redis.png"><span style="font-size:28px;color: white;margin-left: 180px;">'+topNode+'</span></div>'+
|
|
|
|
'</div>'+
|
|
|
|
'<hr>'+
|
|
|
|
'<div class="clearfix mt15">'+
|
|
|
|
'<div class="pull-left">'+
|
|
|
|
'<h5 class="md-title nomargin" style="color: white;">twemproxy列表:'+activeCount+'(好),'+failedCount+'(失败)</h5>'+
|
|
|
|
'<h4 class="nomargin" style="font-size: 16px; line-height: 21px;">'+successIp+'</h4>'+
|
|
|
|
'</div>'+
|
|
|
|
'</div>'+
|
|
|
|
'</div>'+
|
|
|
|
'</div>'+
|
|
|
|
'</div>';
|
|
|
|
$("#redisAppendDiv").append(contentHtml);
|
|
|
|
});
|
|
|
|
}else{
|
|
|
|
alert("数据加载失败！");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function displatyTetail(ip){
|
|
|
|
var detailListRedis=new Array();
|
|
|
|
$.each(myMasterRedis, function (i, myMasterObj) {
|
|
|
|
if(ip==myMasterObj.nodeFrom){
|
|
|
|
detailListRedis.push(myMasterObj);
|
|
|
|
$.each(mySlaveRedis, function (j, mySlaveObj) {
|
|
|
|
if(myMasterObj.nodeTo==mySlaveObj.nodeFrom){
|
|
|
|
detailListRedis.push(mySlaveObj);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$("#redislistDetail").table({
|
|
|
|
columnAutoWidth : false,
|
|
|
|
data : detailListRedis,
|
|
|
|
striped : true,
|
|
|
|
columns : [{
|
|
|
|
title : "nodeFrom",
|
|
|
|
field : "nodeFrom",
|
|
|
|
width : "12%"
|
|
|
|
},{
|
|
|
|
title : "nodeTo",
|
|
|
|
field : "nodeTo",
|
|
|
|
width : "12%"
|
|
|
|
},{
|
|
|
|
title : "redis监控信息",
|
|
|
|
field : "paramMonitor",
|
|
|
|
width : "12%"
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
$("#myModalLabel").text("twemproxy详细信息");
|
|
|
|
$("#myRedisProxyDetail").modal('show');
|
|
|
|
}
|
|
|
|
|
|
|
|
</script> |
|
|
\ No newline at end of file |
...
|
...
|
|
