monitor_list.html
5.03 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html>
<head>
<script>
function enableMonitor(me,guid,enabled){
var iLabel = "";
var title = "";
if(enabled){
iLabel += '<i class="fa fa-play"></i>';
title = "启动";
}else{
iLabel += '<i class="fa fa-pause"></i>';
title = "暂停";
}
$.ajax({
url : "/enableMonitor" , //获取数据列
type : 'GET',
data : {"guid":guid,"enabled":enabled},
success : function(data) {
if(data){
alert("执行成功！");
$(me).empty();
$(me).append(iLabel);
$(me).attr("onclick","enableMonitor(this,'"+guid+"',"+ (!enabled) +")");
$(me).attr("title",title);
}else{
alert("执行失败！");
}
}
});
}
function deleteMonitor(me,guid){
$.ajax({
url : "/deleteMonitor" , //获取数据列
type : 'GET',
data : {"guid":guid},
success : function(data) {
if(data){
alert("删除成功！");
$(me).parent().parent().remove();
}else{
alert("删除失败！");
}
}
});
}
$(function () {
$('#example1').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : true
})
})
</script>
</head>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
API监控
<small>主页</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
<li><a href="/monitorList">API监控</a></li>
<li class="active">监控列表</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">监控列表</h3>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive">
<div class="btn-group" style="margin-bottom:10px;">
<a href="/addSingleMonitor" class="btn btn-default">添加单API监控</a>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="/editSequenceMonitor">添加多API监控</a></li>
</ul>
</div>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>所属系统</th>
<th>类型</th>
<th>名称</th>
<th>状态</th>
<th>监控频率</th>
<th>可用率</th>
<th>平均响应时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="item:${monitorList}">
<td th:text="${item.group}"></td>
<td th:text="${item.type}"></td>
<td><a th:href="'/monitorLog?guid='+${item.guid}+'&name='+${item.name}" th:text="${item.name}"></a></td>
<td><i th:class="'fa fa-circle '+${item.textColor}" th:text="${item.status}"></i></td>
<td th:text="${item.frequency}"></td>
<td th:text="${item.usability}"></td>
<td th:text="${item.avgCostTime}+' 毫秒'"></td>
<td>
<a href="javascript:void(0)" th:onclick="'enableMonitor(this,\''+${item.guid}+'\','+${item.enabled}+')'" style="padding:0px 6px;" data-toggle="tooltip" th:title="${item.enabled==true}? '暂停' : '启动'">
<i th:class="${item.enabled==true}? 'fa fa-pause' : 'fa fa-play'"></i>
</a>
<a th:if="${item.type} eq '单API'" th:href="'/editSingleMonitor?guid='+${item.guid}" style="padding:0px 6px;" data-toggle="tooltip" title="配置"><i class="fa fa-gear"></i></a>
<a th:if="${item.type} eq '多API'" th:href="'/editSequenceMonitor?guid='+${item.guid}" style="padding:0px 6px;" data-toggle="tooltip" title="配置"><i class="fa fa-gear"></i></a>
<a href="javascript:void(0)" th:onclick="'deleteMonitor(this,\''+${item.guid}+'\')'" style="padding:0px 6px;" data-toggle="tooltip" title="删除"><i class="fa fa-trash"></i></a>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
</body>
</html>