alazhar/LogViewer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

rev1

Browse Source
This commit is contained in:
Al Azhar
2026-04-27 19:01:18 +07:00
parent 6ae333eea5
commit 6a808cf3eb
4 changed files with 187 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
index.html
View File

@@ -4,98 +4,118 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log Parser & Viewer</title> <title>Compact Log Parser</title>
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet"> <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style> <style>
body { body {
background-color: #f8f9fa; background-color: #f4f7f6;
padding: 20px; font-size: 0.85rem;
} }
#drop-zone { #drop-zone {
border: 2px dashed #007bff; border: 2px dashed #0d6efd;
border-radius: 10px; background: #fff;
padding: 40px; padding: 20px;
text-align: center; text-align: center;
background: white; border-radius: 8px;
transition: 0.3s;
cursor: pointer; cursor: pointer;
margin-bottom: 20px; transition: 0.2s;
margin-bottom: 15px;
} }
#drop-zone.dragover { #drop-zone:hover {
background: #e7f1ff; background: #f0f7ff;
border-color: #0056b3;
}
.stack-trace {
font-family: monospace;
font-size: 0.85rem;
color: #d63384;
white-space: pre-wrap;
display: block;
margin-top: 5px;
}
.lvl-ERR {
color: #dc3545;
font-weight: bold;
}
.lvl-INF {
color: #0d6efd;
}
.lvl-DBG {
color: #6c757d;
}
.lvl-TRC {
color: #6610f2;
} }
.table-container { .table-container {
background: white; background: #fff;
padding: 20px; padding: 15px;
border-radius: 10px; border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* Level Colors */
.badge-ERR {
background-color: #dc3545;
}
.badge-INF {
background-color: #0dcaf0;
color: #000;
}
.badge-DBG {
background-color: #6c757d;
}
.badge-TRC {
background-color: #6610f2;
}
/* Row styling */
td.details-control {
cursor: pointer;
text-align: center;
color: #0d6efd;
font-size: 1.1rem;
}
.exception-box {
background: #fff5f5;
border-left: 4px solid #dc3545;
padding: 10px;
font-family: monospace;
font-size: 0.8rem;
white-space: pre-wrap;
}
.clickable-text {
color: #0d6efd;
cursor: pointer;
text-decoration: underline;
}
.props-cell {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.75rem;
color: #666;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid py-3">
<h2 class="mb-4">Log File Parser</h2> <div id="drop-zone" onclick="document.getElementById('file-input').click()">
<strong><i class="bi bi-cloud-arrow-up"></i> Drop Log File Here</strong> or Click to Browse
<div id="drop-zone"> <input type="file" id="file-input" hidden accept=".log,.txt">
<h4>Drag & Drop log file here</h4>
<p class="text-muted">or click to select a file</p>
<input type="file" id="file-input" style="display: none;" accept=".log,.txt">
</div> </div>
<div class="table-container shadow-sm"> <div class="table-container">
<div class="row mb-3"> <div class="d-flex gap-3 mb-3">
<div class="col-md-3"> <div style="width: 200px;">
<label class="form-label">Filter by Level</label> <select id="level-filter" class="form-select form-select-sm">
<select id="level-filter" class="form-select">
<option value="">All Levels</option> <option value="">All Levels</option>
<option value="INF">INF (Info)</option> <option value="INF">INF</option>
<option value="ERR">ERR (Error)</option> <option value="ERR">ERR</option>
<option value="DBG">DBG (Debug)</option> <option value="DBG">DBG</option>
<option value="TRC">TRC (Trace)</option> <option value="TRC">TRC</option>
</select> </select>
</div> </div>
</div> </div>
<table id="log-table" class="table table-hover table-bordered w-100"> <table id="log-table" class="table table-sm table-hover w-100" style="border-top: 1px solid #dee2e6;">
<thead class="table-light"> <thead>
<tr> <tr>
<th>Time</th> <th width="30"></th>
<th>Level</th> <th width="100">Time</th>
<th>ID</th> <th width="70">Level</th>
<th>Tag</th> <th width="50">Tag</th>
<th>Message</th> <th>Message</th>
<th>Properties</th> <th>Properties</th>
</tr> </tr>
@@ -105,76 +125,113 @@
</div> </div>
</div> </div>
<div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full Log Detail</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div id="modal-content-text"
style="white-space: pre-wrap; font-family: monospace; background: #f8f9fa; padding: 15px; border-radius: 5px;">
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.7.0.min.js"></script> <script src="js/jquery-3.7.0.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script> <script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap5.min.js"></script> <script src="js/dataTables.bootstrap5.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
const MAX_MSG_LEN = 80;
// DataTable Formatting Function for Child Row (Exceptions)
function format(d) {
if (!d.exception) return null;
return `<div class="exception-box"><strong>Stack Trace:</strong><br>${d.exception}</div>`;
}
let table = $('#log-table').DataTable({ let table = $('#log-table').DataTable({
order: [[0, 'asc']],
pageLength: 25,
dom: '<"d-flex justify-content-between"lf>rtip',
columns: [ columns: [
{ data: 'time', width: '10%' }, {
className: 'details-control',
orderable: false,
data: null,
defaultContent: '',
render: function (data, type, row) {
return row.exception ? '<i class="bi bi-plus-square"></i>' : '';
}
},
{ data: 'time' },
{ {
data: 'level', data: 'level',
width: '5%', render: l => `<span class="badge badge-${l}">${l}</span>`
render: function (data) {
return `<span class="lvl-${data}">${data}</span>`;
}
}, },
{ data: 'id', width: '5%' }, { data: 'tag' },
{ data: 'tag', width: '8%' },
{ {
data: 'message', data: 'message',
render: function (data) { render: function (data, type, row) {
// Split message and stack trace if exists if (data.length > MAX_MSG_LEN) {
const parts = data.split('\n'); return `${data.substr(0, MAX_MSG_LEN)}... <span class="clickable-text show-full" data-full="${btoa(unescape(encodeURIComponent(data)))}">[more]</span>`;
const mainMsg = parts.shift(); }
const stack = parts.join('\n'); return data;
return `<strong>${mainMsg}</strong>` + (stack ? `<span class="stack-trace">${stack}</span>` : '');
} }
}, },
{ data: 'props', width: '20%' } {
] data: 'props',
className: 'props-cell',
render: p => p ? `<span title="${p}">${p}</span>` : ''
}
],
order: [[1, 'asc']],
dom: 'ltipr'
}); });
// Custom filtering for Log Level // Handle Click to Expand (Exception)
$('#log-table tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
$(this).html('<i class="bi bi-plus-square"></i>');
} else if (row.data().exception) {
row.child(format(row.data())).show();
$(this).html('<i class="bi bi-dash-square text-danger"></i>');
}
});
// Handle Click for Full Modal
$('#log-table tbody').on('click', '.show-full', function () {
const fullText = decodeURIComponent(escape(atob($(this).data('full'))));
$('#modal-content-text').text(fullText);
new bootstrap.Modal('#logModal').show();
});
// Filtering logic
$('#level-filter').on('change', function () { $('#level-filter').on('change', function () {
table.column(1).search(this.value).draw(); table.column(2).search(this.value).draw();
}); });
// File Handling // Drag & Drop / File Input
const dropZone = $('#drop-zone'); $('#file-input').on('change', e => handleFile(e.target.files[0]));
const fileInput = $('#file-input'); $('#drop-zone').on('dragover', e => { e.preventDefault(); $(this).addClass('bg-light'); });
$('#drop-zone').on('drop', e => {
dropZone.on('click', () => fileInput.click());
dropZone.on('dragover', (e) => {
e.preventDefault(); e.preventDefault();
dropZone.addClass('dragover'); handleFile(e.originalEvent.dataTransfer.files[0]);
});
dropZone.on('dragleave', () => dropZone.removeClass('dragover'));
dropZone.on('drop', (e) => {
e.preventDefault();
dropZone.removeClass('dragover');
const file = e.originalEvent.dataTransfer.files[0];
if (file) handleFile(file);
});
fileInput.on('change', (e) => {
if (e.target.files[0]) handleFile(e.target.files[0]);
}); });
function handleFile(file) { function handleFile(file) {
if (!file) return;
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function (e) { reader.onload = e => {
const content = e.target.result; const logs = parseLogs(e.target.result);
const parsedData = parseLogs(content); table.clear().rows.add(logs).draw();
table.clear().rows.add(parsedData).draw();
}; };
reader.readAsText(file); reader.readAsText(file);
} }
@@ -182,37 +239,33 @@
function parseLogs(text) { function parseLogs(text) {
const lines = text.split(/\r?\n/); const lines = text.split(/\r?\n/);
const logs = []; const logs = [];
// Regex to match: Time [LVL] ID | (TAG) Message (PROPS) const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(\d+)\s\|\s\((.*?)\)\s(.*)$/;
const logHeaderRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(\d+)\s\|\s\((.*?)\)\s(.*)$/;
lines.forEach(line => { lines.forEach(line => {
if (!line.trim()) return; if (!line.trim()) return;
const match = line.match(headerRegex);
const match = line.match(logHeaderRegex);
if (match) { if (match) {
let messagePart = match[5]; let msg = match[5];
let props = ""; let props = "";
const propMatch = msg.match(/\((idtask:.*)\)$/);
// Extract props inside parentheses at the end of the line
const propMatch = messagePart.match(/\(([^)]+:[^)]+)\)$/);
if (propMatch) { if (propMatch) {
props = propMatch[1]; props = propMatch[1];
messagePart = messagePart.replace(propMatch[0], "").trim(); msg = msg.replace(propMatch[0], "").trim();
} }
logs.push({ logs.push({
time: match[1], time: match[1],
level: match[2], level: match[2],
id: match[3],
tag: match[4], tag: match[4],
message: messagePart, message: msg,
props: props props: props,
exception: ""
}); });
} else { } else {
// If it doesn't match the header, it's likely a stack trace or multi-line message // It's a stack trace / exception line
if (logs.length > 0) { if (logs.length > 0) {
logs[logs.length - 1].message += "\n" + line.trim(); logs[logs.length - 1].exception += line + "\n";
} }
} }
}); });

7
js/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
js/dataTables.bootstrap5.min.js vendored Normal file
View File

@@ -0,0 +1,4 @@
/*! DataTables Bootstrap 5 integration
* 2020 SpryMedia Ltd - datatables.net/license
*/
!function(t){var n,r;"function"==typeof define&&define.amd?define(["jquery","datatables.net"],function(e){return t(e,window,document)}):"object"==typeof exports?(n=require("jquery"),r=function(e,a){a.fn.dataTable||require("datatables.net")(e,a)},"undefined"==typeof window?module.exports=function(e,a){return e=e||window,a=a||n(e),r(e,a),t(a,0,e.document)}:(r(window,n),module.exports=t(n,window,window.document))):t(jQuery,window,document)}(function(x,e,r,o){"use strict";var i=x.fn.dataTable;return x.extend(!0,i.defaults,{dom:"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row dt-row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",renderer:"bootstrap"}),x.extend(i.ext.classes,{sWrapper:"dataTables_wrapper dt-bootstrap5",sFilterInput:"form-control form-control-sm",sLengthSelect:"form-select form-select-sm",sProcessing:"dataTables_processing card",sPageButton:"paginate_button page-item"}),i.ext.renderer.pageButton.bootstrap=function(d,e,s,a,l,c){function u(e,a){for(var t,n,r=function(e){e.preventDefault(),x(e.currentTarget).hasClass("disabled")||b.page()==e.data.action||b.page(e.data.action).draw("page")},o=0,i=a.length;o<i;o++)if(t=a[o],Array.isArray(t))u(e,t);else{switch(f=p="",t){case"ellipsis":p="&#x2026;",f="disabled";break;case"first":p=g.sFirst,f=t+(0<l?"":" disabled");break;case"previous":p=g.sPrevious,f=t+(0<l?"":" disabled");break;case"next":p=g.sNext,f=t+(l<c-1?"":" disabled");break;case"last":p=g.sLast,f=t+(l<c-1?"":" disabled");break;default:p=t+1,f=l===t?"active":""}p&&(n=-1!==f.indexOf("disabled"),n=x("<li>",{class:m.sPageButton+" "+f,id:0===s&&"string"==typeof t?d.sTableId+"_"+t:null}).append(x("<a>",{href:n?null:"#","aria-controls":d.sTableId,"aria-disabled":n?"true":null,"aria-label":w[t],role:"link","aria-current":"active"===f?"page":null,"data-dt-idx":t,tabindex:n?-1:d.iTabIndex,class:"page-link"}).html(p)).appendTo(e),d.oApi._fnBindAction(n,{action:t},r))}}var p,f,t,b=new i.Api(d),m=d.oClasses,g=d.oLanguage.oPaginate,w=d.oLanguage.oAria.paginate||{},e=x(e);try{t=e.find(r.activeElement).data("dt-idx")}catch(e){}var n=e.children("ul.pagination");n.length?n.empty():n=e.html("<ul/>").children("ul").addClass("pagination"),u(n,a),t!==o&&e.find("[data-dt-idx="+t+"]").trigger("focus")},i});

4
js/dataTables.min.js vendored
View File

File diff suppressed because one or more lines are too long