|
|
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
|
<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 select-info">
<form id="formId">
<div class="select-list">
<ul>
<li>
<label>API：</label>
<select name="apiName">
<option value=""></option>
<option th:each="item:${@apiLogService.getApiNameList()}" th:value="${item}" th:text="${item}"></option>
</select>
</li>
<li>
<label>请求方：</label>
<select name="requestFrom">
<option value=""></option>
<option th:each="item:${@apiLogService.getRequestFromList()}" th:value="${item}" th:text="${item}"></option>
</select>
</li>
<li>
<label>响应方：</label>
<select name="responseBy">
<option value=""></option>
<option th:each="item:${@apiLogService.getResponseByList()}" th:value="${item}" th:text="${item}"></option>
</select>
</li>
<li>
<label>httpCode：</label>
<select name="httpCode">
<option value=""></option>
<option th:each="item:${@apiLogService.getHttpCodeList()}" th:value="${item}" th:text="${item}"></option>
</select>
</li>
<li>
<label>retCode：</label>
<select name="retCode">
<option value=""></option>
|
|
|
44
|
<option th:each="item:${@apiLogService.getRetCodeList()}" th:value="${item}" th:text="${item}"></option>
|
|
|
45
46
47
|
</select>
</li>
<li>
|
|
|
48
49
50
51
52
53
54
55
|
<label>异常：</label>
<select name="hasException">
<option value=""></option>
<option value="1">有异常</option>
<option value="0">无异常</option>
</select>
</li>
<li>
|
|
|
56
57
|
<label>响应时间 > </label>
<input type="text" name="paramDuration" placeholder="1000毫秒"/>
|
|
|
58
|
</li>
|
|
|
59
60
61
62
63
64
65
|
<li>
<label>请求内容：</label>
<input type="text" name="requestBody" placeholder="请求内容"/>
</li>
<li>
<label>响应内容：</label>
<input type="text" name="responseBody" placeholder="响应内容"/>
|
|
|
66
|
</li>
|
|
|
67
68
69
70
71
72
|
<!-- <li class="time">-->
<!-- <label>请求时间：</label>-->
<!-- <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="beginRequestTime"/>-->
<!-- <span>-</span>-->
<!-- <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endRequestTime"/>-->
<!-- </li>-->
|
|
|
73
|
<li>
|
|
|
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group hidden-xs" id="toolbar" role="group">
<a class="btn btn-outline btn-success btn-rounded" onclick="$.operate.add()"
shiro:hasPermission="apilog:apiLog:add">
<i class="fa fa-plus"></i> 新增
</a>
<a class="btn btn-outline btn-primary single disabled" onclick="$.operate.edit()"
shiro:hasPermission="apilog:apilog:edit">
<i class="fa fa-edit"></i> 修改
</a>
<a class="btn btn-outline btn-danger btn-rounded multiple disabled" onclick="$.operate.batRemove()"
|
|
|
93
|
shiro:hasPermission="monitor:apiLog:remove">
|
|
|
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<i class="fa fa-trash-o"></i> 删除
</a>
</div>
<div class="col-sm-12 select-info table-striped">
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('apilog:apiLog:edit')}]];
var removeFlag = [[${@permission.hasPermi('apilog:apiLog:remove')}]];
var prefix = ctx + "monitor/apilog"
$(function () {
var options = {
url: prefix + "/list",
|
|
|
112
113
114
|
detailUrl: prefix + "/list/{id}",
// createUrl: prefix + "/add",
// updateUrl: prefix + "/edit/{id}",
|
|
|
115
|
removeUrl: prefix + "/remove",
|
|
|
116
|
modalName: "接口调用日志",
|
|
|
117
|
pageSize: 10,
|
|
|
118
119
120
|
columns: [{
checkbox: true
},
|
|
|
121
122
|
{
field: 'id',
|
|
|
123
124
125
126
127
128
129
130
|
title: 'id',
visible: true
},
{
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
|
|
|
131
|
actions.push('<a class="btn btn-success btn-xs " href="#" onclick="$.operate.detail(' + row.id + ')">详情</a> ');
|
|
|
132
133
|
return actions.join('');
}
|
|
|
134
135
|
},
{
|
|
|
136
137
138
139
|
field: 'requestFrom',
title: 'from'
},
{
|
|
|
140
141
142
|
field: 'apiName',
title: 'API'
},
|
|
|
143
|
/**
|
|
|
144
145
146
147
|
{
field: 'ip',
title: 'IP'
},
|
|
|
148
|
**/
|
|
|
149
|
|
|
|
150
151
152
153
|
{
field: 'responseBy',
title: 'to'
},
|
|
|
154
|
/**
|
|
|
155
156
157
158
|
{
field: 'url',
title: '请求地址'
},
|
|
|
159
|
**/
|
|
|
160
161
|
{
field: 'httpCode',
|
|
|
162
163
164
165
166
167
168
169
170
171
172
|
title: 'http',
formatter: function(value, row, index) {
var actions = [];
var style = "style='color:green'"
if(value>200)
style = " style='color:red'";
if(value == undefined)
value = " "
actions.push('<span '+ style + '>'+value+ '</span>')
return actions.join(" ")
}
|
|
|
173
174
175
|
},
{
field: 'retCode',
|
|
|
176
177
178
179
180
181
182
183
184
185
186
|
title: 'ret',
formatter: function(value, row, index) {
var actions = [];
var style = "style='color:green'"
if(value>200)
style = " style='color:red'";
if(value == undefined)
value = " "
actions.push('<span '+ style + '>'+value+ '</span>')
return actions.join(" ")
}
|
|
|
187
188
189
190
191
|
},
{
field: 'requestTime',
title: '请求时间'
},
|
|
|
192
|
/**
|
|
|
193
194
195
196
|
{
field: 'responseTime',
title: '响应时间'
},
|
|
|
197
|
**/
|
|
|
198
199
|
{
field: 'duration',
|
|
|
200
201
202
203
204
205
206
207
208
209
210
|
title: '耗时',
formatter: function(value, row, index) {
var actions = [];
var style = ""
if(value>1000)
style = " style='color:red'";
if(value == undefined)
value = " "
actions.push('<span '+ style + ' title="毫秒">'+value+ '</span>')
return actions.join(" ")
}
|
|
|
211
|
},
|
|
|
212
|
/**
|
|
|
213
214
|
{
field: 'requestHeader',
|
|
|
215
|
title: '请求头'
|
|
|
216
|
},
|
|
|
217
|
**/
|
|
|
218
219
220
|
{
field: 'requestBody',
|
|
|
221
222
223
|
title: '请求内容',
formatter: function(value, row, index) {
var actions = [];
|
|
|
224
|
if(value == undefined || value == '')
|
|
|
225
|
value = " "
|
|
|
226
227
|
else
actions.push('<pre style="max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>')
|
|
|
228
229
|
return actions.join(" ")
}
|
|
|
230
|
},
|
|
|
231
|
/**
|
|
|
232
233
234
235
236
237
|
{
field: 'responseHeader',
title: '响应头'
},
**/
{
|
|
|
238
239
240
241
242
243
|
field: 'responseBody',
title: '响应内容',
formatter: function(value, row, index) {
var actions = [];
if(value == undefined)
value = " "
|
|
|
244
245
|
else
actions.push('<pre style="vertical-align: top; max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>')
|
|
|
246
247
|
return actions.join(" ")
}
|
|
|
248
|
},
|
|
|
249
|
|
|
|
250
|
{
|
|
|
251
252
253
|
field: 'exceptionMsg',
title: '异常信息',
formatter: function(value, row, index) {
|
|
|
254
|
var actions = [];
|
|
|
255
256
|
if(value == undefined)
value = " "
|
|
|
257
258
|
else
actions.push('<span style="color:red">'+value+ '</span>')
|
|
|
259
|
return actions.join(" ")
|
|
|
260
|
}
|
|
|
261
262
|
}
]
|
|
|
263
264
265
|
};
$.table.init(options);
});
|
|
|
266
|
|
|
|
267
|
/**
|
|
|
268
269
270
271
|
function parseJson(obj){
var str = obj.innerHTML
try {
str = JSON.parse(str);
|
|
|
272
|
obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="unParse(this)">' + JSON.stringify(str, null, 2) + '</pre>';
|
|
|
273
274
|
}catch (e) {
str = str.split("&").join(" ")
|
|
|
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
|
obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="unParse(this)">' + str + '</pre>';
}
}
function unParse(obj) {
var str = obj.innerHTML;
obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="parseJson(this)" title="双击格式化">'+str.replaceAll("\n","")+ '</pre>'
}
**/
function copy(obj) {
let transfer = document.createElement('textarea');
document.body.appendChild(transfer);
transfer.value = obj.innerHTML;
// transfer.focus();
transfer.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
|
|
|
294
|
}
|
|
|
295
296
|
transfer.blur();
document.body.removeChild(transfer);
|
|
|
297
|
}
|
|
|
298
299
300
|
</script>
</body>
</html>
|
