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 21:27:32 +07:00
parent 712bceccbe
commit dc6714c3bf
2 changed files with 138 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
index.html
View File

@@ -4,12 +4,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log Analytics Dashboard</title>
<title>Log Viewer // Grafana Style</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
<script src="js/lucide.min.js"></script>
<script src="js/chart.js"></script>
<script src="js/chartjs-plugin-zoom.min.js"></script>
<style>
:root {
@@ -24,7 +25,7 @@
background-color: var(--bg-dark);
color: #f1f5f9;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-size: 0.82rem;
height: 100vh;
overflow: hidden;
}
@@ -61,7 +62,8 @@
display: flex;
justify-content: space-between;
margin-bottom: 2px;
font-size: 0.8rem;
font-size: 0.75rem;
transition: 0.2s;
}
.file-item:hover {
@@ -82,109 +84,104 @@
}
.top-bar {
padding: 0.75rem 1.5rem;
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;
z-index: 10;
}
/* Chart Area */
.chart-container {
height: 180px;
background: #111827;
/* Chart Area - Styled like Grafana */
.chart-section {
height: 200px;
background: #0b0e14;
padding: 10px 20px;
border-bottom: 1px solid var(--border-color);
position: relative;
}
/* Stats & Toggles */
.chart-hint {
position: absolute;
top: 5px;
right: 20px;
font-size: 0.7rem;
color: #64748b;
pointer-events: none;
}
/* Toggles */
.level-toggles .btn {
border: none;
font-size: 0.7rem;
font-weight: 600;
padding: 4px 10px;
font-weight: 700;
padding: 4px 12px;
margin-right: 4px;
border-radius: 4px;
}
.btn-check:not(:checked)+.btn {
opacity: 0.2;
opacity: 0.15;
filter: grayscale(1);
}
.btn-dbg {
background: #0ea5e9;
color: white;
background: #38bdf8;
color: #000;
}
.btn-inf {
background: #10b981;
color: white;
background: #4ade80;
color: #000;
}
.btn-wrn {
background: #f59e0b;
color: white;
background: #fbbf24;
color: #000;
}
.btn-err {
background: #ef4444;
color: white;
background: #f87171;
color: #000;
}
/* Table */
.content-area {
flex-grow: 1;
padding: 1.25rem;
padding: 1rem;
overflow-y: auto;
}
.table-container {
background: var(--card-dark);
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--border-color);
}
table.dataTable thead th {
background: rgba(255, 255, 255, 0.03);
background: #111827;
font-size: 0.7rem;
text-transform: uppercase;
padding: 10px 15px !important;
letter-spacing: 0.5px;
color: #94a3b8;
border-bottom: 1px solid var(--border-color) !important;
}
.lvl-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
.row-INF .lvl-indicator {
background: #10b981;
}
.row-ERR .lvl-indicator {
background: #ef4444;
}
.row-DBG .lvl-indicator {
background: #0ea5e9;
}
.row-WRN .lvl-indicator {
background: #f59e0b;
}
.search-input {
background: rgba(0, 0, 0, 0.2);
background: #0f172a;
border: 1px solid var(--border-color);
color: white;
border-radius: 4px;
padding: 4px 10px;
padding: 4px 12px;
font-size: 0.8rem;
width: 250px;
width: 280px;
}
.range-info {
font-size: 0.75rem;
color: var(--brand-color);
font-weight: 600;
}
</style>
</head>
@@ -193,11 +190,13 @@
<div class="wrapper">
<aside>
<div class="sidebar-header">
<h6 class="mb-3"><i data-lucide="activity" class="text-success me-2"></i>LogViewer Pro</h6>
<button class="btn btn-sm btn-outline-secondary w-100"
<div class="sidebar-header text-center">
<h6 class="mb-3 d-flex align-items-center justify-content-center gap-2">
<i data-lucide="bar-chart-3" class="text-success"></i> LOG EXPLORER
</h6>
<button class="btn btn-sm btn-outline-primary w-100 mb-2"
onclick="document.getElementById('dir-input').click()">
<i data-lucide="folder" size="14"></i> Load Directory
<i data-lucide="plus" size="14"></i> Select Project Folder
</button>
<input type="file" id="dir-input" webkitdirectory hidden>
</div>
@@ -206,38 +205,41 @@
<main>
<div class="top-bar">
<div class="level-toggles" id="filter-buttons">
<div class="level-toggles">
<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG">
<label class="btn btn-dbg" for="toggle-DBG">DBG <span id="count-DBG">0</span></label>
<label class="btn btn-dbg" for="toggle-DBG">DBG</label>
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">
<label class="btn btn-inf" for="toggle-INF">INF <span id="count-INF">0</span></label>
<label class="btn btn-inf" for="toggle-INF">INF</label>
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN">
<label class="btn btn-wrn" for="toggle-WRN">WRN <span id="count-WRN">0</span></label>
<label class="btn btn-wrn" for="toggle-WRN">WRN</label>
<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR">
<label class="btn btn-err" for="toggle-ERR">ERR <span id="count-ERR">0</span></label>
<label class="btn btn-err" for="toggle-ERR">ERR</label>
<span id="range-display" class="range-info ms-3"></span>
</div>
<div class="d-flex gap-3">
<input type="text" id="global-search" class="search-input" placeholder="Search RegEx...">
<button class="btn btn-link text-white p-0" id="reset-filter" title="Reset Filters">
<i data-lucide="rotate-ccw" size="18"></i>
<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 class="chart-container">
<div class="chart-section">
<span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time
range</span>
<canvas id="intensityChart"></canvas>
</div>
<div class="content-area">
<div class="table-container">
<div class="table-container shadow-lg">
<table id="log-table" class="table table-dark table-hover table-sm w-100">
<thead>
<tr>
<th width="30"></th>
<th width="90">Level</th>
<th width="80">Level</th>
<th width="120">Time</th>
<th>Message</th>
<th>Description</th>
</tr>
</thead>
<tbody></tbody>
@@ -247,17 +249,6 @@
</main>
</div>
<div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-dark border-secondary">
<div class="modal-body p-0">
<pre id="modal-content" class="m-0 p-4 text-info"
style="font-size: 0.8rem; background: #000;"></pre>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap5.min.js"></script>
@@ -266,92 +257,104 @@
<script>
lucide.createIcons();
let chart;
let rawData = [];
let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'}
$(document).ready(function () {
const table = $('#log-table').DataTable({
dom: 'rtip',
pageLength: 100,
pageLength: 50,
order: [[2, 'desc']],
columns: [
{
className: 'text-center opacity-50',
orderable: false,
data: null,
render: (d, t, row) => row.exception ? '<i data-lucide="plus-square" size="14"></i>' : ''
},
{ data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` },
{
data: 'level',
render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>`
render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>`
},
{ data: 'time' },
{
data: 'message',
render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>`
}
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` }
],
createdRow: (row, data) => $(row).addClass('row-' + data.level),
drawCallback: () => lucide.createIcons()
});
// Search & Reset
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
$('#reset-filter').on('click', () => {
$('#global-search').val('');
table.search('').column(2).search('').draw();
});
// Initialize Chart.js
// Chart.js Configuration
const ctx = document.getElementById('intensityChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80' }] },
data: { labels: [], datasets: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] },
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
scales: {
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
y: { beginAtZero: true, grid: { color: '#334155' }, ticks: { color: '#64748b' } }
y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#1e293b' } }
},
onClick: (e, activeEls) => {
if (activeEls.length > 0) {
const index = activeEls[0].index;
const label = chart.data.labels[index];
// Filter table by the HH:mm from the chart
table.column(2).search('^' + label, true, false).draw();
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();
}
}
}
}
}
});
// Level Toggles
$('.btn-check').on('change', () => table.draw());
// Custom Table Filter for Levels + Time Range
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
const level = data[1];
const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
return checked.includes(level);
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;
});
// Directory Handler
// Search & Reset
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
$('#reset-all').on('click', () => {
chart.resetZoom();
selectedTimeRange = null;
$('#range-display').text('');
$('#global-search').val('');
table.search('').draw();
});
$('.btn-check').on('change', () => table.draw());
// File/Directory Loading
$('#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((file, idx) => {
list.append(`<div class="file-item" onclick="loadLog(${idx})"><span>${file.name}</span></div>`);
});
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) {
$('.file-item').removeClass('active').eq(idx).addClass('active');
const reader = new FileReader();
reader.onload = function (e) {
reader.onload = e => {
const logs = parseLogs(e.target.result);
rawData = logs;
table.clear().rows.add(logs).draw();
updateChart(logs);
updateCounts(logs);
};
reader.readAsText(window.loadedFiles[idx]);
};
@@ -359,46 +362,26 @@
function parseLogs(text) {
const lines = text.split(/\r?\n/);
const logs = [];
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
lines.forEach(line => {
const match = line.match(headerRegex);
if (match) {
logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
} else if (logs.length > 0) {
logs[logs.length - 1].exception += line + "\n";
}
const match = line.match(regex);
if (match) logs.push({ time: match[1], level: match[2], message: match[3] });
});
return logs;
}
function updateChart(logs) {
// Bin logs by Minute (HH:mm)
const bins = {};
logs.forEach(l => {
const min = l.time.substring(0, 5); // Get HH:mm
bins[min] = (bins[min] || 0) + 1;
const m = l.time.substring(0, 5);
bins[m] = (bins[m] || 0) + 1;
});
const labels = Object.keys(bins).sort();
const data = labels.map(l => bins[l]);
chart.data.labels = labels;
chart.data.datasets[0].data = data;
chart.data.datasets[0].data = labels.map(l => bins[l]);
chart.resetZoom();
chart.update();
}
function updateCounts(logs) {
const counts = { DBG: 0, INF: 0, WRN: 0, ERR: 0 };
logs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; });
Object.keys(counts).forEach(lvl => $(`#count-${lvl}`).text(counts[lvl]));
}
$('#log-table tbody').on('click', 'tr', function () {
const data = table.row(this).data();
$('#modal-content').text(`[${data.time}] [${data.level}] ${data.message}\n\n${data.exception}`);
new bootstrap.Modal('#logModal').show();
});
});
</script>
</body>