ops / monitor-ui · Commits

Go to a project

Authored by simba
Commit 385c4d5ab19fafe59fc5f49252c0529048c7a65b 2 parents b3ed731a b925065f

Merge branch 'master' of http://git.yoho.cn/ops/monitor-ui

Inline Side-by-side
Showing 12 changed files with 338 additions and 242 deletions
... ... @@ -6,6 +6,6 @@ import lombok.Data;
* Created by yoho on 2016/6/30.
*/
@Data
public class NginxTypeRequest {
public class NginxTypeRequest extends PageRequest {
String type;
}
... ...
... ... @@ -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");
}
... ...
... ... @@ -90,24 +90,24 @@ function updateNginxView(awsView, data, type) {
panel_head.append(parameters);
var apiPara = $("<div class='pull-left'>");
apiPara.append($("<h5 class='md-title nomargin'>").html("Api !200"));
apiPara.append($("<h4 class='nomargin'>").html(data[i].apiU200));
apiPara.append($("<h5 class='md-title nomargin'>").html("Api 非200响应"));
apiPara.append($("<h4 class='nomargin' style='margin-left: 20px'>>").html(data[i].apiU200));
parameters.append(apiPara);
var servicePara = $("<div class='pull-left' style='margin-left: 180px'>");
var servicePara = $("<div class='pull-left' style='margin-left: 135px'>");
servicePara.append($("<h5 class='md-title nomargin'>").html("Service !200"));
servicePara.append($("<h5 class='md-title nomargin'>").html("Service 非200响应"));
servicePara.append($("<h4 class='nomargin'>").html(data[i].serviceU200));
servicePara.append($("<h4 class='nomargin' style='margin-left: 20px'>>").html(data[i].serviceU200));
parameters.append(servicePara);
var errorPara = $("<div class='pull-right'>");
errorPara.append($("<h5 class='md-title nomargin'>").html("Error"));
errorPara.append($("<h5 class='md-title nomargin'>").html("Error 总计"));
errorPara.append($("<h4 class='nomargin'>").html(data[i].error));
errorPara.append($("<h4 class='nomargin' style='margin-left: 20px'>").html(data[i].error));
parameters.append(errorPara);
}
... ...
$(
initRabbitSelect()
updateOverView(),
updateClusterView(),
updateQueuesView()
);
function updateOverView(moId) {
function updateOverView() {
$.ajax({
url: contextPath + "rabbitmq/overview",
type: "post",
... ... @@ -20,45 +22,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(
{
... ... @@ -87,8 +88,15 @@ function updateClusterView(moId) {
formatter: function (value, rowData) {
var div = $("<div style='width: 240px;'>").addClass("status-bar");
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.addClass("status-bar-main green")
.html(rowData.fd_used);
if (rowData.fd_used > rowData.fd_total/2)
{
nameDiv.addClass("status-bar-main red");
}
else
{
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.fd_total + " vailable");
div.append(nameDiv);
div.append(nameAvliable);
... ... @@ -102,6 +110,15 @@ function updateClusterView(moId) {
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)
{
nameDiv.addClass("status-bar-main red");
}
else
{
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.sockets_total + " available");
div.append(nameDiv);
div.append(nameAvliable);
... ... @@ -115,7 +132,16 @@ function updateClusterView(moId) {
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.addClass("status-bar-main green")
.html(rowData.proc_used);
var nameAvliable = $("<sub>").html(rowData.proc_used + " available");
if (rowData.proc_used > rowData.proc_total/2)
{
nameDiv.addClass("status-bar-main red");
}
else
{
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.proc_total + " available");
div.append(nameDiv);
div.append(nameAvliable);
return div;
... ... @@ -126,8 +152,15 @@ function updateClusterView(moId) {
formatter: function (value, rowData) {
var div = $("<div style='width: 240px;'>").addClass("status-bar");
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.addClass("status-bar-main green")
.html(rowData.mem_used);
if (rowData.mem_alarm)
{
nameDiv.addClass("status-bar-main red");
}
else
{
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.mem_limit + " vailable");
div.append(nameDiv);
div.append(nameAvliable);
... ... @@ -139,8 +172,16 @@ function updateClusterView(moId) {
formatter: function (value, rowData) {
var div = $("<div style='width: 240px;'>").addClass("status-bar");
var nameDiv = $("<div style='margin-bottom: 5px;background-repeat: no-repeat;'>")
.addClass("status-bar-main green")
.html(rowData.disk_free);
if (rowData.disk_free_alarm)
{
nameDiv.addClass("status-bar-main red");
}
else
{
nameDiv.addClass("status-bar-main green");
}
var nameAvliable = $("<sub>").html(rowData.disk_free_limit + " available");
div.append(nameDiv);
div.append(nameAvliable);
... ... @@ -152,7 +193,7 @@ function updateClusterView(moId) {
});
}
function updateQueuesView(moId) {
function updateQueuesView() {
$("#queueViewTable").table(
{
url: contextPath + "rabbitmq/queueView",
... ... @@ -245,56 +286,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) {
window.location.href = "/?page_type=rabbitInfo&moId=" + id;
}
... ...
... ... @@ -24,9 +24,7 @@
<%--<span>更新时间</span>--%>
<%--</div>--%>
<%--</div>--%>
<%--</div>--%>
</div>
</div>
</div>
... ... @@ -83,6 +81,24 @@
};
var createTimeStr = function (checkTime) {
var now = new Date(); //当前时间
var ctime = new Date(Date.parse(checkTime.replace(/-/g, "/")));
var timediff = now.getTime() - ctime.getTime(); //时间差的毫秒数
var leave1 = timediff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000));//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000));//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
return minutes + " 分钟 " + seconds + " 秒" + "前更新";
}
var refreshDashBoard = function () {
$.ajax({
url: contextPath + "/javaApi/allStatus",
... ... @@ -98,7 +114,9 @@
console.log($("#btn_" + val.cloudType + "_" + val.serviceType));
var btn = $("#btn_" + val.cloudType + "_" + val.serviceType);
if (val.updateTime != undefined && val.updateTime != "") {
$("#span_time_" + val.serviceType).html(val.updateTime.slice(5));
var timestr = createTimeStr(val.updateTime)
$("#span_time_" + val.serviceType).html(timestr);
}
console.log(val);
if (val.errNum > 0) {
... ... @@ -123,15 +141,12 @@
function timer() {
refreshDashBoard();
setTimeout("timer()", 30000);
}
;
setTimeout("timer()", 15000);
};
$(function () {
getJavaAppType();
});
... ...
... ... @@ -32,10 +32,10 @@
<div class="col-md-6" style="width: 90%">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#aws_api" data-toggle="tab"><strong>Api非200</strong></a></li>
<li><a href="#aws_service" data-toggle="tab"><strong>Service非200</strong></a></li>
<li class="active"><a href="#aws_api" data-toggle="tab"><strong>Api非200响应</strong></a></li>
<li><a href="#aws_service" data-toggle="tab"><strong>Service非200响应</strong></a></li>
<li><a href="#aws_error" data-toggle="tab"><strong>Nginx Error</strong></a></li>
<li><a href="#aws_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>
<%--<li><a href="#aws_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>--%>
</ul>
<!-- Tab panes -->
... ... @@ -76,11 +76,11 @@
</div>
</div><!-- tab-pane -->
<div class="tab-pane" id="aws_time">
<%-- <div class="tab-pane" id="aws_time">
<h1 class="nomargin">未完待续......</h1>
<p>Continue.......</p>
</div><!-- tab-pane -->
</div><!-- tab-pane -->--%>
</div><!-- tab-content -->
</div><!-- col-md-6 -->
</div>
... ... @@ -176,7 +176,7 @@
// 指定图表的配置项和数据
var option = {
title: {
text: 'api非200错误',
text: 'Api非200响应',
subtext: '按接口名划分',
x: 'center'
},
... ... @@ -228,35 +228,35 @@
return defaultLoadFilter(data);
},
columns: [{
title: "ApiName",
title: "接口名称",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
return div;
}
}, {
title: "Count",
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
return div;
}
}, {
title: "Total Percent",
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
return div;
}
}, {
title: "VM Percent",
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
return div;
}
}, {
title: "ErrorCode Percent",
title: "响应码占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.codePercent);
... ... @@ -284,7 +284,7 @@
// 指定图表的配置项和数据
var option = {
title: {
text: 'service非200错误',
text: 'Service非200响应',
subtext: '按接口名划分',
x: 'center'
},
... ... @@ -337,35 +337,35 @@
return defaultLoadFilter(data);
},
columns: [{
title: "ApiName",
title: "接口名称",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
return div;
}
}, {
title: "Count",
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
return div;
}
}, {
title: "Total Percent",
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
return div;
}
}, {
title: "VM Percent",
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
return div;
}
}, {
title: "ErrorCode Percent",
title: "响应码占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.codePercent);
... ... @@ -392,7 +392,7 @@
// 指定图表的配置项和数据
var option = {
title: {
text: 'nginx错误',
text: 'Nginx错误',
subtext: '按类型划分',
x: 'center'
},
... ... @@ -443,7 +443,7 @@
return defaultLoadFilter(data);
},
columns: [{
title: "Error type",
title: "错误类型",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
... ... @@ -451,7 +451,7 @@
}
},
{
title: "Count",
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
... ... @@ -459,7 +459,7 @@
}
},
{
title: "Total Percent",
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
... ... @@ -467,7 +467,7 @@
}
},
{
title: "VM Percent",
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
... ...
... ... @@ -31,10 +31,10 @@
<div class="col-md-6" style="width: 90%">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#qc_api" data-toggle="tab"><strong>Api非200</strong></a></li>
<li><a href="#qc_service" data-toggle="tab"><strong>Service非200</strong></a></li>
<li class="active"><a href="#qc_api" data-toggle="tab"><strong>Api 非200响应</strong></a></li>
<li><a href="#qc_service" data-toggle="tab"><strong>Service 非200响应</strong></a></li>
<li><a href="#qc_error" data-toggle="tab"><strong>Nginx Error</strong></a></li>
<li><a href="#qc_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>
<%--<li><a href="#qc_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>--%>
</ul>
<!-- Tab panes -->
... ... @@ -75,11 +75,11 @@
</div>
</div><!-- tab-pane -->
<div class="tab-pane" id="qc_time">
<%--<div class="tab-pane" id="qc_time">
<h4 class="nomargin">Contact title goes here...</h4>
<p>Continue.......</p>
</div><!-- tab-pane -->
</div><!-- tab-pane -->--%>
</div><!-- tab-content -->
</div><!-- col-md-6 -->
</div>
... ... @@ -107,7 +107,6 @@
type: "qc"
},
success: function (response) {
alert(response)
updatePieApi(response.data)
},
error: function (e) {
... ... @@ -167,7 +166,6 @@
var pieData = [];
var pieLend = [];
alert(data)
for (var i = 0; i < data.length; i++) {
pieData.push({name: data[i].name, value: data[i].count});
... ... @@ -176,7 +174,7 @@
// 指定图表的配置项和数据
var option = {
title: {
text: 'api非200错误',
text: 'Api非200响应',
subtext: '按接口名划分',
x: 'center'
},
... ... @@ -228,35 +226,35 @@
return defaultLoadFilter(data);
},
columns: [{
title: "ApiName",
title: "接口名称",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
return div;
}
}, {
title: "Count",
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
return div;
}
}, {
title: "Total Percent",
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
return div;
}
}, {
title: "VM Percent",
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
return div;
}
}, {
title: "ErrorCode Percent",
title: "响应码占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.codePercent);
... ... @@ -284,7 +282,7 @@
// 指定图表的配置项和数据
var option = {
title: {
text: 'service非200错误',
text: 'Service非200响应',
subtext: '按接口名划分',
x: 'center'
},
... ... @@ -337,35 +335,35 @@
return defaultLoadFilter(data);
},
columns: [{
title: "ApiName",
title: "接口名称",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
return div;
}
}, {
title: "Count",
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
return div;
}
}, {
title: "Total Percent",
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
return div;
}
}, {
title: "VM Percent",
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
return div;
}
}, {
title: "ErrorCode Percent",
title: "响应码占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.codePercent);
... ... @@ -392,7 +390,7 @@
// 指定图表的配置项和数据
var option = {
title: {
text: 'nginx错误',
text: 'Nginx错误',
subtext: '按类型划分',
x: 'center'
},
... ... @@ -407,7 +405,7 @@
},
series: [
{
name: 'api占比',
name: '错误占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
... ... @@ -443,7 +441,7 @@
return defaultLoadFilter(data);
},
columns: [{
title: "Error type",
title: "错误类型",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
... ... @@ -451,7 +449,7 @@
}
},
{
title: "Count",
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
... ... @@ -459,7 +457,7 @@
}
},
{
title: "Total Percent",
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
... ... @@ -467,7 +465,7 @@
}
},
{
title: "VM Percent",
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
... ...
... ... @@ -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>
... ...