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

rev2

Browse Source
This commit is contained in:
Al Azhar
2026-04-27 19:03:12 +07:00
parent 6a808cf3eb
commit a3d908ced4
1 changed files with 100 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
index.html
View File

@@ -4,7 +4,7 @@
<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>Compact Log Parser</title> <title>Advanced 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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
@@ -12,17 +12,18 @@
body { body {
background-color: #f4f7f6; background-color: #f4f7f6;
font-size: 0.85rem; font-size: 0.85rem;
padding: 20px;
} }
#drop-zone { #drop-zone {
border: 2px dashed #0d6efd; border: 2px dashed #0d6efd;
background: #fff; background: #fff;
padding: 20px; padding: 30px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
margin-bottom: 15px; margin-bottom: 20px;
} }
#drop-zone:hover { #drop-zone:hover {
@@ -31,14 +32,15 @@
.table-container { .table-container {
background: #fff; background: #fff;
padding: 15px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
} }
/* Level Colors */ /* Badges */
.badge-ERR { .badge-ERR {
background-color: #dc3545; background-color: #dc3545;
color: white;
} }
.badge-INF { .badge-INF {
@@ -48,13 +50,15 @@
.badge-DBG { .badge-DBG {
background-color: #6c757d; background-color: #6c757d;
color: white;
} }
.badge-TRC { .badge-TRC {
background-color: #6610f2; background-color: #6610f2;
color: white;
} }
/* Row styling */ /* Detail Rows */
td.details-control { td.details-control {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@@ -65,59 +69,68 @@
.exception-box { .exception-box {
background: #fff5f5; background: #fff5f5;
border-left: 4px solid #dc3545; border-left: 4px solid #dc3545;
padding: 10px; padding: 12px;
font-family: monospace; font-family: 'Courier New', monospace;
font-size: 0.8rem; font-size: 0.8rem;
white-space: pre-wrap; white-space: pre-wrap;
margin: 5px 0;
} }
.clickable-text { .clickable-text {
color: #0d6efd; color: #0d6efd;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
font-weight: 500;
} }
.props-cell { /* Search styling */
max-width: 200px; .dataTables_filter input {
overflow: hidden; border-radius: 20px;
text-overflow: ellipsis; padding: 5px 15px;
white-space: nowrap; border: 1px solid #ddd;
font-size: 0.75rem; outline: none;
color: #666; }
.dataTables_filter input:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .15);
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container-fluid py-3"> <div class="container-fluid">
<div id="drop-zone" onclick="document.getElementById('file-input').click()"> <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 <h3><i class="bi bi-file-earmark-text"></i> Drag & Drop Log File</h3>
<p class="text-muted mb-0">The parser now supports inconsistent log formats and multi-line errors.</p>
<input type="file" id="file-input" hidden accept=".log,.txt"> <input type="file" id="file-input" hidden accept=".log,.txt">
</div> </div>
<div class="table-container"> <div class="table-container">
<div class="d-flex gap-3 mb-3"> <div class="row g-3 mb-4 align-items-end">
<div style="width: 200px;"> <div class="col-md-3">
<label class="form-label fw-bold small text-uppercase">Filter Level</label>
<select id="level-filter" class="form-select form-select-sm"> <select id="level-filter" class="form-select form-select-sm">
<option value="">All Levels</option> <option value="">Show All Levels</option>
<option value="INF">INF</option> <option value="INF">INF (Info)</option>
<option value="ERR">ERR</option> <option value="ERR">ERR (Error)</option>
<option value="DBG">DBG</option> <option value="DBG">DBG (Debug)</option>
<option value="TRC">TRC</option> <option value="TRC">TRC (Trace)</option>
</select> </select>
</div> </div>
</div> </div>
<table id="log-table" class="table table-sm table-hover w-100" style="border-top: 1px solid #dee2e6;"> <table id="log-table" class="table table-sm table-hover w-100">
<thead> <thead>
<tr> <tr>
<th width="30"></th> <th width="30"></th>
<th width="100">Time</th> <th width="110">Time</th>
<th width="70">Level</th> <th width="70">Level</th>
<th width="50">Tag</th> <th width="50">ID</th>
<th width="70">Tag</th>
<th>Message</th> <th>Message</th>
<th>Properties</th> <th>Props</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@@ -126,15 +139,15 @@
</div> </div>
<div class="modal fade" id="logModal" tabindex="-1"> <div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Full Log Detail</h5> <h6 class="modal-title fw-bold">Full Log Content</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body p-0">
<div id="modal-content-text" <div id="modal-content-text"
style="white-space: pre-wrap; font-family: monospace; background: #f8f9fa; padding: 15px; border-radius: 5px;"> style="white-space: pre-wrap; font-family: monospace; background: #212529; color: #f8f9fa; padding: 20px; margin: 0; min-height: 200px;">
</div> </div>
</div> </div>
</div> </div>
@@ -148,81 +161,73 @@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
const MAX_MSG_LEN = 80; const MAX_LEN = 100;
// 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>`;
}
// DataTable setup
let table = $('#log-table').DataTable({ let table = $('#log-table').DataTable({
// 'f' adds the search filter box
dom: '<"d-flex justify-content-between align-items-center mb-3"lf>rtip',
columns: [ columns: [
{ {
className: 'details-control', className: 'details-control',
orderable: false, orderable: false,
data: null, data: null,
defaultContent: '', render: (data, type, row) => row.exception ? '<i class="bi bi-plus-circle-fill"></i>' : ''
render: function (data, type, row) {
return row.exception ? '<i class="bi bi-plus-square"></i>' : '';
}
}, },
{ data: 'time' }, { data: 'time' },
{ {
data: 'level', data: 'level',
render: l => `<span class="badge badge-${l}">${l}</span>` render: l => `<span class="badge badge-${l}">${l}</span>`
}, },
{ data: 'id' },
{ data: 'tag' }, { data: 'tag' },
{ {
data: 'message', data: 'message',
render: function (data, type, row) { render: (data) => {
if (data.length > MAX_MSG_LEN) { if (data.length > MAX_LEN) {
return `${data.substr(0, MAX_MSG_LEN)}... <span class="clickable-text show-full" data-full="${btoa(unescape(encodeURIComponent(data)))}">[more]</span>`; return `${data.substr(0, MAX_LEN)}... <span class="clickable-text show-full" data-full="${btoa(unescape(encodeURIComponent(data)))}">[view more]</span>`;
} }
return data; return data;
} }
}, },
{ {
data: 'props', data: 'props',
className: 'props-cell', render: p => `<span class="text-muted small" title="${p}">${p}</span>`
render: p => p ? `<span title="${p}">${p}</span>` : ''
} }
], ],
order: [[1, 'asc']], order: [[1, 'asc']],
dom: 'ltipr' language: { search: "", searchPlaceholder: "Search any log..." }
}); });
// Handle Click to Expand (Exception) // Expand Exceptions
$('#log-table tbody').on('click', 'td.details-control', function () { $('#log-table tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr'); let tr = $(this).closest('tr'), row = table.row(tr);
let row = table.row(tr);
if (row.child.isShown()) { if (row.child.isShown()) {
row.child.hide(); row.child.hide();
$(this).html('<i class="bi bi-plus-square"></i>'); $(this).html('<i class="bi bi-plus-circle-fill"></i>');
} else if (row.data().exception) { } else if (row.data().exception) {
row.child(format(row.data())).show(); row.child(`<div class="exception-box">${row.data().exception}</div>`).show();
$(this).html('<i class="bi bi-dash-square text-danger"></i>'); $(this).html('<i class="bi bi-dash-circle-fill text-danger"></i>');
} }
}); });
// Handle Click for Full Modal // Full Content Modal
$('#log-table tbody').on('click', '.show-full', function () { $('#log-table tbody').on('click', '.show-full', function () {
const fullText = decodeURIComponent(escape(atob($(this).data('full')))); const fullText = decodeURIComponent(escape(atob($(this).data('full'))));
$('#modal-content-text').text(fullText); $('#modal-content-text').text(fullText);
new bootstrap.Modal('#logModal').show(); new bootstrap.Modal('#logModal').show();
}); });
// Filtering logic // Filters
$('#level-filter').on('change', function () { $('#level-filter').on('change', function () { table.column(2).search(this.value).draw(); });
table.column(2).search(this.value).draw();
});
// Drag & Drop / File Input // File Input
$('#file-input').on('change', e => handleFile(e.target.files[0])); $('#file-input').on('change', e => handleFile(e.target.files[0]));
$('#drop-zone').on('dragover', e => { e.preventDefault(); $(this).addClass('bg-light'); }); $('#drop-zone').on('dragover', e => { e.preventDefault(); $('#drop-zone').css('background', '#f0f7ff'); });
$('#drop-zone').on('dragleave', e => { $('#drop-zone').css('background', '#fff'); });
$('#drop-zone').on('drop', e => { $('#drop-zone').on('drop', e => {
e.preventDefault(); e.preventDefault();
$('#drop-zone').css('background', '#fff');
handleFile(e.originalEvent.dataTransfer.files[0]); handleFile(e.originalEvent.dataTransfer.files[0]);
}); });
@@ -239,31 +244,43 @@
function parseLogs(text) { function parseLogs(text) {
const lines = text.split(/\r?\n/); const lines = text.split(/\r?\n/);
const logs = []; const logs = [];
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(\d+)\s\|\s\((.*?)\)\s(.*)$/;
// Revised Regex: Just gets Time, Level, and the rest.
const baseRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
// Secondary regex to see if the "rest" starts with the ID | (Tag) pattern
const metaRegex = /^(\d+)\s\|\s\((.*?)\)\s(.*)$/;
lines.forEach(line => { lines.forEach(line => {
if (!line.trim()) return; const trimmed = line.trim();
const match = line.match(headerRegex); if (!trimmed) return;
if (match) { const baseMatch = line.match(baseRegex);
let msg = match[5];
let props = ""; if (baseMatch) {
const propMatch = msg.match(/\((idtask:.*)\)$/); let time = baseMatch[1];
if (propMatch) { let level = baseMatch[2];
props = propMatch[1]; let content = baseMatch[3];
msg = msg.replace(propMatch[0], "").trim();
let id = "", tag = "", message = content, props = "";
// Check if this line has the "ID | (TAG)" format
const metaMatch = content.match(metaRegex);
if (metaMatch) {
id = metaMatch[1];
tag = metaMatch[2];
message = metaMatch[3];
} }
logs.push({ // Extract Props if they exist at the end (idtask: 123)
time: match[1], const propMatch = message.match(/\(([^)]+:[^)]+)\)$/);
level: match[2], if (propMatch) {
tag: match[4], props = propMatch[1];
message: msg, message = message.replace(propMatch[0], "").trim();
props: props, }
exception: ""
}); logs.push({ time, level, id, tag, message, props, exception: "" });
} else { } else {
// It's a stack trace / exception line // If it's not a header line, it's an exception/stack trace
if (logs.length > 0) { if (logs.length > 0) {
logs[logs.length - 1].exception += line + "\n"; logs[logs.length - 1].exception += line + "\n";
} }
@@ -273,7 +290,6 @@
} }
}); });
</script> </script>
</body> </body>
</html> </html>