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

rev4

Browse Source
This commit is contained in:
Al Azhar
2026-04-27 19:17:17 +07:00
parent f797727448
commit ec2e8ffccb
2 changed files with 238 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

378
index.html
View File

@@ -1,125 +1,174 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-bs-theme="dark">
<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 Viewer Pro</title> <title>Log Viewer Pro // Dark Mode</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"> <script src="js/lucide.min.js"></script>
<style> <style>
:root {
--bg-color: #0f111a;
--card-bg: #1a1c27;
--border-color: #2d303e;
--accent-color: #3d5afe;
}
body { body {
background-color: #f8f9fa; background-color: var(--bg-color);
font-size: 0.82rem; color: #e0e0e0;
color: #333; font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.85rem;
overflow-x: hidden;
} }
.container-fluid { /* Full Screen Drop Zone */
padding: 20px; #drop-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(61, 90, 254, 0.9);
z-index: 9999;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
border: 4px dashed #fff;
color: white;
pointer-events: none;
} }
/* Drag & Drop */ /* Sleek Table Design */
#drop-zone { .main-container {
border: 2px dashed #dee2e6; padding: 1.5rem;
background: #fff; max-width: 1600px;
padding: 25px; margin: 0 auto;
text-align: center;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 20px;
} }
#drop-zone:hover,
#drop-zone.dragover {
border-color: #0d6efd;
background: #f0f7ff;
}
/* Table Styling */
.table-card { .table-card {
background: #fff; background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); padding: 1rem;
padding: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
} }
table.dataTable { table.dataTable {
border-collapse: collapse !important; border: none !important;
border-top: 1px solid #eee;
} }
.badge-lvl { table.dataTable thead th {
font-weight: 600; background: #242736;
padding: 0.4em 0.7em; text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 1px;
border-bottom: 1px solid var(--border-color) !important;
}
/* Level Badges */
.lvl-badge {
font-weight: 700;
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 0.75rem;
min-width: 45px;
display: inline-block; display: inline-block;
min-width: 40px;
text-align: center; text-align: center;
} }
.bg-INF { .lvl-TRC {
background-color: #e3f2fd; background: #424242;
color: #0d6efd; color: #bdbdbd;
} }
.bg-ERR { .lvl-DBG {
background-color: #ffebee; background: #1e3a8a;
color: #c62828; color: #93c5fd;
} }
.bg-DBG { .lvl-INF {
background-color: #f5f5f5; background: #064e3b;
color: #616161; color: #6ee7b7;
} }
.bg-TRC { .lvl-WRN {
background-color: #f3e5f5; background: #78350f;
color: #7b1fa2; color: #fcd34d;
} }
/* Child Row / Exception */ .lvl-ERR {
background: #7f1d1d;
color: #fca5a5;
}
.lvl-CRT {
background: #ec4899;
color: white;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
}
}
/* Controls */
.details-control { .details-control {
cursor: pointer; cursor: pointer;
color: #0d6efd; color: var(--accent-color);
font-size: 1rem; transition: 0.2s;
} }
.exception-wrapper { .details-control:hover {
background: #1e1e1e; transform: scale(1.2);
color: #dcdcdc; }
padding: 15px;
border-radius: 6px; .exception-view {
font-family: 'Consolas', monospace; background: #000;
color: #ff5555;
padding: 1rem;
border-radius: 8px;
font-family: 'Fira Code', monospace;
font-size: 0.75rem; font-size: 0.75rem;
white-space: pre-wrap; margin: 0.5rem 0;
margin: 10px 0; border-left: 3px solid #7f1d1d;
border-left: 4px solid #c62828;
} }
/* Utils */ /* Search Bar Customization */
.text-truncate-custom { .dataTables_filter input {
max-width: 500px; background: #242736;
white-space: nowrap; border: 1px solid var(--border-color);
overflow: hidden; border-radius: 8px;
text-overflow: ellipsis; color: white;
display: inline-block; padding: 6px 12px;
vertical-align: bottom; width: 300px !important;
} }
.btn-more { .btn-more {
color: #0d6efd; color: var(--accent-color);
text-decoration: underline;
cursor: pointer; cursor: pointer;
font-weight: 500; font-size: 0.75rem;
margin-left: 5px; text-decoration: none;
} }
.props-text { .props-col {
color: #666; color: #888;
font-style: italic; font-family: monospace;
font-size: 0.75rem; font-size: 0.75rem;
} }
</style> </style>
@@ -127,36 +176,49 @@
<body> <body>
<div class="container-fluid"> <div id="drop-overlay">
<div id="drop-zone" onclick="document.getElementById('file-input').click()"> <i data-lucide="upload-cloud" size="64"></i>
<h5 class="mb-1"><i class="bi bi-file-earmark-arrow-up text-primary"></i> Drop your .log file here</h5> <h2 class="mt-3">Drop Log File to Import</h2>
<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">
</div> </div>
<div class="main-container">
<header class="d-flex justify-content-between align-items-center mb-4">
<div>
<h4 class="mb-0 fw-bold"><i data-lucide="terminal" class="me-2 text-primary"></i>LogView <span
class="text-primary">Pro</span></h4>
<p class="text-muted small mb-0">v3.0 • Dark Mode Enabled</p>
</div>
<button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()">
<i data-lucide="file-plus" class="me-1"></i> Open File
</button>
<input type="file" id="file-input" hidden accept=".log,.txt">
</header>
<div class="table-card"> <div class="table-card">
<div class="d-flex justify-content-between align-items-center mb-3"> <div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex gap-2"> <div class="d-flex align-items-center gap-3">
<select id="level-filter" class="form-select form-select-sm" style="width: 140px;"> <select id="level-filter" class="form-select form-select-sm bg-dark border-secondary"
style="width: 150px;">
<option value="">All Levels</option> <option value="">All Levels</option>
<option value="INF">INF</option> <option value="CRT">CRT (Critical)</option>
<option value="ERR">ERR</option> <option value="ERR">ERR (Error)</option>
<option value="DBG">DBG</option> <option value="WRN">WRN (Warning)</option>
<option value="TRC">TRC</option> <option value="INF">INF (Info)</option>
<option value="DBG">DBG (Debug)</option>
<option value="TRC">TRC (Trace)</option>
</select> </select>
<div id="stats-area" class="small text-muted"></div>
</div> </div>
<div id="search-container"></div>
</div> </div>
<table id="log-table" class="table table-hover table-sm w-100"> <table id="log-table" class="table table-dark table-hover w-100">
<thead> <thead>
<tr> <tr>
<th width="30"></th> <th width="30"></th>
<th width="100">Timestamp</th> <th width="120">Timestamp</th>
<th width="60">Lvl</th> <th width="80">Level</th>
<th>Message</th> <th>Message</th>
<th width="250">Properties</th> <th width="300">Properties</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@@ -165,15 +227,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-lg modal-dialog-centered">
<div class="modal-content"> <div class="modal-content border-secondary shadow-lg">
<div class="modal-header py-2 px-3"> <div class="modal-header border-secondary">
<h6 class="modal-title">Full Message Log</h6> <h6 class="modal-title">Log Message Detail</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 bg-light"> <div class="modal-body p-0">
<div id="modal-body-content" <pre id="modal-body-content" class="m-0 p-3"
style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem;"></div> style="background:#000; color:#fff; font-size:0.8rem;"></pre>
</div> </div>
</div> </div>
</div> </div>
@@ -185,132 +247,142 @@
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script> <script>
$(document).ready(function () { lucide.createIcons();
const TRUNCATE_LIMIT = 120; const TRUNCATE_LIMIT = 150;
$(document).ready(function () {
const table = $('#log-table').DataTable({ const table = $('#log-table').DataTable({
dom: '<"d-flex justify-content-between mb-2"f>rtip', dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip',
pageLength: 50,
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-chevron-right"></i>' : '' render: (d, t, row) => row.exception ? '<i data-lucide="chevron-right" size="16"></i>' : ''
}, },
{ data: 'time' }, { data: 'time', className: 'text-muted' },
{ {
data: 'level', data: 'level',
render: l => `<span class="badge-lvl bg-${l}">${l}</span>` render: l => `<span class="lvl-badge lvl-${l}">${l}</span>`
}, },
{ {
data: 'message', data: 'message',
render: function (data) { render: function (data) {
if (data.length > TRUNCATE_LIMIT) { if (data.length > TRUNCATE_LIMIT) {
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 `<span>${data.substring(0, TRUNCATE_LIMIT)}</span><a class="btn-more ms-1" onclick="viewMore('${btoa(unescape(encodeURIComponent(data)))}')">...more</a>`;
} }
return data; return data;
} }
}, },
{ {
data: 'props', data: 'props',
render: p => `<span class="props-text">${p}</span>` className: 'props-col',
render: p => p ? `<span title="${p} text-truncate d-block" style="max-width:280px">${p}</span>` : ''
} }
], ],
order: [[1, 'asc']], order: [[1, 'asc']],
language: { search: "", searchPlaceholder: "Quick search logs..." } drawCallback: function () { lucide.createIcons(); },
language: { search: "", searchPlaceholder: "Filter logs..." }
}); });
// Expand/Collapse Child Row // Expandable Exception Rows
$('#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);
let icon = $(this).find('i');
if (row.child.isShown()) { if (row.child.isShown()) {
row.child.hide(); row.child.hide();
icon.attr('class', 'bi bi-chevron-right'); $(this).html('<i data-lucide="chevron-right" size="16"></i>');
} else if (row.data().exception) { } else if (row.data().exception) {
row.child(`<div class="exception-wrapper">${row.data().exception}</div>`).show(); row.child(`<div class="exception-view">${row.data().exception}</div>`).show();
icon.attr('class', 'bi bi-chevron-down text-danger'); $(this).html('<i data-lucide="chevron-down" class="text-danger" size="16"></i>');
} }
lucide.createIcons();
}); });
// Level Filter // Level Filter
$('#level-filter').on('change', function () { $('#level-filter').on('change', function () {
table.column(2).search(this.value).draw(); table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw();
}); });
// Drag and Drop Logic // --- FULL SCREEN DRAG & DROP ---
const zone = $('#drop-zone'); let dragCounter = 0;
zone.on('dragover', e => { e.preventDefault(); zone.addClass('dragover'); }); window.addEventListener('dragenter', e => {
zone.on('dragleave', e => { zone.removeClass('dragover'); });
zone.on('drop', e => {
e.preventDefault(); e.preventDefault();
zone.removeClass('dragover'); dragCounter++;
processFile(e.originalEvent.dataTransfer.files[0]); $('#drop-overlay').css('display', 'flex');
}); });
window.addEventListener('dragleave', e => {
dragCounter--;
if (dragCounter === 0) $('#drop-overlay').hide();
});
window.addEventListener('dragover', e => e.preventDefault());
window.addEventListener('drop', e => {
e.preventDefault();
dragCounter = 0;
$('#drop-overlay').hide();
processFile(e.dataTransfer.files[0]);
});
$('#file-input').on('change', e => processFile(e.target.files[0])); $('#file-input').on('change', e => processFile(e.target.files[0]));
function processFile(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 data = parseLogFile(e.target.result); const logs = parseLogs(e.target.result);
table.clear().rows.add(data).draw(); table.clear().rows.add(logs).draw();
updateStats(logs);
}; };
reader.readAsText(file); reader.readAsText(file);
} }
function parseLogFile(text) { function parseLogs(text) {
const lines = text.split(/\r?\n/); const lines = text.split(/\r?\n/);
const results = []; const results = [];
// Header pattern: HH:mm:ss.SSS [LVL] // Support 6 levels: TRC, DBG, WRN, INF, ERR, CRT
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/; const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|WRN|INF|ERR|CRT)\]\s(.*)$/;
lines.forEach(line => { lines.forEach(line => {
const trimmed = line.trim(); if (!line.trim()) return;
if (!trimmed) return;
const match = line.match(headerRegex); const match = line.match(headerRegex);
if (match) { if (match) {
let time = match[1];
let level = match[2];
let content = match[3].trim(); let content = match[3].trim();
let message = content, props = "";
let message = content; // Parse props at the end: (key: value)
let props = ""; const lastParenIdx = content.lastIndexOf(' (');
if (lastParenIdx !== -1 && content.endsWith(')')) {
// Template: {message} ({props}) const possibleProps = content.substring(lastParenIdx + 2, content.length - 1);
// Look for the last set of parentheses that contain a colon (key:value) if (possibleProps.includes(':')) {
const lastOpenParen = content.lastIndexOf(' ('); props = possibleProps;
if (lastOpenParen !== -1 && content.endsWith(')')) { message = content.substring(0, lastParenIdx).trim();
const potentialProps = content.substring(lastOpenParen + 2, content.length - 1);
if (potentialProps.includes(':')) {
props = potentialProps;
message = content.substring(0, lastOpenParen).trim();
} }
} }
results.push({ time: match[1], level: match[2], message, props, exception: "" });
results.push({ time, level, message, props, exception: "" }); } else if (results.length > 0) {
} else {
// If line doesn't start with timestamp, it's an exception/stack trace
if (results.length > 0) {
results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line; results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
} }
}
}); });
return results; return results;
} }
// Modal Helper function updateStats(logs) {
window.showFullLog = function (encoded) { const count = logs.length;
const errs = logs.filter(l => l.level === 'ERR' || l.level === 'CRT').length;
$('#stats-area').html(`<span class="me-3">${count} total logs</span> <span class="text-danger">${errs} errors/criticals</span>`);
}
window.viewMore = function (encoded) {
const text = decodeURIComponent(escape(atob(encoded))); const text = decodeURIComponent(escape(atob(encoded)));
$('#modal-body-content').text(text); $('#modal-body-content').text(text);
new bootstrap.Modal('#logModal').show(); new bootstrap.Modal('#logModal').show();
}; };
}); });
</script> </script>
</body> </body>
</html> </html>

12
js/lucide.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long