current.js
3.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
queryCurrentInfo();
setInterval("queryCurrentInfo()", 180000);
function queryCurrentInfo() {
removePopoverDiv();
$.ajax({
url : getUrlBasePath() + "/dns_monitor/current",
type: "get",
dataType: "json",
success : function(data) {
var dataObj =eval("(" + data + ")");
updateTimePanel(dataObj.updateTime);
updateDNSView(eval(dataObj.dnsMonitorInfo));
$(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].host, data[i].ips) + "</td>";
html += "</tr>";
}
html += "</tbody><table>";
console.log(html);
document.getElementById("div_table").innerHTML = html;
}
function buildIpsTablesHTML(host, ips) {
var html = "<table class='table' style='margin-bottom: 0'><tbody>";
for(var uid in ips ) {
//uid为1的用户 解析到qcloud的域名， uid为1000的用户，解析到aws的域名
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' style='width: 140px'>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' style='width: 140px; margin-right: 10px'>" + ipList[i].ip + "</button>";
} else {
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' style='width: 140px; margin-right: 10px'>" + ipList[i].ip + "</button></a>";
}
}
html +="</div></td>";
}
//超链接到查询历史记录的界面
html += "<td width='10%'><a style='text-decoration:underline;' href=\"" + getUrlBasePath() + "/dns_monitor/history?host=" + host + "&uid=" + uid + "\"><span style='font-size: large'>history</span></a></td></tr>";
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;
}
}
function updateTimePanel(updateTime) {
document.getElementById("updateTime").innerHTML = updateTime;
}