|
|
|
1
|
+<%--
|
|
|
|
2
|
+ CreateUser: craig.qin
|
|
|
|
3
|
+ CreateDate: 2018/1/31
|
|
|
|
4
|
+--%>
|
|
|
|
5
|
+<%@page language="java" contentType="text/html;charset=utf-8" %>
|
|
|
|
6
|
+<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
|
7
|
+<%
|
|
|
|
8
|
+ String path = request.getContextPath();
|
|
|
|
9
|
+ String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
|
|
|
10
|
+ + path + "/";
|
|
|
|
11
|
+%>
|
|
|
|
12
|
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
|
|
13
|
+<html>
|
|
|
|
14
|
+<head>
|
|
|
|
15
|
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
16
|
+ <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css"/>
|
|
|
|
17
|
+ <link rel="stylesheet" href="<%=basePath%>css/unicorn.main.css"/>
|
|
|
|
18
|
+ <link rel="stylesheet" href="<%=basePath%>css/unicorn.grey.css"/>
|
|
|
|
19
|
+ <link rel="stylesheet" href="<%=basePath%>css/jquery-ui.css"/>
|
|
|
|
20
|
+ <link rel="stylesheet"
|
|
|
|
21
|
+ href="<%=basePath%>css/bootstrap-responsive.min.css"/>
|
|
|
|
22
|
+ <link rel="stylesheet" href="<%=basePath%>css/uniform.css"/>
|
|
|
|
23
|
+ <link rel="stylesheet" href="<%=basePath%>css/select2.css"/>
|
|
|
|
24
|
+ <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css"/>
|
|
|
|
25
|
+ <script src="<%=basePath%>js/excanvas.min.js" charset="UTF-8"
|
|
|
|
26
|
+ type="text/javascript"></script>
|
|
|
|
27
|
+ <script src="<%=basePath%>js/jquery-1.12.0.min.js" charset="UTF-8"
|
|
|
|
28
|
+ type="text/javascript"></script>
|
|
|
|
29
|
+ <script src="<%=basePath%>js/jquery-ui.custom.js" charset="UTF-8"
|
|
|
|
30
|
+ type="text/javascript"></script>
|
|
|
|
31
|
+ <script src="<%=basePath%>/js/bootstrap.min.js"></script>
|
|
|
|
32
|
+ <script src="<%=basePath%>/js/unicorn.js"></script>
|
|
|
|
33
|
+ <script
|
|
|
|
34
|
+ src="<%=basePath%>js/bootstrap-plugin/datetimepicker/moment-with-locales.js"
|
|
|
|
35
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
36
|
+ <script
|
|
|
|
37
|
+ src="<%=basePath%>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js"
|
|
|
|
38
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
39
|
+ <script src="<%=basePath%>js/global.js" charset="UTF-8"
|
|
|
|
40
|
+ type="text/javascript"></script>
|
|
|
|
41
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.pagination.js"
|
|
|
|
42
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
43
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.table.js"
|
|
|
|
44
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
45
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.dialog.js"
|
|
|
|
46
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
47
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.form.js"
|
|
|
|
48
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
49
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.panel.js"
|
|
|
|
50
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
51
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.alerts.js"
|
|
|
|
52
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
53
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.accordion.js"
|
|
|
|
54
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
55
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.breadcrumb.js"
|
|
|
|
56
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
57
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.validate.js"
|
|
|
|
58
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
59
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.form.js"
|
|
|
|
60
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
61
|
+ <script src="<%=basePath%>js/layer/layer.js" charset="UTF-8"
|
|
|
|
62
|
+ type="text/javascript"></script>
|
|
|
|
63
|
+ <script src="<%=basePath%>js/bootstrap-plugin/bootstrap.select.js"
|
|
|
|
64
|
+ charset="UTF-8" type="text/javascript"></script>
|
|
|
|
65
|
+ <script src="<%=basePath%>js/jstree/jstree.min.js"></script>
|
|
|
|
66
|
+ <script src="<%=basePath%>js/jquery.toaster.js"></script>
|
|
|
|
67
|
+ <script>
|
|
|
|
68
|
+ var contextPath = '<%=basePath%>';
|
|
|
|
69
|
+ </script>
|
|
|
|
70
|
+ <title>YOHO!运维</title>
|
|
|
|
71
|
+</head>
|
|
|
|
72
|
+<body>
|
|
|
|
73
|
+<!-- 头部 -->
|
|
|
|
74
|
+<div id="head"></div>
|
|
|
|
75
|
+<!-- 右侧具体内容 -->
|
|
|
|
76
|
+<div id="content">
|
|
|
|
77
|
+ <div id="breadcrumb">
|
|
|
|
78
|
+ <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>首页</a> <a href="#" class="current">Mysql监控管理</a>
|
|
|
|
79
|
+ </div>
|
|
|
|
80
|
+
|
|
|
|
81
|
+ <div class="container-fluid">
|
|
|
|
82
|
+ <div class="widget-box">
|
|
|
|
83
|
+ <div class="widget-title" style="height: 35px;">
|
|
|
|
84
|
+ <div>
|
|
|
|
85
|
+
|
|
|
|
86
|
+ </div>
|
|
|
|
87
|
+ </div>
|
|
|
|
88
|
+ <div class="widget-content">
|
|
|
|
89
|
+ <div id="mysqlTable" style="overflow-y: auto; overflow-x: hidden; max-height: 800px"></div>
|
|
|
|
90
|
+ </div>
|
|
|
|
91
|
+ </div>
|
|
|
|
92
|
+ </div>
|
|
|
|
93
|
+
|
|
|
|
94
|
+
|
|
|
|
95
|
+</div>
|
|
|
|
96
|
+
|
|
|
|
97
|
+<script src="<%=basePath%>script/common/genarate_left_panel.js"></script>
|
|
|
|
98
|
+<script>
|
|
|
|
99
|
+ $("#li_monitor").addClass("active open");
|
|
|
|
100
|
+ $("#li_mysql").addClass("active");
|
|
|
|
101
|
+</script>
|
|
|
|
102
|
+
|
|
|
|
103
|
+<script type="text/javascript">
|
|
|
|
104
|
+ $(function () {
|
|
|
|
105
|
+ var columns = getColumns();
|
|
|
|
106
|
+ //加载表格
|
|
|
|
107
|
+ $("#mysqlTable").table({
|
|
|
|
108
|
+ columnAutoWidth: false,
|
|
|
|
109
|
+ url: contextPath + "/mysqlMonitor/queryMysqlMobject",
|
|
|
|
110
|
+ striped : true,
|
|
|
|
111
|
+ dataType: "json",
|
|
|
|
112
|
+ pagination: false,
|
|
|
|
113
|
+ loadFilter : function(data) {
|
|
|
|
114
|
+ return defaultLoadFilter(data);
|
|
|
|
115
|
+ },
|
|
|
|
116
|
+ onLoadSuccess : function(data) {
|
|
|
|
117
|
+ // var data = $('#table').bootstrapTable('getData', true);
|
|
|
|
118
|
+ //合并单元格
|
|
|
|
119
|
+ //mergeCells(data, "name", 0, $('#mysqlTable'));
|
|
|
|
120
|
+ alert(1);
|
|
|
|
121
|
+ MergeCell('mysqlTable',0,0);
|
|
|
|
122
|
+
|
|
|
|
123
|
+ },
|
|
|
|
124
|
+ /* queryParams:{
|
|
|
|
125
|
+ "eventName":"测试一下而已"
|
|
|
|
126
|
+ },*/
|
|
|
|
127
|
+ columns : columns
|
|
|
|
128
|
+ });
|
|
|
|
129
|
+
|
|
|
|
130
|
+ });
|
|
|
|
131
|
+
|
|
|
|
132
|
+ ///合并表格相同行的内容
|
|
|
|
133
|
+ ///tableId：表格ID（最好是tbody，避免把表尾给合并了)
|
|
|
|
134
|
+ ///startRow：起始行，没有标题就从0开始
|
|
|
|
135
|
+ ///endRow：终止行，此参数是递归时检查的范围，一开始时会自动赋值为最后一行
|
|
|
|
136
|
+ ///col：当前处理的列
|
|
|
|
137
|
+ function MergeCell(tableId, startRow, col,endRow) {
|
|
|
|
138
|
+ var tb_jq = $("#mysqlTable div table tbody");
|
|
|
|
139
|
+ var tb=tb_jq[0]; //DOM对象
|
|
|
|
140
|
+ console.log(tb);
|
|
|
|
141
|
+
|
|
|
|
142
|
+ if (col >= tb.rows[0].cells.length) {
|
|
|
|
143
|
+ return;
|
|
|
|
144
|
+ }
|
|
|
|
145
|
+
|
|
|
|
146
|
+
|
|
|
|
147
|
+ //当检查第0列时检查所有行
|
|
|
|
148
|
+ if (col == 0 || endRow == 0) {
|
|
|
|
149
|
+ endRow = tb.rows.length - 1;
|
|
|
|
150
|
+ }
|
|
|
|
151
|
+ for (var i = startRow; i < endRow; i++) {
|
|
|
|
152
|
+ //程序是自左向右合并
|
|
|
|
153
|
+ if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
|
|
|
|
154
|
+ //如果相同则删除下一行的第0列单元格
|
|
|
|
155
|
+ tb.rows[i + 1].cells[col].style.display='none';
|
|
|
|
156
|
+ //更新rowSpan属性
|
|
|
|
157
|
+ tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
|
|
|
|
158
|
+ //当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
|
|
|
|
159
|
+ if (i == endRow - 1 && startRow != endRow) {
|
|
|
|
160
|
+ MergeCell(tableId, startRow, endRow, col + 1);
|
|
|
|
161
|
+ }
|
|
|
|
162
|
+ } else {
|
|
|
|
163
|
+ //起始行，终止行不变，检查下一列
|
|
|
|
164
|
+ MergeCell(tableId, startRow, i, col + 1);
|
|
|
|
165
|
+ //增加起始行
|
|
|
|
166
|
+ startRow = i + 1;
|
|
|
|
167
|
+ }
|
|
|
|
168
|
+ }
|
|
|
|
169
|
+ }
|
|
|
|
170
|
+
|
|
|
|
171
|
+ function getColumns(){
|
|
|
|
172
|
+ var columns = [
|
|
|
|
173
|
+ {
|
|
|
|
174
|
+ title : "库名",
|
|
|
|
175
|
+ field : "name",
|
|
|
|
176
|
+ width : "10%",
|
|
|
|
177
|
+ styler : function(value, rowData, rowIndex){
|
|
|
|
178
|
+ return {
|
|
|
|
179
|
+ "vertical-align" : "middle"
|
|
|
|
180
|
+ };
|
|
|
|
181
|
+ }
|
|
|
|
182
|
+ },
|
|
|
|
183
|
+ {
|
|
|
|
184
|
+ title : "aws主机",
|
|
|
|
185
|
+ field : "awsMObjectInfo",
|
|
|
|
186
|
+ width : "40%",
|
|
|
|
187
|
+ align:"left",
|
|
|
|
188
|
+ alignColumn:"center",
|
|
|
|
189
|
+ formatter : function(value, rowData, rowIndex) {
|
|
|
|
190
|
+ return fmtHost(rowData.awsMObjectInfo);
|
|
|
|
191
|
+ }
|
|
|
|
192
|
+ },{
|
|
|
|
193
|
+ title : "qcloud主机",
|
|
|
|
194
|
+ field : "qcloudMObjectInfo",
|
|
|
|
195
|
+ width : "40%",
|
|
|
|
196
|
+ align:"left",
|
|
|
|
197
|
+ alignColumn:"center",
|
|
|
|
198
|
+ formatter : function(value, rowData, rowIndex) {
|
|
|
|
199
|
+ return fmtHost(rowData.qcloudMObjectInfo);
|
|
|
|
200
|
+ }
|
|
|
|
201
|
+ }/*,
|
|
|
|
202
|
+ {
|
|
|
|
203
|
+ title : "操作",
|
|
|
|
204
|
+ width : "100px",
|
|
|
|
205
|
+ formatter : function(value, rowData, rowIndex) {
|
|
|
|
206
|
+ return "";
|
|
|
|
207
|
+ },
|
|
|
|
208
|
+ styler : function(value, rowData, rowIndex){
|
|
|
|
209
|
+ return {
|
|
|
|
210
|
+ "vertical-align" : "middle"
|
|
|
|
211
|
+ };
|
|
|
|
212
|
+ }
|
|
|
|
213
|
+ }*/ ];
|
|
|
|
214
|
+ return columns;
|
|
|
|
215
|
+ }
|
|
|
|
216
|
+
|
|
|
|
217
|
+
|
|
|
|
218
|
+ function fmtHost(instances) {
|
|
|
|
219
|
+ if(instances == null || instances.length == 0){
|
|
|
|
220
|
+ return;
|
|
|
|
221
|
+ }
|
|
|
|
222
|
+
|
|
|
|
223
|
+ var masterIps="";
|
|
|
|
224
|
+ var slaveIps="";
|
|
|
|
225
|
+ for(var index = 0;index < instances.length;index++){
|
|
|
|
226
|
+ //属性 主机标签 --tags
|
|
|
|
227
|
+ var tags = instances[index].moTags;
|
|
|
|
228
|
+ var masterFlag=false;
|
|
|
|
229
|
+ var masterBadage='<span class="badge" style="background-color: #fff;font-weight:normal;"> </span>';
|
|
|
|
230
|
+ var tagsBadage="";
|
|
|
|
231
|
+ var ipBackgroudColor="#5bc0de";
|
|
|
|
232
|
+ if(tags != null && tags!= ""){//展示标签信息
|
|
|
|
233
|
+ tagsBadage= "<span class=\"badge\" style=\"background-color: #5bc0de;font-weight:normal;font-size: 13px\";>标签: " + tags +"</span>";
|
|
|
|
234
|
+ if(tags.toUpperCase().indexOf("MASTER")>=0){
|
|
|
|
235
|
+ masterFlag=true;
|
|
|
|
236
|
+ masterBadage='<span class="badge">M</span>';
|
|
|
|
237
|
+ ipBackgroudColor="#777";
|
|
|
|
238
|
+ }
|
|
|
|
239
|
+ }
|
|
|
|
240
|
+
|
|
|
|
241
|
+ var healthCss=' style="background-color: '+ipBackgroudColor+';font-weight:normal;" ';
|
|
|
|
242
|
+ 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>';
|
|
|
|
243
|
+ /*if("Healthy"!=instances[index].runningStatus){
|
|
|
|
244
|
+ healthCss=' style="background-color: #DD514D;font-weight:normal;" ';
|
|
|
|
245
|
+ 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>';
|
|
|
|
246
|
+ }*/
|
|
|
|
247
|
+
|
|
|
|
248
|
+
|
|
|
|
249
|
+ var hostip='<span class="label" style="font-weight:normal;">';
|
|
|
|
250
|
+ hostip+= ('<span class="badge" '+healthCss+'>'+instances[index].moHostIp);
|
|
|
|
251
|
+
|
|
|
|
252
|
+ //在个别机器的chrome版本上instances[index].ip取不到值，很奇怪，因此添加一个if判断，跳过
|
|
|
|
253
|
+ if(instances[index]!=null&&instances[index].moHostIp!=null&& instances[index].moHostIp != undefined&&instances[index].moHostIp!=""){
|
|
|
|
254
|
+ for(var i=0;i<=(15-instances[index].moHostIp.length);i++){
|
|
|
|
255
|
+ hostip+=" "
|
|
|
|
256
|
+ }
|
|
|
|
257
|
+ }
|
|
|
|
258
|
+
|
|
|
|
259
|
+ hostip += runningStatusMessage;
|
|
|
|
260
|
+
|
|
|
|
261
|
+ hostip += '</span>';
|
|
|
|
262
|
+ hostip += '</span>';
|
|
|
|
263
|
+
|
|
|
|
264
|
+
|
|
|
|
265
|
+
|
|
|
|
266
|
+ hostip = hostip +tagsBadage;
|
|
|
|
267
|
+
|
|
|
|
268
|
+ var onehost='<h4>'+masterBadage+hostip+'</h4>';
|
|
|
|
269
|
+ if(masterFlag){
|
|
|
|
270
|
+ masterIps += onehost;
|
|
|
|
271
|
+ }else{
|
|
|
|
272
|
+ slaveIps += onehost;
|
|
|
|
273
|
+ }
|
|
|
|
274
|
+ }
|
|
|
|
275
|
+ return masterIps+slaveIps;
|
|
|
|
276
|
+ }
|
|
|
|
277
|
+
|
|
|
|
278
|
+</script>
|
|
|
|
279
|
+</body>
|
|
|
|
280
|
+</html> |
