ops / monitor-ui · Commits

Go to a project

Authored by fanzelei
Commit a2ab9a68f1ea629b3d6bf2b7e1f4609fd8aef171 2 parents 61b445be e782628f

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

Inline Side-by-side
Showing 2 changed files with 109 additions and 158 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, //是否动画显示
... ...
... ... @@ -7,73 +7,6 @@
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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 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"/>
<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"/>
<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"/>
<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 type="text/javascript" src="<%=basePath %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/charts/FusionCharts.js"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
<h5 style="color: #E0EEE0;font-style:oblique;font-weight:900;font-size:200%;margin-left: 45px;margin-top: 40px;">
YOHO</h5>
</div>
<!-- 左侧菜单项 -->
<div id="sidebar">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
... ... @@ -98,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>
... ... @@ -115,95 +47,105 @@
</div>
<!-- /.modal -->
</div>
<div id="testDiv"></div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_redisInfo").addClass("active");
</script>
<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="'+ contextPath + '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();
... ... @@ -218,7 +160,7 @@
detailListRedis.push(myMasterObj);
}
});
console.log(detailListRedis);
$("#redislistDetail").empty();
$("#redislistDetail").table({
columnAutoWidth : false,
data : detailListRedis,
... ... @@ -250,7 +192,7 @@
return paramMonitor[1];
}
},
width : "8%"
width : "7%"
},{
title : "最大内存",
field : "paramMonitor",
... ... @@ -286,7 +228,7 @@
return paramMonitor[3];
}
},
width : "6%"
width : "8%"
},{
title : "状态",
field : "paramMonitor",
... ... @@ -328,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
... ...