ops / monitor-ui · Commits

Go to a project

Authored by jack.xue
Commit edff50aac0b08142bc79c9448dfa33c810affa2f 1 parent da32bea3

add rabbitmq view

Inline Side-by-side
Showing 7 changed files with 231 additions and 175 deletions
@@ -10,4 +10,5 @@ public class RabbitInfoReq extends PageRequest { @@ -10,4 +10,5 @@ public class RabbitInfoReq extends PageRequest {
10 10
11 String moId; 11 String moId;
12 12
  13 + String moType;
13 } 14 }
@@ -9,14 +9,16 @@ @@ -9,14 +9,16 @@
9 9
10 String page_type = request.getParameter("page_type"); 10 String page_type = request.getParameter("page_type");
11 String page_url = request.getParameter("page_url"); 11 String page_url = request.getParameter("page_url");
12 - if(page_type==null)  
13 - page_type="";  
14 - if(page_url==null)  
15 - page_url=""; 12 + if (page_type == null)
  13 + page_type = "";
  14 + if (page_url == null)
  15 + page_url = "";
16 16
17 String api_type = request.getParameter("api_type"); 17 String api_type = request.getParameter("api_type");
18 if (api_type == null) 18 if (api_type == null)
19 api_type = "0"; 19 api_type = "0";
  20 +
  21 + String moId=request.getParameter("moId");
20 %> 22 %>
21 23
22 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 24 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
@@ -34,31 +36,39 @@ @@ -34,31 +36,39 @@
34 <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/> 36 <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
35 <link rel="stylesheet" href="<%=basePath %>css/select2.css"/> 37 <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
36 <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/> 38 <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
37 - <link rel="stylesheet" href="<%=basePath %>css/select2.css"/> 39 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
38 <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/> 40 <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
39 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script> 41 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
40 <script src="<%=basePath %>/js/bootstrap.min.js"></script> 42 <script src="<%=basePath %>/js/bootstrap.min.js"></script>
41 - <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8" type="text/javascript"></script>  
42 - <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8" type="text/javascript"></script> 43 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
  44 + type="text/javascript"></script>
  45 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
  46 + type="text/javascript"></script>
43 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script> 47 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
44 - <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8" type="text/javascript"></script> 48 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
  49 + type="text/javascript"></script>
45 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script> 50 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
46 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script> 51 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
47 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script> 52 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
48 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script> 53 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
49 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script> 54 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
50 - <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8" type="text/javascript"></script>  
51 - <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script>  
52 - <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8" type="text/javascript"></script> 55 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
  56 + type="text/javascript"></script>
  57 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
  58 + type="text/javascript"></script>
  59 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
  60 + type="text/javascript"></script>
53 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script> 61 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
54 <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script> 62 <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
55 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script> 63 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
56 <script src="<%=basePath %>js/jstree/jstree.min.js"></script> 64 <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
57 <script src="<%=basePath %>js/jquery.toaster.js"></script> 65 <script src="<%=basePath %>js/jquery.toaster.js"></script>
58 -  
59 - 66 +
  67 +
60 <script> 68 <script>
61 var contextPath = '<%=basePath %>'; 69 var contextPath = '<%=basePath %>';
  70 +
  71 + var moId = <%=moId%>;
62 </script> 72 </script>
63 73
64 <title>YOHO!运维</title> 74 <title>YOHO!运维</title>
@@ -85,13 +95,14 @@ @@ -85,13 +95,14 @@
85 </li> 95 </li>
86 <li class="" id="zkInfo"><a href="?page_type=zkInfo"><i class="icon icon-th"></i><span>ZK监控</span></a> 96 <li class="" id="zkInfo"><a href="?page_type=zkInfo"><i class="icon icon-th"></i><span>ZK监控</span></a>
87 </li> 97 </li>
88 - <li class="" id="rabbitmq"><a href="?page_type=rabbitmq"><i class="icon icon-th"></i><span>Rabbitmq监控</span></a> 98 + <li class="" id="rabbitview"><a href="?page_type=rabbitview"><i class="icon icon-th"></i><span>Rabbitmq监控</span></a>
89 </li> 99 </li>
90 <li class="" id="redisInfo"><a href="?page_type=redisInfo"><i class="icon icon-th"></i><span>Redis监控</span></a> 100 <li class="" id="redisInfo"><a href="?page_type=redisInfo"><i class="icon icon-th"></i><span>Redis监控</span></a>
91 - <li class="" id="nginxview"><a href="?page_type=nginxview"><i  
92 - class="icon icon-th"></i><span>Nginx监控预览</span></a>  
93 </li> 101 </li>
94 - <li class="" id="ProjectRelease"><a href="?page_type=projectRelease"><i class="icon icon-th"></i><span>项目发布</span></a> 102 + <li class="" id="nginxview"><a href="?page_type=nginxview"><i class="icon icon-th"></i><span>Nginx监控预览</span></a>
  103 + </li>
  104 + <li class="" id="ProjectRelease"><a href="?page_type=projectRelease"><i
  105 + class="icon icon-th"></i><span>项目发布</span></a>
95 </li> 106 </li>
96 </ul> 107 </ul>
97 </div> 108 </div>
@@ -108,11 +119,12 @@ @@ -108,11 +119,12 @@
108 "javaApi": 'jsp/javaapi/javaApi.jsp', 119 "javaApi": 'jsp/javaapi/javaApi.jsp',
109 "zkInfo": '/jsp/zkInfo/zkInfoList.jsp', 120 "zkInfo": '/jsp/zkInfo/zkInfoList.jsp',
110 "redisInfo": '/jsp/redisInfo/redisInfoList.jsp', 121 "redisInfo": '/jsp/redisInfo/redisInfoList.jsp',
111 - "rabbitmq": '/jsp/mobject/rabbitmq.jsp', 122 + "rabbitview": '/jsp/mobject/rabbitview.jsp',
112 "awsnginx": '/jsp/mobject/awsnginx.jsp', 123 "awsnginx": '/jsp/mobject/awsnginx.jsp',
113 "qcnginx": '/jsp/mobject/qcnginx.jsp', 124 "qcnginx": '/jsp/mobject/qcnginx.jsp',
114 "nginxview": '/jsp/mobject/nginxview.jsp', 125 "nginxview": '/jsp/mobject/nginxview.jsp',
115 - "projectRelease": '/jsp/project/projectRelease.jsp' 126 + "projectRelease": '/jsp/project/projectRelease.jsp',
  127 + "rabbitInfo": '/jsp/mobject/rabbitmq.jsp'
116 }; 128 };
117 var page_type = "<%=page_type %>"; 129 var page_type = "<%=page_type %>";
118 var page_url = "<%=page_url %>"; 130 var page_url = "<%=page_url %>";
@@ -123,11 +135,10 @@ @@ -123,11 +135,10 @@
123 }); 135 });
124 136
125 var loadPage = function () { 137 var loadPage = function () {
126 -  
127 //直接根据url跳转 138 //直接根据url跳转
128 - if (page_url != undefined&&page_url != "") { 139 + if (page_url != undefined && page_url != "") {
129 $("#content").load(contextPath + page_url); 140 $("#content").load(contextPath + page_url);
130 - if (page_type != undefined&&page_type != "") { 141 + if (page_type != undefined && page_type != "") {
131 console.log("load page : ", page_type); 142 console.log("load page : ", page_type);
132 $("#" + page_type).addClass("active").siblings().removeClass("active"); 143 $("#" + page_type).addClass("active").siblings().removeClass("active");
133 } 144 }
1 $( 1 $(
2 - initRabbitSelect() 2 + updateOverView(),
  3 + updateClusterView(),
  4 + updateQueuesView()
3 ); 5 );
4 6
5 -function updateOverView(moId) { 7 +function updateOverView() {
  8 + alert("choosed rabbit :"+ moId);
6 $.ajax({ 9 $.ajax({
7 url: contextPath + "rabbitmq/overview", 10 url: contextPath + "rabbitmq/overview",
8 type: "post", 11 type: "post",
@@ -20,45 +23,44 @@ function updateOverView(moId) { @@ -20,45 +23,44 @@ function updateOverView(moId) {
20 23
21 function updateOverview(response) { 24 function updateOverview(response) {
22 25
23 -  
24 var div = document.getElementById("overviewDiv"); 26 var div = document.getElementById("overviewDiv");
25 27
26 div.innerHTML = ""; 28 div.innerHTML = "";
27 29
28 - var connections = $("<div>").addClass("micro-highlight").html("Connections:").appendTo(div); 30 + var connections = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Connections: ").appendTo(div);
29 31
30 var conValue = $("<strong>").html(response.data.connections).appendTo(connections); 32 var conValue = $("<strong>").html(response.data.connections).appendTo(connections);
31 33
32 - var channels = $("<div>").addClass("micro-highlight").html("Channels:").appendTo(div); 34 + var channels = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Channels: ").appendTo(div);
33 35
34 var chaValue = $("<strong>").html(response.data.channels).appendTo(channels); 36 var chaValue = $("<strong>").html(response.data.channels).appendTo(channels);
35 37
36 - var exchanges = $("<div>").addClass("micro-highlight").html("Exchanges:").appendTo(div); 38 + var exchanges = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Exchanges: ").appendTo(div);
37 39
38 var excValue = $("<strong>").html(response.data.exchanges).appendTo(exchanges); 40 var excValue = $("<strong>").html(response.data.exchanges).appendTo(exchanges);
39 41
40 - var Queues = $("<div>").addClass("micro-highlight").html("Queues:").appendTo(div); 42 + var Queues = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Queues: ").appendTo(div);
41 43
42 var quevalue = $("<strong>").html(response.data.queues).appendTo(Queues); 44 var quevalue = $("<strong>").html(response.data.queues).appendTo(Queues);
43 45
44 - var consumers = $("<div>").addClass("micro-highlight").html("Consumers:").appendTo(div); 46 + var consumers = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Consumers: ").appendTo(div);
45 47
46 var consValue = $("<strong>").html(response.data.consumers).appendTo(consumers); 48 var consValue = $("<strong>").html(response.data.consumers).appendTo(consumers);
47 49
48 - var Messages_Ready = $("<div>").addClass("micro-highlight").html("Message_Ready:").appendTo(div); 50 + var Messages_Ready = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Message_Ready: ").appendTo(div);
49 51
50 var readyValue = $("<strong>").html(response.data.messages_ready).appendTo(Messages_Ready); 52 var readyValue = $("<strong>").html(response.data.messages_ready).appendTo(Messages_Ready);
51 53
52 - var Messages_unack = $("<div>").addClass("micro-highlight").html("Message_Unack:").appendTo(div); 54 + var Messages_unack = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Message_Unack: ").appendTo(div);
53 55
54 var unValue = $("<strong>").html(response.data.messages_unack).appendTo(Messages_unack); 56 var unValue = $("<strong>").html(response.data.messages_unack).appendTo(Messages_unack);
55 57
56 - var Messages_total = $("<div>").addClass("micro-highlight").html("Message_Total:").appendTo(div); 58 + var Messages_total = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Message_Total: ").appendTo(div);
57 59
58 var totValue = $("<strong>").html(response.data.messages).appendTo(Messages_total); 60 var totValue = $("<strong>").html(response.data.messages).appendTo(Messages_total);
59 } 61 }
60 62
61 -function updateClusterView(moId) { 63 +function updateClusterView() {
62 64
63 $("#clusterViewTable").table( 65 $("#clusterViewTable").table(
64 { 66 {
@@ -152,7 +154,7 @@ function updateClusterView(moId) { @@ -152,7 +154,7 @@ function updateClusterView(moId) {
152 }); 154 });
153 } 155 }
154 156
155 -function updateQueuesView(moId) { 157 +function updateQueuesView() {
156 $("#queueViewTable").table( 158 $("#queueViewTable").table(
157 { 159 {
158 url: contextPath + "rabbitmq/queueView", 160 url: contextPath + "rabbitmq/queueView",
@@ -245,56 +247,10 @@ function fixAlertHigh(rowData, rowIndex) { @@ -245,56 +247,10 @@ function fixAlertHigh(rowData, rowIndex) {
245 type: "post", 247 type: "post",
246 dataType: "json", 248 dataType: "json",
247 data: { 249 data: {
248 - moId: $('#rabbitMqSelected option:selected').val(), 250 + moId: moId,
249 queueName: rowData.name, 251 queueName: rowData.name,
250 alertHigh: $("#msg_alert_high_" + rowIndex + "").val() 252 alertHigh: $("#msg_alert_high_" + rowIndex + "").val()
251 } 253 }
252 }) 254 })
253 } 255 }
254 256
255 -  
256 -function initRabbitSelect() {  
257 - $.ajax({  
258 - url: contextPath + "rabbitmq/allRabbitMq",  
259 - type: "post",  
260 - dataType: "json",  
261 - success: function (response) {  
262 - //将查询到的数据，update到选择框中  
263 - genarateRabbitSelectOption(response.data);  
264 - updateOverView((response.data)[0].moId);  
265 - updateClusterView((response.data)[0].moId);  
266 - updateQueuesView((response.data)[0].moId);  
267 -  
268 - },  
269 - error: function (e) {  
270 - }  
271 - })  
272 -}  
273 -function genarateRabbitSelectOption(optionList) {  
274 - var innerHTML = "<select id='rabbitMqSelected' class='form-control' style='width:50%; height: 20%; margin-left: 20%' onchange='rabbitUpdateSelectOnChange()'>";  
275 - for (var i = 0; i < optionList.length; i++) {  
276 - innerHTML += "<option value='" + optionList[i].moId + "'>" + optionList[i].moName + "</option>";  
277 - }  
278 - innerHTML += "</select>";  
279 - console.log(document.getElementById("selectRabbitDiv"));  
280 - document.getElementById("selectRabbitDiv").innerHTML = innerHTML;  
281 - document.getElementById("selectRabbitDiv").value = optionList[0].moName;  
282 -}  
283 -  
284 -/**  
285 - * 主机组选择框选中属性发生变化时，则异步查询当前主机组号下的ip列表，并且刷新ip列表  
286 - */  
287 -function rabbitUpdateSelectOnChange() {  
288 - var rabbitId = $('#rabbitMqSelected option:selected').val().replace(/\'/g, '\"');  
289 -  
290 - updateOverView(rabbitId);  
291 -  
292 - $("#clusterViewTable").table("load", {  
293 - 'moId': rabbitId  
294 - });  
295 - $("#queueViewTable").table("load", {  
296 - 'moId': rabbitId  
297 - });  
298 -}  
299 -  
300 -  
  1 +$(
  2 + updateView()
  3 +);
  4 +
  5 +function updateView() {
  6 + $.ajax({
  7 + url: contextPath + "rabbitmq/allRabbitMq",
  8 + type: "post",
  9 + dataType: "json",
  10 + data: {
  11 + moType: "aws"
  12 + },
  13 + success: function (response) {
  14 + var awsView = document.getElementById("aws_rabbit_row");
  15 + updateRabbitView(awsView, response.data, "aws");
  16 + },
  17 + error: function (e) {
  18 +
  19 + }
  20 + });
  21 +
  22 + $.ajax({
  23 + url: contextPath + "rabbitmq/allRabbitMq",
  24 + type: "post",
  25 + dataType: "json",
  26 + data: {
  27 + moType: "qc"
  28 + },
  29 + success: function (response) {
  30 + var qcView = document.getElementById("qcloud_rabbit_row");
  31 + updateRabbitView(qcView, response.data, "qcloud")
  32 +
  33 + },
  34 + error: function (e) {
  35 +
  36 + }
  37 + });
  38 +
  39 +
  40 +}
  41 +
  42 +function updateRabbitView(view, data, type) {
  43 +
  44 + for (var i = 0; i < data.length; i++) {
  45 +
  46 + var col = $("<div class='col-md-4' id='" + data[i].moId + "' onclick='ok(id)'>");
  47 +
  48 + col.appendTo(view);
  49 +
  50 + var panel = $("<div>");
  51 +
  52 + if (data[i].moState == 0) {
  53 + panel.addClass("panel panel-fail-alt noborder");
  54 + }
  55 + else {
  56 + panel.addClass("panel panel-success-alt noborder");
  57 + }
  58 +
  59 + col.append(panel);
  60 +
  61 + var panel_head = $("<div class='panel-heading noborder'>")
  62 +
  63 + panel.append(panel_head);
  64 +
  65 + var panel_icon = $("<div class='panel-icon' style='background-image:url(\"img/rabbit.png\"); width:60px;height:60px;' >");
  66 +
  67 + panel_head.append(panel_icon);
  68 +
  69 + var media_body = $("<div class='media-body'>");
  70 +
  71 + panel_head.append(media_body);
  72 +
  73 + var tile = $("<h5 class='md-title nomargin'>");
  74 +
  75 + var tile_value = $("<strong>").html(data[i].moName);
  76 +
  77 + tile.append(tile_value);
  78 +
  79 + media_body.append(tile);
  80 +
  81 + var tile_info = $("<h1 class='mt5'>").html(data[i].moHostIp);
  82 +
  83 + media_body.append(tile_info);
  84 +
  85 + var hr = $("<hr>");
  86 +
  87 + panel_head.append(hr);
  88 +
  89 + var parameters = $("<div class='clearfix mt20'>");
  90 +
  91 + panel_head.append(parameters);
  92 +
  93 + var queuePara = $("<div class='pull-left'>");
  94 +
  95 + queuePara.append($("<h5 class='md-title nomargin'>").html("Queues"));
  96 +
  97 + queuePara.append($("<h4 class='nomargin'>").html(data[i].moQueues));
  98 +
  99 + parameters.append(queuePara);
  100 +
  101 + var msgPara = $("<div class='pull-right'>");
  102 +
  103 + msgPara.append($("<h5 class='md-title nomargin'>").html("Messages"));
  104 +
  105 + msgPara.append($("<h4 class='nomargin'>").html(data[i].moMsgs));
  106 +
  107 + parameters.append(msgPara);
  108 + }
  109 +
  110 +}
  111 +
  112 +
  113 +function ok(id) {
  114 + moId = id;
  115 +
  116 + alert(moId);
  117 +
  118 + window.location.href = "/?page_type=rabbitInfo&moId=" + id;
  119 +
  120 + /* if (id == "aws") {
  121 + // window.location.href="/?page_type=awsnginx"
  122 + }
  123 + else
  124 + {
  125 + // window.location.href="/?page_type=qcnginx"
  126 + }*/
  127 +}
  128 +
@@ -21,13 +21,6 @@ @@ -21,13 +21,6 @@
21 <h5>监控对象详情</h5> 21 <h5>监控对象详情</h5>
22 22
23 </div> 23 </div>
24 -  
25 - <div class="control-group" style="margin-left: 70%; margin-top: 30px; margin-bottom: 0px">  
26 - <label class="control-label" style="float: left;">rabbitmq:</label>  
27 - <div id="selectRabbitDiv"></div>  
28 - </div>  
29 -  
30 -  
31 <div class="container-fluid" style="margin-top: -20px;"> 24 <div class="container-fluid" style="margin-top: -20px;">
32 <div class="row-fluid"> 25 <div class="row-fluid">
33 <div class="span12"> 26 <div class="span12">
@@ -45,64 +38,6 @@ @@ -45,64 +38,6 @@
45 <h3>Nodes</h3> 38 <h3>Nodes</h3>
46 <div class="hider updatable" style="display:block;"> 39 <div class="hider updatable" style="display:block;">
47 <table class="table table-bordered table-striped table-hover" id="clusterViewTable"> 40 <table class="table table-bordered table-striped table-hover" id="clusterViewTable">
48 - <%-- <thead>  
49 - <tr>  
50 - <th>Name</th>  
51 - <th>File descriptors</th>  
52 - <th>Socket descriptors</th>  
53 - <th>Erlang processes</th>  
54 - <th>Memory</th>  
55 - <th>Disk space</th>  
56 - </tr>  
57 - </thead>  
58 - <tbody>  
59 - <tr class="alt1">  
60 - <td align="center">  
61 - <div style="text-align: center">jack</div>  
62 - </td>  
63 - <td align="center">  
64 - <div class="status-bar" style="width: 120px;">  
65 - <div class="status-bar-main green"  
66 - style="background-image: url(img/bg-green-dark.png); background-position: -84px 0px; background-repeat: no-repeat;">  
67 - 19719  
68 - </div>  
69 - <sub>65535 available</sub></div>  
70 - </td>  
71 - <td align="center">  
72 - <div class="status-bar" style="width: 120px;" style="text-align: center">  
73 - <div class="status-bar-main green"  
74 - style="background-image: url(img/bg-green-dark.png); background-position: -80px 0px; background-repeat: no-repeat;">  
75 - 19671  
76 - </div>  
77 - <sub>58889 available</sub></div>  
78 - </td>  
79 - <td align="center">  
80 - <div class="status-bar" style="width: 120px;">  
81 - <div class="status-bar-main green"  
82 - style="background-image: url(img/bg-green-dark.png); background-position: -109px 0px; background-repeat: no-repeat;">  
83 - 98719  
84 - </div>  
85 - <sub>1048576 available</sub></div>  
86 - </td>  
87 - <td align="center">  
88 - <div class="status-bar" style="width: 120px;">  
89 - <div class="status-bar-main green"  
90 - style="margin-bottom: 5px;background-image: url(img/bg-green-dark.png); background-position: -92px 0px; background-repeat: no-repeat;">  
91 - 725MB  
92 - </div>  
93 - <sub>3.1GB high limit</sub>  
94 - </div>  
95 - </td>  
96 - <td align="center">  
97 - <div class="status-bar" style="width: 120px;">  
98 - <div class="status-bar-main green"  
99 - style="background-image: url(img/bg-green-dark.png); background-position: -120px 0px; background-repeat: no-repeat;">  
100 - 72GB  
101 - </div>  
102 - <sub>48MB low limit</sub></div>  
103 - </td>  
104 - </tr>  
105 - </tbody>--%>  
106 </table> 41 </table>
107 </div> 42 </div>
108 </div> 43 </div>
@@ -115,34 +50,6 @@ @@ -115,34 +50,6 @@
115 <h3>Queues</h3> 50 <h3>Queues</h3>
116 <div class="hider updatable" style="display:block;"> 51 <div class="hider updatable" style="display:block;">
117 <table class="table table-bordered table-striped table-hover" id="queueViewTable"> 52 <table class="table table-bordered table-striped table-hover" id="queueViewTable">
118 - <%--<thead>  
119 - <tr>  
120 - <th>Virtual host</th>  
121 - <th>Name</th>  
122 - <th>State</th>  
123 - <th>Messages_Ready</th>  
124 - <th>Messages_Unack</th>  
125 - <th>Messages_Total</th>  
126 - <th>告警阈值</th>  
127 - </tr>  
128 - </thead>  
129 - <tbody>  
130 - <tr>  
131 - <td align="center">yoho</td>  
132 - <td align="center">yoho:push:yoho_task_push</td>  
133 - <td align="center">idle</td>  
134 - <td align="center">0</td>  
135 - <td align="center">0</td>  
136 - <td align="center">0</td>  
137 - <td align="center">  
138 - <div>  
139 - <div class="controls">  
140 - <input type="text" id="addmoName"/>  
141 - </div>  
142 - </div>  
143 - </td>  
144 - </tr>  
145 - </tbody>--%>  
146 </table> 53 </table>
147 </div> 54 </div>
148 </div> 55 </div>
  1 +<%@ page language="java" contentType="text/html; charset=UTF-8"
  2 + pageEncoding="UTF-8" %>
  3 +<%
  4 + String path = request.getContextPath();
  5 + String basePath = request.getScheme() + "://"
  6 + + request.getServerName() + ":" + request.getServerPort()
  7 + + path + "/";
  8 +%>
  9 +
  10 +<link href="css/nginxview.css" rel="stylesheet">
  11 +
  12 +<div id="breadcrumb">
  13 + <a href="#" title="Go to Home" class="tip-bottom"><i
  14 + class="icon-home"></i> Home</a> <a
  15 + href="#" class="current">rabbitmq</a>
  16 +</div>
  17 +
  18 +<div class="container-fluid">
  19 + <div class="widget-box">
  20 + <div class="widget-title">
  21 + <h5>RabbitMQ状态预览</h5>
  22 + </div>
  23 + </div>
  24 +
  25 + <div class="container-fluid">
  26 + <div class="row-fluid" style="border:solid 1px #CDC9C9; padding: 10px">
  27 + <div class="span12">
  28 + <div class="section section-visible">
  29 + <h3>AWS</h3>
  30 + <div class="hider updatable" style="display:block;">
  31 + <div class="row row-stat" id="aws_rabbit_row">
  32 + </div><!-- row -->
  33 + </div>
  34 + </div>
  35 + </div>
  36 + </div>
  37 +
  38 + <div class="row-fluid" style="margin-top: 5%;border:solid 1px #CDC9C9; padding: 10px">
  39 + <div class="span12">
  40 + <div class="section section-visible">
  41 + <h3>QCloud</h3>
  42 + <div class="hider updatable" style="display:block;">
  43 + <div class="row row-stat" id="qcloud_rabbit_row">
  44 + </div><!-- row -->
  45 + </div>
  46 + </div>
  47 + </div>
  48 + </div>
  49 + </div>
  50 +</div>
  51 +
  52 +<script src="<%=basePath %>js/rabbitview.js" type="text/javascript"></script>
  53 +