295 lines
11 KiB
HTML
295 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Advanced Log Parser</title>
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<style>
|
|
body {
|
|
background-color: #f4f7f6;
|
|
font-size: 0.85rem;
|
|
padding: 20px;
|
|
}
|
|
|
|
#drop-zone {
|
|
border: 2px dashed #0d6efd;
|
|
background: #fff;
|
|
padding: 30px;
|
|
text-align: center;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#drop-zone:hover {
|
|
background: #f0f7ff;
|
|
}
|
|
|
|
.table-container {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Badges */
|
|
.badge-ERR {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.badge-INF {
|
|
background-color: #0dcaf0;
|
|
color: #000;
|
|
}
|
|
|
|
.badge-DBG {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.badge-TRC {
|
|
background-color: #6610f2;
|
|
color: white;
|
|
}
|
|
|
|
/* Detail Rows */
|
|
td.details-control {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
color: #0d6efd;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.exception-box {
|
|
background: #fff5f5;
|
|
border-left: 4px solid #dc3545;
|
|
padding: 12px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8rem;
|
|
white-space: pre-wrap;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.clickable-text {
|
|
color: #0d6efd;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Search styling */
|
|
.dataTables_filter input {
|
|
border-radius: 20px;
|
|
padding: 5px 15px;
|
|
border: 1px solid #ddd;
|
|
outline: none;
|
|
}
|
|
|
|
.dataTables_filter input:focus {
|
|
border-color: #0d6efd;
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .15);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container-fluid">
|
|
<div id="drop-zone" onclick="document.getElementById('file-input').click()">
|
|
<h3><i class="bi bi-file-earmark-text"></i> Drag & Drop Log File</h3>
|
|
<p class="text-muted mb-0">The parser now supports inconsistent log formats and multi-line errors.</p>
|
|
<input type="file" id="file-input" hidden accept=".log,.txt">
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<div class="row g-3 mb-4 align-items-end">
|
|
<div class="col-md-3">
|
|
<label class="form-label fw-bold small text-uppercase">Filter Level</label>
|
|
<select id="level-filter" class="form-select form-select-sm">
|
|
<option value="">Show All Levels</option>
|
|
<option value="INF">INF (Info)</option>
|
|
<option value="ERR">ERR (Error)</option>
|
|
<option value="DBG">DBG (Debug)</option>
|
|
<option value="TRC">TRC (Trace)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="log-table" class="table table-sm table-hover w-100">
|
|
<thead>
|
|
<tr>
|
|
<th width="30"></th>
|
|
<th width="110">Time</th>
|
|
<th width="70">Level</th>
|
|
<th width="50">ID</th>
|
|
<th width="70">Tag</th>
|
|
<th>Message</th>
|
|
<th>Props</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="logModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h6 class="modal-title fw-bold">Full Log Content</h6>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div id="modal-content-text"
|
|
style="white-space: pre-wrap; font-family: monospace; background: #212529; color: #f8f9fa; padding: 20px; margin: 0; min-height: 200px;">
|
|
</div>
|
|
</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>
|
|
$(document).ready(function () {
|
|
const MAX_LEN = 100;
|
|
|
|
// DataTable setup
|
|
let table = $('#log-table').DataTable({
|
|
// 'f' adds the search filter box
|
|
dom: '<"d-flex justify-content-between align-items-center mb-3"lf>rtip',
|
|
columns: [
|
|
{
|
|
className: 'details-control',
|
|
orderable: false,
|
|
data: null,
|
|
render: (data, type, row) => row.exception ? '<i class="bi bi-plus-circle-fill"></i>' : ''
|
|
},
|
|
{ data: 'time' },
|
|
{
|
|
data: 'level',
|
|
render: l => `<span class="badge badge-${l}">${l}</span>`
|
|
},
|
|
{ data: 'id' },
|
|
{ data: 'tag' },
|
|
{
|
|
data: 'message',
|
|
render: (data) => {
|
|
if (data.length > MAX_LEN) {
|
|
return `${data.substr(0, MAX_LEN)}... <span class="clickable-text show-full" data-full="${btoa(unescape(encodeURIComponent(data)))}">[view more]</span>`;
|
|
}
|
|
return data;
|
|
}
|
|
},
|
|
{
|
|
data: 'props',
|
|
render: p => `<span class="text-muted small" title="${p}">${p}</span>`
|
|
}
|
|
],
|
|
order: [[1, 'asc']],
|
|
language: { search: "", searchPlaceholder: "Search any log..." }
|
|
});
|
|
|
|
// Expand Exceptions
|
|
$('#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 class="bi bi-plus-circle-fill"></i>');
|
|
} else if (row.data().exception) {
|
|
row.child(`<div class="exception-box">${row.data().exception}</div>`).show();
|
|
$(this).html('<i class="bi bi-dash-circle-fill text-danger"></i>');
|
|
}
|
|
});
|
|
|
|
// Full Content Modal
|
|
$('#log-table tbody').on('click', '.show-full', function () {
|
|
const fullText = decodeURIComponent(escape(atob($(this).data('full'))));
|
|
$('#modal-content-text').text(fullText);
|
|
new bootstrap.Modal('#logModal').show();
|
|
});
|
|
|
|
// Filters
|
|
$('#level-filter').on('change', function () { table.column(2).search(this.value).draw(); });
|
|
|
|
// File Input
|
|
$('#file-input').on('change', e => handleFile(e.target.files[0]));
|
|
$('#drop-zone').on('dragover', e => { e.preventDefault(); $('#drop-zone').css('background', '#f0f7ff'); });
|
|
$('#drop-zone').on('dragleave', e => { $('#drop-zone').css('background', '#fff'); });
|
|
$('#drop-zone').on('drop', e => {
|
|
e.preventDefault();
|
|
$('#drop-zone').css('background', '#fff');
|
|
handleFile(e.originalEvent.dataTransfer.files[0]);
|
|
});
|
|
|
|
function handleFile(file) {
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
const logs = parseLogs(e.target.result);
|
|
table.clear().rows.add(logs).draw();
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
function parseLogs(text) {
|
|
const lines = text.split(/\r?\n/);
|
|
const logs = [];
|
|
|
|
// Revised Regex: Just gets Time, Level, and the rest.
|
|
const baseRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
|
|
// Secondary regex to see if the "rest" starts with the ID | (Tag) pattern
|
|
const metaRegex = /^(\d+)\s\|\s\((.*?)\)\s(.*)$/;
|
|
|
|
lines.forEach(line => {
|
|
const trimmed = line.trim();
|
|
if (!trimmed) return;
|
|
|
|
const baseMatch = line.match(baseRegex);
|
|
|
|
if (baseMatch) {
|
|
let time = baseMatch[1];
|
|
let level = baseMatch[2];
|
|
let content = baseMatch[3];
|
|
|
|
let id = "", tag = "", message = content, props = "";
|
|
|
|
// Check if this line has the "ID | (TAG)" format
|
|
const metaMatch = content.match(metaRegex);
|
|
if (metaMatch) {
|
|
id = metaMatch[1];
|
|
tag = metaMatch[2];
|
|
message = metaMatch[3];
|
|
}
|
|
|
|
// Extract Props if they exist at the end (idtask: 123)
|
|
const propMatch = message.match(/\(([^)]+:[^)]+)\)$/);
|
|
if (propMatch) {
|
|
props = propMatch[1];
|
|
message = message.replace(propMatch[0], "").trim();
|
|
}
|
|
|
|
logs.push({ time, level, id, tag, message, props, exception: "" });
|
|
} else {
|
|
// If it's not a header line, it's an exception/stack trace
|
|
if (logs.length > 0) {
|
|
logs[logs.length - 1].exception += line + "\n";
|
|
}
|
|
}
|
|
});
|
|
return logs;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |