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

rev3

Browse Source
This commit is contained in:
Al Azhar
2026-04-27 19:04:47 +07:00
parent a3d908ced4
commit f797727448
1 changed files with 172 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
index.html
View File

@@ -4,96 +4,123 @@
<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>Advanced Log Parser</title> <title>Log Viewer Pro</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">
<style> <style>
body { body {
background-color: #f4f7f6; background-color: #f8f9fa;
font-size: 0.85rem; font-size: 0.82rem;
color: #333;
}
.container-fluid {
padding: 20px; padding: 20px;
} }
/* Drag & Drop */
#drop-zone { #drop-zone {
border: 2px dashed #0d6efd; border: 2px dashed #dee2e6;
background: #fff; background: #fff;
padding: 30px; padding: 25px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: all 0.2s ease;
margin-bottom: 20px; margin-bottom: 20px;
} }
#drop-zone:hover { #drop-zone:hover,
#drop-zone.dragover {
border-color: #0d6efd;
background: #f0f7ff; background: #f0f7ff;
} }
.table-container { /* Table Styling */
.table-card {
background: #fff; background: #fff;
padding: 20px; border-radius: 12px;
border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 15px;
} }
/* Badges */ table.dataTable {
.badge-ERR { border-collapse: collapse !important;
background-color: #dc3545; border-top: 1px solid #eee;
color: white;
} }
.badge-INF { .badge-lvl {
background-color: #0dcaf0; font-weight: 600;
color: #000; padding: 0.4em 0.7em;
} border-radius: 4px;
font-size: 0.75rem;
.badge-DBG { min-width: 45px;
background-color: #6c757d; display: inline-block;
color: white;
}
.badge-TRC {
background-color: #6610f2;
color: white;
}
/* Detail Rows */
td.details-control {
cursor: pointer;
text-align: center; text-align: center;
color: #0d6efd;
font-size: 1.1rem;
} }
.exception-box { .bg-INF {
background: #fff5f5; background-color: #e3f2fd;
border-left: 4px solid #dc3545; color: #0d6efd;
padding: 12px;
font-family: 'Courier New', monospace;
font-size: 0.8rem;
white-space: pre-wrap;
margin: 5px 0;
} }
.clickable-text { .bg-ERR {
color: #0d6efd; background-color: #ffebee;
color: #c62828;
}
.bg-DBG {
background-color: #f5f5f5;
color: #616161;
}
.bg-TRC {
background-color: #f3e5f5;
color: #7b1fa2;
}
/* Child Row / Exception */
.details-control {
cursor: pointer; cursor: pointer;
color: #0d6efd;
font-size: 1rem;
}
.exception-wrapper {
background: #1e1e1e;
color: #dcdcdc;
padding: 15px;
border-radius: 6px;
font-family: 'Consolas', monospace;
font-size: 0.75rem;
white-space: pre-wrap;
margin: 10px 0;
border-left: 4px solid #c62828;
}
/* Utils */
.text-truncate-custom {
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: bottom;
}
.btn-more {
color: #0d6efd;
text-decoration: underline; text-decoration: underline;
cursor: pointer;
font-weight: 500; font-weight: 500;
margin-left: 5px;
} }
/* Search styling */ .props-text {
.dataTables_filter input { color: #666;
border-radius: 20px; font-style: italic;
padding: 5px 15px; font-size: 0.75rem;
border: 1px solid #ddd;
outline: none;
}
.dataTables_filter input:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .15);
} }
</style> </style>
</head> </head>
@@ -102,35 +129,34 @@
<div class="container-fluid"> <div class="container-fluid">
<div id="drop-zone" onclick="document.getElementById('file-input').click()"> <div id="drop-zone" onclick="document.getElementById('file-input').click()">
<h3><i class="bi bi-file-earmark-text"></i> Drag & Drop Log File</h3> <h5 class="mb-1"><i class="bi bi-file-earmark-arrow-up text-primary"></i> Drop your .log file here</h5>
<p class="text-muted mb-0">The parser now supports inconsistent log formats and multi-line errors.</p> <p class="text-muted small mb-0">The parser handles timestamped headers and multi-line exceptions
automatically.</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-card">
<div class="row g-3 mb-4 align-items-end"> <div class="d-flex justify-content-between align-items-center mb-3">
<div class="col-md-3"> <div class="d-flex gap-2">
<label class="form-label fw-bold small text-uppercase">Filter Level</label> <select id="level-filter" class="form-select form-select-sm" style="width: 140px;">
<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 id="search-container"></div>
</div> </div>
<table id="log-table" class="table table-sm table-hover w-100"> <table id="log-table" class="table table-hover table-sm w-100">
<thead> <thead>
<tr> <tr>
<th width="30"></th> <th width="30"></th>
<th width="110">Time</th> <th width="100">Timestamp</th>
<th width="70">Level</th> <th width="60">Lvl</th>
<th width="50">ID</th>
<th width="70">Tag</th>
<th>Message</th> <th>Message</th>
<th>Props</th> <th width="250">Properties</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@@ -139,16 +165,15 @@
</div> </div>
<div class="modal fade" id="logModal" tabindex="-1"> <div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-xl"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header py-2 px-3">
<h6 class="modal-title fw-bold">Full Log Content</h6> <h6 class="modal-title">Full Message Log</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 p-0"> <div class="modal-body bg-light">
<div id="modal-content-text" <div id="modal-body-content"
style="white-space: pre-wrap; font-family: monospace; background: #212529; color: #f8f9fa; padding: 20px; margin: 0; min-height: 200px;"> style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem;"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -161,135 +186,131 @@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
const MAX_LEN = 100; const TRUNCATE_LIMIT = 120;
// DataTable setup const table = $('#log-table').DataTable({
let table = $('#log-table').DataTable({ dom: '<"d-flex justify-content-between mb-2"f>rtip',
// '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,
render: (data, type, row) => row.exception ? '<i class="bi bi-plus-circle-fill"></i>' : '' render: (data, type, row) => row.exception ? '<i class="bi bi-chevron-right"></i>' : ''
}, },
{ data: 'time' }, { data: 'time' },
{ {
data: 'level', data: 'level',
render: l => `<span class="badge badge-${l}">${l}</span>` render: l => `<span class="badge-lvl bg-${l}">${l}</span>`
}, },
{ data: 'id' },
{ data: 'tag' },
{ {
data: 'message', data: 'message',
render: (data) => { render: function (data) {
if (data.length > MAX_LEN) { if (data.length > TRUNCATE_LIMIT) {
return `${data.substr(0, MAX_LEN)}... <span class="clickable-text show-full" data-full="${btoa(unescape(encodeURIComponent(data)))}">[view more]</span>`; return `<span class="text-truncate-custom">${data.substring(0, TRUNCATE_LIMIT)}</span><span class="btn-more" onclick="showFullLog('${btoa(unescape(encodeURIComponent(data)))}')">...more</span>`;
} }
return data; return data;
} }
}, },
{ {
data: 'props', data: 'props',
render: p => `<span class="text-muted small" title="${p}">${p}</span>` render: p => `<span class="props-text">${p}</span>`
} }
], ],
order: [[1, 'asc']], order: [[1, 'asc']],
language: { search: "", searchPlaceholder: "Search any log..." } language: { search: "", searchPlaceholder: "Quick search logs..." }
}); });
// Expand Exceptions // Expand/Collapse Child Row
$('#log-table tbody').on('click', 'td.details-control', function () { $('#log-table tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr'), row = table.row(tr); let tr = $(this).closest('tr');
let row = table.row(tr);
let icon = $(this).find('i');
if (row.child.isShown()) { if (row.child.isShown()) {
row.child.hide(); row.child.hide();
$(this).html('<i class="bi bi-plus-circle-fill"></i>'); icon.attr('class', 'bi bi-chevron-right');
} else if (row.data().exception) { } else if (row.data().exception) {
row.child(`<div class="exception-box">${row.data().exception}</div>`).show(); row.child(`<div class="exception-wrapper">${row.data().exception}</div>`).show();
$(this).html('<i class="bi bi-dash-circle-fill text-danger"></i>'); icon.attr('class', 'bi bi-chevron-down text-danger');
} }
}); });
// Full Content Modal // Level Filter
$('#log-table tbody').on('click', '.show-full', function () { $('#level-filter').on('change', function () {
const fullText = decodeURIComponent(escape(atob($(this).data('full')))); table.column(2).search(this.value).draw();
$('#modal-content-text').text(fullText);
new bootstrap.Modal('#logModal').show();
}); });
// Filters // Drag and Drop Logic
$('#level-filter').on('change', function () { table.column(2).search(this.value).draw(); }); const zone = $('#drop-zone');
zone.on('dragover', e => { e.preventDefault(); zone.addClass('dragover'); });
// File Input zone.on('dragleave', e => { zone.removeClass('dragover'); });
$('#file-input').on('change', e => handleFile(e.target.files[0])); zone.on('drop', e => {
$('#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 => {
e.preventDefault(); e.preventDefault();
$('#drop-zone').css('background', '#fff'); zone.removeClass('dragover');
handleFile(e.originalEvent.dataTransfer.files[0]); processFile(e.originalEvent.dataTransfer.files[0]);
}); });
$('#file-input').on('change', e => processFile(e.target.files[0]));
function handleFile(file) { function processFile(file) {
if (!file) return; if (!file) return;
const reader = new FileReader(); const reader = new FileReader();
reader.onload = e => { reader.onload = e => {
const logs = parseLogs(e.target.result); const data = parseLogFile(e.target.result);
table.clear().rows.add(logs).draw(); table.clear().rows.add(data).draw();
}; };
reader.readAsText(file); reader.readAsText(file);
} }
function parseLogs(text) { function parseLogFile(text) {
const lines = text.split(/\r?\n/); const lines = text.split(/\r?\n/);
const logs = []; const results = [];
// Header pattern: HH:mm:ss.SSS [LVL]
// Revised Regex: Just gets Time, Level, and the rest. const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
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 => {
const trimmed = line.trim(); const trimmed = line.trim();
if (!trimmed) return; if (!trimmed) return;
const baseMatch = line.match(baseRegex); const match = line.match(headerRegex);
if (match) {
let time = match[1];
let level = match[2];
let content = match[3].trim();
if (baseMatch) { let message = content;
let time = baseMatch[1]; let props = "";
let level = baseMatch[2];
let content = baseMatch[3];
let id = "", tag = "", message = content, props = ""; // Template: {message} ({props})
// Look for the last set of parentheses that contain a colon (key:value)
// Check if this line has the "ID | (TAG)" format const lastOpenParen = content.lastIndexOf(' (');
const metaMatch = content.match(metaRegex); if (lastOpenParen !== -1 && content.endsWith(')')) {
if (metaMatch) { const potentialProps = content.substring(lastOpenParen + 2, content.length - 1);
id = metaMatch[1]; if (potentialProps.includes(':')) {
tag = metaMatch[2]; props = potentialProps;
message = metaMatch[3]; message = content.substring(0, lastOpenParen).trim();
}
} }
// Extract Props if they exist at the end (idtask: 123) results.push({ time, level, message, props, exception: "" });
const propMatch = message.match(/\(([^)]+:[^)]+)\)$/);
if (propMatch) {
props = propMatch[1];
message = message.replace(propMatch[0], "").trim();
}
logs.push({ time, level, id, tag, message, props, exception: "" });
} else { } else {
// If it's not a header line, it's an exception/stack trace // If line doesn't start with timestamp, it's an exception/stack trace
if (logs.length > 0) { if (results.length > 0) {
logs[logs.length - 1].exception += line + "\n"; results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
} }
} }
}); });
return logs; return results;
} }
// Modal Helper
window.showFullLog = function (encoded) {
const text = decodeURIComponent(escape(atob(encoded)));
$('#modal-body-content').text(text);
new bootstrap.Modal('#logModal').show();
};
}); });
</script> </script>
</body> </body>
</html> </html>