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

Compare commits

base: alazhar/LogViewer:dc6714c3bf5dbf29ed905778c8d70dac2cbc667b
Branches Tags
alazhar/LogViewer:main alazhar/LogViewer:claude alazhar/LogViewer:gemini_v2.1 alazhar/LogViewer:gemini_v2
alazhar/LogViewer:tt alazhar/LogViewer:test
..
compare: alazhar/LogViewer:tt
Branches Tags
alazhar/LogViewer:claude alazhar/LogViewer:gemini_v2.1 alazhar/LogViewer:gemini_v2 alazhar/LogViewer:main
alazhar/LogViewer:tt alazhar/LogViewer:test

5 Commits
dc6714c3bf .. tt

Author SHA1 Message Date
alazhar ec2e8ffccb rev4 2026-04-27 19:37:57 +07:00
alazhar f797727448 rev3 2026-04-27 19:37:56 +07:00
alazhar a3d908ced4 rev2 2026-04-27 19:37:56 +07:00
alazhar 6a808cf3eb rev1 2026-04-27 19:37:56 +07:00
alazhar 6ae333eea5 init 2026-04-27 19:37:54 +07:00
3 changed files with 290 additions and 312 deletions
Expand all files Collapse all files
index.html
+290 -291
View File
@@ -4,249 +4,241 @@
<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 // Grafana Style</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">
<script src="js/lucide.min.js"></script> <script src="js/lucide.min.js"></script>
<script src="js/chart.js"></script>
<script src="js/chartjs-plugin-zoom.min.js"></script>
<style> <style>
:root { :root {
--sidebar-width: 260px; --bg-color: #0f111a;
--brand-color: #4ade80; --card-bg: #1a1c27;
--bg-dark: #0f172a; --border-color: #2d303e;
--card-dark: #1e293b; --accent-color: #3d5afe;
--border-color: #334155;
} }
body { body {
background-color: var(--bg-dark); background-color: var(--bg-color);
color: #f1f5f9; color: #e0e0e0;
font-family: 'Inter', sans-serif; font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.82rem; font-size: 0.85rem;
height: 100vh; overflow-x: hidden;
overflow: hidden;
} }
.wrapper { /* Full Screen Drop Zone */
display: flex; #drop-overlay {
height: 100vh; position: fixed;
} top: 0;
left: 0;
/* Sidebar */ 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;
}
.sidebar-header {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
}
.file-list {
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;
margin-bottom: 2px;
font-size: 0.75rem;
transition: 0.2s;
}
.file-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.file-item.active {
background: rgba(74, 222, 128, 0.15);
color: var(--brand-color);
}
/* Main Content */
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; align-items: center;
z-index: 10; justify-content: center;
} border: 4px dashed #fff;
color: white;
/* Chart Area - Styled like Grafana */
.chart-section {
height: 200px;
background: #0b0e14;
padding: 10px 20px;
border-bottom: 1px solid var(--border-color);
position: relative;
}
.chart-hint {
position: absolute;
top: 5px;
right: 20px;
font-size: 0.7rem;
color: #64748b;
pointer-events: none; pointer-events: none;
} }
/* Toggles */ /* Sleek Table Design */
.level-toggles .btn { .main-container {
border: none; padding: 1.5rem;
font-size: 0.7rem; max-width: 1600px;
font-weight: 700; margin: 0 auto;
padding: 4px 12px;
margin-right: 4px;
border-radius: 4px;
} }
.btn-check:not(:checked)+.btn { .table-card {
opacity: 0.15; background: var(--card-bg);
filter: grayscale(1);
}
.btn-dbg {
background: #38bdf8;
color: #000;
}
.btn-inf {
background: #4ade80;
color: #000;
}
.btn-wrn {
background: #fbbf24;
color: #000;
}
.btn-err {
background: #f87171;
color: #000;
}
/* Table */
.content-area {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
}
.table-container {
background: var(--card-dark);
border-radius: 6px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
table.dataTable {
border: none !important;
} }
table.dataTable thead th { table.dataTable thead th {
background: #111827; background: #242736;
font-size: 0.7rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; font-size: 0.7rem;
color: #94a3b8; letter-spacing: 1px;
border-bottom: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important;
} }
.search-input { /* Level Badges */
background: #0f172a; .lvl-badge {
border: 1px solid var(--border-color); font-weight: 700;
color: white; font-size: 0.7rem;
padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
padding: 4px 12px; display: inline-block;
font-size: 0.8rem; min-width: 40px;
width: 280px; text-align: center;
} }
.range-info { .lvl-TRC {
background: #424242;
color: #bdbdbd;
}
.lvl-DBG {
background: #1e3a8a;
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; font-size: 0.75rem;
color: var(--brand-color);
font-weight: 600;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="wrapper"> <div id="drop-overlay">
<aside> <i data-lucide="upload-cloud" size="64"></i>
<div class="sidebar-header text-center"> <h2 class="mt-3">Drop Log File to Import</h2>
<h6 class="mb-3 d-flex align-items-center justify-content-center gap-2"> </div>
<i data-lucide="bar-chart-3" class="text-success"></i> LOG EXPLORER
</h6> <div class="main-container">
<button class="btn btn-sm btn-outline-primary w-100 mb-2" <header class="d-flex justify-content-between align-items-center mb-4">
onclick="document.getElementById('dir-input').click()"> <div>
<i data-lucide="plus" size="14"></i> Select Project Folder <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>
<div class="file-list" id="file-list"></div> <button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()">
</aside> <i data-lucide="file-plus" class="me-1"></i> Open File
</button>
<input type="file" id="file-input" hidden accept=".log,.txt">
</header>
<main> <div class="table-card">
<div class="top-bar"> <div class="d-flex justify-content-between align-items-center mb-3">
<div class="level-toggles"> <div class="d-flex align-items-center gap-3">
<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG"> <select id="level-filter" class="form-select form-select-sm bg-dark border-secondary"
<label class="btn btn-dbg" for="toggle-DBG">DBG</label> style="width: 150px;">
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF"> <option value="">All Levels</option>
<label class="btn btn-inf" for="toggle-INF">INF</label> <option value="CRT">CRT (Critical)</option>
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN"> <option value="ERR">ERR (Error)</option>
<label class="btn btn-wrn" for="toggle-WRN">WRN</label> <option value="WRN">WRN (Warning)</option>
<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR"> <option value="INF">INF (Info)</option>
<label class="btn btn-err" for="toggle-ERR">ERR</label> <option value="DBG">DBG (Debug)</option>
<span id="range-display" class="range-info ms-3"></span> <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">
<input type="text" id="global-search" class="search-input" placeholder="Regex Search...">
<button class="btn btn-sm btn-dark border-secondary" id="reset-all" title="Reset Range & Filters">
<i data-lucide="refresh-cw" size="14"></i>
</button>
</div> </div>
</div> </div>
<div class="chart-section"> <table id="log-table" class="table table-dark table-hover w-100">
<span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time <thead>
range</span> <tr>
<canvas id="intensityChart"></canvas> <th width="30"></th>
</div> <th width="120">Timestamp</th>
<th width="80">Level</th>
<th>Message</th>
<th width="300">Properties</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="content-area"> <div class="modal fade" id="logModal" tabindex="-1">
<div class="table-container shadow-lg"> <div class="modal-dialog modal-lg modal-dialog-centered">
<table id="log-table" class="table table-dark table-hover table-sm w-100"> <div class="modal-content border-secondary shadow-lg">
<thead> <div class="modal-header border-secondary">
<tr> <h6 class="modal-title">Log Message Detail</h6>
<th width="30"></th> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
<th width="80">Level</th> </div>
<th width="120">Time</th> <div class="modal-body p-0">
<th>Description</th> <pre id="modal-body-content" class="m-0 p-3"
</tr> style="background:#000; color:#fff; font-size:0.8rem;"></pre>
</thead>
<tbody></tbody>
</table>
</div> </div>
</div> </div>
</main> </div>
</div> </div>
<script src="js/jquery-3.7.0.min.js"></script> <script src="js/jquery-3.7.0.min.js"></script>
@@ -256,132 +248,139 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
let chart; const TRUNCATE_LIMIT = 150;
let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'}
$(document).ready(function () { $(document).ready(function () {
const table = $('#log-table').DataTable({ const table = $('#log-table').DataTable({
dom: 'rtip', dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip',
pageLength: 50, pageLength: 50,
order: [[2, 'desc']],
columns: [ columns: [
{ data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` }, {
className: 'details-control',
orderable: false,
data: null,
render: (d, t, row) => row.exception ? '<i data-lucide="chevron-right" size="16"></i>' : ''
},
{ data: 'time', className: 'text-muted' },
{ {
data: 'level', data: 'level',
render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>` render: l => `<span class="lvl-badge lvl-${l}">${l}</span>`
}, },
{ data: 'time' }, {
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` } data: 'message',
], render: function (data) {
drawCallback: () => lucide.createIcons() 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>`;
// Chart.js Configuration
const ctx = document.getElementById('intensityChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: { labels: [], datasets: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] },
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#1e293b' } }
},
plugins: {
legend: { display: false },
zoom: {
zoom: {
drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.2)', borderColor: '#4ade80', borderWidth: 1 },
mode: 'x',
onZoomComplete: ({ chart }) => {
const { min, max } = chart.scales.x;
const labels = chart.data.labels;
const start = labels[Math.max(0, Math.floor(min))];
const end = labels[Math.min(labels.length - 1, Math.ceil(max))];
selectedTimeRange = { start, end };
$('#range-display').text(`Range: ${start} - ${end}`);
table.draw();
}
} }
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']],
drawCallback: function () { lucide.createIcons(); },
language: { search: "", searchPlaceholder: "Filter logs..." }
});
// Expandable Exception Rows
$('#log-table tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr'), row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
$(this).html('<i data-lucide="chevron-right" size="16"></i>');
} else if (row.data().exception) {
row.child(`<div class="exception-view">${row.data().exception}</div>`).show();
$(this).html('<i data-lucide="chevron-down" class="text-danger" size="16"></i>');
} }
lucide.createIcons();
}); });
// Custom Table Filter for Levels + Time Range // Level Filter
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => { $('#level-filter').on('change', function () {
const level = data[1]; table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw();
const timeStr = data[2]; // HH:mm:ss.SSS
const timeShort = timeStr.substring(0, 5); // HH:mm
// 1. Filter by Level
const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get();
if (!checkedLevels.includes(level)) return false;
// 2. Filter by Time Range (if zoomed)
if (selectedTimeRange) {
return timeShort >= selectedTimeRange.start && timeShort <= selectedTimeRange.end;
}
return true;
}); });
// Search & Reset // --- FULL SCREEN DRAG & DROP ---
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); }); let dragCounter = 0;
$('#reset-all').on('click', () => { window.addEventListener('dragenter', e => {
chart.resetZoom(); e.preventDefault();
selectedTimeRange = null; dragCounter++;
$('#range-display').text(''); $('#drop-overlay').css('display', 'flex');
$('#global-search').val('');
table.search('').draw();
}); });
$('.btn-check').on('change', () => table.draw()); window.addEventListener('dragleave', e => {
dragCounter--;
// File/Directory Loading if (dragCounter === 0) $('#drop-overlay').hide();
$('#dir-input').on('change', function (e) {
const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
const list = $('#file-list').empty();
files.forEach((f, i) => list.append(`<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
window.loadedFiles = files;
}); });
window.loadLog = function (idx) { window.addEventListener('dragover', e => e.preventDefault());
$('.file-item').removeClass('active').eq(idx).addClass('active');
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]));
function processFile(file) {
if (!file) return;
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();
updateChart(logs); updateStats(logs);
}; };
reader.readAsText(window.loadedFiles[idx]); reader.readAsText(file);
}; }
function parseLogs(text) { function parseLogs(text) {
const lines = text.split(/\r?\n/); const lines = text.split(/\r?\n/);
const logs = []; const results = [];
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/; // Support 6 levels: TRC, DBG, WRN, INF, ERR, CRT
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 match = line.match(regex); if (!line.trim()) return;
if (match) logs.push({ time: match[1], level: match[2], message: match[3] }); 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 logs; return results;
} }
function updateChart(logs) { function updateStats(logs) {
const bins = {}; const count = logs.length;
logs.forEach(l => { const errs = logs.filter(l => l.level === 'ERR' || l.level === 'CRT').length;
const m = l.time.substring(0, 5); $('#stats-area').html(`<span class="me-3">${count} total logs</span> <span class="text-danger">${errs} errors/criticals</span>`);
bins[m] = (bins[m] || 0) + 1;
});
const labels = Object.keys(bins).sort();
chart.data.labels = labels;
chart.data.datasets[0].data = labels.map(l => bins[l]);
chart.resetZoom();
chart.update();
} }
window.viewMore = function (encoded) {
const text = decodeURIComponent(escape(atob(encoded)));
$('#modal-body-content').text(text);
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
js/chartjs-plugin-zoom.min.js
Vendored
-7
View File
File diff suppressed because one or more lines are too long