ops / monitor-ui · Commits

Go to a project

Authored by skinny.wu
Commit 091a50fe5f9bb1895853874bd3b6c55786c2a6d0 1 parent 75b232b4

dns monitor模块 前端页面

Inline Side-by-side
Showing 6 changed files with 235 additions and 2 deletions
... ... @@ -109,4 +109,8 @@ public class HttpUriContants {
public static final String SWITCH_DNS= "/dnspod/doSwitch";
public static final String VALIDE_TOKEN= "/dnspod/validateAPIToken";
/**
* dns monitor
*/
public static final String DNS_MONITOR_CURRENT = "/other/dns_monitor/current";
}
... ...
package com.ui.ctrl;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
/**
* Created by yoho on 2016/8/5.
*/
@Controller
@RequestMapping("dns_monitor")
public class DNSMonitorCtrl {
@Autowired
HttpRestClient httpRestClient;
@RequestMapping("/")
public ModelAndView toDNSMonitorPage() {
return new ModelAndView("dnsmonitor/current");
}
@RequestMapping("/current")
@ResponseBody
public String getCurrentInfo() {
return httpRestClient.defaultGet(
HttpUriContants.DNS_MONITOR_CURRENT, String.class, null);
}
}
... ...
<%--
Created by IntelliJ IDEA.
User: yoho
Date: 2016/8/5
Time: 10:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
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 rel="stylesheet" href="<%=basePath %>css/style.default.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 %>css/font-awesome.min.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"/>
<link href="<%=basePath %>css/nginxview.css" rel="stylesheet">
<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/global.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>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
<style type="text/css">
.table>tbody>tr>td {
vertical-align: inherit;
}
</style>
</head>
<body style="font-size: 14px">
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content" style="background: white">
<div id="breadcrumb" style="background: white">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">DNS Monitor</a>
</div>
<div class="container-fluid">
<div class="widget-box" style="background: white">
<div class="widget-title" style="background: white">
<h5>DNS Monitor状态 (最近5分钟)</h5>
</div>
</div>
<%--<div class="container-fluid">--%>
<div id="div_table">
</div>
</div>
<%--</div>--%>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_dns_monitor").addClass("active");
</script>
<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
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_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>";
/*Hystrix*/
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>";
... ... @@ -75,6 +75,7 @@ document.getElementById("li_nginxswitch_a").setAttribute("href", path + "/nginxs
document.getElementById("li_projectHistory_a").setAttribute("href", path + "/project/toHistory");
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/");
function getUrlBasePath() {
var location = ( window.location + '').split('/');
... ...
queryCurrentInfo();
function queryCurrentInfo() {
removePopoverDiv();
$.ajax({
url : getUrlBasePath() + "/dns_monitor/current",
type: "get",
dataType: "json",
success : function(data) {
updateDNSView(eval(data));
$(function () {
$("[data-toggle='popover']").popover();
});
},
error: function(e) {
}
});
}
function updateDNSView(data) {
var html = "<table class='table table-bordered mb30' valign='middle'><tbody>";
for(var i = 0; i < data.length; i ++) {
html += "<tr><td width='15%' align='center' vertical-align='middle'><span style='font-size:18px;font-weight:bold'>" + data[i].host + "</td>";
html += "<td>" + buildIpsTablesHTML(data[i].ips) + "</td>";
html += "</tr>";
}
html += "</tbody><table>";
console.log(html);
document.getElementById("div_table").innerHTML = html;
}
function buildIpsTablesHTML(ips) {
var html = "<table class='table' style='margin-bottom: 0'><tbody>";
for(var uid in ips ) {
if(uid == 1) {
html += "<tr><td width='10%'><span style='color: darkgray'><strong>QCloud</strong></span></td>";
}else {
html += "<tr><td width='10%'><span style='color: darkgray'><strong>AWS</strong></span></td>";
}
var ipList = ips[uid];
//该uid+host组合下ips为0，则显示告警数据,不为0，则根据每个ip的解析状态显示出来
if(ipList.length == 0) {
html += "<td><button class='btn btn-danger btn-rounded'>NULL</button></td>";
} else {
html += "<td><div class = 'btn-list'>";
for(var i = 0; i < ipList.length; i ++) {
if(ipList[i].status == "SUCCESSED") {
html += "<button class='btn btn-success btn-rounded'>" + ipList[i].ip + "</button>";
} else {
html += "<button class='btn btn-danger btn-rounded'>";
html += "<a data-container='body' data-toggle='popover' data-placement='bottom' title='Detail'";
html += "data-content= '" + ipList[i].info + "'><button class='btn btn-danger btn-rounded'>" + ipList[i].ip + "</button></a>";
}
}
html +="</div></td>";
}
html += "</tr>";
}
html += "</tbody></table>";
return html;
}
//当分页控件被点击时，remove掉之前的popover
function removePopoverDiv() {
var popovers = getClass('div','popover');
if(popovers.length!== 0) {
for(var i = 0; i < popovers.length; i++) {
document.body.removeChild(popovers[i]);
}
}
}
//获得标签名为tagName,类名className的元素的所有内容作为数组输出
function getClass(tagName,className)
{
if(document.getElementsByClassName) //支持这个函数
{ return document.getElementsByClassName(className);
}
else
{ var tags=document.getElementsByTagName(tagName);//获取标签
var tagArr=[];//用于返回类名为className的元素
for(var i=0;i < tags.length; i++)
{
if(tags[i].class == className)
{
tagArr[tagArr.length] = tags[i];//保存满足条件的元素
}
}
return tagArr;
}
}
\ No newline at end of file
... ...
... ... @@ -2,7 +2,7 @@ var myMasterRedis=null;
var mySlaveRedis=null;
loadRedisMonitorData();
setInterval("loadRedisMonitorData()", 30000);
setInterval("loadRedisMonitorData()", 120000);
function loadRedisMonitorData() {
$.ajax({
... ...