Added log viewer filter

+ Added filter to log viewer #243
+ Added auto log refresh
This commit is contained in:
Toby Chui 2024-07-31 16:01:49 +08:00
parent 7626857c02
commit 94483acc92
2 changed files with 80 additions and 2 deletions

View File

@ -61,7 +61,7 @@ var (
name = "Zoraxy"
version = "3.1.0"
nodeUUID = "generic" //System uuid, in uuidv4 format
development = false //Set this to false to use embedded web fs
development = true //Set this to false to use embedded web fs
bootTime = time.Now().Unix()
/*

View File

@ -72,6 +72,18 @@
<div class="ui divider"></div>
<div id="logList" class="ui accordion">
</div>
<div class="ui divider"></div>
<h5>Filters</h5>
<button style="margin-top: 0.4em;" filter="system" class="ui fluid basic small button filterbtn"><i class="ui blue info circle icon"></i> System</button>
<button style="margin-top: 0.4em;" filter="request" class="ui fluid basic small button filterbtn"><i class="green exchange icon"></i> Request</button>
<button style="margin-top: 0.4em;" filter="error" class="ui fluid basic small button filterbtn"><i class="red exclamation triangle icon"></i> Error</button>
<button style="margin-top: 0.4em;" filter="all" class="ui fluid basic active small button filterbtn">All</button>
<div class="ui divider"></div>
<div class="ui toggle checkbox">
<input type="checkbox" id="enableAutoScroll" onchange="handleAutoScrollTicker(event, this.checked);">
<label>Auto Refresh<br>
<small>Refresh the viewing log every 10 seconds</small></label>
</div>
<div class="ui divider"></div>
<small>Notes: Some log files might be huge. Make sure you have checked the log file size before opening</small>
@ -89,6 +101,10 @@
</body>
<script>
var currentOpenedLogURL = "";
var currentFilter = "all";
var autoscroll = false;
$(".checkbox").checkbox();
function openLogInNewTab(){
if (currentOpenedLogURL != ""){
@ -105,7 +121,7 @@
alert(data.error);
return;
}
$("#logrender").val(data);
renderLogWithCurrentFilter(data);
});
}
@ -151,5 +167,67 @@
}
return(n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]);
}
//Filter the log and render it to text area based on current filter choice
function renderLogWithCurrentFilter(data){
if (currentFilter == "all"){
$("#logrender").val(data);
}else{
let filterLines = data.split("\n");
let filteredLogFile = "";
for (var i = 0; i < filterLines.length; i++){
const thisLine = filterLines[i];
if (currentFilter == "system" && thisLine.indexOf("[system:") >= 0){
filteredLogFile += thisLine + "\n";
}else if (currentFilter == "request" && thisLine.indexOf("[router:") >= 0){
filteredLogFile += thisLine + "\n";
}else if (currentFilter == "error" && thisLine.indexOf(":error]") >= 0){
filteredLogFile += thisLine + "\n";
}
}
$("#logrender").val(filteredLogFile);
}
var textarea = document.getElementById('logrender');
textarea.scrollTop = textarea.scrollHeight;
}
/* Filter related functions */
$(".filterbtn").on("click", function(evt){
//Set filter type
let filterType = $(this).attr("filter");
currentFilter = (filterType);
$(".filterbtn.active").removeClass("active");
$(this).addClass('active');
//Reload the log with filter
if (currentOpenedLogURL != ""){
$.get(currentOpenedLogURL, function(data){
if (data.error !== undefined){
alert(data.error);
return;
}
renderLogWithCurrentFilter(data);
});
}
});
/* Auto scroll function */
setInterval(function(){
if (autoscroll){
//Update the log and scroll to bottom
if (currentOpenedLogURL != ""){
$.get(currentOpenedLogURL, function(data){
if (data.error !== undefined){
console.log(data.error);
return;
}
renderLogWithCurrentFilter(data);
});
}
}
}, 10000);
function handleAutoScrollTicker(event, checked){
autoscroll = checked;
}
</script>
</html>