ops / monitor-ui · Commits

Go to a project

Authored by simba
Commit fb6004f0657e9ec2bb8b6a14762ede52f6936c9c 1 parent 95518c83

update

Inline Side-by-side
Showing 2 changed files with 108 additions and 84 deletions
... ... @@ -32,7 +32,10 @@
}).append($("<span>").attr("aria-hidden", true).html("&times;")));
}
header.append($("<h4>").addClass("modal-title").html(opt.title));
var body = $("<div>").addClass("modal-body");
var body = $("<div>").addClass("modal-body").css({
width : "100%",
overflow : "auto"
});
if (opt.content !== undefined) {
if ($.type(opt.content) === "string") {
body.html(opt.content);
... ... @@ -69,7 +72,9 @@
}
});
}
self.append($("<div>").addClass("modal-dialog").css(opt.style).addClass(opt.size ? opt.size : "").attr("role", "document").append($("<div>").addClass("modal-content").append(header).append(body).append(footer)));
var dialogDiv = $("<div>").addClass("modal-dialog").css(opt.style).addClass(opt.size ? opt.size : "").attr("role", "document").appendTo(self);
var contentDiv = $("<div>").addClass("modal-content").append(header).append(body).append(footer).appendTo(dialogDiv);
self.on("show.bs.modal", function(e) {
if (opt.onBeforeShow) {
opt.onBeforeShow.call(self);
... ... @@ -159,6 +164,8 @@
onLoadSuccess : function(data) {}
};
$.fn.dialog.defaults = $.extend({}, $.fn.dialog.events, {
height : null,
width : null,
size : "", //尺寸，有modal-sm或modal-lg
style : {}, //对话框样式
animate : true, //是否动画显示
... ...
... ... @@ -31,10 +31,9 @@
</div>
<div class="modal fade" style="margin-top: 60px;" id="myRedisProxyDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" data-backdrop="true" style="margin-top: 60px;" id="myRedisProxyDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width:800px;">
<div class="modal-content" style="width:900px;height: 500px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
... ... @@ -50,87 +49,103 @@
</div>
<script type="text/javascript">
var myMasterRedis=new Array();
var mySlaveRedis=new Array();
$.ajax({
url: contextPath + "redisInfo/getRedisInfo",
type: 'get',
async: false,
dataType: "json",
success: function (data) {
var time="";
var awsHtml = '';
if(data.data != null){
$.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 title="'+obj.paramMonitor+'" onclick="displatyTetail(\''+obj.nodeTo+'\')" class="btn_java_api btn btn-lg btn-default btn-primary" style="margin-top:5px;margin-left:5px;width: 160px;font-size: 12px;">'+obj.nodeTo+'</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: 160px;font-size: 12px;">'+obj.nodeTo+'</button>';
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) {
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 title="'+obj.paramMonitor+'" onclick="displatyTetail(\''+obj.nodeTo+'\')" class="btn_java_api btn btn-lg btn-default btn-primary" style="margin-top:5px;margin-left:5px;width: 160px;font-size: 12px;">'+obj.nodeTo+'</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: 160px;font-size: 12px;">'+obj.nodeTo+'</button>';
}
}else if(obj.nodeTo.indexOf("10")==0) {
qcloudAcount = qcloudAcount + 1;
if(obj.isFailed==1){
qcoloudIp+='<button title="'+obj.paramMonitor+'" onclick="displatyTetail(\''+obj.nodeTo+'\')" class="btn_java_api btn btn-lg btn-default btn-primary" style="margin-top:5px;margin-left:5px;width: 160px;font-size: 12px;">'+obj.nodeTo+'</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: 160px;font-size: 12px;">'+obj.nodeTo+'</button>';
}
}
}else if(obj.nodeTo.indexOf("10")==0) {
qcloudAcount = qcloudAcount + 1;
if(obj.isFailed==1){
qcoloudIp+='<button title="'+obj.paramMonitor+'" onclick="displatyTetail(\''+obj.nodeTo+'\')" class="btn_java_api btn btn-lg btn-default btn-primary" style="margin-top:5px;margin-left:5px;width: 160px;font-size: 12px;">'+obj.nodeTo+'</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: 160px;font-size: 12px;">'+obj.nodeTo+'</button>';
return true;
}
if(obj.level==2){
if(obj.isSlave==0){
myMasterRedis.push(obj);
}else if(obj.isSlave==1){
mySlaveRedis.push(obj);
}
}
return true;
});
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="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:350px; height: 130px;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;
}
if(obj.level==2){
if(obj.isSlave==0){
myMasterRedis.push(obj);
}else if(obj.isSlave==1){
mySlaveRedis.push(obj);
}
contentHtml+= '</div>'+
'<div style="width:350px; height: 130px;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);
});
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="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:350px; height: 130px;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:350px; height: 130px;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();
... ... @@ -145,7 +160,7 @@
detailListRedis.push(myMasterObj);
}
});
console.log(detailListRedis);
$("#redislistDetail").empty();
$("#redislistDetail").table({
columnAutoWidth : false,
data : detailListRedis,
... ... @@ -177,7 +192,7 @@
return paramMonitor[1];
}
},
width : "8%"
width : "7%"
},{
title : "最大内存",
field : "paramMonitor",
... ... @@ -213,7 +228,7 @@
return paramMonitor[3];
}
},
width : "6%"
width : "8%"
},{
title : "状态",
field : "paramMonitor",
... ... @@ -255,16 +270,18 @@
formatter : function(value, rowData, rowIndex) {
if(value!=""){
var slaveParam=value.split(",");
return "主从"+slaveParam[0]+"<br/>主IP:"+slaveParam[1];
return "主从"+slaveParam[0]+",主IP:"+slaveParam[1];
}
return "无";
},
width : "12%"
width : "25%"
}]
});
$("#myModalLabel").text("twemproxy详细信息");
$("#myRedisProxyDetail").modal('show');
}
</script>
\ No newline at end of file
... ...