dbwatcher 1.1.0 → 1.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f11adeaf76a428fbbcff3438549b7fe8f741836f79263649dd967956704b3df1
-  data.tar.gz: '0258691a02aa88778f0703c41c4af76ca4481c2fb61e3b0963463d1b97c7e198'
+  metadata.gz: '08e110f9429a5d0a67afbea8155a063fcfb012228626cf2d7e0a42c00831db17'
+  data.tar.gz: 5f2f2db2a7c6c2bbaeeb3a57dafb2e0d4cd841542cd05a351473555591bc3078
 SHA512:
-  metadata.gz: da0df8d4b8f3d435bc0912bc7d9450d8299753ab8da7a3dc36749bb910b6f471bdc1238428d8ff7c4301b38fc30037de6a466e4efb4b7d7bcb5c3bf26787b152
-  data.tar.gz: 53ad9a4c27aee0e5acebcc3c61a2b70ba82bfd21f2f3012aada133298bf03bd21e7532e2c962e1b86ed3c58815f5f131590679189ced4767c44a4d1c734423f9
+  metadata.gz: e51c681692cc08e1af7d8663e2f1b036ff4c309a62c7b4264b769b6d7e549d915d98fd4834ba7e0d5615f03913595e03fa6e99d43d2e2618ede24f3f46278f92
+  data.tar.gz: d5265b28f063458470804315fbb9e4480e8669443799e345c420cc7e4c26eab1d6823464c5289f707c0c936549c926d7f850598486fb14d9817127e4892edd4d

data/README.md

@@ -1,6 +1,10 @@
 # DBWatcher
 
+[![CI](https://github.com/patrick204nqh/dbwatcher/actions/workflows/ci.yml/badge.svg)](https://github.com/patrick204nqh/dbwatcher/actions/workflows/ci.yml)
+[![Release Gem](https://github.com/patrick204nqh/dbwatcher/actions/workflows/release.yml/badge.svg)](https://github.com/patrick204nqh/dbwatcher/actions/workflows/release.yml)
 [![Gem Version](https://badge.fury.io/rb/dbwatcher.svg)](https://badge.fury.io/rb/dbwatcher)
+[![Maintainability](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher/maintainability.svg)](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher)
+[![Code Coverage](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher/coverage.svg)](https://qlty.sh/gh/patrick204nqh/projects/dbwatcher)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A Rails gem that tracks and visualizes database operations in your application. Built for developers who need to understand complex data flows and debug database interactions.
@@ -18,11 +22,11 @@ A Rails gem that tracks and visualizes database operations in your application.
 
 ### Dashboard Interface
 
-![image](https://github.com/user-attachments/assets/1ea48717-0251-4d2b-95ea-87e00e6b89c3)
+![image](https://github.com/user-attachments/assets/92c94bdc-06fd-463e-a11f-f931a8ff5346)
 
 ### Session View
 
-![image](https://github.com/user-attachments/assets/411423aa-341f-4112-9d10-1dd9e0a4d409)
+![image](https://github.com/user-attachments/assets/cae4c820-d7d9-4d16-b8fa-5978e0578ff8)
 
 [View more screenshots in here →](docs/screenshots.md)
 
@@ -120,6 +124,24 @@ bundle exec rake unit        # Unit tests only
 bundle exec rake acceptance  # Feature tests only
 ```
 
+### Code Coverage
+
+The project uses SimpleCov for code coverage and uploads results to Qlty. To run tests with coverage locally:
+
+```bash
+COVERAGE=true bundle exec rake test
+```
+
+Coverage reports will be generated in the `coverage/` directory.
+
+### CI Coverage Setup
+
+To enable coverage uploads to Qlty in CI:
+
+1. Create an account at [Qlty.sh](https://qlty.sh)
+2. Create a new project and get your coverage token
+3. Add the token as a GitHub repository secret named `QLTY_COVERAGE_TOKEN`
+
 ### Local Development
 
 ```bash

data/app/assets/javascripts/dbwatcher/components/changes_table_hybrid.js

@@ -174,8 +174,8 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
         responsiveLayout: false,
         height: Math.max(200, Math.min(400, (tabulatorData.length * 35) + 80)),  // Minimum 200px, expand based on content
         
-        // Force Tabulator to use our custom ID field
-        index: 'id',  // Tell Tabulator to use the 'id' field as the row identifier
+        // Force Tabulator to use our custom rowId field
+        index: 'rowId',  // Tell Tabulator to use the 'rowId' field as the row identifier
         
         // Performance optimizations - disable virtual DOM to ensure all rows render
         virtualDom: false,
@@ -208,29 +208,19 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       changes.forEach((change, index) => {
         const columnData = this.extractColumnData(change, tableInfo.columns);
         
-        // Create truly unique row ID using table name and index only (more reliable)
-        const uniqueId = `${tableName}_row_${index}`;
-        
-        // Clean column data to remove any 'id' field that might conflict
-        const cleanColumnData = { ...columnData };
-        delete cleanColumnData.id;  // Remove any id field from column data
+        // Create truly unique row ID using table name and index only (for Tabulator internal use)
+        const uniqueRowId = `${tableName}_row_${index}`;
         
         const row = {
-          id: uniqueId,  // Force this to be the ID used by Tabulator
+          rowId: uniqueRowId,  // Tabulator's internal row identifier
           index: index + 1,  // Display index (1-based) - should maintain API order
           operation: change.operation,
           timestamp: change.timestamp,
           table_name: tableName,
           change_data: change,  // Keep original change data with ID intact
-          original_change_id: change.id,  // Store original ID separately
-          ...cleanColumnData  // Use cleaned column data
+          ...columnData  // Include all column data including actual record ID
         };
         
-        // Ensure ID is correct
-        if (row.id !== uniqueId) {
-          row.id = uniqueId;  // Force it back
-        }
-        
         rows.push(row);
       });
 
@@ -252,7 +242,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
             const rowData = cell.getRow().getData();
             return `<div class="flex items-center justify-center gap-1">
                       <button class="expand-btn text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100" 
-                             data-row-id="${rowData.id}">
+                             data-row-id="${rowData.rowId}">
                         <svg class="w-3 h-3 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 5.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                         </svg>
@@ -375,7 +365,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
             const rowData = cell.getRow().getData();
             return `<div class="flex items-center justify-center gap-1">
                       <button class="expand-btn text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100" 
-                             data-row-id="${rowData.id}">
+                             data-row-id="${rowData.rowId}">
                         <svg class="w-3 h-3 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 5.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                         </svg>
@@ -576,7 +566,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
             // Try searching through data if direct lookup fails
             try {
               const data = tabulator.getData();
-              const matchingData = data.find(d => d.id === rowId);
+              const matchingData = data.find(d => d.rowId === rowId);
               if (matchingData) {
                 targetRow = tabulator.getRow(rowId);
                 foundInTable = tableName;
@@ -614,7 +604,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       // Create detail row as a proper table row
       const detailRow = document.createElement('tr');
       detailRow.className = 'row-detail bg-gray-50';
-      detailRow.setAttribute('data-parent-id', rowData.id);
+      detailRow.setAttribute('data-parent-id', rowData.rowId);
       
       // Create full-width cell
       const detailCell = document.createElement('td');
@@ -641,7 +631,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
           }, 50);
         }
       } catch (error) {
-        console.error(`Error creating detail row for ${rowData.id}:`, error);
+        console.error(`Error creating detail row for ${rowData.rowId}:`, error);
       }
     },
 
@@ -652,7 +642,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       
       
       // Find and remove the detail row
-      const detailRow = element.parentNode.querySelector(`tr.row-detail[data-parent-id="${rowData.id}"]`);
+      const detailRow = element.parentNode.querySelector(`tr.row-detail[data-parent-id="${rowData.rowId}"]`);
       if (detailRow) {
         detailRow.remove();
       } else {

data/app/assets/javascripts/dbwatcher/components/dashboard.js

@@ -0,0 +1,325 @@
+/**
+ * Dashboard Component for DBWatcher
+ * Handles tab switching and system info refresh functionality
+ */
+
+(function() {
+  'use strict';
+
+  // Configuration constants
+  const CONFIG = {
+    SELECTORS: {
+      container: '.dashboard-container',
+      tab: '.tab-item',
+      tabContent: '.tab-content',
+      refreshButton: '#refresh-system-info',
+      clearCacheButton: '#clear-cache-system-info',
+      systemInfoContent: '#system-info-content'
+    },
+    ENDPOINTS: {
+      refresh: '/dbwatcher/dashboard/system_info/refresh',
+      clearCache: '/dbwatcher/dashboard/system_info/clear_cache',
+      dashboard: '/dbwatcher',
+      systemInfo: '/dbwatcher/system_info'
+    }
+  };
+
+  // Dashboard Component Factory
+  const DashboardComponent = function(config = {}) {
+    // Merge configuration with defaults
+    const settings = {
+      ...CONFIG.SELECTORS,
+      ...config
+    };
+
+    // Component state
+    let isRefreshing = false;
+
+    // Initialize component
+    function init() {
+      console.log('Dashboard component init() called');
+      setupEventListeners();
+      console.log('Dashboard component initialized successfully');
+    }
+
+    // Setup event listeners
+    function setupEventListeners() {
+      // System info refresh
+      document.addEventListener('click', handleRefreshClick);
+      
+      // Clear cache
+      document.addEventListener('click', handleClearCacheClick);
+    }
+    
+
+    // Handle refresh button click
+    function handleRefreshClick(event) {
+      const target = event.target;
+      
+      if (!target.matches(settings.refreshButton)) {
+        return;
+      }
+      
+      event.preventDefault();
+      refreshSystemInfo();
+    }
+
+    // Handle clear cache button click
+    function handleClearCacheClick(event) {
+      const target = event.target;
+      
+      if (!target.matches(settings.clearCacheButton)) {
+        return;
+      }
+      
+      event.preventDefault();
+      
+      if (confirm('Are you sure you want to clear the system information cache?')) {
+        clearSystemInfoCache();
+      }
+    }
+
+    // Refresh system information
+    async function refreshSystemInfo() {
+      if (isRefreshing) {
+        return;
+      }
+      
+      isRefreshing = true;
+      const refreshButton = safeQuerySelector(settings.refreshButton);
+      
+      try {
+        // Update button state
+        if (refreshButton) {
+          refreshButton.disabled = true;
+          refreshButton.textContent = 'Refreshing...';
+        }
+        
+        // Make API call
+        const response = await fetch(CONFIG.ENDPOINTS.refresh, {
+          method: 'POST',
+          headers: utils.getApiHeaders()
+        });
+        
+        const data = await utils.handleApiResponse(response);
+        
+        if (data.success) {
+          // Update the system info content
+          await updateSystemInfoContent();
+          showNotification('System information refreshed successfully', 'success');
+        } else {
+          showNotification(data.error || 'Failed to refresh system information', 'error');
+        }
+        
+      } catch (error) {
+        console.error('Error refreshing system info:', error);
+        showNotification('Failed to refresh system information', 'error');
+      } finally {
+        isRefreshing = false;
+        
+        // Restore button state
+        if (refreshButton) {
+          refreshButton.disabled = false;
+          refreshButton.textContent = 'Refresh';
+        }
+      }
+    }
+
+    // Clear system information cache
+    async function clearSystemInfoCache() {
+      try {
+        const response = await fetch(CONFIG.ENDPOINTS.clearCache, {
+          method: 'DELETE',
+          headers: utils.getApiHeaders()
+        });
+        
+        const data = await utils.handleApiResponse(response);
+        
+        if (data.success) {
+          showNotification('System information cache cleared successfully', 'success');
+        } else {
+          showNotification(data.error || 'Failed to clear cache', 'error');
+        }
+        
+      } catch (error) {
+        console.error('Error clearing cache:', error);
+        showNotification('Failed to clear cache', 'error');
+      }
+    }
+
+    // Update system info content
+    async function updateSystemInfoContent() {
+      const contentContainer = safeQuerySelector(settings.systemInfoContent);
+      
+      if (!contentContainer) {
+        return;
+      }
+      
+      try {
+        // Make request to get updated HTML content
+        const response = await fetch(CONFIG.ENDPOINTS.dashboard, {
+          headers: {
+            'Accept': 'text/html',
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        });
+        
+        if (response.ok) {
+          const html = await response.text();
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, 'text/html');
+          const newContent = doc.querySelector('#system-info-content');
+          
+          if (newContent) {
+            contentContainer.innerHTML = newContent.innerHTML;
+          }
+        }
+      } catch (error) {
+        console.error('Error updating system info content:', error);
+      }
+    }
+
+    // Safe DOM access helper
+    function safeQuerySelector(selector) {
+      try {
+        return document.querySelector(selector);
+      } catch (e) {
+        console.warn('Error accessing DOM element:', selector, e);
+        return null;
+      }
+    }
+
+
+    // Utility functions
+    const utils = {
+      // Get CSRF token
+      getCsrfToken() {
+        const metaTag = safeQuerySelector('meta[name="csrf-token"]');
+        return metaTag?.getAttribute('content');
+      },
+      
+      // Common headers for API requests
+      getApiHeaders() {
+        return {
+          'Content-Type': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': this.getCsrfToken()
+        };
+      },
+      
+      // Handle API response
+      async handleApiResponse(response) {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return await response.json();
+      }
+    };
+
+    // Show notification
+    function showNotification(message, type = 'info') {
+      // Create notification element
+      const notification = document.createElement('div');
+      notification.className = `notification notification-${type}`;
+      notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        padding: 12px 16px;
+        border-radius: 4px;
+        color: white;
+        font-size: 14px;
+        z-index: 1000;
+        max-width: 300px;
+        word-wrap: break-word;
+        opacity: 0;
+        transform: translateY(-20px);
+        transition: all 0.3s ease;
+      `;
+      
+      // Set background color based on type
+      switch (type) {
+        case 'success':
+          notification.style.backgroundColor = '#10b981';
+          break;
+        case 'error':
+          notification.style.backgroundColor = '#ef4444';
+          break;
+        default:
+          notification.style.backgroundColor = '#3b82f6';
+      }
+      
+      notification.textContent = message;
+      
+      // Add to page
+      if (document.body) {
+        document.body.appendChild(notification);
+      }
+      
+      // Animate in
+      setTimeout(() => {
+        notification.style.opacity = '1';
+        notification.style.transform = 'translateY(0)';
+      }, 100);
+      
+      // Remove after 5 seconds
+      setTimeout(() => {
+        notification.style.opacity = '0';
+        notification.style.transform = 'translateY(-20px)';
+        setTimeout(() => {
+          if (notification.parentNode) {
+            notification.parentNode.removeChild(notification);
+          }
+        }, 300);
+      }, 5000);
+    }
+
+    // Public API
+    return {
+      init,
+      refreshSystemInfo,
+      clearSystemInfoCache
+    };
+  };
+
+  // Register component with DBWatcher
+  if (window.DBWatcher && window.DBWatcher.register) {
+    window.DBWatcher.register('dashboard', DashboardComponent);
+  }
+
+  // Safe DOM access helper
+  function safeQuerySelector(selector) {
+    try {
+      return document.querySelector(selector);
+    } catch (e) {
+      console.warn('Error accessing DOM element:', selector, e);
+      return null;
+    }
+  }
+
+  // Auto-initialize when DOM is ready with better error handling
+  function initializeDashboard() {
+    try {
+      if (safeQuerySelector('.dashboard-container') || safeQuerySelector('.tab-bar') || safeQuerySelector('#refresh-system-info') || safeQuerySelector('#clear-cache-system-info')) {
+        const dashboard = DashboardComponent();
+        dashboard.init();
+      }
+    } catch (error) {
+      console.error('Error initializing dashboard:', error);
+    }
+  }
+
+  // Multiple initialization strategies
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeDashboard);
+  } else if (document.readyState === 'interactive' || document.readyState === 'complete') {
+    // DOM is already loaded, but wait a bit for Alpine to initialize
+    setTimeout(initializeDashboard, 100);
+  }
+
+  // Also listen for Alpine initialization
+  document.addEventListener('alpine:init', () => {
+    setTimeout(initializeDashboard, 50);
+  });
+
+})();