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 {
String moId;
String moType;
}
... ...
... ... @@ -9,14 +9,16 @@
String page_type = request.getParameter("page_type");
String page_url = request.getParameter("page_url");
if(page_type==null)
page_type="";
if(page_url==null)
page_url="";
if (page_type == null)
page_type = "";
if (page_url == null)
page_url = "";
String api_type = request.getParameter("api_type");
if (api_type == null)
api_type = "0";
String moId=request.getParameter("moId");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
... ... @@ -34,31 +36,39 @@
<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/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.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/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.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.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 %>';
var moId = <%=moId%>;
</script>
<title>YOHO!运维</title>
... ... @@ -85,13 +95,14 @@
</li>
<li class="" id="zkInfo"><a href="?page_type=zkInfo"><i class="icon icon-th"></i><span>ZK监控</span></a>
</li>
<li class="" id="rabbitmq"><a href="?page_type=rabbitmq"><i class="icon icon-th"></i><span>Rabbitmq监控</span></a>
<li class="" id="rabbitview"><a href="?page_type=rabbitview"><i class="icon icon-th"></i><span>Rabbitmq监控</span></a>
</li>
<li class="" id="redisInfo"><a href="?page_type=redisInfo"><i class="icon icon-th"></i><span>Redis监控</span></a>
<li class="" id="nginxview"><a href="?page_type=nginxview"><i
class="icon icon-th"></i><span>Nginx监控预览</span></a>
</li>
<li class="" id="ProjectRelease"><a href="?page_type=projectRelease"><i class="icon icon-th"></i><span>项目发布</span></a>
<li class="" id="nginxview"><a href="?page_type=nginxview"><i class="icon icon-th"></i><span>Nginx监控预览</span></a>
</li>
<li class="" id="ProjectRelease"><a href="?page_type=projectRelease"><i
class="icon icon-th"></i><span>项目发布</span></a>
</li>
</ul>
</div>
... ... @@ -108,11 +119,12 @@
"javaApi": 'jsp/javaapi/javaApi.jsp',
"zkInfo": '/jsp/zkInfo/zkInfoList.jsp',
"redisInfo": '/jsp/redisInfo/redisInfoList.jsp',
"rabbitmq": '/jsp/mobject/rabbitmq.jsp',
"rabbitview": '/jsp/mobject/rabbitview.jsp',
"awsnginx": '/jsp/mobject/awsnginx.jsp',
"qcnginx": '/jsp/mobject/qcnginx.jsp',
"nginxview": '/jsp/mobject/nginxview.jsp',
"projectRelease": '/jsp/project/projectRelease.jsp'
"projectRelease": '/jsp/project/projectRelease.jsp',
"rabbitInfo": '/jsp/mobject/rabbitmq.jsp'
};
var page_type = "<%=page_type %>";
var page_url = "<%=page_url %>";
... ... @@ -123,11 +135,10 @@
});
var loadPage = function () {
//直接根据url跳转
if (page_url != undefined&&page_url != "") {
if (page_url != undefined && page_url != "") {
$("#content").load(contextPath + page_url);
if (page_type != undefined&&page_type != "") {
if (page_type != undefined && page_type != "") {
console.log("load page : ", page_type);
$("#" + page_type).addClass("active").siblings().removeClass("active");
}
... ...
$(
initRabbitSelect()
updateOverView(),
updateClusterView(),
updateQueuesView()
);
function updateOverView(moId) {
function updateOverView() {
alert("choosed rabbit :"+ moId);
$.ajax({
url: contextPath + "rabbitmq/overview",
type: "post",
... ... @@ -20,45 +23,44 @@ function updateOverView(moId) {
function updateOverview(response) {
var div = document.getElementById("overviewDiv");
div.innerHTML = "";
var connections = $("<div>").addClass("micro-highlight").html("Connections:").appendTo(div);
var connections = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Connections: ").appendTo(div);
var conValue = $("<strong>").html(response.data.connections).appendTo(connections);
var channels = $("<div>").addClass("micro-highlight").html("Channels:").appendTo(div);
var channels = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Channels: ").appendTo(div);
var chaValue = $("<strong>").html(response.data.channels).appendTo(channels);
var exchanges = $("<div>").addClass("micro-highlight").html("Exchanges:").appendTo(div);
var exchanges = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Exchanges: ").appendTo(div);
var excValue = $("<strong>").html(response.data.exchanges).appendTo(exchanges);
var Queues = $("<div>").addClass("micro-highlight").html("Queues:").appendTo(div);
var Queues = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Queues: ").appendTo(div);
var quevalue = $("<strong>").html(response.data.queues).appendTo(Queues);
var consumers = $("<div>").addClass("micro-highlight").html("Consumers:").appendTo(div);
var consumers = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Consumers: ").appendTo(div);
var consValue = $("<strong>").html(response.data.consumers).appendTo(consumers);
var Messages_Ready = $("<div>").addClass("micro-highlight").html("Message_Ready:").appendTo(div);
var Messages_Ready = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Message_Ready: ").appendTo(div);
var readyValue = $("<strong>").html(response.data.messages_ready).appendTo(Messages_Ready);
var Messages_unack = $("<div>").addClass("micro-highlight").html("Message_Unack:").appendTo(div);
var Messages_unack = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Message_Unack: ").appendTo(div);
var unValue = $("<strong>").html(response.data.messages_unack).appendTo(Messages_unack);
var Messages_total = $("<div>").addClass("micro-highlight").html("Message_Total:").appendTo(div);
var Messages_total = $("<div style='margin-left: 45px'>").addClass("micro-highlight").html("Message_Total: ").appendTo(div);
var totValue = $("<strong>").html(response.data.messages).appendTo(Messages_total);
}
function updateClusterView(moId) {
function updateClusterView() {
$("#clusterViewTable").table(
{
... ... @@ -152,7 +154,7 @@ function updateClusterView(moId) {
});
}
function updateQueuesView(moId) {
function updateQueuesView() {
$("#queueViewTable").table(
{
url: contextPath + "rabbitmq/queueView",
... ... @@ -245,56 +247,10 @@ function fixAlertHigh(rowData, rowIndex) {
type: "post",
dataType: "json",
data: {
moId: $('#rabbitMqSelected option:selected').val(),
moId: moId,
queueName: rowData.name,
alertHigh: $("#msg_alert_high_" + rowIndex + "").val()
}
})
}
function initRabbitSelect() {
$.ajax({
url: contextPath + "rabbitmq/allRabbitMq",
type: "post",
dataType: "json",
success: function (response) {
//将查询到的数据，update到选择框中
genarateRabbitSelectOption(response.data);
updateOverView((response.data)[0].moId);
updateClusterView((response.data)[0].moId);
updateQueuesView((response.data)[0].moId);
},
error: function (e) {
}
})
}
function genarateRabbitSelectOption(optionList) {
var innerHTML = "<select id='rabbitMqSelected' class='form-control' style='width:50%; height: 20%; margin-left: 20%' onchange='rabbitUpdateSelectOnChange()'>";
for (var i = 0; i < optionList.length; i++) {
innerHTML += "<option value='" + optionList[i].moId + "'>" + optionList[i].moName + "</option>";
}
innerHTML += "</select>";
console.log(document.getElementById("selectRabbitDiv"));
document.getElementById("selectRabbitDiv").innerHTML = innerHTML;
document.getElementById("selectRabbitDiv").value = optionList[0].moName;
}
/**
* 主机组选择框选中属性发生变化时，则异步查询当前主机组号下的ip列表，并且刷新ip列表
*/
function rabbitUpdateSelectOnChange() {
var rabbitId = $('#rabbitMqSelected option:selected').val().replace(/\'/g, '\"');
updateOverView(rabbitId);
$("#clusterViewTable").table("load", {
'moId': rabbitId
});
$("#queueViewTable").table("load", {
'moId': rabbitId
});
}
... ...
$(
updateView()
);
function updateView() {
$.ajax({
url: contextPath + "rabbitmq/allRabbitMq",
type: "post",
dataType: "json",
data: {
moType: "aws"
},
success: function (response) {
var awsView = document.getElementById("aws_rabbit_row");
updateRabbitView(awsView, response.data, "aws");
},
error: function (e) {
}
});
$.ajax({
url: contextPath + "rabbitmq/allRabbitMq",
type: "post",
dataType: "json",
data: {
moType: "qc"
},
success: function (response) {
var qcView = document.getElementById("qcloud_rabbit_row");
updateRabbitView(qcView, response.data, "qcloud")
},
error: function (e) {
}
});
}
function updateRabbitView(view, data, type) {
for (var i = 0; i < data.length; i++) {
var col = $("<div class='col-md-4' id='" + data[i].moId + "' onclick='ok(id)'>");
col.appendTo(view);
var panel = $("<div>");
if (data[i].moState == 0) {
panel.addClass("panel panel-fail-alt noborder");
}
else {
panel.addClass("panel panel-success-alt noborder");
}
col.append(panel);
var panel_head = $("<div class='panel-heading noborder'>")
panel.append(panel_head);
var panel_icon = $("<div class='panel-icon' style='background-image:url(\"img/rabbit.png\"); width:60px;height:60px;' >");
panel_head.append(panel_icon);
var media_body = $("<div class='media-body'>");
panel_head.append(media_body);
var tile = $("<h5 class='md-title nomargin'>");
var tile_value = $("<strong>").html(data[i].moName);
tile.append(tile_value);
media_body.append(tile);
var tile_info = $("<h1 class='mt5'>").html(data[i].moHostIp);
media_body.append(tile_info);
var hr = $("<hr>");
panel_head.append(hr);
var parameters = $("<div class='clearfix mt20'>");
panel_head.append(parameters);
var queuePara = $("<div class='pull-left'>");
queuePara.append($("<h5 class='md-title nomargin'>").html("Queues"));
queuePara.append($("<h4 class='nomargin'>").html(data[i].moQueues));
parameters.append(queuePara);
var msgPara = $("<div class='pull-right'>");
msgPara.append($("<h5 class='md-title nomargin'>").html("Messages"));
msgPara.append($("<h4 class='nomargin'>").html(data[i].moMsgs));
parameters.append(msgPara);
}
}
function ok(id) {
moId = id;
alert(moId);
window.location.href = "/?page_type=rabbitInfo&moId=" + id;
/* if (id == "aws") {
// window.location.href="/?page_type=awsnginx"
}
else
{
// window.location.href="/?page_type=qcnginx"
}*/
}
... ...
... ... @@ -21,13 +21,6 @@
<h5>监控对象详情</h5>
</div>
<div class="control-group" style="margin-left: 70%; margin-top: 30px; margin-bottom: 0px">
<label class="control-label" style="float: left;">rabbitmq:</label>
<div id="selectRabbitDiv"></div>
</div>
<div class="container-fluid" style="margin-top: -20px;">
<div class="row-fluid">
<div class="span12">
... ... @@ -45,64 +38,6 @@
<h3>Nodes</h3>
<div class="hider updatable" style="display:block;">
<table class="table table-bordered table-striped table-hover" id="clusterViewTable">
<%-- <thead>
<tr>
<th>Name</th>
<th>File descriptors</th>
<th>Socket descriptors</th>
<th>Erlang processes</th>
<th>Memory</th>
<th>Disk space</th>
</tr>
</thead>
<tbody>
<tr class="alt1">
<td align="center">
<div style="text-align: center">jack</div>
</td>
<td align="center">
<div class="status-bar" style="width: 120px;">
<div class="status-bar-main green"
style="background-image: url(img/bg-green-dark.png); background-position: -84px 0px; background-repeat: no-repeat;">
19719
</div>
<sub>65535 available</sub></div>
</td>
<td align="center">
<div class="status-bar" style="width: 120px;" style="text-align: center">
<div class="status-bar-main green"
style="background-image: url(img/bg-green-dark.png); background-position: -80px 0px; background-repeat: no-repeat;">
19671
</div>
<sub>58889 available</sub></div>
</td>
<td align="center">
<div class="status-bar" style="width: 120px;">
<div class="status-bar-main green"
style="background-image: url(img/bg-green-dark.png); background-position: -109px 0px; background-repeat: no-repeat;">
98719
</div>
<sub>1048576 available</sub></div>
</td>
<td align="center">
<div class="status-bar" style="width: 120px;">
<div class="status-bar-main green"
style="margin-bottom: 5px;background-image: url(img/bg-green-dark.png); background-position: -92px 0px; background-repeat: no-repeat;">
725MB
</div>
<sub>3.1GB high limit</sub>
</div>
</td>
<td align="center">
<div class="status-bar" style="width: 120px;">
<div class="status-bar-main green"
style="background-image: url(img/bg-green-dark.png); background-position: -120px 0px; background-repeat: no-repeat;">
72GB
</div>
<sub>48MB low limit</sub></div>
</td>
</tr>
</tbody>--%>
</table>
</div>
</div>
... ... @@ -115,34 +50,6 @@
<h3>Queues</h3>
<div class="hider updatable" style="display:block;">
<table class="table table-bordered table-striped table-hover" id="queueViewTable">
<%--<thead>
<tr>
<th>Virtual host</th>
<th>Name</th>
<th>State</th>
<th>Messages_Ready</th>
<th>Messages_Unack</th>
<th>Messages_Total</th>
<th>告警阈值</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">yoho</td>
<td align="center">yoho:push:yoho_task_push</td>
<td align="center">idle</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">
<div>
<div class="controls">
<input type="text" id="addmoName"/>
</div>
</div>
</td>
</tr>
</tbody>--%>
</table>
</div>
</div>
... ...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<link href="css/nginxview.css" rel="stylesheet">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a
href="#" class="current">rabbitmq</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>RabbitMQ状态预览</h5>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid" style="border:solid 1px #CDC9C9; padding: 10px">
<div class="span12">
<div class="section section-visible">
<h3>AWS</h3>
<div class="hider updatable" style="display:block;">
<div class="row row-stat" id="aws_rabbit_row">
</div><!-- row -->
</div>
</div>
</div>
</div>
<div class="row-fluid" style="margin-top: 5%;border:solid 1px #CDC9C9; padding: 10px">
<div class="span12">
<div class="section section-visible">
<h3>QCloud</h3>
<div class="hider updatable" style="display:block;">
<div class="row row-stat" id="qcloud_rabbit_row">
</div><!-- row -->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<%=basePath %>js/rabbitview.js" type="text/javascript"></script>
... ...