ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit 9c5009c4b9c1d23268717a18dd04898acfe2a8c7 1 parent 8a8525c0

监控rabbitmq更改

Inline Side-by-side
Showing 3 changed files with 149 additions and 147 deletions
package com.ui.model.domain;
import lombok.Data;
/**
* Created by yoho on 2016/6/27.
*/
@Data
public class RabbitModel {
int moId = 135;
String moName;
public RabbitModel(int moId, String moName) {
this.moId = moId;
this.moName = moName;
}
}
$(
updateView()
);
function updateView() {
$.ajax({
url: getUrlBasePath() + "/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: getUrlBasePath() + "/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(\""+ contextPath + "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) {
window.location.href = "toRabbitmqInfo?moId=" + id;
}
... ... @@ -79,8 +79,8 @@
</div>
</div>
<div class="container-fluid">
<div class="row-fluid" style="border:solid 1px #CDC9C9; padding: 10px">
<div class="container-fluid" id="rabbitmq_container">
<%--<div class="row-fluid" style="border:solid 1px #CDC9C9; padding: 10px">
<div class="span12">
<div class="section section-visible">
<h3>AWS</h3>
... ... @@ -92,9 +92,9 @@
</div>
</div>
</div>
</div>
</div>--%>
<div class="row-fluid" style="margin-top: 5%;border:solid 1px #CDC9C9; padding: 10px">
<%--<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>
... ... @@ -106,7 +106,7 @@
</div>
</div>
</div>
</div>
</div>--%>
</div>
</div>
</div>
... ... @@ -118,15 +118,151 @@
</script>
<script>
$("#rabbitmqMenu").click(function () {
/* $("#rabbitmqMenu").click(function () {
if ($("#rabbitmqUl").css('display') == "none") {
$("#rabbitmqUl").css('display', 'block');
$("#rabbitmqUl li").css('background', '#545454');
} else {
$("#rabbitmqUl").css('display', 'none');
}
});*/
$(
updateView()
);
function updateView() {
$.ajax({
url: getUrlBasePath() + "/rabbitmq/allRabbitMq",
type: "post",
dataType: "json",
data: {
/*moType: "aws"*/
},
success: function (response) {
groupMqType(response.data);
},
error: function (e) {
}
});
}
function groupMqType(data) {
$("#rabbitmq_container").html("");
var typeIdStr="";
for (var i = 0; i < data.length; i++) {
var tmpTypeId=data[i].moTypeId;
var rabbit_row_id= "rabbit_row_"+tmpTypeId;
if(typeIdStr.indexOf(tmpTypeId+",")<0){
typeIdStr += (tmpTypeId+",");
//添加一个div用例存储mq分组
var divHtml='<div class="row-fluid" style="margin-top: 10px;border:solid 1px #CDC9C9; padding: 10px">';
divHtml += '<div class="span12">';
divHtml += '<div class="section section-visible">';
divHtml += '<h3>'+data[i].moTypeName+'</h3>';
divHtml += '<div class="hider updatable" style="display:block;">';
divHtml += '<div class="row row-stat" id="'+rabbit_row_id+'">';
divHtml += '</div>';
divHtml += '</div>';
divHtml += '</div>';
divHtml += '</div>';
divHtml += '</div>';
$("#rabbitmq_container").append(divHtml);
var divView = document.getElementById(rabbit_row_id);
updateRabbitView(divView, data,tmpTypeId);
}
}
}
function updateRabbitView(view, data, typeid) {
for (var i = 0; i < data.length; i++) {
if(data[i].moTypeId!=typeid){
continue;
}
var col = $("<div style='width:420px;' 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);
if ($("#rabbitmqUl").css('display') == "none") {
$("#rabbitmqUl").css('display', 'block');
$("#rabbitmqUl li").css('background', '#545454');
} else {
$("#rabbitmqUl").css('display', 'none');
var panel_icon = $("<div class='panel-icon' style='background-image:url(\""+ contextPath + "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) {
window.location.href = "toRabbitmqInfo?moId=" + id;
}
</script>
<script src="<%=basePath %>js/rabbitview.js" type="text/javascript"></script>
... ...