最近需要使用对日志查询,查看各个job进度,弄了一个日志查看工具学习一下。
jsp
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>${rtl}</title>
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/xqb/css/component.3.0.css"/>
<script src="<%=request.getContextPath() %>/js/jquery.js"></script>
<script src="<%=request.getContextPath() %>/xqb/js/jquery.kernel.3.1.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script>
<script type="text/javascript">
var filter = "";
var trace = true;
$(function(){
autoTrace();
if("failed" == "${result}"){
var code = $("<code style='margin:0px !important; '>"
+ ("${msg}" == "" ? "您已经打开了一个数据通道, 不能重复打开" : "${msg}")
+ "</code>").appendTo($("#dataArea"));
code.css({"left": "9.5px", "position":"absolute"});
$("#dataArea").append("<br/>");
return;
}
//刷新数据
refreshData({
start : 0,
ip : "${ip}",
filter : filter,
instance : "${instance}",
channelId : "${channelId}"
})
})
function refreshData(param){
$.post("<%=request.getContextPath() %>/login/security/readLog", param, function(data){
if(data == "login"){
$("#dataArea").append("<code style='left:9.5px; position:absolute'>"
+ "连接超时, 请重新打开通道"
+ "</code>");
$("#dataArea").append("<br/>");
}else{
data = eval("[" + data + "]")[0];
for(var i = 0; i < data.results.length; i++){
var code = $("<code>" + data.results[i] + "</code><br/>").appendTo($("#dataArea"));
if($("#dataArea").data("hasData") != true){
$("#dataArea").data("hasData", true);
code.css({"left": "9.5px", "position":"absolute"});
}
if(trace){
code[0].scrollIntoView();
}
}
param.start = data.index;
setTimeout(function(){
param.filter = filter;
refreshData(param);
}, data.results.length == 0 ? 2000 : 10);
}
});
}
// 打开/关闭自动跟踪最新数据
function autoTrace(){
$(window).resize(function(){
$(".floatMenu").css("left", $("#logContainer").offset().left + $("#logContainer").outerWidth() + 10);
}).trigger("resize");
$("div.pre").height($(".list-group").height());
$(".floatMenu .trace").click(function(){
if($(this).hasClass("off")){
$(this).removeClass("off");
$(this).html("关闭数据跟踪");
trace = true;
}else{
$(this).addClass("off");
trace = false;
$(this).html("开启数据跟踪");
}
});
$("a.filter").click(function(){
if($(this).hasClass("off")){
$(this).removeClass("off");
$(this).html("搜索关键信息");
$("input.filter").val("");
filter = "";
$(".pre").hide();
}else{
$(this).addClass("off");
$(this).html("清除过滤条件");
$(".pre").show();
}
});
$("a.clear").click(function(){
$("#dataArea").empty();
});
var setValue = -1;
$("input.filter").keyup(function(){
if(-1 != setValue){
clearTimeout(setValue);
}
setValue = setTimeout(function(){
filter = $("input.filter").val();
},1000);
})
}
</script>
<style type="text/css">
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
font-family: 微软雅黑;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
.pre input{
display: block;
margin-left:3px;
width: 120px;
font-size: 13px;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="header" style="width: 1100px; height: 62px; margin-left: -550px; left: 50%; margin-top:10px; margin-bottom:5px; position:relative;
background:url('<%=request.getContextPath() %>/img/logo.png'); position: relative; background-repeat: no-repeat;">
<span id="currentUser" style="position:absolute; cursor:pointer; right:30px; bottom: 1px; font-family: 微软雅黑 ; font-size: 14px; ">
<%=(request.getSession().getAttribute("username") == null ? "" : request.getSession().getAttribute("username"))%>
</span>
</div>
<div id="separator" style="width: 100%; height:2px; background-color: black;"></div>
<div class="floatMenu" style="position: fixed; top: 300px; z-index:100;">
<div class="list-group" style="float:left; width: 120px;">
<a class="list-group-item trace" style="font-family: 微软雅黑; cursor: pointer;">关闭数据跟踪</a>
<a class="list-group-item filter" style="font-family: 微软雅黑; cursor: pointer;">搜索关键信息</a>
<a class="list-group-item clear" style="font-family: 微软雅黑; cursor: pointer;">清除历史结果</a>
</div>
<div class="pre" style="float: left; width: 100px; position: relative; height:200px; display: none;">
<input class="filter" style="position: absolute; top: 52px;"/>
</div>
</div>
<div style="width: 1000px; height: auto; margin-left: -500px; margin-top:30px; left: 50%; position: relative; height: 0px;" id="logContainer">
<pre id="dataArea" style="position: relative;">
</pre>
</div>
</body>
</html>