ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit 99aa11b1fef77b7ea5b3011d79c089cb69efef46 1 parent 3b609f28

增加自动刷新 

增加cpu、内存、网络信息
Inline Side-by-side
Showing 3 changed files with 104 additions and 50 deletions
$(
updateOverView(),
updateClusterView(),
updateQueuesView()
refreshView()
);
function refreshView() {
updateOverView();
updateClusterView();
updateQueuesView();
setTimeout('refreshView()', 30000);
}
function updateOverView() {
$.ajax({
url: contextPath + "rabbitmq/overview",
... ... @@ -18,6 +23,7 @@ function updateOverView() {
error: function (e) {
}
});
}
function updateOverview(response) {
... ... @@ -26,35 +32,47 @@ function updateOverview(response) {
div.innerHTML = "";
var connections = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Connections: ").appendTo(div);
var cpus = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("CPU(%): ").appendTo(div);
var cpusValue = $("<strong>").html(response.data.cpu).appendTo(cpus);
var mems = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("可用/总内存(MB): ").appendTo(div);
var memsValue = $("<strong>").html(response.data.mem).appendTo(mems);
var nets = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("网络I/O(Mbps): ").appendTo(div);
var netsValue = $("<strong>").html(response.data.net).appendTo(nets);
var connections = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Connections: ").appendTo(div);
var conValue = $("<strong>").html(response.data.connections).appendTo(connections);
var channels = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Channels: ").appendTo(div);
var channels = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Channels: ").appendTo(div);
var chaValue = $("<strong>").html(response.data.channels).appendTo(channels);
var exchanges = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Exchanges: ").appendTo(div);
var exchanges = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Exchanges: ").appendTo(div);
var excValue = $("<strong>").html(response.data.exchanges).appendTo(exchanges);
var Queues = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Queues: ").appendTo(div);
var Queues = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Queues: ").appendTo(div);
var quevalue = $("<strong>").html(response.data.queues).appendTo(Queues);
var consumers = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Consumers: ").appendTo(div);
var consumers = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Consumers: ").appendTo(div);
var consValue = $("<strong>").html(response.data.consumers).appendTo(consumers);
var Messages_Ready = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Message_Ready: ").appendTo(div);
var Messages_Ready = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Message_Ready: ").appendTo(div);
var readyValue = $("<strong>").html(response.data.messages_ready).appendTo(Messages_Ready);
var Messages_unack = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Message_Unack: ").appendTo(div);
var Messages_unack = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Message_Unack: ").appendTo(div);
var unValue = $("<strong>").html(response.data.messages_unack).appendTo(Messages_unack);
var Messages_total = $("<div style='margin-left: 35px'>").addClass("micro-highlight").html("Message_Total: ").appendTo(div);
var Messages_total = $("<div style='margin-left: 35px; margin-top: 5px'>").addClass("micro-highlight").html("Message_Total: ").appendTo(div);
var totValue = $("<strong>").html(response.data.messages).appendTo(Messages_total);
}
... ... @@ -89,12 +107,10 @@ function updateClusterView() {
var div = $("<div style='width: 240px;'>").addClass("status-bar");
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.html(rowData.fd_used);
if (rowData.fd_used > rowData.fd_total/2)
{
if (rowData.fd_used > rowData.fd_total / 2) {
nameDiv.addClass("status-bar-main red");
}
else
{
else {
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.fd_total + " vailable");
... ... @@ -110,12 +126,10 @@ function updateClusterView() {
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.addClass("status-bar-main green")
.html(rowData.sockets_used);
if (rowData.sockets_used > rowData.sockets_total/2)
{
if (rowData.sockets_used > rowData.sockets_total / 2) {
nameDiv.addClass("status-bar-main red");
}
else
{
else {
nameDiv.addClass("status-bar-main green");
}
... ... @@ -133,12 +147,10 @@ function updateClusterView() {
.addClass("status-bar-main green")
.html(rowData.proc_used);
if (rowData.proc_used > rowData.proc_total/2)
{
if (rowData.proc_used > rowData.proc_total / 2) {
nameDiv.addClass("status-bar-main red");
}
else
{
else {
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.proc_total + " available");
... ... @@ -153,12 +165,10 @@ function updateClusterView() {
var div = $("<div style='width: 240px;'>").addClass("status-bar");
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.html(rowData.mem_used);
if (rowData.mem_alarm)
{
if (rowData.mem_alarm) {
nameDiv.addClass("status-bar-main red");
}
else
{
else {
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.mem_limit + " vailable");
... ... @@ -174,12 +184,10 @@ function updateClusterView() {
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.html(rowData.disk_free);
if (rowData.disk_free_alarm)
{
if (rowData.disk_free_alarm) {
nameDiv.addClass("status-bar-main red");
}
else
{
else {
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.disk_free_limit + " available");
... ... @@ -191,6 +199,7 @@ function updateClusterView() {
]
});
}
function updateQueuesView() {
... ...
... ... @@ -91,17 +91,22 @@
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_monitor").addClass("active open");
$("#li_newRedisMonitor").addClass("active");
$("#li_memcachedMonitor").addClass("active");
</script>
<script type="text/javascript">
$(function () {
refreshTable();
});
function refreshTable() {
$.ajax({
url: contextPath + "memcachedMonitor/updateTime",
type: 'POST',
//请求成功后触发
success: function (data) {
$("#updateTime").text(data);
$("#updateTime").text(data);
}
});
... ... @@ -123,8 +128,8 @@
},
{
title: "地址",
width: "190px",
// field: "url"
width: "150px",
// field: "url"
formatter: function (value, rowData, rowIndex) {
var array = rowData.url.split("\r\n");
var div = "";
... ... @@ -132,10 +137,49 @@
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}
,
{
title: "CPU(%)",
width: "100px",
// field: "url"
formatter: function (value, rowData, rowIndex) {
var array = rowData.cpu.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}
,
{
title: "可用/总内存(MB)",
width: "200px",
// field: "url"
formatter: function (value, rowData, rowIndex) {
var array = rowData.mem.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}
,
{
title: "网络I/O(Mbps)",
width: "130px",
// field: "url"
formatter: function (value, rowData, rowIndex) {
var array = rowData.net.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}, {
title: "当前连接数",
width:"80px",
// field: "curConnections"
// field: "curConnections"
formatter: function (value, rowData, rowIndex) {
var array = rowData.curConnections.split("\r\n");
var div = "";
... ... @@ -145,8 +189,8 @@
}
}, {
title: "启动时长",
width:"110px",
// field: "upTime"
width:"80px",
// field: "upTime"
formatter: function (value, rowData, rowIndex) {
var array = rowData.upTime.split("\r\n");
var div = "";
... ... @@ -157,7 +201,7 @@
}, {
title: "get频率(次/秒)",
width:"100px",
// field: 'cmdGet'
// field: 'cmdGet'
formatter: function (value, rowData, rowIndex) {
var array = rowData.cmdGet.split("\r\n");
var div = "";
... ... @@ -168,7 +212,7 @@
}, {
title: "set频率(次/秒)",
width:"100px",
// field: "cmdSet"
// field: "cmdSet"
formatter: function (value, rowData, rowIndex) {
var array = rowData.cmdSet.split("\r\n");
var div = "";
... ... @@ -179,7 +223,7 @@
}, {
title: "get命中率",
width: "100px",
// field: "hitRate"
// field: "hitRate"
formatter: function (value, rowData, rowIndex) {
var array = rowData.hitRate.split("\r\n");
var div = "";
... ... @@ -189,8 +233,8 @@
}
}, {
title: "使用内存",
width:"90px",
// field: "useMemory"
width:"80px",
// field: "useMemory"
formatter: function (value, rowData, rowIndex) {
var array = rowData.useMemory.split("\r\n");
var div = "";
... ... @@ -200,8 +244,8 @@
}
}, {
title: "最大内存",
width:"90px",
// field: "maxMemory"
width:"80px",
// field: "maxMemory"
formatter: function (value, rowData, rowIndex) {
var array = rowData.maxMemory.split("\r\n");
var div = "";
... ... @@ -211,8 +255,8 @@
}
}, {
title: "当前数量",
width:"100px",
// field: "curItems"
width:"80px",
// field: "curItems"
formatter: function (value, rowData, rowIndex) {
var array = rowData.curItems.split("\r\n");
var div = "";
... ... @@ -224,7 +268,8 @@
/* data: data*/
});
});
setTimeout('refreshTable()',30000);
}
</script>
</html>
... ...
... ... @@ -186,7 +186,7 @@
}
}
, {
title: "A/T-Mem(MB)",
title: "可用/总内存(MB)",
width: "200px",
// field: "taskCtime"
formatter: function (value, rowData, rowIndex) {
... ... @@ -198,7 +198,7 @@
}
}
, {
title: "I/O(Mbps)",
title: "网络I/O(Mbps)",
width: "130px",
// field: "taskCtime"
formatter: function (value, rowData, rowIndex) {
... ...