ops / monitor-ui · Commits

Go to a project

Authored by jack
Commit 148aaa86a3c3274fe637fa015e0b9ae3dde7d5ae 1 parent d8dd80c0

增加nginx配置同步菜单项

Inline Side-by-side
Showing 3 changed files with 563 additions and 0 deletions
package com.ui.ctrl;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
/**
* Created by yoho on 2016/8/23.
*/
@RestController
@RequestMapping(value = "/nginxSync")
public class NginxSyncCtrl {
@RequestMapping("/toNginxSync")
public ModelAndView toNginxView() {
return new ModelAndView("nginx/nginxSync");
}
}
... ...
<%@ page import="org.aspectj.weaver.ast.Var" %>
<%@ 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 + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
<link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
<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/yoho.css"/>
<script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>/js/unicorn.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/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.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.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>
<link href="<%=basePath %>css/nginxview.css" rel="stylesheet">
<script type="text/javascript" src="<%=basePath %>js/echarts.simple.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/echarts.min.js"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<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 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>
<!-- 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>
<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 class="tab-pane" id="aws_service">
<div id="aws_servicePie" 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_serviceTable">
</table>
</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>
</div>
</div>
</div><!-- tab-pane -->
<%-- <div class="tab-pane" id="aws_time">
<h1 class="nomargin">未完待续......</h1>
<p>Continue.......</p>
</div><!-- tab-pane -->--%>
</div><!-- tab-content -->
</div><!-- col-md-6 -->
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_nginxSync").addClass("active");
</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) {
}
});
updateApiTab();
}
function queryService() {
$.ajax({
url: contextPath + "nginx/servicePie",
type: "post",
dataType: "json",
data: {
type: "aws"
},
success: function (response) {
updatePieService(response.data)
},
error: function (e) {
}
});
updateServiceTab();
}
function queryError() {
$.ajax({
url: contextPath + "nginx/errorPie",
type: "post",
dataType: "json",
data: {
type: "aws"
},
success: function (response) {
updatePieError(response.data)
},
error: function (e) {
}
});
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>
... ...
... ... @@ -20,6 +20,7 @@ innerHTML += "<li id='li_zkMonitor'><a id='li_zkMonitor_a' href=''><i class='ico
innerHTML += "<li id='li_rabbitview'><a id='li_rabbitview_a' href=''><i class='icon icon-th'></i> <span>Rabbitmq监控</span></a></li>";
innerHTML += "<li id='li_redisInfo'><a id='li_redisInfo_a' href=''><i class='icon icon-th'></i> <span>Redis监控</span></a></li>";
innerHTML += "<li id='li_nginxview'><a id='li_nginxview_a' href=''><i class='icon icon-th'></i> <span>Nginx监控</span></a></li>";
innerHTML += "<li id='li_nginxSync'><a id='li_nginxSync_a' href=''><i class='icon icon-th'></i> <span>Nginx配置同步</span></a></li>";
innerHTML += "<li id='li_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>";
/*Hystrix*/
... ... @@ -79,6 +80,8 @@ document.getElementById("li_projectHistory_a").setAttribute("href", path + "/pro
document.getElementById("a_hystrix_aws").setAttribute("href", path + "/hystrix/aws");
document.getElementById("a_hystrix_qcloud").setAttribute("href", path + "/hystrix/qcloud");
document.getElementById("li_dns_monitor_a").setAttribute("href", path + "/dns_monitor/");
document.getElementById("li_nginxSync_a").setAttribute("href", path + "/nginxSync/toNginxSync");
function getUrlBasePath() {
var location = ( window.location + '').split('/');
... ...