|
|
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
59
60
61
62
63
64
65
|
</li>
<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>
<li>
|
|
|
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
|
<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()"
shiro:hasPermission="apilog:apiLog:remove">
<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",
|
|
|
104
105
106
107
|
detailUrl: prefix + "/list/{id}",
// createUrl: prefix + "/add",
// updateUrl: prefix + "/edit/{id}",
// removeUrl: prefix + "/remove",
|
|
|
108
|
modalName: "接口调用日志",
|
|
|
109
110
|
pageSize: 30,
columns: [
|
|
|
111
112
|
{
field: 'id',
|
|
|
113
114
115
116
117
118
119
120
|
title: 'id',
visible: true
},
{
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
|
|
|
121
|
actions.push('<a class="btn btn-success btn-xs " href="#" onclick="$.operate.detail(' + row.id + ')">详情</a> ');
|
|
|
122
123
|
return actions.join('');
}
|
|
|
124
125
|
},
{
|
|
|
126
127
128
129
|
field: 'requestFrom',
title: 'from'
},
{
|
|
|
130
131
132
|
field: 'apiName',
title: 'API'
},
|
|
|
133
|
/**
|
|
|
134
135
136
137
|
{
field: 'ip',
title: 'IP'
},
|
|
|
138
|
**/
|
|
|
139
|
|
|
|
140
141
142
143
|
{
field: 'responseBy',
title: 'to'
},
|
|
|
144
|
/**
|
|
|
145
146
147
148
|
{
field: 'url',
title: '请求地址'
},
|
|
|
149
|
**/
|
|
|
150
151
|
{
field: 'httpCode',
|
|
|
152
153
154
155
156
157
158
159
160
161
162
|
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(" ")
}
|
|
|
163
164
165
|
},
{
field: 'retCode',
|
|
|
166
167
168
169
170
171
172
173
174
175
176
|
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(" ")
}
|
|
|
177
178
179
180
181
|
},
{
field: 'requestTime',
title: '请求时间'
},
|
|
|
182
|
/**
|
|
|
183
184
185
186
|
{
field: 'responseTime',
title: '响应时间'
},
|
|
|
187
|
**/
|
|
|
188
189
|
{
field: 'duration',
|
|
|
190
191
192
193
194
195
196
197
198
199
200
|
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(" ")
}
|
|
|
201
|
},
|
|
|
202
|
/**
|
|
|
203
204
|
{
field: 'requestHeader',
|
|
|
205
|
title: '请求头'
|
|
|
206
|
},
|
|
|
207
|
**/
|
|
|
208
209
210
|
{
field: 'requestBody',
|
|
|
211
212
213
|
title: '请求内容',
formatter: function(value, row, index) {
var actions = [];
|
|
|
214
|
if(value == undefined || value == '')
|
|
|
215
|
value = " "
|
|
|
216
217
|
else
actions.push('<pre style="max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>')
|
|
|
218
219
|
return actions.join(" ")
}
|
|
|
220
|
},
|
|
|
221
|
/**
|
|
|
222
223
224
225
226
227
|
{
field: 'responseHeader',
title: '响应头'
},
**/
{
|
|
|
228
229
230
231
232
233
|
field: 'responseBody',
title: '响应内容',
formatter: function(value, row, index) {
var actions = [];
if(value == undefined)
value = " "
|
|
|
234
235
|
else
actions.push('<pre style="vertical-align: top; max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>')
|
|
|
236
237
|
return actions.join(" ")
}
|
|
|
238
|
},
|
|
|
239
|
|
|
|
240
|
{
|
|
|
241
242
243
|
field: 'exceptionMsg',
title: '异常信息',
formatter: function(value, row, index) {
|
|
|
244
|
var actions = [];
|
|
|
245
246
|
if(value == undefined)
value = " "
|
|
|
247
248
|
else
actions.push('<span style="color:red">'+value+ '</span>')
|
|
|
249
|
return actions.join(" ")
|
|
|
250
|
}
|
|
|
251
252
|
}
]
|
|
|
253
254
255
|
};
$.table.init(options);
});
|
|
|
256
|
|
|
|
257
|
/**
|
|
|
258
259
260
261
|
function parseJson(obj){
var str = obj.innerHTML
try {
str = JSON.parse(str);
|
|
|
262
|
obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="unParse(this)">' + JSON.stringify(str, null, 2) + '</pre>';
|
|
|
263
264
|
}catch (e) {
str = str.split("&").join(" ")
|
|
|
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
|
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');
|
|
|
284
|
}
|
|
|
285
286
|
transfer.blur();
document.body.removeChild(transfer);
|
|
|
287
|
}
|
|
|
288
289
290
|
</script>
</body>
</html>
|
