ops / monitor-ui · Commits

Go to a project

Authored by zhengyouwei
Commit 1214c0fb4e4be591899519a50197a369b623c67c 2 parents 3bb458f2 091a50fe

lua

Inline Side-by-side
Showing 6 changed files with 235 additions and 2 deletions
@@ -113,4 +113,8 @@ public class HttpUriContants { @@ -113,4 +113,8 @@ public class HttpUriContants {
113 public static final String SWITCH_DNS= "/dnspod/doSwitch"; 113 public static final String SWITCH_DNS= "/dnspod/doSwitch";
114 public static final String VALIDE_TOKEN= "/dnspod/validateAPIToken"; 114 public static final String VALIDE_TOKEN= "/dnspod/validateAPIToken";
115 115
  116 + /**
  117 + * dns monitor
  118 + */
  119 + public static final String DNS_MONITOR_CURRENT = "/other/dns_monitor/current";
116 } 120 }
  1 +package com.ui.ctrl;
  2 +
  3 +import com.ui.contants.HttpUriContants;
  4 +import com.ui.http.HttpRestClient;
  5 +import com.ui.model.BaseResponse;
  6 +import org.springframework.beans.factory.annotation.Autowired;
  7 +import org.springframework.stereotype.Controller;
  8 +import org.springframework.web.bind.annotation.RequestMapping;
  9 +import org.springframework.web.bind.annotation.ResponseBody;
  10 +import org.springframework.web.servlet.ModelAndView;
  11 +
  12 +/**
  13 + * Created by yoho on 2016/8/5.
  14 + */
  15 +@Controller
  16 +@RequestMapping("dns_monitor")
  17 +public class DNSMonitorCtrl {
  18 +
  19 + @Autowired
  20 + HttpRestClient httpRestClient;
  21 +
  22 + @RequestMapping("/")
  23 + public ModelAndView toDNSMonitorPage() {
  24 + return new ModelAndView("dnsmonitor/current");
  25 + }
  26 +
  27 + @RequestMapping("/current")
  28 + @ResponseBody
  29 + public String getCurrentInfo() {
  30 + return httpRestClient.defaultGet(
  31 + HttpUriContants.DNS_MONITOR_CURRENT, String.class, null);
  32 + }
  33 +}
  1 +<%--
  2 + Created by IntelliJ IDEA.
  3 + User: yoho
  4 + Date: 2016/8/5
  5 + Time: 10:10
  6 + To change this template use File | Settings | File Templates.
  7 +--%>
  8 +<%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9 +
  10 +<%
  11 + String path = request.getContextPath();
  12 + String basePath = request.getScheme() + "://"
  13 + + request.getServerName() + ":" + request.getServerPort()
  14 + + path + "/";
  15 +%>
  16 +
  17 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  18 +<html>
  19 +<head>
  20 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  21 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
  22 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
  23 + <link rel="stylesheet" href="<%=basePath %>css/style.default.css"/>
  24 + <link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
  25 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
  26 + <link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
  27 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
  28 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
  29 + <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
  30 + <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
  31 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  32 + <link rel="stylesheet" href="<%=basePath %>css/font-awesome.min.css"/>
  33 + <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
  34 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  35 + <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
  36 + <link href="<%=basePath %>css/nginxview.css" rel="stylesheet">
  37 + <script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
  38 + <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
  39 + <script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
  40 + <script src="<%=basePath %>/js/bootstrap.min.js"></script>
  41 + <script src="<%=basePath %>/js/unicorn.js"></script>
  42 + <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
  43 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
  44 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
  45 + <script>
  46 + var contextPath = '<%=basePath %>';
  47 +
  48 + </script>
  49 + <title>YOHO!运维</title>
  50 + <style type="text/css">
  51 + .table>tbody>tr>td {
  52 + vertical-align: inherit;
  53 + }
  54 + </style>
  55 +</head>
  56 +<body style="font-size: 14px">
  57 +
  58 +<!-- 头部 -->
  59 +<div id="head">
  60 +</div>
  61 +<!-- 右侧具体内容 -->
  62 +<div id="content" style="background: white">
  63 +
  64 + <div id="breadcrumb" style="background: white">
  65 + <a href="#" title="Go to Home" class="tip-bottom"><i
  66 + class="icon-home"></i> Home</a> <a href="#" class="current">DNS Monitor</a>
  67 + </div>
  68 +
  69 + <div class="container-fluid">
  70 +
  71 + <div class="widget-box" style="background: white">
  72 + <div class="widget-title" style="background: white">
  73 + <h5>DNS Monitor状态 (最近5分钟)</h5>
  74 + </div>
  75 + </div>
  76 +
  77 + <%--<div class="container-fluid">--%>
  78 + <div id="div_table">
  79 +
  80 + </div>
  81 + </div>
  82 + <%--</div>--%>
  83 +
  84 +</div>
  85 +</body>
  86 +<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
  87 +<script>
  88 + $("#li_dns_monitor").addClass("active");
  89 +</script>
  90 +
  91 +<script src="<%=basePath %>script/dnsmonitor/current.js"></script>
@@ -20,7 +20,7 @@ innerHTML += "<li id='li_zkMonitor'><a id='li_zkMonitor_a' href=''><i class='ico @@ -20,7 +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 - 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 24
25 /*Hystrix*/ 25 /*Hystrix*/
26 innerHTML += "<li class='submenu' id='li_hystrix'><a id='a_hystrix' href='#'><i class='icon icon-th-list'></i> <span>Hystrix</span><span class='label'>2</span></a>"; 26 innerHTML += "<li class='submenu' id='li_hystrix'><a id='a_hystrix' href='#'><i class='icon icon-th-list'></i> <span>Hystrix</span><span class='label'>2</span></a>";
@@ -76,6 +76,7 @@ document.getElementById("li_luaswitch_a").setAttribute("href", path + "/luaswitc @@ -76,6 +76,7 @@ document.getElementById("li_luaswitch_a").setAttribute("href", path + "/luaswitc
76 document.getElementById("li_projectHistory_a").setAttribute("href", path + "/project/toHistory"); 76 document.getElementById("li_projectHistory_a").setAttribute("href", path + "/project/toHistory");
77 document.getElementById("a_hystrix_aws").setAttribute("href", path + "/hystrix/aws"); 77 document.getElementById("a_hystrix_aws").setAttribute("href", path + "/hystrix/aws");
78 document.getElementById("a_hystrix_qcloud").setAttribute("href", path + "/hystrix/qcloud"); 78 document.getElementById("a_hystrix_qcloud").setAttribute("href", path + "/hystrix/qcloud");
  79 +document.getElementById("li_dns_monitor_a").setAttribute("href", path + "/dns_monitor/");
79 80
80 function getUrlBasePath() { 81 function getUrlBasePath() {
81 var location = ( window.location + '').split('/'); 82 var location = ( window.location + '').split('/');
  1 +queryCurrentInfo();
  2 +
  3 +function queryCurrentInfo() {
  4 + removePopoverDiv();
  5 +
  6 + $.ajax({
  7 + url : getUrlBasePath() + "/dns_monitor/current",
  8 + type: "get",
  9 + dataType: "json",
  10 + success : function(data) {
  11 + updateDNSView(eval(data));
  12 + $(function () {
  13 + $("[data-toggle='popover']").popover();
  14 + });
  15 + },
  16 + error: function(e) {
  17 +
  18 + }
  19 + });
  20 +}
  21 +
  22 +function updateDNSView(data) {
  23 +
  24 + var html = "<table class='table table-bordered mb30' valign='middle'><tbody>";
  25 +
  26 + for(var i = 0; i < data.length; i ++) {
  27 + html += "<tr><td width='15%' align='center' vertical-align='middle'><span style='font-size:18px;font-weight:bold'>" + data[i].host + "</td>";
  28 + html += "<td>" + buildIpsTablesHTML(data[i].ips) + "</td>";
  29 + html += "</tr>";
  30 + }
  31 + html += "</tbody><table>";
  32 + console.log(html);
  33 + document.getElementById("div_table").innerHTML = html;
  34 +}
  35 +
  36 +function buildIpsTablesHTML(ips) {
  37 + var html = "<table class='table' style='margin-bottom: 0'><tbody>";
  38 +
  39 + for(var uid in ips ) {
  40 +
  41 + if(uid == 1) {
  42 + html += "<tr><td width='10%'><span style='color: darkgray'><strong>QCloud</strong></span></td>";
  43 + }else {
  44 + html += "<tr><td width='10%'><span style='color: darkgray'><strong>AWS</strong></span></td>";
  45 + }
  46 +
  47 + var ipList = ips[uid];
  48 +
  49 + //该uid+host组合下ips为0，则显示告警数据,不为0，则根据每个ip的解析状态显示出来
  50 + if(ipList.length == 0) {
  51 + html += "<td><button class='btn btn-danger btn-rounded'>NULL</button></td>";
  52 + } else {
  53 +
  54 + html += "<td><div class = 'btn-list'>";
  55 +
  56 + for(var i = 0; i < ipList.length; i ++) {
  57 + if(ipList[i].status == "SUCCESSED") {
  58 + html += "<button class='btn btn-success btn-rounded'>" + ipList[i].ip + "</button>";
  59 + } else {
  60 + html += "<button class='btn btn-danger btn-rounded'>";
  61 + html += "<a data-container='body' data-toggle='popover' data-placement='bottom' title='Detail'";
  62 + html += "data-content= '" + ipList[i].info + "'><button class='btn btn-danger btn-rounded'>" + ipList[i].ip + "</button></a>";
  63 + }
  64 + }
  65 + html +="</div></td>";
  66 + }
  67 +
  68 + html += "</tr>";
  69 + }
  70 +
  71 + html += "</tbody></table>";
  72 + return html;
  73 +}
  74 +
  75 +//当分页控件被点击时，remove掉之前的popover
  76 +function removePopoverDiv() {
  77 + var popovers = getClass('div','popover');
  78 +
  79 + if(popovers.length!== 0) {
  80 + for(var i = 0; i < popovers.length; i++) {
  81 + document.body.removeChild(popovers[i]);
  82 + }
  83 + }
  84 +}
  85 +
  86 +//获得标签名为tagName,类名className的元素的所有内容作为数组输出
  87 +function getClass(tagName,className)
  88 +{
  89 + if(document.getElementsByClassName) //支持这个函数
  90 + { return document.getElementsByClassName(className);
  91 + }
  92 + else
  93 + { var tags=document.getElementsByTagName(tagName);//获取标签
  94 + var tagArr=[];//用于返回类名为className的元素
  95 + for(var i=0;i < tags.length; i++)
  96 + {
  97 + if(tags[i].class == className)
  98 + {
  99 + tagArr[tagArr.length] = tags[i];//保存满足条件的元素
  100 + }
  101 + }
  102 + return tagArr;
  103 + }
  104 +}
@@ -2,7 +2,7 @@ var myMasterRedis=null; @@ -2,7 +2,7 @@ var myMasterRedis=null;
2 var mySlaveRedis=null; 2 var mySlaveRedis=null;
3 3
4 loadRedisMonitorData(); 4 loadRedisMonitorData();
5 -setInterval("loadRedisMonitorData()", 30000); 5 +setInterval("loadRedisMonitorData()", 120000);
6 6
7 function loadRedisMonitorData() { 7 function loadRedisMonitorData() {
8 $.ajax({ 8 $.ajax({