ops / monitor-ui · Commits

Go to a project

Authored by simba
Commit 8bc2b4b7f1dce7ac2f1420a5d42368d22ffaba3b 2 parents 3ea9cc50 75b6219b

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

Inline Side-by-side
Showing 8 changed files with 124 additions and 100 deletions
... ... @@ -33,8 +33,7 @@ public class ZkMonitorCtrl {
@RequestMapping("/getZkMonitorRecords")
@ResponseBody
public BaseResponse getZkMonitorRecords(ZkInfoReq req) throws Exception {
BaseResponse response=httpRestClient.defaultGet(HttpUriContants.GET_ZK_INFO, BaseResponse.class,null);
return response;
BaseResponse response=httpRestClient.defaultGet(HttpUriContants.GET_ZK_INFO, BaseResponse.class,null);return response;
}
}
... ...
... ... @@ -26,11 +26,11 @@ a.api_info{
}
div.api_info_container{
padding-left: 5px;
padding-left: 2px;
}
.btn_java_api {
margin-right: 5px;
margin-right: 3px;
}
.item_java_api_title{
... ...
var dataString ='<chart bgcolor="FFFFFF" charttopmargin="0" chartleftmargin="0" chartrightmargin="0" bordercolor="white" canvasbordercolor="white" xAxisMinValue="0" xAxisMaxValue="100" yAxisMinValue="0" yAxisMaxValue="100" bubbleScale="3" is3D="1" viewMode="1" enableLink="1" allowDrag="1" numDivLines="0" showFormBtn="0">\n\
var dataString ='<chart charttopmargin="0" chartBottomMargin="0" chartleftmargin="0" chartrightmargin="0" bordercolor="#FFFFFF" border="0" borderAlpha="0" borderThickness="0" canvasBorderThickness="0" canvasBorderColor="#FFFFFF" showFormBtn="0">\n\
<dataset plotborderAlpha="0" >\n\
<set x="20" y="80" width="120" height="40" name="AWS" color="62D0FE" id="AWS" />\n\
<set x="20" y="70" width="120" height="40" name="twemproxy1" color="62D0FE" id="twemproxy1" />\n\
<set x="40" y="70" width="120" height="40" name="twemproxy2" color="62D0FE" id="twemproxy2" />\n\
<set x="80" y="70" width="120" height="40" name="QCloud" color="62D0FE" link="n-http://www.fusioncharts.com" id="QCloud" />\n\
<set x="12" y="55" width="50" height="40" name="GM1" color="4EC745" link="n-http://www.fusioncharts.com" id="GM1"/>\n\
<set x="22" y="55" width="50" height="40" name="GM2" color="4EC745" link="n-http://www.fusioncharts.com" id="GM2"/>\n\
<set x="32" y="55" width="50" height="40" name="GM3" color="4EC745" link="n-http://www.fusioncharts.com" id="GM3"/>\n\
<set x="42" y="55" width="50" height="40" name="GM4" color="4EC745" link="n-http://www.fusioncharts.com" id="GM4"/>\n\
<set x="70" y="55" width="50" height="40" name="FO1" color="4EC745" link="JavaScript: isJavaScriptCall=true; alert(\'hi JS!\');" id="FO1" />\n\
<set x="90" y="55" width="50" height="40" name="FO2" color="4EC745" link="n-http://www.fusioncharts.com" id="FO2" />\n\
<set x="8" y="70" width="120" height="40" name="172.31.19.49:6379" color="62D0FE" id="172.31.19.49:6379" />\n\
<set x="16" y="70" width="120" height="40" name="172.31.24.61:6379" color="62D0FE" id="172.31.24.61:6379" />\n\
<set x="4" y="55" width="55" height="40" name="172.31.19.49:16379" color="62D0FE" id="172.31.19.49:16379" />\n\
<set x="8" y="55" width="55" height="40" name="172.31.19.49:26379" color="62D0FE" id="172.31.19.49:26379" />\n\
<set x="12" y="55" width="55" height="40" name="172.31.24.61:16379" color="62D0FE" id="172.31.24.61:16379" />\n\
<set x="16" y="55" width="55" height="40" name="172.31.24.61:26379" color="62D0FE" id="172.31.24.61:26379" />\n\
<set x="12" y="80" width="120" height="40" name="AWS" color="62D0FE" id="AWS" tooltext= "AWS" />\n\
<set x="30" y="70" width="120" height="40" name="10.66.4.2:6379" id="10.66.4.2:6379" color="62D0FE"/>\n\
<set x="20" y="55" width="55" height="40" name="10.66.4.2:16379" color="62D0FE" id="10.66.4.2:16379" />\n\
<set x="24" y="55" width="55" height="40" name="10.66.4.2:26379" color="62D0FE" id="10.66.4.2:26379" />\n\
<set x="28" y="55" width="55" height="40" name="10.66.4.10:16379" color="62D0FE" id="10.66.4.10:16379" />\n\
<set x="32" y="55" width="55" height="40" name="10.66.4.10:26379" color="62D0FE" id="10.66.4.10:26379" />\n\
<set x="36" y="55" width="55" height="40" name="10.66.4.11:16379" color="FF3300" id="10.66.4.11:16379" />\n\
<set x="30" y="80" width="120" height="40" name="Qcloud" color="62D0FE" id="Qcloud" tooltext= "null" />\n\
</dataset>\n\
<connectors color="83C6E1" stdThickness="8">\n\
<connector strength="0.45" from="AWS" to="twemproxy1" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="AWS" to="twemproxy2" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="twemproxy1" to="GM1" arrowAtStart="0" arrowAtEnd="0" />\n\
<connector strength="0.45" from="twemproxy1" to="GM2" arrowAtStart="0" arrowAtEnd="0" />\n\
<connector strength="0.45" from="twemproxy1" to="GM3" arrowAtStart="0" arrowAtEnd="0" />\n\
<connector strength="0.45" from="twemproxy1" to="GM4" arrowAtStart="0" arrowAtEnd="0" />\n\
<connector strength="0.45" from="QCloud" to="FO1" arrowAtStart="0" arrowAtEnd="0" />\n\
<connector strength="0.45" from="QCloud" to="FO2" arrowAtStart="0" arrowAtEnd="0" />\n\
<connector strength="0.25" Label="Field Accountant" from="FO2" to="AC2" color="E57042" arrowAtStart="0" arrowAtEnd="0" />\n\
<connector strength="0.25" Label="Mining" from="FO2" to="GRPA" color="D2C12F" arrowAtStart="0" arrowAtEnd="1" />\n\
<connector strength="0.25" Label="Filtering" from="FO2" to="GRPB" color="D2C12F" arrowAtStart="0" arrowAtEnd="1" />\n\
<connector strength="0.25" Label="Drying" from="FO2" to="GRPC" color="D2C12F" arrowAtStart="0" arrowAtEnd="1" />\n\
<connector strength="0.45" from="AWS" to="172.31.19.49:6379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="AWS" to="172.31.24.61:6379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="172.31.19.49:6379" to="172.31.19.49:16379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="172.31.19.49:6379" to="172.31.19.49:26379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="172.31.24.61:6379" to="172.31.24.61:16379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="172.31.24.61:6379" to="172.31.24.61:26379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="AWS" to="AWS" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="Qcloud" to="10.66.4.2:6379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="10.66.4.2:6379" to="10.66.4.2:16379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="10.66.4.2:6379" to="10.66.4.2:26379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="10.66.4.2:6379" to="10.66.4.10:16379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="10.66.4.2:6379" to="10.66.4.10:26379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="10.66.4.2:6379" to="10.66.4.11:16379" arrowAtStart="0" arrowAtEnd="0"/>\n\
<connector strength="0.45" from="Qcloud" to="Qcloud" arrowAtStart="0" arrowAtEnd="0"/>\n\
</connectors>\n\
</chart>';
\ No newline at end of file
... ...
... ... @@ -15,7 +15,7 @@
<label class="col-sm-2 control-label"> <span style="color:red">*</span>url：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="apiUrl" name="apiUrl" placeholder="输入url" maxlength="30"
<input type="text" class="form-control" id="apiUrl" name="apiUrl" placeholder="输入url"
size="40"/>
</div>
</div>
... ...
... ... @@ -57,14 +57,14 @@
var initDashBoard = function (data) {
var div_dash = $(".api_info_container");
$.each(data, function (idx, val) {
var api_info_item = $('<div class="api_info_item col-xs-3 ">');
var api_info_item = $('<div class="api_info_item col-xs-4 ">');
var api_info_item_panel = $(' <div class="panel panel-default">');
var api_info_item_panel_title = $('<div class="item_java_api_title panel-heading">' + val.typeName + '</div>');
var api_info_item_panel_title = $('<div class="item_java_api_title panel-heading">' + val.typeName + '<span style="font-size: medium;float: right;padding-top: 15px"><span id="span_time_' + val.typeId + '"></span></span></div>');
var api_info_item_panel_body = $('<div class="panel-body">');
api_info_item_panel_body.append('<button class="btn_java_api btn btn-lg btn-default" id="btn_1_' + val.typeId + '">AWS &nbsp;<span class="badge"></span></button>');
api_info_item_panel_body.append('<button class="btn_java_api btn btn-lg btn-default" id="btn_2_' + val.typeId + '">QCloud &nbsp;<span class="badge"></span></button>');
api_info_item_panel_body.append('<button class="btn_java_api btn btn-lg btn-default" id="btn_3_' + val.typeId + '">其他 &nbsp;<span class="badge"></span></button>');
api_info_item_panel_body.append('<h5 >更新时间:<span id="span_time_'+val.typeId+'"></span></h5>');
// api_info_item_panel_body.append('<h5 >更新时间:<span id="span_time_'+val.typeId+'"></span></h5>');
api_info_item_panel.append(api_info_item_panel_title)
.append(api_info_item_panel_body);
api_info_item.append(api_info_item_panel);
... ... @@ -97,13 +97,16 @@
$.each(data.data, function (idx, val) {
console.log($("#btn_" + val.cloudType + "_" + val.serviceType));
var btn = $("#btn_" + val.cloudType + "_" + val.serviceType);
$("#span_time_" + val.serviceType).html(val.updateTime);
if (val.updateTime != undefined && val.updateTime != "") {
$("#span_time_" + val.serviceType).html(val.updateTime.slice(5));
}
console.log(val);
if (val.errNum > 0) {
$(btn.children("span")[0]).html(val.errNum)
$(btn.children("span")[0]).html(val.errNum);
btn.removeClass("btn-success");
btn.addClass("btn-danger");
} else {
$(btn.children("span")[0]).html()
$(btn.children("span")[0]).html();
btn.removeClass("btn-danger");
btn.addClass("btn-success");
}
... ... @@ -121,7 +124,8 @@
function timer() {
refreshDashBoard();
setTimeout("timer()", 30000);
};
}
;
$(function () {
... ...
... ... @@ -193,70 +193,76 @@
// container: 'tip_well'
});
var time=statusObj.endTime;
time=time.slice(5);
$("#uptime_" + statusObj.serviceId).html(time);
if (statusObj.endTime != null && statusObj != "") {
var time = statusObj.endTime;
time = time.slice(5);
$("#uptime_" + statusObj.serviceId).html(time);
}
}
var getJavaAppStatus = function () {
var refreshJavaAppStatus = function () {
console.log("refresh status");
if (table_data == null || table_data.rows == undefined)
return;
var reqList = [];
$.each(table_data.rows, function (idx, val) {
if (val.apiToggle == 0) //关闭了
return;
var apps = java_app["" + val.serviceType];
var serviceId = val.serviceId;
var reqList = [];
$.each(apps, function (idx, val) {
reqList.push({
serviceId: serviceId,
mObjectId: val.moId
});
});
});
$.ajax({
url: contextPath + "/javaApi/status?list=" + JSON.stringify(reqList),
type: 'get',
success: function (data) {
//每行就去获取，缩短整个表请求时间
$.ajax({
url: contextPath + "/javaApi/status?list=" + JSON.stringify(reqList),
type: 'get',
success: function (data) {
// console.log(data);
if (!data || data.code != 200) {
if (!data || data.code != 200) {
$.toaster('获取java服务状态失败', '警告', 'warning');
return;
}
$.each(data.data, function (idx, val) {
setStatus(val);
})
},
error: function (data) {
$.toaster('获取java服务状态失败', '警告', 'warning');
return;
}
$.each(data.data, function (idx, val) {
setStatus(val);
})
},
error: function (data) {
$.toaster('获取java服务状态失败', '警告', 'warning');
}
}
});
});
};
var refreshJavaAppStatus = function () {
var createJavaAppStatus = function () {
console.log("refreshJavaAppStatus");
if (table_data == null || table_data.rows == undefined)
return;
$.each(table_data.rows, function (idx, val) {
var apps = java_app["" + val.serviceType];
//创建服务状态
var appDiv = createJavaAppDiv(apps, val.serviceId, val.apiToggle);
$("#status_" + val.serviceId).html("");
$("#status_" + val.serviceId).append(appDiv);
getJavaAppStatus();
});
//更新后刷新服务状态
refreshJavaAppStatus();
};
function timer() {
getJavaAppStatus();
refreshJavaAppStatus();
setTimeout("timer()", 50000);
}
timer();
... ... @@ -278,11 +284,12 @@
return defaultLoadFilter(data);
},
onLoadSuccess: function (data) {
console.log(data);
// console.log(data);
table_data = data;
createJavaAppStatus();
},
onAfterShow: function () {
refreshJavaAppStatus();
//refreshJavaAppStatus();
},
columns: [{
title: "ID",
... ...
... ... @@ -13,14 +13,14 @@
<div class="widget-title">
<h5>Redis监控</h5>
</div>
<div class="widget-content nopadding" style="margin-left: 300px;">
<div class="widget-content nopadding">
<script type="text/javascript" src="/monitor-ui/js/charts/DragNode3.js" ></script>
<div id="chartdiv" align="center" style="width:800px;">
FusionCharts.
</div>
<script type="text/javascript">
var chart = new FusionCharts("/monitor-ui/js/charts/DragNode.swf", "ChartId", "800", "600", "0");
var chart = new FusionCharts("/monitor-ui/js/charts/DragNode.swf", "ChartId", "1650", "650", "0");
chart.setXMLData(dataString );
chart.render("chartdiv");
</script>
... ...
... ... @@ -8,7 +8,7 @@
<div class="widget-box">
<div class="widget-title">
<h5>
Zookeeper服务 DashBoard<a
Zookeeper服务 DashBoard
</h5>
</div>
<div class="widget-content">
... ... @@ -35,42 +35,50 @@
</div>
<script type="text/javascript">
$(function () {
$.ajax({
url: contextPath + "/zkMonitor/getZkMonitorRecords",
type: 'get',
async: false,
dataType: "json",
success: function (data) {
var time="";
var awsHtml = '';
if(data.data.aws != null){
$.each(data.data.aws, function (n, value) {
time=value.redcordTime;
if(value.isLive==0){
awsHtml+='<button class="btn_java_api btn btn-lg btn-default btn-danger">'+value.hostIp+'&nbsp;<span class="badge">失败</span></button>';
}else if(value.isLive==1){
awsHtml+='<button class="btn_java_api btn btn-lg btn-default btn-success">'+value.hostIp+'&nbsp;<span class="badge">好</span></button>';
}
});
}
var qcloudHtml="";
if(data.data.qcloud != null){
$.each(data.data.qcloud, function (n, value) {
if(value.isLive==0){
qcloudHtml+='<button class="btn_java_api btn btn-lg btn-default btn-danger">'+value.hostIp+'&nbsp;<span class="badge">失败</span></button>';
}else if(value.isLive==1){
qcloudHtml+='<button class="btn_java_api btn btn-lg btn-default btn-success">'+value.hostIp+'&nbsp;<span class="badge">好</span></button>';
}
});
}
$("#zkAwsTime").html(time);
$("#zkQCloudTime").html(time);
$("#zkAwsDiv").html(awsHtml);
$("#zkQCloudDiv").html(qcloudHtml);
}
$(function () {
loadZkMonitorData();
timerZkMonitor();
});
});
function loadZkMonitorData(){
$.ajax({
url: contextPath + "/zkMonitor/getZkMonitorRecords",
type: 'get',
async: false,
dataType: "json",
success: function (data) {
var time="";
var awsHtml = '';
if(data.data.aws != null){
$.each(data.data.aws, function (n, value) {
time=value.redcordTime;
if(value.isLive==0){
awsHtml+='<button class="btn_java_api btn btn-lg btn-default btn-danger">'+value.hostIp+'&nbsp;<span class="badge">失败</span></button>';
}else if(value.isLive==1){
awsHtml+='<button class="btn_java_api btn btn-lg btn-default btn-success">'+value.hostIp+'&nbsp;<span class="badge">好</span></button>';
}
});
}
var qcloudHtml="";
if(data.data.qcloud != null){
$.each(data.data.qcloud, function (n, value) {
if(value.isLive==0){
qcloudHtml+='<button class="btn_java_api btn btn-lg btn-default btn-danger">'+value.hostIp+'&nbsp;<span class="badge">失败</span></button>';
}else if(value.isLive==1){
qcloudHtml+='<button class="btn_java_api btn btn-lg btn-default btn-success">'+value.hostIp+'&nbsp;<span class="badge">好</span></button>';
}
});
}
$("#zkAwsTime").html(time);
$("#zkQCloudTime").html(time);
$("#zkAwsDiv").html(awsHtml);
$("#zkQCloudDiv").html(qcloudHtml);
}
});
}
function timerZkMonitor() {
loadZkMonitorData();
setTimeout("timerZkMonitor()", 30000);
}
</script>
\ No newline at end of file
... ...