diff --git a/src/main/resources/templates/monitor/apilog/apilog.html b/src/main/resources/templates/monitor/apilog/apilog.html index 17be3f0..0812c31 100644 --- a/src/main/resources/templates/monitor/apilog/apilog.html +++ b/src/main/resources/templates/monitor/apilog/apilog.html @@ -118,11 +118,15 @@ align: 'center', formatter: function (value, row, index) { var actions = []; - actions.push('<a class="btn btn-success btn-xs " href="#" onclick="$.operate.detail(\'' + row.id + '\')">详情</a> '); + actions.push('<a class="btn btn-success btn-xs " href="#" onclick="$.operate.detail(' + row.id + ')">详情</a> '); return actions.join(''); } }, { + field: 'requestFrom', + title: 'from' + }, + { field: 'apiName', title: 'API' }, @@ -132,10 +136,7 @@ title: 'IP' }, **/ - { - field: 'requestFrom', - title: 'from' - }, + { field: 'responseBy', title: 'to' @@ -212,7 +213,7 @@ var actions = []; if(value == undefined) value = " " - actions.push('<pre style="white-space: pre-wrap; width:400px" ondblclick="parseJson(this)" title="双击格式化">'+value+ '</pre>') + actions.push('<pre style="white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>') return actions.join(" ") } }, @@ -229,7 +230,7 @@ var actions = []; if(value == undefined) value = " " - actions.push('<pre style="white-space: pre-wrap; width:400px" ondblclick="parseJson(this)" title="双击格式化">'+value+ '</pre>') + actions.push('<pre style="white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>') return actions.join(" ") } }, @@ -250,15 +251,36 @@ $.table.init(options); }); + /** function parseJson(obj){ var str = obj.innerHTML try { str = JSON.parse(str); - obj.outerHTML = '<pre style="white-space: pre-wrap; width:400px">' + JSON.stringify(str, null, 2) + '</pre>'; + obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="unParse(this)">' + JSON.stringify(str, null, 2) + '</pre>'; }catch (e) { str = str.split("&").join(" ") - obj.outerHTML = '<pre style="white-space: pre-wrap; width:400px">' + str + '</pre>'; + 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'); } + transfer.blur(); + document.body.removeChild(transfer); } </script> </body> diff --git a/src/main/resources/templates/monitor/apilog/detail.html b/src/main/resources/templates/monitor/apilog/detail.html index 942d3dc..9036e8c 100644 --- a/src/main/resources/templates/monitor/apilog/detail.html +++ b/src/main/resources/templates/monitor/apilog/detail.html @@ -13,6 +13,9 @@ .green{ color:green; } + .hideCopy{ + display: none; + } </style> </head> <body class="white-bg"> @@ -28,7 +31,7 @@ </div> <div class=""> <label class="col-sm-2 mylabel">请求方ip:</label> - <label class="col-sm-10" th:text="${apiLog.getIp()}==null?' ':${apiLog.getIp()} + ' '"></label> + <label class="col-sm-10" th:text="${#strings.defaultString(apiLog.getIp(), ' ')} + ' '"></label> </div> <div class=""> <label class="col-sm-2 mylabel">调用方向:</label> @@ -36,15 +39,15 @@ </div> <div class=""> <label class="col-sm-2 mylabel">Method:</label> - <label class="col-sm-10" th:text="${apiLog.getApiMethod()}"></label> + <label class="col-sm-10" th:text="${#strings.defaultString(apiLog.getApiMethod(),' ')}"></label> </div> <div class=""> <label class="col-sm-2 mylabel">接口地址:</label> - <label class="col-sm-10" th:text="${apiLog.getUrl()}"></label> + <label class="col-sm-10" th:text="${#strings.defaultString(apiLog.getUrl(), ' ')}"></label> </div> <div class=""> <label class="col-sm-2 mylabel">请求时间:</label> - <label class="col-sm-10" th:text="${#dates.format(apiLog.requestTime, 'yyyy-MM-dd HH:mm:ss')}"></label> + <label class="col-sm-10" th:text="${#strings.defaultString(#dates.format(apiLog.requestTime, 'yyyy-MM-dd HH:mm:ss'), ' ')}"></label> </div> <!--<div class="">--> <!--<label class="col-sm-2 mylabel">响应时间:</label>--> @@ -52,31 +55,36 @@ <!--</div>--> <div class="" th:classappend="${apiLog.getDuration()}>=1000?'red'"> <label class="col-sm-2 mylabel">耗时:</label> - <label class="col-sm-10" th:text="${apiLog.getDuration()} + ' 毫秒'"></label> + <label class="col-sm-10" th:text="${#strings.defaultString(apiLog.getDuration(), ' ')} + ' 毫秒'"></label> </div> <div class="" th:classappend="${apiLog.getHttpCode()}=='200'?'green':'red'"> <label class="col-sm-2 mylabel">HttpCode:</label> - <label class="col-sm-10" th:text="${apiLog.getHttpCode()}==null?' ':${apiLog.getHttpCode()}"></label> + <label class="col-sm-10" th:text="${#strings.defaultString(apiLog.getHttpCode(), ' ')}"></label> </div> <div class="" th:classappend="${apiLog.getRetCode()}=='200'?'green':'red'"> <label class="col-sm-2 mylabel">RetCode:</label> - <label class="col-sm-10" th:text="${apiLog.getRetCode()}==null?' ':${apiLog.getRetCode()}"></label> + <label class="col-sm-10" th:text="${#strings.defaultString(apiLog.getRetCode(), ' ')}"></label> </div> <div class=""> - <label class="col-sm-2 mylabel">请求头:</label> - <div class="col-sm-10"><pre style="white-space: pre-wrap;" th:text="${apiLog.getRequestHeader()}"></pre></div> + <label class="col-sm-2 mylabel">请求头: + </label> + <div class="col-sm-9"><pre id="reqHeader" style="white-space: pre-wrap;" th:text="${apiLog.getRequestHeader()}"></pre></div> + <div class="col-sm-1 "><a class="btn btn-success btn-xs" th:classappend="${#strings.isEmpty(apiLog.getRequestHeader())}?' hideCopy':''" href="javacript:void(0);" onclick="copy('reqHeader')">复制</a></div> </div> <div class=""> <label class="col-sm-2 mylabel">响应头:</label> - <div class="col-sm-10"><pre style="white-space: pre-wrap;" th:text="${apiLog.getResponseHeader()}"></pre></div> + <div class="col-sm-9"><pre id="respHeader" style="white-space: pre-wrap;" th:text="${apiLog.getResponseHeader()}"></pre></div> + <div class="col-sm-1 "><a class="btn btn-success btn-xs" th:classappend="${#strings.isEmpty(apiLog.getResponseHeader())}?' hideCopy':''" href="javacript:void(0);" onclick="copy('respHeader')">复制</a></div> </div> <div class=""> <label class="col-sm-2 mylabel">请求内容:</label> - <div class="col-sm-10"><pre id="preReqBody" style="white-space: pre-wrap;" th:text="${apiLog.getRequestBody()}"></pre></div> + <div class="col-sm-9"><pre id="reqBody" style="white-space: pre-wrap;" th:text="${apiLog.getRequestBody()}"></pre></div> + <div class="col-sm-1 "><a class="btn btn-success btn-xs" th:classappend="${#strings.isEmpty(apiLog.getRequestBody())}?' hideCopy':''" href="javacript:void(0);" onclick="copy('reqBody')">复制</a></div> </div> <div class=""> <label class="col-sm-2 mylabel">响应内容:</label> - <div class="col-sm-10"><pre id="preRespBody" style="white-space: pre-wrap;" th:text="${apiLog.getResponseBody()}"></pre></div> + <div class="col-sm-9"><pre id="respBody" style="white-space: pre-wrap;" th:text="${apiLog.getResponseBody()}"></pre></div> + <div class="col-sm-1 "><a class="btn btn-success btn-xs" th:classappend="${#strings.isEmpty(apiLog.getResponseBody())}?' hideCopy':''" href="javacript:void(0);" onclick="copy('respBody')">复制</a></div> </div> <!--<div class="">--> <!--<label class="col-sm-2 mylabel">httpCode:</label>--> @@ -89,7 +97,8 @@ <!--</div>--> <div class="" th:classappend="${apiLog.getException()}!=null?'red'"> <label class="col-sm-2 mylabel">异常信息:</label> - <div class="col-sm-10"><pre style="white-space: pre-wrap;" th:text="${apiLog.getException()}"></pre></div> + <div class="col-sm-9"><pre id="exception" style="white-space: pre-wrap;" th:text="${apiLog.getException()}"></pre></div> + <div class="col-sm-1 "><a class="btn btn-success btn-xs" th:classappend="${#strings.isEmpty(apiLog.getException())}?' hideCopy':''" href="javacript:void(0);" onclick="copy('exception')">复制</a></div> </div> </div> </div> @@ -108,8 +117,25 @@ } } - parseJson(document.getElementById("preReqBody")) - parseJson(document.getElementById("preRespBody")) + parseJson(document.getElementById("reqBody")) + parseJson(document.getElementById("respBody")) + + function copy(id) { + var obj = document.getElementById(id) + if(obj.innerHTML == "") + return; + let transfer = document.createElement('textarea'); + document.body.appendChild(transfer); + transfer.value = obj.innerHTML; + // transfer.focus(); + transfer.select(); + if (document.execCommand('copy')) { + document.execCommand('copy'); + } + transfer.blur(); + document.body.removeChild(transfer); + $.modal.alertSuccess("复制成功"); + } </script> </body> </html> \ No newline at end of file