388 lines
13 KiB
HTML
388 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Log Viewer Pro // Dark Mode</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>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #0f111a;
|
|
--card-bg: #1a1c27;
|
|
--border-color: #2d303e;
|
|
--accent-color: #3d5afe;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: #e0e0e0;
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
font-size: 0.85rem;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Full Screen Drop Zone */
|
|
#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;
|
|
}
|
|
|
|
/* Sleek Table Design */
|
|
.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;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
table.dataTable {
|
|
border: none !important;
|
|
}
|
|
|
|
table.dataTable thead th {
|
|
background: #242736;
|
|
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;
|
|
display: inline-block;
|
|
min-width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="drop-overlay">
|
|
<i data-lucide="upload-cloud" size="64"></i>
|
|
<h2 class="mt-3">Drop Log File to Import</h2>
|
|
</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="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<select id="level-filter" class="form-select form-select-sm bg-dark border-secondary"
|
|
style="width: 150px;">
|
|
<option value="">All Levels</option>
|
|
<option value="CRT">CRT (Critical)</option>
|
|
<option value="ERR">ERR (Error)</option>
|
|
<option value="WRN">WRN (Warning)</option>
|
|
<option value="INF">INF (Info)</option>
|
|
<option value="DBG">DBG (Debug)</option>
|
|
<option value="TRC">TRC (Trace)</option>
|
|
</select>
|
|
<div id="stats-area" class="small text-muted"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="log-table" class="table table-dark table-hover w-100">
|
|
<thead>
|
|
<tr>
|
|
<th width="30"></th>
|
|
<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="modal fade" id="logModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content border-secondary shadow-lg">
|
|
<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">
|
|
<pre id="modal-body-content" class="m-0 p-3"
|
|
style="background:#000; color:#fff; font-size:0.8rem;"></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>
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
const TRUNCATE_LIMIT = 150;
|
|
|
|
$(document).ready(function () {
|
|
const table = $('#log-table').DataTable({
|
|
dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip',
|
|
pageLength: 50,
|
|
columns: [
|
|
{
|
|
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',
|
|
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']],
|
|
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();
|
|
});
|
|
|
|
// Level Filter
|
|
$('#level-filter').on('change', function () {
|
|
table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw();
|
|
});
|
|
|
|
// --- FULL SCREEN DRAG & DROP ---
|
|
let dragCounter = 0;
|
|
window.addEventListener('dragenter', e => {
|
|
e.preventDefault();
|
|
dragCounter++;
|
|
$('#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]));
|
|
|
|
function processFile(file) {
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
const logs = parseLogs(e.target.result);
|
|
table.clear().rows.add(logs).draw();
|
|
updateStats(logs);
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
function parseLogs(text) {
|
|
const lines = text.split(/\r?\n/);
|
|
const results = [];
|
|
// 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 => {
|
|
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;
|
|
}
|
|
|
|
function updateStats(logs) {
|
|
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)));
|
|
$('#modal-body-content').text(text);
|
|
new bootstrap.Modal('#logModal').show();
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |