logviewer 1.5.7 → 1.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b2114d40916c4035ec2d6073e0bc07530fccda6d43662e1c0f15e46d2c5b053
-  data.tar.gz: 9bb090e8c537e956124225447d26d875e77e52f119671a3244db27049595c077
+  metadata.gz: c2e1bf52a01e4f5ef4cb8459d5cb0b7951a03b6ac78751b5b0338e132ff28e7f
+  data.tar.gz: dbaa77c1b51d5f25169cb23a0d84bc5e0a685494c46f6388ed59d8c142e9e5e2
 SHA512:
-  metadata.gz: 16968466a7abbed8986d033d090101f8e56fe9b2e080e6374bc558b469bfd78368a35592af1e2f51d13e8759bedc3dd34b4155344065f94c329e9debbaaac23c
-  data.tar.gz: 0e97e00b01233e994316d7cbad5343fd60f5e93ae0379b325ca95e8036af79c0046c121cb2db4ae654c1a56b2848ba2b1f1edcce6d75c5b6573bfb4feae04b08
+  metadata.gz: 35bed00c8c9b38854f8850156fd0a2a74b3f9e22b08c27fbcce0ccf830e55453a462f04f5eab630624df7aeaec7ab4f67bd3c0421925395f931f710fec3152a4
+  data.tar.gz: 8f16831c8b0fdc9bc5d1b927f2ef1d54d96d620e800330a1d9b3fc5192eed47a0a8c3b9b8c4bd5781f4d817d5c517aec8d4112f0f6fabd38cc8b9c3825f4556e

data/README.md

@@ -11,6 +11,8 @@ A Ruby gem that converts NDJSON log files into a readable HTML format for easy v
 - Simplified file paths (shows only filename, not full path)
 - Color-coded log levels for easy identification
 - Large, readable fonts throughout the interface (18px base size)
+- Interactive dynamic filtering by log level in the browser
+- Dark mode interface with optimized colors for comfortable viewing
 - Responsive design that works well in any browser
 - Automatically opens the generated HTML file in your default browser
 
@@ -46,7 +48,7 @@ This will:
 logviewer --level info example.ndjson
 ```
 
-Only shows log entries with level "info" and above (info, warning, error, fatal).
+Only includes log entries with level "info" and above in the HTML file. You can then use the interactive dropdown in the browser to filter further.
 
 ### Auto-Detection of Log Files
 
@@ -104,8 +106,10 @@ Example log entry:
 The generated HTML file will be saved in `/tmp/` with a timestamp and automatically opened in your browser. The HTML includes:
 
 - A wide, responsive table layout (1800px max width) with columns in order: date, level, tag, file, function, text
+- Interactive log level filtering dropdown for dynamic filtering in the browser
+- Dark mode theme with comfortable dark backgrounds and light text
 - Human-readable timestamps (MM/DD HH:MM:SS format)
-- Color-coded log levels
+- Color-coded log levels optimized for dark backgrounds
 - Sticky header for easy navigation
 - Hover effects for better readability
 - Large fonts (18px base size) for excellent readability
@@ -114,6 +118,14 @@ The generated HTML file will be saved in `/tmp/` with a timestamp and automatica
 - Date, file, and function names in monospace font
 - Color-coded tags for easy categorization
 
+## Interactive Features
+
+Once the HTML file opens in your browser, you can:
+- Use the dropdown in the header to dynamically filter log entries by minimum level
+- Filter changes are applied instantly without page reload
+- Entry counts update automatically to show how many entries match the current filter
+- Command line level acts as the initial data set - browser filtering works within those entries
+
 ## Development
 
 After checking out the repo, run the following commands to set up development:

data/lib/logviewer/version.rb

@@ -1,3 +1,3 @@
 module LogViewer
-  VERSION = "1.5.7"
+  VERSION = "1.7.0"
 end

data/lib/logviewer.rb

@@ -106,19 +106,19 @@ module LogViewer
     def level_color(level)
       case level.downcase
       when 'trace'
-        '#6c757d'
+        '#adb5bd'
       when 'debug'
-        '#6c757d'
+        '#adb5bd'
       when 'info'
-        '#0d6efd'
+        '#6ea8fe'
       when 'warning'
-        '#fd7e14'
+        '#fd9843'
       when 'error'
-        '#dc3545'
+        '#ea868f'
       when 'fatal'
-        '#6f42c1'
+        '#c29ffa'
       else
-        '#000000'
+        '#e0e0e0'
       end
     end
 
@@ -151,19 +151,20 @@ module LogViewer
                     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                     margin: 0;
                     padding: 20px;
-                    background-color: #f8f9fa;
+                    background-color: #1a1a1a;
+                    color: #e0e0e0;
                 }
                 .container {
                     max-width: 1800px;
                     margin: 0 auto;
-                    background: white;
+                    background: #2d2d2d;
                     border-radius: 8px;
-                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
                     overflow: hidden;
                 }
                 .header {
-                    background: #343a40;
-                    color: white;
+                    background: #1e1e1e;
+                    color: #f0f0f0;
                     padding: 20px;
                     text-align: center;
                 }
@@ -185,21 +186,23 @@ module LogViewer
                     table-layout: fixed;
                 }
                 th {
-                    background: #e9ecef;
+                    background: #3a3a3a;
+                    color: #f0f0f0;
                     padding: 18px;
                     text-align: left;
                     font-weight: 600;
-                    border-bottom: 2px solid #dee2e6;
+                    border-bottom: 2px solid #555555;
                     position: sticky;
                     top: 0;
                 }
                 td {
                     padding: 15px 18px;
-                    border-bottom: 1px solid #dee2e6;
+                    border-bottom: 1px solid #404040;
                     vertical-align: top;
+                    color: #e0e0e0;
                 }
                 tr:hover {
-                    background-color: #f8f9fa;
+                    background-color: #3a3a3a;
                 }
                 .level {
                     font-weight: bold;
@@ -215,14 +218,14 @@ module LogViewer
                 .file {
                     font-family: 'Monaco', 'Menlo', monospace;
                     font-size: 16px;
-                    color: #666;
+                    color: #b0b0b0;
                     max-width: 200px;
                     word-wrap: break-word;
                 }
                 .method {
                     font-family: 'Monaco', 'Menlo', monospace;
                     font-size: 16px;
-                    color: #333;
+                    color: #d0d0d0;
                     font-weight: 500;
                     max-width: 300px;
                     word-wrap: break-word;
@@ -231,18 +234,18 @@ module LogViewer
                 .timestamp {
                     font-family: 'Monaco', 'Menlo', monospace;
                     font-size: 15px;
-                    color: #666;
+                    color: #b0b0b0;
                     white-space: nowrap;
                 }
                 .tag {
                     font-family: 'Monaco', 'Menlo', monospace;
                     font-size: 16px;
-                    color: #007acc;
+                    color: #5dade2;
                     font-weight: 500;
                 }
 
                 .empty {
-                    color: #999;
+                    color: #777;
                     font-style: italic;
                 }
             </style>
@@ -252,6 +255,24 @@ module LogViewer
                 <div class="header">
                     <h1>Log Viewer</h1>
                     <p>#{File.basename(@input_file)} • #{logs.length} entries • Level: #{@min_level.upcase}+</p>
+                    <div style="margin-top: 15px;">
+                        <label for="levelFilter" style="color: white; margin-right: 10px;">Filter by level:</label>
+                        <select id="levelFilter" style="padding: 5px; font-size: 14px; border-radius: 4px; border: none; background-color: #3a3a3a; color: #f0f0f0;">
+      HTML
+
+    # Generate dropdown options only for levels >= command line minimum
+    min_level_num = LOG_LEVELS[@min_level]
+    LOG_LEVELS.each do |level, level_num|
+      if level_num >= min_level_num
+        html += <<~HTML
+                            <option value="#{level}">#{level.upcase}+</option>
+        HTML
+      end
+    end
+
+    html += <<~HTML
+                        </select>
+                    </div>
                 </div>
                 <div class="table-container">
                     <table>
@@ -279,7 +300,7 @@ module LogViewer
         method_content = log[:method].empty? ? '<span class="empty">-</span>' : log[:method]
         
         html += <<~HTML
-                                <tr>
+                                <tr data-level="#{log[:level].downcase}" data-level-num="#{LOG_LEVELS[log[:level].downcase] || 0}">
                                     <td class="timestamp">#{timestamp_content}</td>
                                     <td class="level" style="#{level_style}">#{log[:level]}</td>
                                     <td class="tag">#{tag_content}</td>
@@ -295,6 +316,51 @@ module LogViewer
                     </table>
                 </div>
             </div>
+          
+            <script>
+                const LOG_LEVELS = {
+                    'trace': 0,
+                    'debug': 1,
+                    'info': 2,
+                    'warning': 3,
+                    'error': 4,
+                    'fatal': 5
+                };
+              
+                const levelFilter = document.getElementById('levelFilter');
+                const tableRows = document.querySelectorAll('tbody tr');
+              
+                // Set initial filter to match command line parameter
+                levelFilter.value = '#{@min_level}';
+              
+                function filterByLevel() {
+                    const selectedLevel = levelFilter.value;
+                    const selectedLevelNum = LOG_LEVELS[selectedLevel];
+                    let visibleCount = 0;
+                  
+                    tableRows.forEach(row => {
+                        const rowLevelNum = parseInt(row.dataset.levelNum);
+                        if (rowLevelNum >= selectedLevelNum) {
+                            row.style.display = '';
+                            visibleCount++;
+                        } else {
+                            row.style.display = 'none';
+                        }
+                    });
+                  
+                    // Update the header count
+                    const header = document.querySelector('.header p');
+                    const originalText = header.textContent.split(' • ');
+                    originalText[1] = visibleCount + ' entries';
+                    originalText[2] = 'Level: ' + selectedLevel.toUpperCase() + '+';
+                    header.textContent = originalText.join(' • ');
+                }
+              
+                levelFilter.addEventListener('change', filterByLevel);
+              
+                // Apply initial filter
+                filterByLevel();
+            </script>
         </body>
         </html>
       HTML

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: logviewer
 version: !ruby/object:Gem::Version
-  version: 1.5.7
+  version: 1.7.0
 platform: ruby
 authors:
 - Justin Bishop