updates to allow for proper searching and dark mode adjustments

Author: n0nag0n

dashboard/css/style.css

@@ -14,66 +14,127 @@
 }
 
 [data-theme="dark"] {
-    --bg-color: #212529;
-    --text-color: #f8f9fa;
-    --card-bg: #343a40;
-    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-    --header-bg: #2c3034;
-    --badge-primary: #6ea8fe;
-    --badge-success: #20c997;
-    --badge-danger: #f27474;
-    --badge-info: #6edff6;
-    --badge-warning: #ffca2c;
-    --border-color: #495057;
+    --bg-color: #121212; /* Darker background for better contrast */
+    --text-color: #e0e0e0; /* Lighter text for readability */
+    --card-bg: #1e1e1e; /* Slightly lighter card background */
+    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */
+    --header-bg: #1a1a1a; /* Consistent header background */
+    --badge-primary: #4a90e2; /* Softer blue for badges */
+    --badge-success: #28a745; /* Standard green for success */
+    --badge-danger: #dc3545; /* Standard red for danger */
+    --badge-info: #17a2b8; /* Standard cyan for info */
+    --badge-warning: #ffc107; /* Standard yellow for warning */
+    --border-color: #333333; /* Subtle border color */
 }
 
 [data-theme="dark"] .card-header {
-    color: var(--text-color);
+    background-color: #2a2a2a; /* Slightly darker background for contrast */
+    color: var(--text-color); /* Ensure text is readable */
+    border-bottom: 1px solid var(--border-color); /* Add subtle border */
+    font-weight: 600; /* Keep font weight consistent */
 }
 
 [data-theme="dark"] .list-group-item {
     color: var(--text-color);
+    background-color: var(--card-bg); /* Match card background */
 }
 
 [data-theme="dark"] .card-body {
     color: var(--text-color);
+    background-color: var(--card-bg); /* Match card background */
 }
 
 [data-theme="dark"] .badge {
-    color: #fff; /* Ensure badge text is always white for readability */
+    color: #ffffff; /* Ensure badge text is always white */
+    background-color: var(--badge-primary); /* Use primary badge color */
 }
 
 [data-theme="dark"] .table {
-    background-color: var(--card-bg); /* Match the card background */
+    background-color: var(--card-bg); /* Match card background */
     color: var(--text-color);
 }
 
 [data-theme="dark"] .table thead th, .table>:not(caption)>*>* {
-    background-color: var(--header-bg); /* Match the header background */
+    background-color: var(--header-bg); /* Match header background */
     color: var(--text-color);
-    border-bottom: 2px solid #495057; /* Slightly lighter border for contrast */
+    border-bottom: 2px solid var(--border-color); /* Subtle border for contrast */
 }
 
-[data-theme="dark"] .table tbody tr, .table>:not(caption)>*>* {
-    background-color: var(--card-bg);
-    border-bottom: 1px solid #495057; /* Subtle border between rows */
+[data-theme="dark"] .table tbody tr {
+    background-color: var(--card-bg); /* Match card background */
+    border-bottom: 1px solid var(--border-color); /* Subtle border between rows */
 }
 
 [data-theme="dark"] .table-hover tbody tr:hover {
-    background-color: rgba(255, 255, 255, 0.1); /* Keep the hover effect */
+    background-color: rgba(255, 255, 255, 0.1); /* Slight hover effect */
 }
 
 [data-theme="dark"] .form-control {
-    background-color: #495057;
+    background-color: #2a2a2a; /* Slightly lighter input background */
     color: var(--text-color);
-    border-color: #6c757d;
+    border-color: var(--border-color);
 }
 
 [data-theme="dark"] .form-control::placeholder {
-    color: #ced4da; /* Lighter gray for better visibility */
+    color: #b0b0b0; /* Lighter gray for better visibility */
     opacity: 1; /* Ensure full opacity for readability */
 }
 
+[data-theme="dark"] .json-container {
+    background-color: #1e1e1e; /* Match card background */
+    color: var(--text-color);
+    border: 1px solid var(--border-color); /* Add subtle border */
+}
+
+[data-theme="dark"] .json-key {
+    color: #82aaff; /* Brighter blue for keys */
+}
+
+[data-theme="dark"] .json-string {
+    color: #c3e88d; /* Brighter green for strings */
+}
+
+[data-theme="dark"] .json-number {
+    color: #f78c6c; /* Brighter orange for numbers */
+}
+
+[data-theme="dark"] .json-boolean {
+    color: #ffcb6b; /* Brighter yellow for booleans */
+}
+
+[data-theme="dark"] .json-null {
+    color: #d4d4d4; /* Neutral gray for null */
+}
+
+[data-theme="dark"] .form-select {
+    background-color: #2a2a2a; /* Match input background */
+    color: var(--text-color);
+    border-color: var(--border-color);
+}
+
+[data-theme="dark"] .form-select:focus {
+    background-color: #2a2a2a; /* Keep consistent on focus */
+    color: var(--text-color);
+    border-color: var(--badge-primary); /* Highlight border on focus */
+    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25); /* Subtle focus shadow */
+}
+
+[data-theme="dark"] .card-header.bg-light {
+    background-color: var(--header-bg); /* Match header background */
+    color: var(--text-color); /* Ensure text is readable */
+    border-bottom: 1px solid var(--border-color); /* Add subtle border */
+}
+
+[data-theme="dark"] .btn-outline-primary {
+    color: var(--badge-primary); /* Match primary badge color */
+    border-color: var(--badge-primary);
+}
+
+[data-theme="dark"] .btn-outline-primary:hover {
+    background-color: var(--badge-primary);
+    color: #ffffff; /* Ensure text is readable */
+}
+
 body {
     background-color: var(--bg-color);
     color: var(--text-color);
@@ -283,23 +344,23 @@ body {
 }
 
 [data-theme="dark"] .json-key {
-    color: #bb86fc;
+    color: #82aaff; /* Brighter blue for keys */
 }
 
 [data-theme="dark"] .json-string {
-    color: #81c784;
+    color: #c3e88d; /* Brighter green for strings */
 }
 
 [data-theme="dark"] .json-number {
-    color: #64b5f6;
+    color: #f78c6c; /* Brighter orange for numbers */
 }
 
 [data-theme="dark"] .json-boolean {
-    color: #ffb74d;
+    color: #ffcb6b; /* Brighter yellow for booleans */
 }
 
 [data-theme="dark"] .json-null {
-    color: #bdbdbd;
+    color: #d4d4d4; /* Neutral gray for null */
 }
 
 /* Adjust table styles */

dashboard/js/script.js

@@ -699,8 +699,8 @@ function setupFilterHandlers() {
 
     // Define operators directly instead of loading them
     const availableOperators = [
-        { id: 'contains', name: 'Contains', desc: 'Value contains the text (case-insensitive)' },
         { id: 'exact', name: 'Equals', desc: 'Value exactly matches the text' },
+        { id: 'contains', name: 'Contains', desc: 'Value contains the text (case-insensitive)' },
         { id: 'starts_with', name: 'Starts with', desc: 'Value starts with the text' },
         { id: 'ends_with', name: 'Ends with', desc: 'Value ends with the text' },
         { id: 'greater_than', name: '>', desc: 'Value is greater than (numeric comparison)' },
@@ -754,7 +754,7 @@ function setupFilterHandlers() {
     // Update all operator dropdowns (now uses hardcoded values)
     function updateOperatorDropdowns() {
         document.querySelectorAll('.event-operator-select').forEach(select => {
-            const currentValue = select.value || 'contains';
+            const currentValue = select.value || 'exact';
 
             // Clear existing options
             select.innerHTML = '';
@@ -774,41 +774,40 @@ function setupFilterHandlers() {
     }
 
     // Create a new event filter row
-    function addEventFilterRow(keyValue = '', operator = 'contains', valueValue = '') {
+    function addEventFilterRow(keyValue = '', operator = 'exact', valueValue = '') {
         // Hide the "no filters" message
         noEventFiltersMsg.style.display = 'none';
-        
+
         // Clone the template
         const clone = document.importNode(eventFilterTemplate.content, true);
         const row = clone.querySelector('.event-filter-row');
-        
+
+        // Append to container first to ensure DOM is updated
+        eventFiltersContainer.appendChild(row);
+
+        // Populate dropdowns after appending to the DOM
+        updateEventKeyDropdowns();
+        updateOperatorDropdowns();
+
         // Set initial values if provided
         const keySelect = row.querySelector('.event-key-select');
         const operatorSelect = row.querySelector('.event-operator-select');
         const valueInput = row.querySelector('.event-value-input');
-        
-        // Populate dropdowns
-        updateEventKeyDropdowns();
-        updateOperatorDropdowns();
-        
-        // Set values
+
         if (keyValue) keySelect.value = keyValue;
         if (operator) operatorSelect.value = operator;
         if (valueValue) valueInput.value = valueValue;
-        
+
         // Add remove handler
         row.querySelector('.remove-event-filter').addEventListener('click', function() {
             row.remove();
-            
+
             // Show message if no filters remain
             if (eventFiltersContainer.querySelectorAll('.event-filter-row').length === 0) {
                 noEventFiltersMsg.style.display = 'block';
             }
         });
-        
-        // Append to container
-        eventFiltersContainer.appendChild(row);
-        
+
         return row;
     }
 

dashboard/views/dashboard.php

@@ -188,8 +188,8 @@
                                         <!-- Replace existing Event Key/Value filters with this new section -->
                                         <div class="col-12">
                                             <div class="card border-light">
-                                                <div class="card-header d-flex justify-content-between align-items-center bg-light">
-                                                    <span>Event Data Filters</span>
+                                                <div class="card-header d-flex justify-content-between align-items-center">
+                                                    <span>Custom Event Filters</span>
                                                     <button type="button" class="btn btn-sm btn-outline-primary" id="add-event-filter">
                                                         <i class="bi bi-plus-circle"></i> Add Filter
                                                     </button>
@@ -364,6 +364,6 @@
     <!-- Chart.js -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <!-- Dashboard Logic -->
-    <script src="/js/script.js?ver=2"></script>
+    <script src="/js/script.js?ver=3"></script>
 </body>
 </html>

src/apm/migration/sqlite/0004-custom-events.sql

@@ -1,8 +1,5 @@
-
--- Add a deprecated comment to the apm_custom_events.event_data column
-ALTER TABLE apm_custom_events
-CHANGE COLUMN event_data event_data TEXT COMMENT 'Deprecated: Use apm_custom_event_data instead.';
-
+-- Note: SQLite doesn't support column comments or CHANGE COLUMN syntax
+-- Keeping event_data column as is, but it will be considered deprecated
 
 -- Create a new table for custom event key-value data
 CREATE TABLE IF NOT EXISTS apm_custom_event_data (
@@ -22,10 +19,10 @@ CREATE INDEX IF NOT EXISTS idx_apm_custom_event_data_key ON apm_custom_event_dat
 -- Migrate existing event_data JSON into the new apm_custom_event_data table
 INSERT INTO apm_custom_event_data (custom_event_id, request_id, json_key, json_value)
 SELECT 
-    id AS custom_event_id,
-    request_id,
-    json_each.json_key AS json_key,
-    json_each.json_value AS json_value
+    apm_custom_events.id AS custom_event_id,
+    apm_custom_events.request_id,
+    json_each.key AS json_key,
+    json_each.value AS json_value
 FROM 
     apm_custom_events,
     json_each(apm_custom_events.event_data);