mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-09-07 20:56:39 +02:00
Update logview.html
Added more logview logic
This commit is contained in:
Toby Chui
@@ -14,6 +14,15 @@
|
||||
.clickable:hover{
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Panel menu */
|
||||
.logfile_menu_btn{
|
||||
height: 2.8em !important;
|
||||
margin-top: 0.4em !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Log file list */
|
||||
.logfile{
|
||||
padding-left: 1em !important;
|
||||
position: relative;
|
||||
@@ -113,6 +122,14 @@
|
||||
#logfileDropdown {
|
||||
margin-left: 0.4em !important;
|
||||
}
|
||||
|
||||
.logfile_menu_btn{
|
||||
margin-left:0.4em !important;
|
||||
}
|
||||
|
||||
#logfileDropdown{
|
||||
margin-left: 0.4em !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -138,28 +155,38 @@
|
||||
</div>
|
||||
<div class="ui container">
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui stackable secondary menu">
|
||||
<!-- Filter Dropdown -->
|
||||
<div class="ui selection dropdown" id="filterDropdown" style="margin-top:0.4em;">
|
||||
<div class="text">Select Filter</div>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="all"><i class="filter icon"></i> All</div>
|
||||
<div class="item" data-value="system"><i class="blue info circle icon"></i> System</div>
|
||||
<div class="item" data-value="request"><i class="green exchange icon"></i> Request</div>
|
||||
<div class="item" data-value="error"><i class="red exclamation triangle icon"></i> Error</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log File Dropdown -->
|
||||
<div class="ui selection dropdown" id="logfileDropdown" style="margin-top:0.4em;">
|
||||
<div class="text">Select Log File</div>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu" id="logfileDropdownMenu">
|
||||
<!-- Log files will be populated here -->
|
||||
</div>
|
||||
<div class="ui stackable secondary menu">
|
||||
<!-- Filter Dropdown -->
|
||||
<div class="ui selection dropdown" id="filterDropdown" style="margin-top:0.4em;">
|
||||
<div class="text">Select Filter</div>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="all"><i class="filter icon"></i> All</div>
|
||||
<div class="item" data-value="system"><i class="blue info circle icon"></i> System</div>
|
||||
<div class="item" data-value="request"><i class="green exchange icon"></i> Request</div>
|
||||
<div class="item" data-value="error"><i class="red exclamation triangle icon"></i> Error</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log File Dropdown -->
|
||||
<div class="ui selection dropdown" id="logfileDropdown" style="margin-top: 0.4em; height: 2.8em;">
|
||||
<div class="text">Select Log File</div>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu" id="logfileDropdownMenu">
|
||||
<!-- Log files will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Button -->
|
||||
<button class="ui icon basic button logfile_menu_btn" id="downloadLogBtn" title="Download Current Log File">
|
||||
<i class="black download icon"></i>
|
||||
</button>
|
||||
|
||||
<!-- Open in New Tab Button -->
|
||||
<button class="ui icon basic button logfile_menu_btn" onclick="openLogInNewTab();" title="Open in New Tab">
|
||||
<i class="external alternate icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<!-- Dashboard View -->
|
||||
@@ -169,7 +196,6 @@
|
||||
</h3>
|
||||
<div class="ui divider"></div>
|
||||
<p>Welcome to LogVPro! Use the left menu to select a log file </p>
|
||||
|
||||
<div id="analyzer">
|
||||
|
||||
</div>
|
||||
@@ -177,7 +203,18 @@
|
||||
|
||||
<!-- Log Viewer -->
|
||||
<div id="logviewer" class="ui container subpanel" style="display:none;">
|
||||
|
||||
<textarea id="logrender" spellcheck="false" readonly="true">
|
||||
Pick a log file from the menu to start debugging
|
||||
</textarea>
|
||||
<br><br>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
@@ -187,54 +224,21 @@
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="ui container">
|
||||
<div class="ui stackable grid">
|
||||
<div class="four wide column loglist">
|
||||
<h3 class="ui header" style="padding-top: 1em;">
|
||||
<div class="content">
|
||||
Log View
|
||||
<div class="sub header">Check System Log in Real Time</div>
|
||||
</div>
|
||||
</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div class="twelve wide column">
|
||||
<textarea id="logrender" spellcheck="false" readonly="true">
|
||||
← Pick a log file from the left menu to start debugging
|
||||
</textarea>
|
||||
<a href="#" onclick="openLogInNewTab();">Open In New Tab</a>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
|
||||
<div class="ui container">
|
||||
<div class="ui divider"></div>
|
||||
<small>Zoraxy LogVPro - Advance log viewer for Zoraxy log files</small>
|
||||
<br><br><br>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
//LogVPro Implemnetation
|
||||
var currentFilter = "all";
|
||||
var currentOpenedLogURL = "";
|
||||
var currentLogFile = "";
|
||||
var autoscroll = false;
|
||||
|
||||
$(".checkbox").checkbox();
|
||||
|
||||
/* Menu Subpanel Switch */
|
||||
$(".subpanel").hide();
|
||||
@@ -272,7 +276,7 @@
|
||||
$('#logfileDropdown').dropdown({
|
||||
onChange: function(value, text, $choice) {
|
||||
if (value) {
|
||||
openLog(null, $choice.data('category'), value);
|
||||
openLog(null, $choice.data('category'), value, currentFilter || "all");
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -282,47 +286,68 @@
|
||||
$('#filterDropdown').dropdown({
|
||||
onChange: function(value) {
|
||||
currentFilter = value;
|
||||
if (!currentLogFile) {
|
||||
return;
|
||||
}
|
||||
$(".filterbtn.active").removeClass("active");
|
||||
$(`.filterbtn[filter="${value}"]`).addClass("active");
|
||||
if (currentOpenedLogURL != "") {
|
||||
$.get(currentOpenedLogURL, function(data){
|
||||
if (data.error !== undefined){
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
renderLogWithCurrentFilter(data);
|
||||
});
|
||||
}
|
||||
openLog(null, null, currentLogFile, currentFilter);
|
||||
}
|
||||
});
|
||||
|
||||
// Set default filter to "error"
|
||||
$('#filterDropdown').dropdown('set selected', 'error');
|
||||
currentFilter = "error";
|
||||
</script>
|
||||
<script>
|
||||
var autoscroll = false;
|
||||
$('#filterDropdown').dropdown('set selected', 'all');
|
||||
currentFilter = "all";
|
||||
|
||||
$(".checkbox").checkbox();
|
||||
|
||||
function openLogInNewTab(){
|
||||
if (currentOpenedLogURL != ""){
|
||||
window.open(currentOpenedLogURL);
|
||||
/* Log download button */
|
||||
$("#downloadLogBtn").on("click", function() {
|
||||
if (!currentLogFile) {
|
||||
alert("Please select a log file first.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!currentOpenedLogURL) {
|
||||
alert("No log file is currently opened.");
|
||||
return;
|
||||
}
|
||||
$.get(currentOpenedLogURL, function(data) {
|
||||
if (data.error !== undefined) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
let blob = new Blob([data], {type: "text/plain"});
|
||||
let url = URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = currentLogFile || "log.txt";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
function openLog(object, catergory, filename){
|
||||
|
||||
function openLog(object, catergory, filename, filter="all"){
|
||||
$(".logfile.active").removeClass('active');
|
||||
$(object).addClass("active");
|
||||
currentLogFile = filename;
|
||||
currentOpenedLogURL = "/api/log/read?file=" + filename;
|
||||
currentOpenedLogURL = "/api/log/read?file=" + filename + "&filter=" + filter;
|
||||
$.get(currentOpenedLogURL, function(data){
|
||||
if (data.error !== undefined){
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
renderLogWithCurrentFilter(data);
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function openLogInNewTab(){
|
||||
if (currentOpenedLogURL != ""){
|
||||
window.open(currentOpenedLogURL);
|
||||
}
|
||||
}
|
||||
|
||||
function initLogList(){
|
||||
@@ -370,23 +395,7 @@
|
||||
|
||||
//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);
|
||||
}
|
||||
$("#logrender").val(data);
|
||||
var textarea = document.getElementById('logrender');
|
||||
textarea.scrollTop = textarea.scrollHeight;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user