From f7977274489f3af37602932c7f6a5d0ea5d4dd50 Mon Sep 17 00:00:00 2001
From: Al Azhar <alazhar@indomaret.co.id>
Date: Mon, 27 Apr 2026 19:04:47 +0700
Subject: [PATCH] rev3

---
 index.html | 323 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 172 insertions(+), 151 deletions(-)
diff --git a/index.html b/index.html
index 7945afe..ced8d98 100644
--- a/index.html
+++ b/index.html
@@ -4,96 +4,123 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Log Parser</title>
+    <title>Log Viewer Pro</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;
+            background-color: #f8f9fa;
+            font-size: 0.82rem;
+            color: #333;
+        }
+
+        .container-fluid {
             padding: 20px;
         }
 
+        /* Drag & Drop */
         #drop-zone {
-            border: 2px dashed #0d6efd;
+            border: 2px dashed #dee2e6;
             background: #fff;
-            padding: 30px;
+            padding: 25px;
             text-align: center;
-            border-radius: 8px;
+            border-radius: 12px;
             cursor: pointer;
-            transition: 0.2s;
+            transition: all 0.2s ease;
             margin-bottom: 20px;
         }
 
-        #drop-zone:hover {
+        #drop-zone:hover,
+        #drop-zone.dragover {
+            border-color: #0d6efd;
             background: #f0f7ff;
         }
 
-        .table-container {
+        /* Table Styling */
+        .table-card {
             background: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+            padding: 15px;
         }
 
-        /* Badges */
-        .badge-ERR {
-            background-color: #dc3545;
-            color: white;
+        table.dataTable {
+            border-collapse: collapse !important;
+            border-top: 1px solid #eee;
         }
 
-        .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;
+        .badge-lvl {
+            font-weight: 600;
+            padding: 0.4em 0.7em;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            min-width: 45px;
+            display: inline-block;
             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;
+        .bg-INF {
+            background-color: #e3f2fd;
+            color: #0d6efd;
         }
 
-        .clickable-text {
-            color: #0d6efd;
+        .bg-ERR {
+            background-color: #ffebee;
+            color: #c62828;
+        }
+
+        .bg-DBG {
+            background-color: #f5f5f5;
+            color: #616161;
+        }
+
+        .bg-TRC {
+            background-color: #f3e5f5;
+            color: #7b1fa2;
+        }
+
+        /* Child Row / Exception */
+        .details-control {
             cursor: pointer;
+            color: #0d6efd;
+            font-size: 1rem;
+        }
+
+        .exception-wrapper {
+            background: #1e1e1e;
+            color: #dcdcdc;
+            padding: 15px;
+            border-radius: 6px;
+            font-family: 'Consolas', monospace;
+            font-size: 0.75rem;
+            white-space: pre-wrap;
+            margin: 10px 0;
+            border-left: 4px solid #c62828;
+        }
+
+        /* Utils */
+        .text-truncate-custom {
+            max-width: 500px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            vertical-align: bottom;
+        }
+
+        .btn-more {
+            color: #0d6efd;
             text-decoration: underline;
+            cursor: pointer;
             font-weight: 500;
+            margin-left: 5px;
         }
 
-        /* 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);
+        .props-text {
+            color: #666;
+            font-style: italic;
+            font-size: 0.75rem;
         }
     </style>
 </head>
@@ -102,35 +129,34 @@
 
     <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>
+            <h5 class="mb-1"><i class="bi bi-file-earmark-arrow-up text-primary"></i> Drop your .log file here</h5>
+            <p class="text-muted small mb-0">The parser handles timestamped headers and multi-line exceptions
+                automatically.</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>
+        <div class="table-card">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+                <div class="d-flex gap-2">
+                    <select id="level-filter" class="form-select form-select-sm" style="width: 140px;">
+                        <option value="">All Levels</option>
+                        <option value="INF">INF</option>
+                        <option value="ERR">ERR</option>
+                        <option value="DBG">DBG</option>
+                        <option value="TRC">TRC</option>
                     </select>
                 </div>
+                <div id="search-container"></div>
             </div>
 
-            <table id="log-table" class="table table-sm table-hover w-100">
+            <table id="log-table" class="table table-hover table-sm 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 width="100">Timestamp</th>
+                        <th width="60">Lvl</th>
                         <th>Message</th>
-                        <th>Props</th>
+                        <th width="250">Properties</th>
                     </tr>
                 </thead>
                 <tbody></tbody>
@@ -139,16 +165,15 @@
     </div>
 
     <div class="modal fade" id="logModal" tabindex="-1">
-        <div class="modal-dialog modal-xl">
+        <div class="modal-dialog modal-lg">
             <div class="modal-content">
-                <div class="modal-header">
-                    <h6 class="modal-title fw-bold">Full Log Content</h6>
+                <div class="modal-header py-2 px-3">
+                    <h6 class="modal-title">Full Message Log</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 class="modal-body bg-light">
+                    <div id="modal-body-content"
+                        style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem;"></div>
                 </div>
             </div>
         </div>
@@ -161,135 +186,131 @@
 
     <script>
         $(document).ready(function () {
-            const MAX_LEN = 100;
+            const TRUNCATE_LIMIT = 120;
 
-            // 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',
+            const table = $('#log-table').DataTable({
+                dom: '<"d-flex justify-content-between mb-2"f>rtip',
                 columns: [
                     {
                         className: 'details-control',
                         orderable: false,
                         data: null,
-                        render: (data, type, row) => row.exception ? '<i class="bi bi-plus-circle-fill"></i>' : ''
+                        render: (data, type, row) => row.exception ? '<i class="bi bi-chevron-right"></i>' : ''
                     },
                     { data: 'time' },
                     {
                         data: 'level',
-                        render: l => `<span class="badge badge-${l}">${l}</span>`
+                        render: l => `<span class="badge-lvl bg-${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>`;
+                        render: function (data) {
+                            if (data.length > TRUNCATE_LIMIT) {
+                                return `<span class="text-truncate-custom">${data.substring(0, TRUNCATE_LIMIT)}</span><span class="btn-more" onclick="showFullLog('${btoa(unescape(encodeURIComponent(data)))}')">...more</span>`;
                             }
                             return data;
                         }
                     },
                     {
                         data: 'props',
-                        render: p => `<span class="text-muted small" title="${p}">${p}</span>`
+                        render: p => `<span class="props-text">${p}</span>`
                     }
                 ],
                 order: [[1, 'asc']],
-                language: { search: "", searchPlaceholder: "Search any log..." }
+                language: { search: "", searchPlaceholder: "Quick search logs..." }
             });
 
-            // Expand Exceptions
+            // Expand/Collapse Child Row
             $('#log-table tbody').on('click', 'td.details-control', function () {
-                let tr = $(this).closest('tr'), row = table.row(tr);
+                let tr = $(this).closest('tr');
+                let row = table.row(tr);
+                let icon = $(this).find('i');
+
                 if (row.child.isShown()) {
                     row.child.hide();
-                    $(this).html('<i class="bi bi-plus-circle-fill"></i>');
+                    icon.attr('class', 'bi bi-chevron-right');
                 } 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>');
+                    row.child(`<div class="exception-wrapper">${row.data().exception}</div>`).show();
+                    icon.attr('class', 'bi bi-chevron-down text-danger');
                 }
             });
 
-            // 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();
+            // Level Filter
+            $('#level-filter').on('change', function () {
+                table.column(2).search(this.value).draw();
             });
 
-            // 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 => {
+            // Drag and Drop Logic
+            const zone = $('#drop-zone');
+            zone.on('dragover', e => { e.preventDefault(); zone.addClass('dragover'); });
+            zone.on('dragleave', e => { zone.removeClass('dragover'); });
+            zone.on('drop', e => {
                 e.preventDefault();
-                $('#drop-zone').css('background', '#fff');
-                handleFile(e.originalEvent.dataTransfer.files[0]);
+                zone.removeClass('dragover');
+                processFile(e.originalEvent.dataTransfer.files[0]);
             });
+            $('#file-input').on('change', e => processFile(e.target.files[0]));
 
-            function handleFile(file) {
+            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();
+                    const data = parseLogFile(e.target.result);
+                    table.clear().rows.add(data).draw();
                 };
                 reader.readAsText(file);
             }
 
-            function parseLogs(text) {
+            function parseLogFile(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(.*)$/;
+                const results = [];
+                // Header pattern: HH:mm:ss.SSS [LVL]
+                const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
 
                 lines.forEach(line => {
                     const trimmed = line.trim();
                     if (!trimmed) return;
 
-                    const baseMatch = line.match(baseRegex);
+                    const match = line.match(headerRegex);
+                    if (match) {
+                        let time = match[1];
+                        let level = match[2];
+                        let content = match[3].trim();
 
-                    if (baseMatch) {
-                        let time = baseMatch[1];
-                        let level = baseMatch[2];
-                        let content = baseMatch[3];
+                        let message = content;
+                        let props = "";
 
-                        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];
+                        // Template: {message} ({props})
+                        // Look for the last set of parentheses that contain a colon (key:value)
+                        const lastOpenParen = content.lastIndexOf(' (');
+                        if (lastOpenParen !== -1 && content.endsWith(')')) {
+                            const potentialProps = content.substring(lastOpenParen + 2, content.length - 1);
+                            if (potentialProps.includes(':')) {
+                                props = potentialProps;
+                                message = content.substring(0, lastOpenParen).trim();
+                            }
                         }
 
-                        // 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: "" });
+                        results.push({ time, level, 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";
+                        // If line doesn't start with timestamp, it's an exception/stack trace
+                        if (results.length > 0) {
+                            results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
                         }
                     }
                 });
-                return logs;
+                return results;
             }
+
+            // Modal Helper
+            window.showFullLog = function (encoded) {
+                const text = decodeURIComponent(escape(atob(encoded)));
+                $('#modal-body-content').text(text);
+                new bootstrap.Modal('#logModal').show();
+            };
         });
     </script>
+
 </body>
 
 </html>
\ No newline at end of file
