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

Compare commits

merge into: alazhar/LogViewer:main
Branches Tags
alazhar/LogViewer:main alazhar/LogViewer:claude alazhar/LogViewer:gemini_v2.1 alazhar/LogViewer:gemini_v2
..
pull from: alazhar/LogViewer:gemini_v2
Branches Tags
alazhar/LogViewer:claude alazhar/LogViewer:gemini_v2.1 alazhar/LogViewer:gemini_v2 alazhar/LogViewer:main

5 Commits
main .. gemini_v2

Author SHA1 Message Date
alazhar 8d65b877dd rev1.3 2026-04-27 21:34:30 +07:00
alazhar 8a34443b77 rev1.2 2026-04-27 21:31:53 +07:00
alazhar 7c662f67e9 rev1.1 2026-04-27 21:30:17 +07:00
alazhar 712bceccbe rev1 2026-04-27 21:23:50 +07:00
alazhar d2bf90ccec init 2026-04-27 19:45:25 +07:00
2 changed files with 396 additions and 286 deletions
Expand all files Collapse all files
index.html
+382 -286
View File
@@ -4,238 +4,298 @@
<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 // Dark Mode</title> <title>Log Viewer Pro // Timeline Brush</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">
<script src="js/lucide.min.js"></script> <script src="js/lucide.min.js"></script>
<script src="js/chart.js"></script>
<style> <style>
:root { :root {
--bg-color: #0f111a; --sidebar-width: 260px;
--card-bg: #1a1c27; --brand-color: #4ade80;
--border-color: #2d303e; --bg-dark: #0f172a;
--accent-color: #3d5afe; --card-dark: #1e293b;
--border-color: #334155;
--selection-bg: rgba(74, 222, 128, 0.2);
--selection-border: rgba(74, 222, 128, 0.5);
} }
body { body {
background-color: var(--bg-color); background-color: var(--bg-dark);
color: #e0e0e0; color: #f1f5f9;
font-family: 'Inter', -apple-system, sans-serif; font-family: 'Inter', sans-serif;
font-size: 0.85rem; font-size: 0.82rem;
overflow-x: hidden; height: 100vh;
overflow: hidden;
} }
/* Full Screen Drop Zone */ .wrapper {
#drop-overlay { display: flex;
position: fixed; height: 100vh;
top: 0; }
left: 0;
width: 100%; aside {
height: 100%; width: var(--sidebar-width);
background: rgba(61, 90, 254, 0.9); background: var(--card-dark);
z-index: 9999; border-right: 1px solid var(--border-color);
display: none; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
border: 4px dashed #fff;
color: white;
pointer-events: none;
} }
/* Sleek Table Design */ .sidebar-header {
.main-container {
padding: 1.5rem;
max-width: 1600px;
margin: 0 auto;
}
.table-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1rem; padding: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border-bottom: 1px solid var(--border-color);
} }
table.dataTable { .file-list {
border: none !important; overflow-y: auto;
flex-grow: 1;
padding: 0.5rem;
}
.file-item {
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
display: flex;
justify-content: space-between;
font-size: 0.8rem;
margin-bottom: 2px;
}
.file-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.file-item.active {
background: rgba(74, 222, 128, 0.15);
color: var(--brand-color);
font-weight: 600;
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.top-bar {
padding: 0.6rem 1.5rem;
background: var(--card-dark);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
/* Chart Area with Selection Overlay */
.chart-container {
height: 160px;
background: #0b0e14;
padding: 10px 20px;
border-bottom: 1px solid var(--border-color);
position: relative;
user-select: none;
}
#selection-overlay {
position: absolute;
top: 10px;
left: 20px;
right: 20px;
bottom: 10px;
pointer-events: none;
z-index: 10;
}
.selection-rect {
fill: var(--selection-bg);
stroke: var(--selection-border);
stroke-width: 1;
display: none;
}
/* Toggles & Controls */
.level-toggles .btn {
border: none;
font-size: 0.7rem;
font-weight: 700;
padding: 4px 10px;
margin-right: 3px;
}
.btn-check:not(:checked)+.btn {
opacity: 0.2;
filter: grayscale(0.8);
}
.btn-inf {
background: #10b981;
color: #fff;
}
.btn-wrn {
background: #f59e0b;
color: #fff;
}
.btn-err {
background: #ef4444;
color: #fff;
}
.btn-crt {
background: #a855f7;
color: #fff;
}
.search-container {
position: relative;
width: 280px;
}
.search-container input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
color: white;
border-radius: 6px;
padding: 4px 30px;
width: 100%;
}
.search-icon {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
}
.clear-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
color: #64748b;
cursor: pointer;
display: none;
}
.content-area {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
}
.table-container {
background: var(--card-dark);
border-radius: 8px;
border: 1px solid var(--border-color);
} }
table.dataTable thead th { table.dataTable thead th {
background: #242736; background: rgba(255, 255, 255, 0.02);
font-size: 0.65rem;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.7rem; padding: 10px 15px !important;
letter-spacing: 1px;
border-bottom: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important;
} }
/* Level Badges */ .lvl-indicator {
.lvl-badge { width: 8px;
font-weight: 700; height: 8px;
font-size: 0.7rem; border-radius: 50%;
padding: 2px 6px;
border-radius: 4px;
display: inline-block; display: inline-block;
min-width: 40px; margin-right: 8px;
text-align: center;
} }
.lvl-TRC { .row-INF .lvl-indicator {
background: #424242; background: #10b981;
color: #bdbdbd;
} }
.lvl-DBG { .row-ERR .lvl-indicator {
background: #1e3a8a; background: #ef4444;
color: #93c5fd;
}
.lvl-INF {
background: #064e3b;
color: #6ee7b7;
}
.lvl-WRN {
background: #78350f;
color: #fcd34d;
}
.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 {
cursor: pointer;
color: var(--accent-color);
transition: 0.2s;
}
.details-control:hover {
transform: scale(1.2);
}
.exception-view {
background: #000;
color: #ff5555;
padding: 1rem;
border-radius: 8px;
font-family: 'Fira Code', monospace;
font-size: 0.75rem;
margin: 0.5rem 0;
border-left: 3px solid #7f1d1d;
}
/* Search Bar Customization */
.dataTables_filter input {
background: #242736;
border: 1px solid var(--border-color);
border-radius: 8px;
color: white;
padding: 6px 12px;
width: 300px !important;
}
.btn-more {
color: var(--accent-color);
cursor: pointer;
font-size: 0.75rem;
text-decoration: none;
}
.props-col {
color: #888;
font-family: monospace;
font-size: 0.75rem;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="drop-overlay"> <div class="wrapper">
<i data-lucide="upload-cloud" size="64"></i> <aside>
<h2 class="mt-3">Drop Log File to Import</h2> <div class="sidebar-header">
</div> <h6 class="mb-3 d-flex align-items-center gap-2">
<i data-lucide="activity" class="text-success"></i> LogAnalytics
<div class="main-container"> </h6>
<header class="d-flex justify-content-between align-items-center mb-4"> <button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
<div> <i data-lucide="folder" size="14"></i> Directory
<h4 class="mb-0 fw-bold"><i data-lucide="terminal" class="me-2 text-primary"></i>LogView <span </button>
class="text-primary">Pro</span></h4> <input type="file" id="dir-input" webkitdirectory hidden>
<p class="text-muted small mb-0">v3.0 • Dark Mode Enabled</p>
</div> </div>
<button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()"> <div class="file-list" id="file-list"></div>
<i data-lucide="file-plus" class="me-1"></i> Open File </aside>
</button>
<input type="file" id="file-input" hidden accept=".log,.txt">
</header>
<div class="table-card"> <main>
<div class="d-flex justify-content-between align-items-center mb-3"> <div class="top-bar">
<div class="d-flex align-items-center gap-3"> <div class="level-toggles">
<select id="level-filter" class="form-select form-select-sm bg-dark border-secondary" <input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
style="width: 150px;"> <label class="btn btn-inf" for="t-INF">INF <span id="c-INF">0</span></label>
<option value="">All Levels</option> <input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">
<option value="CRT">CRT (Critical)</option> <label class="btn btn-wrn" for="t-WRN">WRN <span id="c-WRN">0</span></label>
<option value="ERR">ERR (Error)</option> <input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">
<option value="WRN">WRN (Warning)</option> <label class="btn btn-err" for="t-ERR">ERR <span id="c-ERR">0</span></label>
<option value="INF">INF (Info)</option> <input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">
<option value="DBG">DBG (Debug)</option> <label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
<option value="TRC">TRC (Trace)</option> </div>
</select>
<div id="stats-area" class="small text-muted"></div> <div class="d-flex align-items-center gap-2">
<div id="filter-info" class="small text-muted me-2" style="display:none">
<span class="badge bg-secondary">Time Filtered</span>
</div>
<div class="search-container">
<i data-lucide="search" size="14" class="search-icon"></i>
<input type="text" id="global-search" placeholder="Search... (RegEx enabled)">
<button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>
</div>
</div> </div>
</div> </div>
<table id="log-table" class="table table-dark table-hover w-100"> <div class="chart-container" id="chart-parent">
<thead> <canvas id="intensityChart"></canvas>
<tr> <svg id="selection-overlay" width="100%" height="100%">
<th width="30"></th> <rect class="selection-rect" x="0" y="0" width="0" height="100%"></rect>
<th width="120">Timestamp</th> </svg>
<th width="80">Level</th> </div>
<th>Message</th>
<th width="300">Properties</th> <div class="content-area">
</tr> <div class="table-container shadow">
</thead> <table id="log-table" class="table table-dark table-hover table-sm w-100">
<tbody></tbody> <thead>
</table> <tr>
</div> <th width="35"></th>
<th width="90">Level</th>
<th width="130">Time</th>
<th>Message</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</main>
</div> </div>
<div class="modal fade" id="logModal" tabindex="-1"> <div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content border-secondary shadow-lg"> <div class="modal-content bg-dark border-secondary">
<div class="modal-header border-secondary">
<h6 class="modal-title">Log Message Detail</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body p-0"> <div class="modal-body p-0">
<pre id="modal-body-content" class="m-0 p-3" <pre id="modal-content" class="m-0 p-4 text-success-emphasis"
style="background:#000; color:#fff; font-size:0.8rem;"></pre> style="font-size: 0.75rem; background: #000; overflow-x: auto; font-family: 'Fira Code', monospace;"></pre>
</div> </div>
</div> </div>
</div> </div>
@@ -248,139 +308,175 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
const TRUNCATE_LIMIT = 150; let chart, table;
let timeRange = { start: null, end: null };
$(document).ready(function () { $(document).ready(function () {
const table = $('#log-table').DataTable({ table = $('#log-table').DataTable({
dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip', dom: 'rtip',
pageLength: 50, pageLength: 50,
order: [[2, 'desc']],
columns: [ columns: [
{ { className: 'text-center opacity-50', orderable: false, data: null, defaultContent: '<i data-lucide="eye" size="14"></i>' },
className: 'details-control', { data: 'level', render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` },
orderable: false,
data: null,
render: (d, t, row) => row.exception ? '<i data-lucide="chevron-right" size="16"></i>' : ''
},
{ data: 'time', className: 'text-muted' }, { data: 'time', className: 'text-muted' },
{ { data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
data: 'level',
render: l => `<span class="lvl-badge lvl-${l}">${l}</span>`
},
{
data: 'message',
render: function (data) {
if (data.length > TRUNCATE_LIMIT) {
return `<span>${data.substring(0, TRUNCATE_LIMIT)}</span><a class="btn-more ms-1" onclick="viewMore('${btoa(unescape(encodeURIComponent(data)))}')">...more</a>`;
}
return data;
}
},
{
data: 'props',
className: 'props-col',
render: p => p ? `<span title="${p} text-truncate d-block" style="max-width:280px">${p}</span>` : ''
}
], ],
order: [[1, 'asc']], createdRow: (row, data) => $(row).addClass('row-' + data.level),
drawCallback: function () { lucide.createIcons(); }, drawCallback: () => lucide.createIcons()
language: { search: "", searchPlaceholder: "Filter logs..." }
}); });
// Expandable Exception Rows // Global Search
$('#log-table tbody').on('click', 'td.details-control', function () { $('#global-search').on('keyup', function () {
let tr = $(this).closest('tr'), row = table.row(tr); table.search(this.value, true, false).draw();
if (row.child.isShown()) { $('#clear-search').toggle(this.value.length > 0);
row.child.hide(); });
$(this).html('<i data-lucide="chevron-right" size="16"></i>');
} else if (row.data().exception) { $('#clear-search').on('click', resetFilters);
row.child(`<div class="exception-view">${row.data().exception}</div>`).show();
$(this).html('<i data-lucide="chevron-down" class="text-danger" size="16"></i>'); function resetFilters() {
$('#global-search').val('').trigger('keyup');
timeRange = { start: null, end: null };
table.draw();
$('#filter-info').hide();
$('.selection-rect').hide();
}
// Intensity Chart
const ctx = document.getElementById('intensityChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { display: false }, tooltip: { enabled: true } },
scales: {
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
}
} }
lucide.createIcons();
}); });
// Level Filter // --- DRAG TO SELECT LOGIC ---
$('#level-filter').on('change', function () { let isDragging = false;
table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw(); let startX = 0;
const $overlay = $('#selection-overlay');
const $rect = $('.selection-rect');
$('#chart-parent').on('mousedown', function (e) {
isDragging = true;
startX = e.pageX - $overlay.offset().left;
$rect.attr({ 'x': startX, 'width': 0 }).show();
}); });
// --- FULL SCREEN DRAG & DROP --- $(window).on('mousemove', function (e) {
let dragCounter = 0; if (!isDragging) return;
window.addEventListener('dragenter', e => { let currentX = e.pageX - $overlay.offset().left;
e.preventDefault(); let width = currentX - startX;
dragCounter++; if (width < 0) {
$('#drop-overlay').css('display', 'flex'); $rect.attr('x', currentX).attr('width', Math.abs(width));
} else {
$rect.attr('width', width);
}
}); });
window.addEventListener('dragleave', e => { $(window).on('mouseup', function (e) {
dragCounter--; if (!isDragging) return;
if (dragCounter === 0) $('#drop-overlay').hide(); isDragging = false;
const finalX = parseInt($rect.attr('x'));
const finalWidth = parseInt($rect.attr('width'));
if (finalWidth < 5) { // If just a click
resetFilters();
return;
}
// Map pixels to Chart labels
const labels = chart.data.labels;
const chartArea = chart.chartArea;
const scale = chart.scales.x;
const getValAtPixel = (px) => {
const decimal = scale.getValueForPixel(px);
const index = Math.round(decimal);
return labels[Math.max(0, Math.min(labels.length - 1, index))];
};
timeRange.start = getValAtPixel(finalX);
timeRange.end = getValAtPixel(finalX + finalWidth);
$('#filter-info').show();
table.draw();
}); });
window.addEventListener('dragover', e => e.preventDefault()); // Right-click reset
$('#chart-parent').on('contextmenu', e => { e.preventDefault(); resetFilters(); });
window.addEventListener('drop', e => { // Custom Table Filter (Time + Level)
e.preventDefault(); $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
dragCounter = 0; const lvl = data[1];
$('#drop-overlay').hide(); const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
processFile(e.dataTransfer.files[0]); if (!checked.includes(lvl)) return false;
if (timeRange.start && timeRange.end) {
const logTime = data[2].substring(0, 5); // HH:mm
return logTime >= timeRange.start && logTime <= timeRange.end;
}
return true;
}); });
$('#file-input').on('change', e => processFile(e.target.files[0])); $('.btn-check').on('change', () => table.draw());
function processFile(file) { // File loading
if (!file) return; $('#dir-input').on('change', function (e) {
const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
$('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
window.loadedFiles = files;
});
window.loadLog = function (idx) {
$('.file-item').removeClass('active').eq(idx).addClass('active');
const reader = new FileReader(); const reader = new FileReader();
reader.onload = e => { reader.onload = e => {
const logs = parseLogs(e.target.result); const logs = parseLogs(e.target.result);
table.clear().rows.add(logs).draw(); table.clear().rows.add(logs).draw();
updateStats(logs); updateAnalytics(logs);
resetFilters();
}; };
reader.readAsText(file); reader.readAsText(window.loadedFiles[idx]);
} };
function parseLogs(text) { function parseLogs(text) {
const lines = text.split(/\r?\n/); const logs = [];
const results = []; const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\s(.*)$/;
// Support 6 levels: TRC, DBG, WRN, INF, ERR, CRT text.split(/\r?\n/).forEach(line => {
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|WRN|INF|ERR|CRT)\]\s(.*)$/; const match = line.match(regex);
if (match) logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
lines.forEach(line => { else if (logs.length > 0) logs[logs.length - 1].exception += line + "\n";
if (!line.trim()) return;
const match = line.match(headerRegex);
if (match) {
let content = match[3].trim();
let message = content, props = "";
// Parse props at the end: (key: value)
const lastParenIdx = content.lastIndexOf(' (');
if (lastParenIdx !== -1 && content.endsWith(')')) {
const possibleProps = content.substring(lastParenIdx + 2, content.length - 1);
if (possibleProps.includes(':')) {
props = possibleProps;
message = content.substring(0, lastParenIdx).trim();
}
}
results.push({ time: match[1], level: match[2], message, props, exception: "" });
} else if (results.length > 0) {
results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
}
}); });
return results; return logs;
} }
function updateStats(logs) { function updateAnalytics(logs) {
const count = logs.length; const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};
const errs = logs.filter(l => l.level === 'ERR' || l.level === 'CRT').length; logs.forEach(l => {
$('#stats-area').html(`<span class="me-3">${count} total logs</span> <span class="text-danger">${errs} errors/criticals</span>`); if (counts[l.level] !== undefined) counts[l.level]++;
const min = l.time.substring(0, 5);
bins[min] = (bins[min] || 0) + 1;
});
Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
const sortedLabels = Object.keys(bins).sort();
chart.data.labels = sortedLabels;
chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
chart.update();
} }
window.viewMore = function (encoded) { $('#log-table tbody').on('click', 'tr', function () {
const text = decodeURIComponent(escape(atob(encoded))); const data = table.row(this).data();
$('#modal-body-content').text(text); $('#modal-content').text(`[TIME] ${data.time}\n[LVL] ${data.level}\n\n${data.message}\n\n${data.exception}`);
new bootstrap.Modal('#logModal').show(); new bootstrap.Modal('#logModal').show();
}; });
}); });
</script> </script>
</body> </body>
js/chart.js
+14
View File
File diff suppressed because one or more lines are too long