ops / monitor-ui · Commits

Go to a project

Authored by skinny.wu
Commit 0431daab7c587c24cd3992085c3c03317214e32b 1 parent 8fce2f38

Redis页面修改

Inline Side-by-side
Showing 3 changed files with 291 additions and 253 deletions
... ... @@ -10,8 +10,18 @@
<!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 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"/>--%>
<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"/>
... ... @@ -19,6 +29,11 @@
<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"/>
<link href="<%=basePath %>css/nginxview.css" rel="stylesheet">
<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>
... ... @@ -47,19 +62,16 @@
</div>
<div class="container-fluid">
<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 class="widget-box">
<div class="widget-title">
<h5>Redis状态预览 <font color="red">(最近2分钟)</font></h5>
</div>
</div>
<!-- row -->
</div>
<div class="container-fluid">
<div id="redisAppendDiv">
</div>
</div>
</div>
... ... @@ -72,6 +84,7 @@
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body" id="redislistDetail">
</div>
... ... @@ -86,247 +99,5 @@
<script>
$("#li_redisInfo").addClass("active");
</script>
<script type="text/javascript">
var myMasterRedis=null;
var mySlaveRedis=null;
$(function () {
loadRedisMonitorData();
timerRedisMonitor();
});
function timerRedisMonitor() {
loadRedisMonitorData();
setTimeout("timerRedisMonitor()", 30000);
}
function loadRedisMonitorData(){
$.ajax({
url: contextPath + "redisInfo/getRedisInfo",
type: 'get',
async: false,
dataType: "json",
success: function (data) {
console.log(data);
var time = "";
var awsHtml = '';
if (data.data != null) {
myMasterRedis = new Array();
mySlaveRedis = new Array();
$("#redisAppendDiv").html("");
$.each(data.data, function (name, value) {
var contentHtml = "";
var topNode = "";
var awsAcount = 0;
var qcloudAcount = 0;
var awsIp = '';
var qcoloudIp = '';
$.each(value, function (n, obj) {
if (obj.level == 0) {
topNode = obj.nodeFrom;
return true;
}
if (obj.level == 1) {
if (obj.nodeTo.indexOf("172") == 0) {
awsAcount = awsAcount + 1;
if (obj.isFailed == 1) {
awsIp += '<button onclick="displatyTetail(\'' + obj.nodeTo + '\')" class="btn_java_api btn btn-lg btn-default btn-primary" style="margin-top:2px;margin-left:5px;width: 165px;text-align:left;font-size: 12px;">' + obj.nodeTo;
var cccc=obj.paramMonitor.split(";");
awsIp=awsIp+"<br/>"+cccc[1]+"<br/>"+cccc[2]+'</button>';
} else if (obj.isFailed == 0) {
awsIp += '<button class="btn_java_api btn btn-lg btn-default btn-danger" style="margin-top:5px;margin-left:5px;width: 165px;text-align:left;font-size: 12px;">' + obj.nodeTo;
awsIp=awsIp+"<br/>"+obj.paramMonitor+ '</button>';
}
} else if (obj.nodeTo.indexOf("10") == 0) {
qcloudAcount = qcloudAcount + 1;
if (obj.isFailed == 1) {
qcoloudIp += '<button onclick="displatyTetail(\'' + obj.nodeTo + '\')" class="btn_java_api btn btn-lg btn-default btn-primary" style="margin-top:2px;margin-left:5px;width: 165px;text-align:left;font-size: 12px;">' + obj.nodeTo;
var cccc=obj.paramMonitor.split(";");
qcoloudIp=qcoloudIp+"<br/>"+cccc[1]+"<br/>"+cccc[2]+'</button>';
} else if (obj.isFailed == 0) {
qcoloudIp += '<button class="btn_java_api btn btn-lg btn-default btn-danger" style="margin-top:5px;margin-left:5px;width: 165px;text-align:left;font-size: 12px;">' + obj.nodeTo;
qcoloudIp=qcoloudIp+"<br/>"+obj.paramMonitor+ '</button>';
}
}
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: 360px; width: 800px;">' +
'<div class="panel panel-success-alt noborder" style="background-color: #5cb85c;">' +
'<div class="panel-heading noborder">' +
'<div>' + '<div style="margin-left: 18px;"><img src="<%=basePath%>img/log_redis.png"><span style="font-size:28px;color: white;margin-left: 180px;">' + topNode + '</span></div>' +
'</div>' +
'<hr>' +
'<div class="clearfix mt15">' +
'<div style="width:360px; height: 180px;float: left; border: 1px solid white;word-break:break-all;">' +
'<h4 class="modal-title" style="text-align: center;color: white;">AWS</h4>';
if (awsIp == "") {
contentHtml += "无";
} else {
contentHtml += awsIp;
}
contentHtml += '</div>' +
'<div style="width:360px; height: 180px;float: right; border: 1px solid white;word-break:break-all;">' +
'<h4 class="modal-title" style="text-align: center;color: white;" >QCloud</h4>';
if (qcoloudIp == "") {
contentHtml += "无";
} else {
contentHtml += qcoloudIp;
}
contentHtml += '</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$("#redisAppendDiv").append(contentHtml);
});
}
}
});
}
function displatyTetail(ip){
var detailListRedis=new Array();
$.each(myMasterRedis, function (i, myMasterObj) {
myMasterObj.slaveParam="";
if(ip==myMasterObj.nodeFrom){
$.each(mySlaveRedis, function (j, mySlaveObj) {
if(myMasterObj.nodeTo==mySlaveObj.nodeFrom){
myMasterObj.slaveParam=mySlaveObj.paramMonitor+","+mySlaveObj.nodeTo;
}
});
detailListRedis.push(myMasterObj);
}
});
$("#redislistDetail").empty();
$("#redislistDetail").table({
columnAutoWidth : false,
data : detailListRedis,
striped : true,
columns : [{
title : "IP",
field : "nodeTo",
formatter : function(value, rowData, rowIndex) {
var ipport=value.split(":");
return ipport[0];
},
width : "10%"
},{
title : "port",
field : "nodeTo",
formatter : function(value, rowData, rowIndex) {
var ipport=value.split(":");
return ipport[1];
},
width : "8%"
},{
title : "角色",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[1]==null){
return "";
}else{
return paramMonitor[1];
}
},
width : "7%"
},{
title : "最大内存",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[2]==null){
return "";
}else{
return paramMonitor[2];
}
},
width : "8%"
},{
title : "使用内存",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[4]==null){
return "";
}else{
return paramMonitor[4];
}
},
width : "8%"
},{
title : "使用率",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[3]==null){
return "";
}else{
return paramMonitor[3];
}
},
width : "8%"
},{
title : "状态",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[0]==null){
return "";
}else{
if(paramMonitor[0]=="0"){
return "ERROR";
}else if(paramMonitor[0]=="1"){
return "OK"
}
}
},
styler : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[0]==null){
return "";
}else{
if(paramMonitor[0]=="0"){
return {
"background-color" : "red",
"color":"white"
};
}else if(paramMonitor[0]=="1"){
return {
"background-color" : "green",
"color":"white"
};
}
}
},
width : "6%"
},{
title : "主从",
field : "slaveParam",
formatter : function(value, rowData, rowIndex) {
if(value!=""){
var slaveParam=value.split(",");
return "主从"+slaveParam[0]+",主IP:"+slaveParam[1];
}
return "无";
},
width : "25%"
}]
});
$("#myModalLabel").text("twemproxy详细信息");
$("#myRedisProxyDetail").modal('show');
}
</script>
\ No newline at end of file
<script src="<%=basePath %>script/redis/redis_info_list.js"></script>
... ...
var myMasterRedis=null;
var mySlaveRedis=null;
$(function () {
loadRedisMonitorData();
timerRedisMonitor();
});
function timerRedisMonitor() {
setTimeout("loadRedisMonitorData()", 30000);
}
function loadRedisMonitorData() {
$.ajax({
url: contextPath + "redisInfo/getRedisInfo",
type: 'get',
async: false,
dataType: "json",
success: function(data) {
console.log(data);
var time = "";
var awsHtml = '';
if (data.data != null) {
myMasterRedis = new Array();
mySlaveRedis = new Array();
$("#redisAppendDiv").html("");
$.each(data.data, function(name, value) {
var contentHtml = "";
var topNode = "";
var awsAcount = 0;
var qcloudAccount = 0;
var awsIp = '';
var qcloudIp = '';
$.each(value, function(n, obj) {
if (obj.level == 0) {
topNode = obj.nodeFrom;
return true;
}
if (obj.level == 1) {
if (obj.nodeTo.indexOf("172") == 0) {
awsAcount = awsAcount + 1;
if (obj.isFailed == 1) {
awsIp += "<div class='col-md-4' onclick='displatyTetail(\"" + obj.nodeTo + "\")'>";
awsIp += "<div class='panel panel-success-alt noborder'><div class='panel-heading noborder'>";
awsIp += "<div class='panel-icon'style='background-image:url(\""+ contextPath + "img/redis.png\");height:60px;'></div>";
awsIp += "<div class='media-body'><h5 class='md-title nomargin'><strong>" + topNode + " AWS</strong></h5><h1 class='mt5'>" + obj.nodeTo + "</h1></div><hr>";
var cccc=obj.paramMonitor.split(";");
awsIp += "<div class='clearfix mt20'>";
awsIp += "<div class='pull-left'><h5 class='md-title nomargin'>总连接数</h5><h4 class='nomargin'>" + cccc[1].split(":")[1] + "</h4></div>";
awsIp += "<div class='pull-left' style='margin-left: 135px'><h5 class='md-title nomargin'>当前连接数</h5><h4 class='nomargin' style='margin-left: 20px'>" + cccc[2].split(":")[1] + "</h4></div>";
awsIp += "</div></div></div></div>";
} else if (obj.isFailed == 0) {
awsIp += "<div class='col-md-4'>";
awsIp += "<div class='panel panel panel-fail-alt noborder noborder'><div class='panel-heading noborder'>";
awsIp += "<div class='panel-icon'style='background-image:url(\""+ contextPath + "img/redis.png\"); width:60px;height:60px;'></div>";
awsIp += "<div class='media-body'><h5 class='md-title nomargin'><strong>" + topNode + " QCloud</strong></h5><h1 class='mt5'>" + obj.nodeTo + "</h1></div><hr>";
var cccc=obj.paramMonitor.split(":");
awsIp += "<div class='clearfix mt20'>";
awsIp += "<div class='pull-left'><h5 class='md-title nomargin'>失败</h5><h4 class='nomargin'>" + cccc[1] + ":" + cccc[2] + "</h4></div>";
awsIp += "</div></div></div></div>";
}
} else if (obj.nodeTo.indexOf("10") == 0) {
qcloudAccount = qcloudAccount + 1;
if (obj.isFailed == 1) {
qcloudIp += "<div class='col-md-4' onclick='displatyTetail(\"" + obj.nodeTo + "\")'>";
qcloudIp += "<div class='panel panel-success-alt noborder'><div class='panel-heading noborder'>";
qcloudIp += "<div class='panel-icon'style='background-image:url(\""+ contextPath + "img/redis.png\"); width:60px;height:60px;'></div>";
qcloudIp += "<div class='media-body'><h5 class='md-title nomargin'><strong>" + topNode + " QCloud</strong></h5><h1 class='mt5'>" + obj.nodeTo + "</h1></div><hr>";
var cccc=obj.paramMonitor.split(";");
qcloudIp += "<div class='clearfix mt20'>";
qcloudIp += "<div class='pull-left'><h5 class='md-title nomargin'>总连接数</h5><h4 class='nomargin'>" + cccc[1].split(":")[1] + "</h4></div>";
qcloudIp += "<div class='pull-left' style='margin-left: 135px'><h5 class='md-title nomargin'>当前连接数</h5><h4 class='nomargin' style='margin-left: 20px'>" + cccc[2].split(":")[1] + "</h4></div>";
qcloudIp += "</div></div></div></div>";
} else if (obj.isFailed == 0) {
qcloudIp += "<div class='col-md-4'>";
qcloudIp += "<div class='panel panel-fail-alt noborder'><div class='panel-heading noborder'>";
qcloudIp += "<div class='panel-icon'style='background-image:url(\""+ contextPath + "img/redis.png\"); width:60px;height:60px;'></div>";
qcloudIp += "<div class='media-body'><h5 class='md-title nomargin'><strong>" + topNode + " QCloud</strong></h5><h1 class='mt5'>" + obj.nodeTo + "</h1></div><hr>";
var cccc=obj.paramMonitor.split(":");
qcloudIp += "<div class='clearfix mt20'>";
qcloudIp += "<div class='pull-left'><h5 class='md-title nomargin'>失败</h5><h4 class='nomargin'>" + cccc[1] + ":" + cccc[2] + "</h4></div>";
qcloudIp += "</div></div></div></div>";
}
}
return true;
}
if (obj.level == 2) {
if (obj.isSlave == 0) {
myMasterRedis.push(obj);
} else if (obj.isSlave == 1) {
mySlaveRedis.push(obj);
}
}
});
contentHtml += "<div class='row-fluid' style='border:solid 1px #CDC9C9; padding: 10px; margin-bottom: 20px'><div class='span12'><h1>" + topNode + "</h1><hr style='border:1px solid grey;opacity:0.1;>";
if (awsAcount != 0) {
contentHtml += "<div class='section section-visible'>";
contentHtml += "<h3>AWS</h3>";
contentHtml += "<div class='hider updatable' ><div class='row row-stat'>";
contentHtml += awsIp + "</div></div></div>";
}
if (qcloudAccount != 0) {
contentHtml += "<div class='section section-visible'>";
contentHtml += "<h3>QCloud</h3>";
contentHtml += "<div class='hider updatable' ><div class='row row-stat'>";
contentHtml += qcloudIp + "</div></div></div>";
}
contentHtml += "</div></div>"
$("#redisAppendDiv").append(contentHtml);
});
}
}
});
}
function displatyTetail(ip){
var detailListRedis=new Array();
$.each(myMasterRedis, function (i, myMasterObj) {
myMasterObj.slaveParam="";
if(ip==myMasterObj.nodeFrom){
$.each(mySlaveRedis, function (j, mySlaveObj) {
if(myMasterObj.nodeTo==mySlaveObj.nodeFrom){
myMasterObj.slaveParam=mySlaveObj.paramMonitor+","+mySlaveObj.nodeTo;
}
});
detailListRedis.push(myMasterObj);
}
});
$("#redislistDetail").empty();
$("#redislistDetail").table({
columnAutoWidth : false,
data : detailListRedis,
striped : true,
columns : [{
title : "IP",
field : "nodeTo",
formatter : function(value, rowData, rowIndex) {
var ipport=value.split(":");
return ipport[0];
},
width : "10%"
},{
title : "port",
field : "nodeTo",
formatter : function(value, rowData, rowIndex) {
var ipport=value.split(":");
return ipport[1];
},
width : "8%"
},{
title : "角色",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[1]==null){
return "";
}else{
return paramMonitor[1];
}
},
width : "7%"
},{
title : "最大内存",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[2]==null){
return "";
}else{
return paramMonitor[2];
}
},
width : "8%"
},{
title : "使用内存",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[4]==null){
return "";
}else{
return paramMonitor[4];
}
},
width : "8%"
},{
title : "使用率",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[3]==null){
return "";
}else{
return paramMonitor[3];
}
},
width : "8%"
},{
title : "状态",
field : "paramMonitor",
formatter : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[0]==null){
return "";
}else{
if(paramMonitor[0]=="0"){
return "ERROR";
}else if(paramMonitor[0]=="1"){
return "OK"
}
}
},
styler : function(value, rowData, rowIndex) {
var paramMonitor=value.split(",");
if(paramMonitor[0]==null){
return "";
}else{
if(paramMonitor[0]=="0"){
return {
"background-color" : "red",
"color":"white"
};
}else if(paramMonitor[0]=="1"){
return {
"background-color" : "green",
"color":"white"
};
}
}
},
width : "6%"
},{
title : "主从",
field : "slaveParam",
formatter : function(value, rowData, rowIndex) {
if(value!=""){
var slaveParam=value.split(",");
return "主从"+slaveParam[0]+",主IP:"+slaveParam[1];
}
return "无";
},
width : "25%"
}]
});
$("#myModalLabel").text("twemproxy详细信息");
$("#myRedisProxyDetail").modal('show');
}
\ No newline at end of file
... ...