|
|
|
<%--
|
|
|
|
CreateUser: craig.qin
|
|
|
|
CreateDate: 2018/1/31
|
|
|
|
--%>
|
|
|
|
<%@page language="java" contentType="text/html;charset=utf-8" %>
|
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
|
<%
|
|
|
|
String path = request.getContextPath();
|
|
|
|
String basePath = request.getScheme() + "://" + 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/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"/>
|
|
|
|
<link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.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>首页</a> <a href="#" class="current">Mysql监控管理</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="widget-box">
|
|
|
|
<div class="widget-title" style="height: 35px;">
|
|
|
|
<div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="widget-content">
|
|
|
|
<div id="mysqlTable" style="overflow-y: auto; overflow-x: hidden; max-height: 800px"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script src="<%=basePath%>script/common/genarate_left_panel.js"></script>
|
|
|
|
<script>
|
|
|
|
$("#li_monitor").addClass("active open");
|
|
|
|
$("#li_mysql").addClass("active");
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(function () {
|
|
|
|
var columns = getColumns();
|
|
|
|
//加载表格
|
|
|
|
$("#mysqlTable").table({
|
|
|
|
columnAutoWidth: false,
|
|
|
|
url: contextPath + "/mysqlMonitor/queryMysqlMobject",
|
|
|
|
striped : true,
|
|
|
|
dataType: "json",
|
|
|
|
pagination: false,
|
|
|
|
loadFilter : function(data) {
|
|
|
|
return defaultLoadFilter(data);
|
|
|
|
},
|
|
|
|
onLoadSuccess : function(data) {
|
|
|
|
// var data = $('#table').bootstrapTable('getData', true);
|
|
|
|
//合并单元格
|
|
|
|
//mergeCells(data, "name", 0, $('#mysqlTable'));
|
|
|
|
alert(1);
|
|
|
|
MergeCell('mysqlTable',0,0);
|
|
|
|
|
|
|
|
},
|
|
|
|
/* queryParams:{
|
|
|
|
"eventName":"测试一下而已"
|
|
|
|
},*/
|
|
|
|
columns : columns
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
///合并表格相同行的内容
|
|
|
|
///tableId：表格ID（最好是tbody，避免把表尾给合并了)
|
|
|
|
///startRow：起始行，没有标题就从0开始
|
|
|
|
///endRow：终止行，此参数是递归时检查的范围，一开始时会自动赋值为最后一行
|
|
|
|
///col：当前处理的列
|
|
|
|
function MergeCell(tableId, startRow, col,endRow) {
|
|
|
|
var tb_jq = $("#mysqlTable div table tbody");
|
|
|
|
var tb=tb_jq[0]; //DOM对象
|
|
|
|
console.log(tb);
|
|
|
|
|
|
|
|
if (col >= tb.rows[0].cells.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//当检查第0列时检查所有行
|
|
|
|
if (col == 0 || endRow == 0) {
|
|
|
|
endRow = tb.rows.length - 1;
|
|
|
|
}
|
|
|
|
for (var i = startRow; i < endRow; i++) {
|
|
|
|
//程序是自左向右合并
|
|
|
|
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
|
|
|
|
//如果相同则删除下一行的第0列单元格
|
|
|
|
tb.rows[i + 1].cells[col].style.display='none';
|
|
|
|
//更新rowSpan属性
|
|
|
|
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
|
|
|
|
//当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
|
|
|
|
if (i == endRow - 1 && startRow != endRow) {
|
|
|
|
MergeCell(tableId, startRow, endRow, col + 1);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
//起始行，终止行不变，检查下一列
|
|
|
|
MergeCell(tableId, startRow, i, col + 1);
|
|
|
|
//增加起始行
|
|
|
|
startRow = i + 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function getColumns(){
|
|
|
|
var columns = [
|
|
|
|
{
|
|
|
|
title : "库名",
|
|
|
|
field : "name",
|
|
|
|
width : "10%",
|
|
|
|
styler : function(value, rowData, rowIndex){
|
|
|
|
return {
|
|
|
|
"vertical-align" : "middle"
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title : "aws主机",
|
|
|
|
field : "awsMObjectInfo",
|
|
|
|
width : "40%",
|
|
|
|
align:"left",
|
|
|
|
alignColumn:"center",
|
|
|
|
formatter : function(value, rowData, rowIndex) {
|
|
|
|
return fmtHost(rowData.awsMObjectInfo);
|
|
|
|
}
|
|
|
|
},{
|
|
|
|
title : "qcloud主机",
|
|
|
|
field : "qcloudMObjectInfo",
|
|
|
|
width : "40%",
|
|
|
|
align:"left",
|
|
|
|
alignColumn:"center",
|
|
|
|
formatter : function(value, rowData, rowIndex) {
|
|
|
|
return fmtHost(rowData.qcloudMObjectInfo);
|
|
|
|
}
|
|
|
|
}/*,
|
|
|
|
{
|
|
|
|
title : "操作",
|
|
|
|
width : "100px",
|
|
|
|
formatter : function(value, rowData, rowIndex) {
|
|
|
|
return "";
|
|
|
|
},
|
|
|
|
styler : function(value, rowData, rowIndex){
|
|
|
|
return {
|
|
|
|
"vertical-align" : "middle"
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}*/ ];
|
|
|
|
return columns;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function fmtHost(instances) {
|
|
|
|
if(instances == null || instances.length == 0){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var masterIps="";
|
|
|
|
var slaveIps="";
|
|
|
|
for(var index = 0;index < instances.length;index++){
|
|
|
|
//属性 主机标签 --tags
|
|
|
|
var tags = instances[index].moTags;
|
|
|
|
var masterFlag=false;
|
|
|
|
var masterBadage='<span class="badge" style="background-color: #fff;font-weight:normal;"> </span>';
|
|
|
|
var tagsBadage="";
|
|
|
|
var ipBackgroudColor="#5bc0de";
|
|
|
|
if(tags != null && tags!= ""){//展示标签信息
|
|
|
|
tagsBadage= "<span class=\"badge\" style=\"background-color: #5bc0de;font-weight:normal;font-size: 13px\";>标签: " + tags +"</span>";
|
|
|
|
if(tags.toUpperCase().indexOf("MASTER")>=0){
|
|
|
|
masterFlag=true;
|
|
|
|
masterBadage='<span class="badge">M</span>';
|
|
|
|
ipBackgroudColor="#777";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var healthCss=' style="background-color: '+ipBackgroudColor+';font-weight:normal;" ';
|
|
|
|
var runningStatusMessage = ' <a href="#" title="master"><span class="badge" style="background-color: '+ipBackgroudColor+';font-weight:normal;"><i class="fa fa-check-circle" aria-hidden="true"></i></span></a>';
|
|
|
|
/*if("Healthy"!=instances[index].runningStatus){
|
|
|
|
healthCss=' style="background-color: #DD514D;font-weight:normal;" ';
|
|
|
|
runningStatusMessage=' <a href="#" title="异常"><span class="badge" style="background-color: #DD514D;font-weight:normal;"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></span></a>';
|
|
|
|
}*/
|
|
|
|
|
|
|
|
|
|
|
|
var hostip='<span class="label" style="font-weight:normal;">';
|
|
|
|
hostip+= ('<span class="badge" '+healthCss+'>'+instances[index].moHostIp);
|
|
|
|
|
|
|
|
//在个别机器的chrome版本上instances[index].ip取不到值，很奇怪，因此添加一个if判断，跳过
|
|
|
|
if(instances[index]!=null&&instances[index].moHostIp!=null&& instances[index].moHostIp != undefined&&instances[index].moHostIp!=""){
|
|
|
|
for(var i=0;i<=(15-instances[index].moHostIp.length);i++){
|
|
|
|
hostip+=" "
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
hostip += runningStatusMessage;
|
|
|
|
|
|
|
|
hostip += '</span>';
|
|
|
|
hostip += '</span>';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
hostip = hostip +tagsBadage;
|
|
|
|
|
|
|
|
var onehost='<h4>'+masterBadage+hostip+'</h4>';
|
|
|
|
if(masterFlag){
|
|
|
|
masterIps += onehost;
|
|
|
|
}else{
|
|
|
|
slaveIps += onehost;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return masterIps+slaveIps;
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|
