ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit f0ac2580fa0cc6933bf3873927553249955b69ec 1 parent 148aaa86

调整nginx配置同步前台

Inline Side-by-side
Showing 1 changed file with 111 additions and 423 deletions
... ... @@ -70,80 +70,81 @@
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a
href="#" class="current">nginx</a>
</div>
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a
href="#" class="current">Nginx配置同步</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Nginx详情 <font color="red">(最近2分钟)</font></h5>
<a href="javascript:window.open('http://kibana.yoho.cn/')" style="float: right"><h5>查看日志详情</h5></a>
</div>
<div class="container-fluid">
<div class="row-fluid">
<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><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>--%>
</ul>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Nginx配置同步</h5>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-6" style="width: 90%">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#nginx" data-toggle="tab"><strong>Nginx</strong></a></li>
<li><a href="#dns_nginx" data-toggle="tab"><strong>DNS-Nginx</strong></a></li>
<li><a href="#h5_nginx" data-toggle="tab"><strong>H5-Nginx</strong></a></li>
<%--<li><a href="#aws_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>--%>
</ul>
<!-- Tab panes -->
<div class="tab-content mb30">
<div class="tab-pane active" id="nginx">
<div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px">
<textarea id="resultArea" rows="30" cols="120"
style="background-color: black; color: white;resize: none"
readonly="readonly"></textarea>
</div>
<!-- Tab panes -->
<div class="tab-content mb30">
<div class="tab-pane active" id="aws_api">
<div id="aws_apiPie" style="width: 800px; height: 400px; margin-left: 30%"></div>
<button id="nginx_btn" class="btn btn-success btn-rounded"
style="margin-top: 10px; margin-bottom: 10px;margin-left: 50%"
onclick="btn_click('nginx_btn','resultArea')">Run
</button>
<div class="section section-visible" style="float:right">
<div class="hider updatable" style="display:block;">
<table class="table table-bordered table-striped table-hover"
id="aws_apiTable">
</table>
</div>
</div>
</div><!-- tab-pane -->
</div><!-- tab-pane -->
<div class="tab-pane" id="aws_service">
<div id="aws_servicePie" style="width: 800px; height: 400px;margin-left: 30%"></div>
<div class="tab-pane" id="dns_nginx">
<div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px">
<div class="section section-visible" style="float:right">
<div class="hider updatable" style="display:block;">
<table class="table table-bordered table-striped table-hover"
id="aws_serviceTable">
</table>
<textarea id="dns_resultArea" rows="30" cols="120"
style="background-color: black; color: white;resize: none"
readonly="readonly"></textarea>
</div>
</div>
</div><!-- tab-pane -->
<div class="tab-pane" id="aws_error">
<div id="aws_errorPie" style="width: 800px; height: 400px;margin-left: 30%"></div>
<div class="section section-visible" style="float:right">
<div class="hider updatable" style="display:block;">
<table class="table table-bordered table-striped table-hover"
id="aws_errorTable">
</table>
<button id="dns_btn" class="btn btn-success btn-rounded"
style="margin-top: 10px; margin-bottom: 10px;margin-left: 50%"
onclick="btn_click('dns_btn','dns_resultArea')">Run
</button>
</div><!-- tab-pane -->
<div class="tab-pane" id="h5_nginx">
<div class="section section-visible" style="margin-bottom: 10px;margin-top: 10px">
<textarea id="h5_resultArea" rows="30" cols="120"
style="background-color: black; color: white;resize: none"
readonly="readonly"></textarea>
</div>
</div>
</div><!-- tab-pane -->
<%-- <div class="tab-pane" id="aws_time">
<h1 class="nomargin">未完待续......</h1>
<p>Continue.......</p>
<button id="h5_btn" class="btn btn-success btn-rounded"
style="margin-top: 10px; margin-bottom: 10px; margin-left: 50%"
onclick="btn_click('h5_btn','h5_resultArea')">Run
</button>
</div><!-- tab-pane -->
</div><!-- tab-content -->
</div><!-- col-md-6 -->
</div>
</div><!-- tab-pane -->--%>
</div><!-- tab-content -->
</div><!-- col-md-6 -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
... ... @@ -152,390 +153,77 @@
</script>
<script type="text/javascript">
$(
queryApi(),
queryService(),
queryError()
);
function queryApi() {
$.ajax({
url: contextPath + "nginx/apiPie",
type: "post",
dataType: "json",
data: {
type: "aws"
},
success: function (response) {
updatePieApi(response.data)
},
error: function (e) {
}
});
);
function btn_click(btnId, txtId) {
console.log(btnId);
updateApiTab();
}
var btn = document.getElementById(btnId);
btn.disabled = true;
function queryService() {
$.ajax({
url: contextPath + "nginx/servicePie",
url: getUrlBasePath() + "/rabbitmq/allRabbitMq",
type: "post",
dataType: "json",
data: {
type: "aws"
moType: "qc"
},
success: function (response) {
updatePieService(response.data)
},
error: function (e) {
}
});
var logView = document.getElementById(txtId);
var interval = setInterval(function (){
$.ajax({
url: 'getbuildmsg?messageid=' + obj.data.id + '&project=' + cproject,
type: 'POST',
dataType: 'json',
success: function (data3) {
var obj2 = eval("(" + data3 + ")");
var messagedata = obj2.data;
var currproject = messagedata.currentProject;
if (currproject != cproject) {
$("#currentproject").val(currproject);//更换当前的项目
$("#show-" + cproject + "-div").attr("class", "ckbox ckbox-success");
$("#show-" + currproject + "-div").attr("class", "ckbox ckbox-warning");
$("#resultArea").val("")
}
if (messagedata.message != "") {
var d = $("#resultArea").val();
$("#resultArea").val(d + messagedata.message);
var scrollTop = $("#resultArea")[0].scrollHeight;
$("#resultArea").scrollTop(scrollTop);
}
updateServiceTab();
}
//code为2 ,则结束
var code = obj2.code;
var message = obj2.message;
if (code == 2) {
$("#submit-btn").show();
$("#cancel-btn").hide();
$("#show-" + cproject + "-div").attr("class", "ckbox ckbox-success");
document.getElementById("task-info-div").innerHTML = "<strong>'"+ message +"'</strong>";
clearInterval(interval);
alert("Success to execute job...");
btn.disabled = false;
}
},
error: function (e) {
alert("从后台获取数据出错");
}
});
function queryError() {
$.ajax({
url: contextPath + "nginx/errorPie",
type: "post",
dataType: "json",
data: {
type: "aws"
},
success: function (response) {
updatePieError(response.data)
},1000);
},
error: function (e) {
alert("Failed to execute job...");
btn.disabled = false;
}
});
updateErrorTable();
}
function updatePieApi(data) {
// 基于准备好的dom，初始化echarts实例
var myChartApi = echarts.init(document.getElementById('aws_apiPie'));
var pieData = [];
var pieLend = [];
for (var i = 0; i < data.length; i++) {
pieData.push({name: data[i].name, value: data[i].count});
pieLend.push(data[i].name);
}
// 指定图表的配置项和数据
var option = {
title: {
text: 'Api非200响应',
subtext: '按接口名划分',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: pieLend
},
series: [
{
name: 'api占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChartApi.setOption(option);
}
function updateApiTab() {
$("#aws_apiTable").table(
{
url: contextPath + "nginx/apiTab",
queryParams : {
type: "aws"
}, //调用url传递的参数
method : "POST", //提交方式
striped: true,
panelClass: "panel-success",
pagination: true,
pageSize: 5,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
columns: [{
title: "接口名称",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
return div;
}
}, {
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
return div;
}
}, {
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
return div;
}
}, {
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
return div;
}
}, {
title: "响应码占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.codePercent);
return div;
}
}
]
}
)
}
function updatePieService(data) {
var myChartServie = echarts.init(document.getElementById('aws_servicePie'));
var pieData = [];
var pieLend = [];
for (var i = 0; i < data.length; i++) {
pieData.push({name: data[i].name, value: data[i].count});
pieLend.push(data[i].name);
}
// 指定图表的配置项和数据
var option = {
title: {
text: 'Service非200响应',
subtext: '按接口名划分',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: pieLend
},
series: [
{
name: 'api占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChartServie.setOption(option);
}
function updateServiceTab() {
$("#aws_serviceTable").table(
{
url: contextPath + "nginx/serviceTab",
queryParams : {
type: "aws"
}, //调用url传递的参数
method : "POST", //提交方式
striped: true,
panelClass: "panel-success",
pagination: true,
pageSize: 5,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
columns: [{
title: "接口名称",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
return div;
}
}, {
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
return div;
}
}, {
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
return div;
}
}, {
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
return div;
}
}, {
title: "响应码占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.codePercent);
return div;
}
}
]
}
)
}
function updatePieError(data) {
var myChartError = echarts.init(document.getElementById('aws_errorPie'));
var pieData = [];
var pieLend = [];
for (var i = 0; i < data.length; i++) {
pieData.push({name: data[i].name, value: data[i].count});
pieLend.push(data[i].name);
}
// 指定图表的配置项和数据
var option = {
title: {
text: 'Nginx错误',
subtext: '按类型划分',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: pieLend
},
series: [
{
name: 'api占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChartError.setOption(option);
}
function updateErrorTable() {
$("#aws_errorTable").table(
{
url: contextPath + "nginx/errTab",
queryParams : {
type: "aws"
}, //调用url传递的参数
method : "POST",
striped: true,
panelClass: "panel-success",
pagination: true,
pageSize: 5,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
columns: [{
title: "错误类型",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.name);
return div;
}
},
{
title: "总计",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.count);
return div;
}
},
{
title: "总占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.totalPercent);
return div;
}
},
{
title: "各主机占比",
formatter: function (value, rowData) {
/*alert(rowData.name);*/
var div = $("<div align='center'>").html(rowData.logIpPercent);
return div;
}
}
]
});
}
</script>
</body>
</html>
... ...