2026-04-27 19:45:25 +07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" data-bs-theme="dark">
|
2026-04-27 21:23:50 +07:00
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2026-04-27 23:00:42 +07:00
|
|
|
<title>Log Viewer Pro // Zoom Edition</title>
|
2026-04-27 21:23:50 +07:00
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
|
|
|
|
<script src="js/lucide.min.js"></script>
|
2026-04-27 23:00:42 +07:00
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
<script src="js/chart.js"></script>
|
2026-04-27 23:00:42 +07:00
|
|
|
<script src="js/hammer.min.js"></script>
|
2026-04-27 21:27:32 +07:00
|
|
|
<script src="js/chartjs-plugin-zoom.min.js"></script>
|
2026-04-27 21:23:50 +07:00
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
<style>
|
|
|
|
|
:root {
|
2026-04-27 21:23:50 +07:00
|
|
|
--sidebar-width: 260px;
|
2026-04-27 19:45:25 +07:00
|
|
|
--brand-color: #4ade80;
|
|
|
|
|
--bg-dark: #0f172a;
|
|
|
|
|
--card-dark: #1e293b;
|
|
|
|
|
--border-color: #334155;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
body {
|
|
|
|
|
background-color: var(--bg-dark);
|
|
|
|
|
color: #f1f5f9;
|
|
|
|
|
font-family: 'Inter', sans-serif;
|
2026-04-27 21:27:32 +07:00
|
|
|
font-size: 0.82rem;
|
2026-04-27 19:45:25 +07:00
|
|
|
height: 100vh;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
.wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
aside {
|
|
|
|
|
width: var(--sidebar-width);
|
2026-04-27 21:23:50 +07:00
|
|
|
background: var(--card-dark);
|
2026-04-27 19:45:25 +07:00
|
|
|
border-right: 1px solid var(--border-color);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
2026-04-27 21:23:50 +07:00
|
|
|
|
|
|
|
|
.sidebar-header {
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
border-bottom: 1px solid var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-list {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
.file-item {
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
2026-04-27 23:00:42 +07:00
|
|
|
font-size: 0.8rem;
|
2026-04-27 19:45:25 +07:00
|
|
|
margin-bottom: 2px;
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-item:hover {
|
|
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file-item.active {
|
|
|
|
|
background: rgba(74, 222, 128, 0.15);
|
|
|
|
|
color: var(--brand-color);
|
2026-04-27 23:00:42 +07:00
|
|
|
font-weight: 600;
|
2026-04-27 19:45:25 +07:00
|
|
|
}
|
|
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
main {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-bar {
|
2026-04-27 21:27:32 +07:00
|
|
|
padding: 0.6rem 1.5rem;
|
2026-04-27 21:23:50 +07:00
|
|
|
background: var(--card-dark);
|
2026-04-27 19:45:25 +07:00
|
|
|
border-bottom: 1px solid var(--border-color);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
.chart-container {
|
|
|
|
|
height: 160px;
|
2026-04-27 21:27:32 +07:00
|
|
|
background: #0b0e14;
|
2026-04-27 21:23:50 +07:00
|
|
|
padding: 10px 20px;
|
|
|
|
|
border-bottom: 1px solid var(--border-color);
|
2026-04-27 21:27:32 +07:00
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
.level-toggles .btn {
|
|
|
|
|
border: none;
|
2026-04-27 21:23:50 +07:00
|
|
|
font-size: 0.7rem;
|
2026-04-27 21:27:32 +07:00
|
|
|
font-weight: 700;
|
2026-04-27 23:00:42 +07:00
|
|
|
padding: 4px 10px;
|
|
|
|
|
margin-right: 3px;
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-check:not(:checked)+.btn {
|
2026-04-27 23:00:42 +07:00
|
|
|
opacity: 0.2;
|
|
|
|
|
filter: grayscale(0.8);
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-inf {
|
2026-04-27 23:00:42 +07:00
|
|
|
background: #10b981;
|
|
|
|
|
color: #fff;
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-wrn {
|
2026-04-27 23:00:42 +07:00
|
|
|
background: #f59e0b;
|
|
|
|
|
color: #fff;
|
2026-04-27 19:45:25 +07:00
|
|
|
}
|
2026-04-27 21:23:50 +07:00
|
|
|
|
|
|
|
|
.btn-err {
|
2026-04-27 23:00:42 +07:00
|
|
|
background: #ef4444;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-crt {
|
|
|
|
|
background: #a855f7;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Search Input Styling */
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clear-btn:hover {
|
|
|
|
|
color: #fff;
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-area {
|
|
|
|
|
flex-grow: 1;
|
2026-04-27 21:27:32 +07:00
|
|
|
padding: 1rem;
|
2026-04-27 21:23:50 +07:00
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-container {
|
|
|
|
|
background: var(--card-dark);
|
2026-04-27 23:00:42 +07:00
|
|
|
border-radius: 8px;
|
2026-04-27 19:45:25 +07:00
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
}
|
2026-04-27 21:23:50 +07:00
|
|
|
|
|
|
|
|
table.dataTable thead th {
|
2026-04-27 23:00:42 +07:00
|
|
|
background: rgba(255, 255, 255, 0.02);
|
|
|
|
|
font-size: 0.65rem;
|
2026-04-27 21:23:50 +07:00
|
|
|
text-transform: uppercase;
|
2026-04-27 23:00:42 +07:00
|
|
|
padding: 10px 15px !important;
|
2026-04-27 19:45:25 +07:00
|
|
|
border-bottom: 1px solid var(--border-color) !important;
|
|
|
|
|
}
|
2026-04-27 21:23:50 +07:00
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
.lvl-indicator {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-right: 8px;
|
2026-04-27 21:27:32 +07:00
|
|
|
}
|
|
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
.row-INF .lvl-indicator {
|
|
|
|
|
background: #10b981;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row-ERR .lvl-indicator {
|
|
|
|
|
background: #ef4444;
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
2026-04-27 19:45:25 +07:00
|
|
|
</style>
|
|
|
|
|
</head>
|
2026-04-27 21:23:50 +07:00
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
<body>
|
|
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
<div class="wrapper">
|
|
|
|
|
<aside>
|
2026-04-27 23:00:42 +07:00
|
|
|
<div class="sidebar-header">
|
|
|
|
|
<h6 class="mb-3 d-flex align-items-center gap-2">
|
|
|
|
|
<i data-lucide="shield-check" class="text-success"></i> LogViewer Pro
|
2026-04-27 21:27:32 +07:00
|
|
|
</h6>
|
2026-04-27 23:00:42 +07:00
|
|
|
<button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
|
|
|
|
|
<i data-lucide="folder" size="14"></i> Open Directory
|
2026-04-27 21:23:50 +07:00
|
|
|
</button>
|
|
|
|
|
<input type="file" id="dir-input" webkitdirectory hidden>
|
2026-04-27 19:45:25 +07:00
|
|
|
</div>
|
2026-04-27 21:23:50 +07:00
|
|
|
<div class="file-list" id="file-list"></div>
|
|
|
|
|
</aside>
|
2026-04-27 19:45:25 +07:00
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
<main>
|
|
|
|
|
<div class="top-bar">
|
2026-04-27 21:27:32 +07:00
|
|
|
<div class="level-toggles">
|
2026-04-27 23:00:42 +07:00
|
|
|
<input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
|
|
|
|
|
<label class="btn btn-inf" for="t-INF">INF <span id="c-INF">0</span></label>
|
|
|
|
|
<input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">
|
|
|
|
|
<label class="btn btn-wrn" for="t-WRN">WRN <span id="c-WRN">0</span></label>
|
|
|
|
|
<input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">
|
|
|
|
|
<label class="btn btn-err" for="t-ERR">ERR <span id="c-ERR">0</span></label>
|
|
|
|
|
<input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">
|
|
|
|
|
<label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
|
2026-04-27 19:45:25 +07:00
|
|
|
</div>
|
2026-04-27 21:23:50 +07:00
|
|
|
|
2026-04-27 21:27:32 +07:00
|
|
|
<div class="d-flex align-items-center gap-2">
|
2026-04-27 23:00:42 +07:00
|
|
|
<button class="btn btn-sm btn-outline-secondary" id="reset-chart-btn" title="Reset Chart Zoom">
|
|
|
|
|
<i data-lucide="maximize" size="14"></i> Reset Chart
|
2026-04-27 19:45:25 +07:00
|
|
|
</button>
|
2026-04-27 23:00:42 +07:00
|
|
|
<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>
|
2026-04-27 19:45:25 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
<div class="chart-container" id="chart-parent" title="Drag to Zoom | Right Click to Zoom Out">
|
2026-04-27 21:23:50 +07:00
|
|
|
<canvas id="intensityChart"></canvas>
|
2026-04-27 19:45:25 +07:00
|
|
|
</div>
|
2026-04-27 21:23:50 +07:00
|
|
|
|
|
|
|
|
<div class="content-area">
|
2026-04-27 23:00:42 +07:00
|
|
|
<div class="table-container shadow">
|
2026-04-27 21:23:50 +07:00
|
|
|
<table id="log-table" class="table table-dark table-hover table-sm w-100">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
2026-04-27 23:00:42 +07:00
|
|
|
<th width="35"></th>
|
|
|
|
|
<th width="90">Level</th>
|
|
|
|
|
<th width="130">Time</th>
|
|
|
|
|
<th>Message</th>
|
2026-04-27 21:23:50 +07:00
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody></tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
2026-04-27 19:45:25 +07:00
|
|
|
</div>
|
2026-04-27 21:23:50 +07:00
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
<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-header py-2 border-secondary">
|
|
|
|
|
<h6 class="modal-title small">Log Context / Exception</h6>
|
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body p-0">
|
|
|
|
|
<pre id="modal-content" class="m-0 p-4 text-success-emphasis"
|
|
|
|
|
style="font-size: 0.75rem; background: #000; overflow-x: auto; font-family: 'Fira Code', monospace;"></pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
<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>
|
|
|
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
2026-04-27 19:45:25 +07:00
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
<script>
|
|
|
|
|
lucide.createIcons();
|
2026-04-27 23:00:42 +07:00
|
|
|
let chart, table;
|
|
|
|
|
let rawLogs = [];
|
|
|
|
|
let visibleTimeRange = { min: null, max: null };
|
2026-04-27 19:45:25 +07:00
|
|
|
|
2026-04-27 21:23:50 +07:00
|
|
|
$(document).ready(function () {
|
2026-04-27 23:00:42 +07:00
|
|
|
table = $('#log-table').DataTable({
|
2026-04-27 21:23:50 +07:00
|
|
|
dom: 'rtip',
|
2026-04-27 21:27:32 +07:00
|
|
|
pageLength: 50,
|
2026-04-27 21:23:50 +07:00
|
|
|
order: [[2, 'desc']],
|
|
|
|
|
columns: [
|
2026-04-27 23:00:42 +07:00
|
|
|
{ className: 'text-center opacity-50', orderable: false, data: null, defaultContent: '<i data-lucide="eye" size="14"></i>' },
|
|
|
|
|
{ data: 'level', render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` },
|
|
|
|
|
{ data: 'time', className: 'text-muted' },
|
|
|
|
|
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
|
2026-04-27 21:23:50 +07:00
|
|
|
],
|
2026-04-27 23:00:42 +07:00
|
|
|
createdRow: (row, data) => $(row).addClass('row-' + data.level),
|
2026-04-27 21:23:50 +07:00
|
|
|
drawCallback: () => lucide.createIcons()
|
|
|
|
|
});
|
2026-04-27 19:45:25 +07:00
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
// Search Controls
|
|
|
|
|
$('#global-search').on('keyup', function () {
|
|
|
|
|
table.search(this.value, true, false).draw();
|
|
|
|
|
$('#clear-search').toggle(this.value.length > 0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#clear-search').on('click', function () {
|
|
|
|
|
$('#global-search').val('').trigger('keyup');
|
|
|
|
|
chart.resetZoom();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Initialize Chart with Zoom Plugin
|
2026-04-27 21:23:50 +07:00
|
|
|
const ctx = document.getElementById('intensityChart').getContext('2d');
|
|
|
|
|
chart = new Chart(ctx, {
|
|
|
|
|
type: 'bar',
|
2026-04-27 23:00:42 +07:00
|
|
|
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
|
2026-04-27 21:23:50 +07:00
|
|
|
options: {
|
2026-04-27 23:00:42 +07:00
|
|
|
responsive: true, maintainAspectRatio: false,
|
2026-04-27 21:27:32 +07:00
|
|
|
plugins: {
|
|
|
|
|
legend: { display: false },
|
|
|
|
|
zoom: {
|
|
|
|
|
zoom: {
|
2026-04-27 23:00:42 +07:00
|
|
|
drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.1)', borderColor: 'rgba(74, 222, 128, 0.4)', borderWidth: 1 },
|
2026-04-27 21:27:32 +07:00
|
|
|
mode: 'x',
|
2026-04-27 23:00:42 +07:00
|
|
|
onZoomComplete: ({ chart }) => updateFiltersFromZoom(chart)
|
|
|
|
|
},
|
|
|
|
|
pan: { enabled: true, mode: 'x', onPanComplete: ({ chart }) => updateFiltersFromZoom(chart) }
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
2026-04-27 23:00:42 +07:00
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
|
|
|
|
|
y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
|
2026-04-27 19:45:25 +07:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
// Manual Zoom Controls
|
|
|
|
|
$('#reset-chart-btn').on('click', () => chart.resetZoom());
|
2026-04-27 21:27:32 +07:00
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
// Right Click on Canvas to Zoom Out
|
|
|
|
|
document.getElementById('intensityChart').addEventListener('contextmenu', (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
chart.resetZoom();
|
|
|
|
|
});
|
2026-04-27 21:27:32 +07:00
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
function updateFiltersFromZoom(chartInstance) {
|
|
|
|
|
const minIndex = Math.floor(chartInstance.scales.x.min);
|
|
|
|
|
const maxIndex = Math.ceil(chartInstance.scales.x.max);
|
|
|
|
|
const labels = chartInstance.data.labels;
|
2026-04-27 21:27:32 +07:00
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
visibleTimeRange = {
|
|
|
|
|
min: labels[Math.max(0, minIndex)],
|
|
|
|
|
max: labels[Math.min(labels.length - 1, maxIndex)]
|
|
|
|
|
};
|
2026-04-27 19:45:25 +07:00
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
// Update main level counters based on zoomed logs
|
|
|
|
|
const filteredLogs = rawLogs.filter(l => {
|
|
|
|
|
const time = l.time.substring(0, 5);
|
|
|
|
|
return time >= visibleTimeRange.min && time <= visibleTimeRange.max;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
updateLevelCounts(filteredLogs);
|
|
|
|
|
table.draw(); // Refresh table view based on global search + new time range
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Combined Filter (DataTable search + Level toggles + Zoom range)
|
|
|
|
|
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
|
|
|
|
|
const lvl = data[1];
|
|
|
|
|
const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
|
|
|
|
|
if (!checked.includes(lvl)) return false;
|
|
|
|
|
|
|
|
|
|
if (visibleTimeRange.min && visibleTimeRange.max) {
|
|
|
|
|
const logTime = data[2].substring(0, 5);
|
|
|
|
|
return logTime >= visibleTimeRange.min && logTime <= visibleTimeRange.max;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
2026-04-27 21:27:32 +07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('.btn-check').on('change', () => table.draw());
|
|
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
// File/Directory logic
|
2026-04-27 21:23:50 +07:00
|
|
|
$('#dir-input').on('change', function (e) {
|
|
|
|
|
const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
|
2026-04-27 23:00:42 +07:00
|
|
|
$('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
|
2026-04-27 21:23:50 +07:00
|
|
|
window.loadedFiles = files;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
window.loadLog = function (idx) {
|
|
|
|
|
$('.file-item').removeClass('active').eq(idx).addClass('active');
|
|
|
|
|
const reader = new FileReader();
|
2026-04-27 21:27:32 +07:00
|
|
|
reader.onload = e => {
|
2026-04-27 23:00:42 +07:00
|
|
|
rawLogs = parseLogs(e.target.result);
|
|
|
|
|
table.clear().rows.add(rawLogs).draw();
|
|
|
|
|
|
|
|
|
|
// Set initial chart data
|
|
|
|
|
const bins = {};
|
|
|
|
|
rawLogs.forEach(l => {
|
|
|
|
|
const min = l.time.substring(0, 5);
|
|
|
|
|
bins[min] = (bins[min] || 0) + 1;
|
|
|
|
|
});
|
|
|
|
|
const sortedLabels = Object.keys(bins).sort();
|
|
|
|
|
chart.data.labels = sortedLabels;
|
|
|
|
|
chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
|
|
|
|
|
|
|
|
|
|
chart.resetZoom();
|
|
|
|
|
updateLevelCounts(rawLogs);
|
2026-04-27 21:23:50 +07:00
|
|
|
};
|
|
|
|
|
reader.readAsText(window.loadedFiles[idx]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function parseLogs(text) {
|
|
|
|
|
const logs = [];
|
2026-04-27 23:00:42 +07:00
|
|
|
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(INF|WRN|ERR|CRT|DBG|TRC)\]\s(.*)$/;
|
|
|
|
|
text.split(/\r?\n/).forEach(line => {
|
2026-04-27 21:27:32 +07:00
|
|
|
const match = line.match(regex);
|
2026-04-27 23:00:42 +07:00
|
|
|
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";
|
2026-04-27 21:23:50 +07:00
|
|
|
});
|
|
|
|
|
return logs;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-27 23:00:42 +07:00
|
|
|
function updateLevelCounts(logs) {
|
|
|
|
|
const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 };
|
|
|
|
|
logs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; });
|
|
|
|
|
Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
|
2026-04-27 21:23:50 +07:00
|
|
|
}
|
2026-04-27 23:00:42 +07:00
|
|
|
|
|
|
|
|
$('#log-table tbody').on('click', 'tr', function () {
|
|
|
|
|
const data = table.row(this).data();
|
|
|
|
|
$('#modal-content').text(`[TIME] ${data.time}\n[LVL] ${data.level}\n\n${data.message}\n\n${data.exception}`);
|
|
|
|
|
new bootstrap.Modal('#logModal').show();
|
|
|
|
|
});
|
2026-04-27 19:45:25 +07:00
|
|
|
});
|
2026-04-27 21:23:50 +07:00
|
|
|
</script>
|
2026-04-27 19:45:25 +07:00
|
|
|
</body>
|
2026-04-27 21:23:50 +07:00
|
|
|
|
2026-04-27 19:45:25 +07:00
|
|
|
</html>
|
