rev1.3

rev1.2
rev1.1
2026-04-27 21:34:30 +07:00 · 2026-04-27 21:31:53 +07:00 · 2026-04-27 21:30:17 +07:00
1 changed files with 225 additions and 147 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Log Analytics Dashboard</title>
+    <title>Log Viewer Pro // Timeline Brush</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
@@ -18,13 +18,15 @@
            --bg-dark: #0f172a;
            --card-dark: #1e293b;
            --border-color: #334155;
+            --selection-bg: rgba(74, 222, 128, 0.2);
+            --selection-border: rgba(74, 222, 128, 0.5);
        }

        body {
            background-color: var(--bg-dark);
            color: #f1f5f9;
            font-family: 'Inter', sans-serif;
-            font-size: 0.85rem;
+            font-size: 0.82rem;
            height: 100vh;
            overflow: hidden;
        }
@@ -34,7 +36,6 @@
            height: 100vh;
        }

-        /* Sidebar */
        aside {
            width: var(--sidebar-width);
            background: var(--card-dark);
@@ -60,8 +61,8 @@
            cursor: pointer;
            display: flex;
            justify-content: space-between;
-            margin-bottom: 2px;
            font-size: 0.8rem;
+            margin-bottom: 2px;
        }

        .file-item:hover {
@@ -71,9 +72,9 @@
        .file-item.active {
            background: rgba(74, 222, 128, 0.15);
            color: var(--brand-color);
+            font-weight: 600;
        }

-        /* Main Content */
        main {
            flex-grow: 1;
            display: flex;
@@ -82,7 +83,7 @@
        }

        .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;
@@ -90,52 +91,104 @@
            align-items: center;
        }

-        /* Chart Area */
+        /* Chart Area with Selection Overlay */
        .chart-container {
-            height: 180px;
-            background: #111827;
+            height: 160px;
+            background: #0b0e14;
            padding: 10px 20px;
            border-bottom: 1px solid var(--border-color);
+            position: relative;
+            user-select: none;
        }

-        /* Stats & Toggles */
+        #selection-overlay {
+            position: absolute;
+            top: 10px;
+            left: 20px;
+            right: 20px;
+            bottom: 10px;
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        .selection-rect {
+            fill: var(--selection-bg);
+            stroke: var(--selection-border);
+            stroke-width: 1;
+            display: none;
+        }
+
+        /* Toggles & Controls */
        .level-toggles .btn {
            border: none;
            font-size: 0.7rem;
-            font-weight: 600;
+            font-weight: 700;
            padding: 4px 10px;
-            margin-right: 4px;
+            margin-right: 3px;
        }

        .btn-check:not(:checked)+.btn {
            opacity: 0.2;
-            filter: grayscale(1);
-        }
-
-        .btn-dbg {
-            background: #0ea5e9;
-            color: white;
+            filter: grayscale(0.8);
        }

        .btn-inf {
            background: #10b981;
-            color: white;
+            color: #fff;
        }

        .btn-wrn {
            background: #f59e0b;
-            color: white;
+            color: #fff;
        }

        .btn-err {
            background: #ef4444;
-            color: white;
+            color: #fff;
+        }
+
+        .btn-crt {
+            background: #a855f7;
+            color: #fff;
+        }
+
+        .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;
        }

-        /* Table */
        .content-area {
            flex-grow: 1;
-            padding: 1.25rem;
+            padding: 1rem;
            overflow-y: auto;
        }

@@ -146,8 +199,8 @@
        }

        table.dataTable thead th {
-            background: rgba(255, 255, 255, 0.03);
-            font-size: 0.7rem;
+            background: rgba(255, 255, 255, 0.02);
+            font-size: 0.65rem;
            text-transform: uppercase;
            padding: 10px 15px !important;
            border-bottom: 1px solid var(--border-color) !important;
@@ -168,24 +221,6 @@
        .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);
-            border: 1px solid var(--border-color);
-            color: white;
-            border-radius: 4px;
-            padding: 4px 10px;
-            font-size: 0.8rem;
-            width: 250px;
-        }
    </style>
 </head>

@@ -194,10 +229,11 @@
    <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"
-                    onclick="document.getElementById('dir-input').click()">
-                    <i data-lucide="folder" size="14"></i> Load Directory
+                <h6 class="mb-3 d-flex align-items-center gap-2">
+                    <i data-lucide="activity" class="text-success"></i> LogAnalytics
+                </h6>
+                <button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
+                    <i data-lucide="folder" size="14"></i> Directory
                </button>
                <input type="file" id="dir-input" webkitdirectory hidden>
            </div>
@@ -206,37 +242,44 @@

        <main>
            <div class="top-bar">
-                <div class="level-toggles" id="filter-buttons">
-                    <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>
-                    <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>
-                    <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>
-                    <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>
+                <div class="level-toggles">
+                    <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>
                </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>
-                    </button>
+                <div class="d-flex align-items-center gap-2">
+                    <div id="filter-info" class="small text-muted me-2" style="display:none">
+                        <span class="badge bg-secondary">Time Filtered</span>
+                    </div>
+                    <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>
                </div>
            </div>

-            <div class="chart-container">
+            <div class="chart-container" id="chart-parent">
                <canvas id="intensityChart"></canvas>
+                <svg id="selection-overlay" width="100%" height="100%">
+                    <rect class="selection-rect" x="0" y="0" width="0" height="100%"></rect>
+                </svg>
            </div>

            <div class="content-area">
-                <div class="table-container">
+                <div class="table-container shadow">
                    <table id="log-table" class="table table-dark table-hover table-sm w-100">
                        <thead>
                            <tr>
-                                <th width="30"></th>
+                                <th width="35"></th>
                                <th width="90">Level</th>
-                                <th width="120">Time</th>
+                                <th width="130">Time</th>
                                <th>Message</th>
                            </tr>
                        </thead>
@@ -251,8 +294,8 @@
        <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>
+                    <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>
@@ -265,138 +308,173 @@

    <script>
        lucide.createIcons();
-        let chart;
-        let rawData = [];
+        let chart, table;
+        let timeRange = { start: null, end: null };

        $(document).ready(function () {
-            const table = $('#log-table').DataTable({
+            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: 'level',
-                        render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>`
-                    },
-                    { data: 'time' },
-                    {
-                        data: 'message',
-                        render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>`
-                    }
+                    { 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>` }
                ],
                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();
+            // Global Search
+            $('#global-search').on('keyup', function () {
+                table.search(this.value, true, false).draw();
+                $('#clear-search').toggle(this.value.length > 0);
            });

-            // Initialize Chart.js
+            $('#clear-search').on('click', resetFilters);
+
+            function resetFilters() {
+                $('#global-search').val('').trigger('keyup');
+                timeRange = { start: null, end: null };
+                table.draw();
+                $('#filter-info').hide();
+                $('.selection-rect').hide();
+            }
+
+            // Intensity Chart
            const ctx = document.getElementById('intensityChart').getContext('2d');
            chart = new Chart(ctx, {
                type: 'bar',
-                data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80' }] },
+                data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
+                    responsive: true, maintainAspectRatio: false,
+                    plugins: { legend: { display: false }, tooltip: { enabled: true } },
                    scales: {
                        x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
-                        y: { beginAtZero: true, grid: { color: '#334155' }, ticks: { color: '#64748b' } }
-                    },
-                    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();
-                        }
+                        y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
                    }
                }
            });

-            // Level Toggles
-            $('.btn-check').on('change', () => table.draw());
+            // --- DRAG TO SELECT LOGIC ---
+            let isDragging = false;
+            let startX = 0;
+            const $overlay = $('#selection-overlay');
+            const $rect = $('.selection-rect');
+
+            $('#chart-parent').on('mousedown', function (e) {
+                isDragging = true;
+                startX = e.pageX - $overlay.offset().left;
+                $rect.attr({ 'x': startX, 'width': 0 }).show();
+            });
+
+            $(window).on('mousemove', function (e) {
+                if (!isDragging) return;
+                let currentX = e.pageX - $overlay.offset().left;
+                let width = currentX - startX;
+                if (width < 0) {
+                    $rect.attr('x', currentX).attr('width', Math.abs(width));
+                } else {
+                    $rect.attr('width', width);
+                }
+            });
+
+            $(window).on('mouseup', function (e) {
+                if (!isDragging) return;
+                isDragging = false;
+
+                const finalX = parseInt($rect.attr('x'));
+                const finalWidth = parseInt($rect.attr('width'));
+
+                if (finalWidth < 5) { // If just a click
+                    resetFilters();
+                    return;
+                }
+
+                // Map pixels to Chart labels
+                const labels = chart.data.labels;
+                const chartArea = chart.chartArea;
+                const scale = chart.scales.x;
+
+                const getValAtPixel = (px) => {
+                    const decimal = scale.getValueForPixel(px);
+                    const index = Math.round(decimal);
+                    return labels[Math.max(0, Math.min(labels.length - 1, index))];
+                };
+
+                timeRange.start = getValAtPixel(finalX);
+                timeRange.end = getValAtPixel(finalX + finalWidth);
+
+                $('#filter-info').show();
+                table.draw();
+            });
+
+            // Right-click reset
+            $('#chart-parent').on('contextmenu', e => { e.preventDefault(); resetFilters(); });
+
+            // Custom Table Filter (Time + Level)
            $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
-                const level = data[1];
+                const lvl = data[1];
                const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
-                return checked.includes(level);
+                if (!checked.includes(lvl)) return false;
+
+                if (timeRange.start && timeRange.end) {
+                    const logTime = data[2].substring(0, 5); // HH:mm
+                    return logTime >= timeRange.start && logTime <= timeRange.end;
+                }
+                return true;
            });

-            // Directory Handler
+            $('.btn-check').on('change', () => table.draw());
+
+            // File 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>`);
-                });
+                $('#file-list').empty().append(files.map((f, i) => `<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);
+                    updateAnalytics(logs);
+                    resetFilters();
                };
                reader.readAsText(window.loadedFiles[idx]);
            };

            function parseLogs(text) {
-                const lines = text.split(/\r?\n/);
                const logs = [];
-                const headerRegex = /^(\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 regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\s(.*)$/;
+                text.split(/\r?\n/).forEach(line => {
+                    const match = line.match(regex);
+                    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";
                });
                return logs;
            }

-            function updateChart(logs) {
-                // Bin logs by Minute (HH:mm)
-                const bins = {};
+            function updateAnalytics(logs) {
+                const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};
                logs.forEach(l => {
-                    const min = l.time.substring(0, 5); // Get HH:mm
+                    if (counts[l.level] !== undefined) counts[l.level]++;
+                    const min = l.time.substring(0, 5);
                    bins[min] = (bins[min] || 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;
+                Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
+                const sortedLabels = Object.keys(bins).sort();
+                chart.data.labels = sortedLabels;
+                chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
                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}`);
+                $('#modal-content').text(`[TIME] ${data.time}\n[LVL]  ${data.level}\n\n${data.message}\n\n${data.exception}`);
                new bootstrap.Modal('#logModal').show();
            });
        });
Author	SHA1	Message	Date
Al Azhar	8d65b877dd	rev1.3	2026-04-27 21:34:30 +07:00
Al Azhar	8a34443b77	rev1.2	2026-04-27 21:31:53 +07:00
Al Azhar	7c662f67e9	rev1.1	2026-04-27 21:30:17 +07:00