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
  1 +package com.ui.ctrl;
  2 +
  3 +import org.springframework.web.bind.annotation.RequestMapping;
  4 +import org.springframework.web.bind.annotation.RestController;
  5 +import org.springframework.web.servlet.ModelAndView;
  6 +
  7 +/**
  8 + * Created by yoho on 2016/8/23.
  9 + */
  10 +@RestController
  11 +@RequestMapping(value = "/nginxSync")
  12 +public class NginxSyncCtrl {
  13 +
  14 + @RequestMapping("/toNginxSync")
  15 + public ModelAndView toNginxView() {
  16 + return new ModelAndView("nginx/nginxSync");
  17 + }
  18 +}
  1 +<%@ page import="org.aspectj.weaver.ast.Var" %>
  2 +<%@ page language="java" contentType="text/html; charset=UTF-8"
  3 + pageEncoding="UTF-8" %>
  4 +<%
  5 + String path = request.getContextPath();
  6 + String basePath = request.getScheme() + "://"
  7 + + request.getServerName() + ":" + request.getServerPort()
  8 + + path + "/";
  9 +%>
  10 +
  11 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  12 +<html>
  13 +<head>
  14 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  15 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
  16 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
  17 + <link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
  18 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
  19 + <link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
  20 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
  21 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
  22 + <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
  23 + <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
  24 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  25 + <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
  26 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  27 + <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
  28 + <script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
  29 + <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
  30 + <script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
  31 + <script src="<%=basePath %>/js/bootstrap.min.js"></script>
  32 + <script src="<%=basePath %>/js/unicorn.js"></script>
  33 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
  34 + type="text/javascript"></script>
  35 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
  36 + type="text/javascript"></script>
  37 + <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
  38 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
  39 + type="text/javascript"></script>
  40 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
  41 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
  42 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
  43 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
  44 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
  45 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
  46 + type="text/javascript"></script>
  47 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
  48 + type="text/javascript"></script>
  49 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
  50 + type="text/javascript"></script>
  51 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
  52 + <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
  53 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
  54 + <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
  55 + <script src="<%=basePath %>js/jquery.toaster.js"></script>
  56 + <link href="<%=basePath %>css/nginxview.css" rel="stylesheet">
  57 + <script type="text/javascript" src="<%=basePath %>js/echarts.simple.min.js"></script>
  58 + <script type="text/javascript" src="<%=basePath %>js/echarts.min.js"></script>
  59 + <script>
  60 + var contextPath = '<%=basePath %>';
  61 +
  62 + </script>
  63 + <title>YOHO!运维</title>
  64 +</head>
  65 +<body>
  66 +
  67 +<!-- 头部 -->
  68 +<div id="head">
  69 +</div>
  70 +<!-- 右侧具体内容 -->
  71 +<div id="content">
  72 +
  73 +<div id="breadcrumb">
  74 + <a href="#" title="Go to Home" class="tip-bottom"><i
  75 + class="icon-home"></i> Home</a> <a
  76 + href="#" class="current">nginx</a>
  77 +</div>
  78 +
  79 +<div class="container-fluid">
  80 + <div class="widget-box">
  81 + <div class="widget-title">
  82 + <h5>Nginx详情 <font color="red">(最近2分钟)</font></h5>
  83 + <a href="javascript:window.open('http://kibana.yoho.cn/')" style="float: right"><h5>查看日志详情</h5></a>
  84 + </div>
  85 + <div class="container-fluid">
  86 + <div class="row-fluid">
  87 + <div class="col-md-6" style="width: 90%">
  88 + <!-- Nav tabs -->
  89 + <ul class="nav nav-tabs">
  90 + <li class="active"><a href="#aws_api" data-toggle="tab"><strong>Api非200响应</strong></a></li>
  91 + <li><a href="#aws_service" data-toggle="tab"><strong>Service非200响应</strong></a></li>
  92 + <li><a href="#aws_error" data-toggle="tab"><strong>Nginx Error</strong></a></li>
  93 + <%--<li><a href="#aws_time" data-toggle="tab"><strong>Request TimeRank</strong></a></li>--%>
  94 + </ul>
  95 +
  96 + <!-- Tab panes -->
  97 + <div class="tab-content mb30">
  98 + <div class="tab-pane active" id="aws_api">
  99 + <div id="aws_apiPie" style="width: 800px; height: 400px; margin-left: 30%"></div>
  100 +
  101 + <div class="section section-visible" style="float:right">
  102 + <div class="hider updatable" style="display:block;">
  103 + <table class="table table-bordered table-striped table-hover"
  104 + id="aws_apiTable">
  105 + </table>
  106 + </div>
  107 + </div>
  108 +
  109 + </div><!-- tab-pane -->
  110 +
  111 + <div class="tab-pane" id="aws_service">
  112 + <div id="aws_servicePie" style="width: 800px; height: 400px;margin-left: 30%"></div>
  113 +
  114 + <div class="section section-visible" style="float:right">
  115 + <div class="hider updatable" style="display:block;">
  116 + <table class="table table-bordered table-striped table-hover"
  117 + id="aws_serviceTable">
  118 + </table>
  119 + </div>
  120 + </div>
  121 + </div><!-- tab-pane -->
  122 +
  123 + <div class="tab-pane" id="aws_error">
  124 + <div id="aws_errorPie" style="width: 800px; height: 400px;margin-left: 30%"></div>
  125 + <div class="section section-visible" style="float:right">
  126 + <div class="hider updatable" style="display:block;">
  127 + <table class="table table-bordered table-striped table-hover"
  128 + id="aws_errorTable">
  129 + </table>
  130 + </div>
  131 + </div>
  132 + </div><!-- tab-pane -->
  133 +
  134 +<%-- <div class="tab-pane" id="aws_time">
  135 + <h1 class="nomargin">未完待续......</h1>
  136 + <p>Continue.......</p>
  137 +
  138 + </div><!-- tab-pane -->--%>
  139 + </div><!-- tab-content -->
  140 + </div><!-- col-md-6 -->
  141 + </div>
  142 +
  143 + </div>
  144 + </div>
  145 +
  146 +</div>
  147 +</div>
  148 +</body>
  149 +<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
  150 +<script>
  151 + $("#li_nginxSync").addClass("active");
  152 +</script>
  153 +<script type="text/javascript">
  154 + $(
  155 + queryApi(),
  156 + queryService(),
  157 + queryError()
  158 + );
  159 +
  160 +
  161 + function queryApi() {
  162 + $.ajax({
  163 + url: contextPath + "nginx/apiPie",
  164 + type: "post",
  165 + dataType: "json",
  166 + data: {
  167 + type: "aws"
  168 + },
  169 + success: function (response) {
  170 + updatePieApi(response.data)
  171 + },
  172 + error: function (e) {
  173 +
  174 + }
  175 + });
  176 +
  177 +
  178 + updateApiTab();
  179 + }
  180 +
  181 +
  182 + function queryService() {
  183 + $.ajax({
  184 + url: contextPath + "nginx/servicePie",
  185 + type: "post",
  186 + dataType: "json",
  187 + data: {
  188 + type: "aws"
  189 + },
  190 + success: function (response) {
  191 + updatePieService(response.data)
  192 + },
  193 + error: function (e) {
  194 +
  195 + }
  196 + });
  197 +
  198 + updateServiceTab();
  199 + }
  200 +
  201 +
  202 + function queryError() {
  203 + $.ajax({
  204 + url: contextPath + "nginx/errorPie",
  205 + type: "post",
  206 + dataType: "json",
  207 + data: {
  208 + type: "aws"
  209 + },
  210 + success: function (response) {
  211 + updatePieError(response.data)
  212 + },
  213 + error: function (e) {
  214 +
  215 + }
  216 + });
  217 +
  218 + updateErrorTable();
  219 + }
  220 +
  221 + function updatePieApi(data) {
  222 +
  223 + // 基于准备好的dom，初始化echarts实例
  224 + var myChartApi = echarts.init(document.getElementById('aws_apiPie'));
  225 +
  226 + var pieData = [];
  227 +
  228 + var pieLend = [];
  229 +
  230 + for (var i = 0; i < data.length; i++) {
  231 + pieData.push({name: data[i].name, value: data[i].count});
  232 +
  233 + pieLend.push(data[i].name);
  234 + }
  235 + // 指定图表的配置项和数据
  236 + var option = {
  237 + title: {
  238 + text: 'Api非200响应',
  239 + subtext: '按接口名划分',
  240 + x: 'center'
  241 + },
  242 + tooltip: {
  243 + trigger: 'item',
  244 + formatter: "{a} <br/>{b} : {c} ({d}%)"
  245 + },
  246 + legend: {
  247 + orient: 'vertical',
  248 + left: 'left',
  249 + data: pieLend
  250 + },
  251 + series: [
  252 + {
  253 + name: 'api占比',
  254 + type: 'pie',
  255 + radius: '55%',
  256 + center: ['50%', '60%'],
  257 + data: pieData,
  258 + itemStyle: {
  259 + emphasis: {
  260 + shadowBlur: 10,
  261 + shadowOffsetX: 0,
  262 + shadowColor: 'rgba(0, 0, 0, 0.5)'
  263 + }
  264 + }
  265 + }
  266 + ]
  267 + };
  268 + myChartApi.setOption(option);
  269 +
  270 + }
  271 +
  272 +
  273 +
  274 + function updateApiTab() {
  275 + $("#aws_apiTable").table(
  276 + {
  277 + url: contextPath + "nginx/apiTab",
  278 + queryParams : {
  279 + type: "aws"
  280 + }, //调用url传递的参数
  281 + method : "POST", //提交方式
  282 + striped: true,
  283 + panelClass: "panel-success",
  284 + pagination: true,
  285 + pageSize: 5,
  286 + loadFilter: function (data) {
  287 + return defaultLoadFilter(data);
  288 + },
  289 + columns: [{
  290 + title: "接口名称",
  291 + formatter: function (value, rowData) {
  292 + /*alert(rowData.name);*/
  293 + var div = $("<div align='center'>").html(rowData.name);
  294 + return div;
  295 + }
  296 + }, {
  297 + title: "总计",
  298 + formatter: function (value, rowData) {
  299 + /*alert(rowData.name);*/
  300 + var div = $("<div align='center'>").html(rowData.count);
  301 + return div;
  302 + }
  303 + }, {
  304 + title: "总占比",
  305 + formatter: function (value, rowData) {
  306 + /*alert(rowData.name);*/
  307 + var div = $("<div align='center'>").html(rowData.totalPercent);
  308 + return div;
  309 + }
  310 + }, {
  311 + title: "各主机占比",
  312 + formatter: function (value, rowData) {
  313 + /*alert(rowData.name);*/
  314 + var div = $("<div align='center'>").html(rowData.logIpPercent);
  315 + return div;
  316 + }
  317 + }, {
  318 + title: "响应码占比",
  319 + formatter: function (value, rowData) {
  320 + /*alert(rowData.name);*/
  321 + var div = $("<div align='center'>").html(rowData.codePercent);
  322 + return div;
  323 + }
  324 + }
  325 + ]
  326 + }
  327 + )
  328 +
  329 + }
  330 +
  331 + function updatePieService(data) {
  332 + var myChartServie = echarts.init(document.getElementById('aws_servicePie'));
  333 +
  334 + var pieData = [];
  335 +
  336 + var pieLend = [];
  337 +
  338 + for (var i = 0; i < data.length; i++) {
  339 + pieData.push({name: data[i].name, value: data[i].count});
  340 +
  341 + pieLend.push(data[i].name);
  342 + }
  343 + // 指定图表的配置项和数据
  344 + var option = {
  345 + title: {
  346 + text: 'Service非200响应',
  347 + subtext: '按接口名划分',
  348 + x: 'center'
  349 + },
  350 + tooltip: {
  351 + trigger: 'item',
  352 + formatter: "{a} <br/>{b} : {c} ({d}%)"
  353 + },
  354 + legend: {
  355 + orient: 'vertical',
  356 + left: 'left',
  357 + data: pieLend
  358 + },
  359 + series: [
  360 + {
  361 + name: 'api占比',
  362 + type: 'pie',
  363 + radius: '55%',
  364 + center: ['50%', '60%'],
  365 + data: pieData,
  366 + itemStyle: {
  367 + emphasis: {
  368 + shadowBlur: 10,
  369 + shadowOffsetX: 0,
  370 + shadowColor: 'rgba(0, 0, 0, 0.5)'
  371 + }
  372 + }
  373 + }
  374 + ]
  375 + };
  376 + myChartServie.setOption(option);
  377 + }
  378 +
  379 +
  380 +
  381 +
  382 + function updateServiceTab() {
  383 +
  384 + $("#aws_serviceTable").table(
  385 + {
  386 + url: contextPath + "nginx/serviceTab",
  387 + queryParams : {
  388 + type: "aws"
  389 + }, //调用url传递的参数
  390 + method : "POST", //提交方式
  391 + striped: true,
  392 + panelClass: "panel-success",
  393 + pagination: true,
  394 + pageSize: 5,
  395 + loadFilter: function (data) {
  396 + return defaultLoadFilter(data);
  397 + },
  398 + columns: [{
  399 + title: "接口名称",
  400 + formatter: function (value, rowData) {
  401 + /*alert(rowData.name);*/
  402 + var div = $("<div align='center'>").html(rowData.name);
  403 + return div;
  404 + }
  405 + }, {
  406 + title: "总计",
  407 + formatter: function (value, rowData) {
  408 + /*alert(rowData.name);*/
  409 + var div = $("<div align='center'>").html(rowData.count);
  410 + return div;
  411 + }
  412 + }, {
  413 + title: "总占比",
  414 + formatter: function (value, rowData) {
  415 + /*alert(rowData.name);*/
  416 + var div = $("<div align='center'>").html(rowData.totalPercent);
  417 + return div;
  418 + }
  419 + }, {
  420 + title: "各主机占比",
  421 + formatter: function (value, rowData) {
  422 + /*alert(rowData.name);*/
  423 + var div = $("<div align='center'>").html(rowData.logIpPercent);
  424 + return div;
  425 + }
  426 + }, {
  427 + title: "响应码占比",
  428 + formatter: function (value, rowData) {
  429 + /*alert(rowData.name);*/
  430 + var div = $("<div align='center'>").html(rowData.codePercent);
  431 + return div;
  432 + }
  433 + }
  434 + ]
  435 + }
  436 + )
  437 +
  438 + }
  439 + function updatePieError(data) {
  440 + var myChartError = echarts.init(document.getElementById('aws_errorPie'));
  441 +
  442 + var pieData = [];
  443 +
  444 + var pieLend = [];
  445 +
  446 + for (var i = 0; i < data.length; i++) {
  447 + pieData.push({name: data[i].name, value: data[i].count});
  448 +
  449 + pieLend.push(data[i].name);
  450 + }
  451 + // 指定图表的配置项和数据
  452 + var option = {
  453 + title: {
  454 + text: 'Nginx错误',
  455 + subtext: '按类型划分',
  456 + x: 'center'
  457 + },
  458 + tooltip: {
  459 + trigger: 'item',
  460 + formatter: "{a} <br/>{b} : {c} ({d}%)"
  461 + },
  462 + legend: {
  463 + orient: 'vertical',
  464 + left: 'left',
  465 + data: pieLend
  466 + },
  467 + series: [
  468 + {
  469 + name: 'api占比',
  470 + type: 'pie',
  471 + radius: '55%',
  472 + center: ['50%', '60%'],
  473 + data: pieData,
  474 + itemStyle: {
  475 + emphasis: {
  476 + shadowBlur: 10,
  477 + shadowOffsetX: 0,
  478 + shadowColor: 'rgba(0, 0, 0, 0.5)'
  479 + }
  480 + }
  481 + }
  482 + ]
  483 + };
  484 +
  485 + myChartError.setOption(option);
  486 + }
  487 +
  488 +
  489 + function updateErrorTable() {
  490 + $("#aws_errorTable").table(
  491 + {
  492 + url: contextPath + "nginx/errTab",
  493 + queryParams : {
  494 + type: "aws"
  495 + }, //调用url传递的参数
  496 + method : "POST",
  497 + striped: true,
  498 + panelClass: "panel-success",
  499 + pagination: true,
  500 + pageSize: 5,
  501 + loadFilter: function (data) {
  502 + return defaultLoadFilter(data);
  503 + },
  504 + columns: [{
  505 + title: "错误类型",
  506 + formatter: function (value, rowData) {
  507 + /*alert(rowData.name);*/
  508 + var div = $("<div align='center'>").html(rowData.name);
  509 + return div;
  510 + }
  511 + },
  512 + {
  513 + title: "总计",
  514 + formatter: function (value, rowData) {
  515 + /*alert(rowData.name);*/
  516 + var div = $("<div align='center'>").html(rowData.count);
  517 + return div;
  518 + }
  519 + },
  520 + {
  521 + title: "总占比",
  522 + formatter: function (value, rowData) {
  523 + /*alert(rowData.name);*/
  524 + var div = $("<div align='center'>").html(rowData.totalPercent);
  525 + return div;
  526 + }
  527 + },
  528 + {
  529 + title: "各主机占比",
  530 + formatter: function (value, rowData) {
  531 + /*alert(rowData.name);*/
  532 + var div = $("<div align='center'>").html(rowData.logIpPercent);
  533 + return div;
  534 + }
  535 + }
  536 + ]
  537 + });
  538 + }
  539 +</script>
  540 +</body>
  541 +</html>
  542 +
@@ -20,6 +20,7 @@ innerHTML += "<li id='li_zkMonitor'><a id='li_zkMonitor_a' href=''><i class='ico @@ -20,6 +20,7 @@ innerHTML += "<li id='li_zkMonitor'><a id='li_zkMonitor_a' href=''><i class='ico
20 innerHTML += "<li id='li_rabbitview'><a id='li_rabbitview_a' href=''><i class='icon icon-th'></i> <span>Rabbitmq监控</span></a></li>"; 20 innerHTML += "<li id='li_rabbitview'><a id='li_rabbitview_a' href=''><i class='icon icon-th'></i> <span>Rabbitmq监控</span></a></li>";
21 innerHTML += "<li id='li_redisInfo'><a id='li_redisInfo_a' href=''><i class='icon icon-th'></i> <span>Redis监控</span></a></li>"; 21 innerHTML += "<li id='li_redisInfo'><a id='li_redisInfo_a' href=''><i class='icon icon-th'></i> <span>Redis监控</span></a></li>";
22 innerHTML += "<li id='li_nginxview'><a id='li_nginxview_a' href=''><i class='icon icon-th'></i> <span>Nginx监控</span></a></li>"; 22 innerHTML += "<li id='li_nginxview'><a id='li_nginxview_a' href=''><i class='icon icon-th'></i> <span>Nginx监控</span></a></li>";
  23 +innerHTML += "<li id='li_nginxSync'><a id='li_nginxSync_a' href=''><i class='icon icon-th'></i> <span>Nginx配置同步</span></a></li>";
23 innerHTML += "<li id='li_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>"; 24 innerHTML += "<li id='li_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>";
24 25
25 /*Hystrix*/ 26 /*Hystrix*/
@@ -79,6 +80,8 @@ document.getElementById("li_projectHistory_a").setAttribute("href", path + "/pro @@ -79,6 +80,8 @@ document.getElementById("li_projectHistory_a").setAttribute("href", path + "/pro
79 document.getElementById("a_hystrix_aws").setAttribute("href", path + "/hystrix/aws"); 80 document.getElementById("a_hystrix_aws").setAttribute("href", path + "/hystrix/aws");
80 document.getElementById("a_hystrix_qcloud").setAttribute("href", path + "/hystrix/qcloud"); 81 document.getElementById("a_hystrix_qcloud").setAttribute("href", path + "/hystrix/qcloud");
81 document.getElementById("li_dns_monitor_a").setAttribute("href", path + "/dns_monitor/"); 82 document.getElementById("li_dns_monitor_a").setAttribute("href", path + "/dns_monitor/");
  83 +document.getElementById("li_nginxSync_a").setAttribute("href", path + "/nginxSync/toNginxSync");
  84 +
82 85
83 function getUrlBasePath() { 86 function getUrlBasePath() {
84 var location = ( window.location + '').split('/'); 87 var location = ( window.location + '').split('/');