dbwatcher 0.1.5 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee5502341a37e588b1dcf38edd5f33fa9e0b3746f43efea7e419ec241e873150
-  data.tar.gz: 874907249da682606c7f02df3e423ba3f0b6ef8c553ff6165561ab5cb7ad0981
+  metadata.gz: f11adeaf76a428fbbcff3438549b7fe8f741836f79263649dd967956704b3df1
+  data.tar.gz: '0258691a02aa88778f0703c41c4af76ca4481c2fb61e3b0963463d1b97c7e198'
 SHA512:
-  metadata.gz: 8b8d78baaa87bad96ac04968238b945d162c8acc0451c678803d7defdfa46ab66fbb9d7e96ab8bc11a4f09166713f995e641bea32090c2346ab335939faa7770
-  data.tar.gz: 13dd481403397e95a74c04857718f878ebd35dc223ffa164dfaf871f6da4a9c0d02559555b25f5b575e5bab2cf265ce953902e400026647d3441c9bdd38a3e92
+  metadata.gz: da0df8d4b8f3d435bc0912bc7d9450d8299753ab8da7a3dc36749bb910b6f471bdc1238428d8ff7c4301b38fc30037de6a466e4efb4b7d7bcb5c3bf26787b152
+  data.tar.gz: 53ad9a4c27aee0e5acebcc3c61a2b70ba82bfd21f2f3012aada133298bf03bd21e7532e2c962e1b86ed3c58815f5f131590679189ced4767c44a4d1c734423f9

data/README.md

@@ -1,21 +1,32 @@
-# DBWatcher 🔍
+# DBWatcher
 
-Track and visualize database changes in your Rails application for easier debugging and development.
+[![Gem Version](https://badge.fury.io/rb/dbwatcher.svg)](https://badge.fury.io/rb/dbwatcher)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-DBWatcher is a powerful Rails gem that captures, stores, and visualizes all database operations in your application. Perfect for debugging complex data flows, understanding application behavior, and optimizing database performance.
+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.
 
-## ✨ Features
+## Key Features
 
-- **📊 Real-time Database Tracking**: Monitor all SQL operations (INSERT, UPDATE, DELETE, SELECT)
-- **🎯 Selective Tracking**: Track specific code blocks or entire requests
-- **📱 Web Dashboard**: Beautiful, responsive interface built with Alpine.js and Tailwind CSS
-- **💾 File-based Storage**: No additional database setup required
-- **🔗 URL-based Activation**: Simple `?dbwatch=true` parameter enables tracking
-- **🧹 Automatic Cleanup**: Configurable session cleanup and storage management
-- **⚡ Zero Dependencies**: Works with any Rails application without complex setup
-- **🔒 Development-focused**: Designed for development and testing environments
+- **Database Operation Tracking** - Capture SQL operations (INSERT, UPDATE, DELETE)
+- **Targeted Monitoring** - Track specific code blocks or entire HTTP requests
+- **Interactive Dashboard** - Clean web interface for exploring captured data
+- **Relationship Diagrams** - Visualize database relationships and model associations
+- **Simple Setup** - File-based storage with zero additional database requirements
+- **Development Ready** - Designed specifically for development environments
 
-## 🚀 Installation
+## Screenshots
+
+### Dashboard Interface
+
+![image](https://github.com/user-attachments/assets/1ea48717-0251-4d2b-95ea-87e00e6b89c3)
+
+### Session View
+
+![image](https://github.com/user-attachments/assets/411423aa-341f-4112-9d10-1dd9e0a4d409)
+
+[View more screenshots in here →](docs/screenshots.md)
+
+## Installation
 
 Add to your Gemfile:
 
@@ -23,260 +34,120 @@ Add to your Gemfile:
 gem 'dbwatcher', group: :development
 ```
 
-Then run:
+Install the gem:
 
 ```bash
 bundle install
 ```
 
-The engine will automatically mount at `/dbwatcher` in your Rails application.
+The dashboard automatically becomes available at `/dbwatcher` in your Rails application.
 
-### Manual Route Mounting (Optional)
+## Usage
 
-If you need custom mounting, add to your `config/routes.rb`:
+### Track Code Blocks
 
-```ruby
-Rails.application.routes.draw do
-  mount Dbwatcher::Engine => "/dbwatcher" if Rails.env.development?
-  # ... your other routes
-end
-```
-
-## 📖 Usage
-
-### 🎯 Targeted Tracking
-
-Track specific code blocks with detailed context:
+Monitor specific operations:
 
 ```ruby
-Dbwatcher.track(name: "User Registration Flow") do
-  user = User.create!(
-    name: "John Doe", 
-    email: "john@example.com"
-  )
-  
-  user.create_profile!(
-    bio: "Software Developer",
-    location: "San Francisco"
-  )
-  
-  user.posts.create!(
-    title: "Welcome Post",
-    content: "Hello World!"
-  )
+Dbwatcher.track(name: "User Registration") do
+  user = User.create!(name: "John", email: "john@example.com")
+  user.create_profile!(bio: "Developer")
+  user.posts.create!(title: "Hello World")
 end
 ```
 
-### 🌐 URL-based Tracking
+### Track HTTP Requests
 
-Enable tracking for any request by adding `?dbwatch=true`:
+Add `?dbwatch=true` to any URL:
 
 ```
-# Track a user show page
 GET /users/123?dbwatch=true
-
-# Track a form submission
-POST /users?dbwatch=true
-
-# Track API endpoints
-GET /api/posts?dbwatch=true
+POST /api/users?dbwatch=true
 ```
 
-### 📊 View Tracking Results
+### View Results
 
-Visit `/dbwatcher` in your Rails application to access the dashboard where you can:
-- Browse all tracking sessions
-- View detailed SQL queries and timing
-- Analyze database operation patterns
-- Monitor application performance
+Visit `/dbwatcher` in your browser to explore tracked operations.
 
-## ⚙️ Configuration
+## Configuration
 
-Create an initializer for custom configuration:
+Optional configuration in `config/initializers/dbwatcher.rb`:
 
 ```ruby
-# config/initializers/dbwatcher.rb
 Dbwatcher.configure do |config|
-  # Storage location for tracking data
   config.storage_path = Rails.root.join('tmp', 'dbwatcher')
-  
-  # Enable/disable tracking (default: development only)
   config.enabled = Rails.env.development?
-  
-  # Maximum number of sessions to keep
   config.max_sessions = 100
-  
-  # Automatic cleanup after N days
   config.auto_clean_after_days = 7
-  
-  # Include query parameters in tracking
-  config.include_params = true
-  
-  # Exclude certain SQL patterns
-  config.excluded_patterns = [
-    /SHOW TABLES/,
-    /DESCRIBE/
-  ]
 end
 ```
 
-## 🏗️ Development & Testing
-
-This project includes a comprehensive dummy Rails application for testing and development.
-
-### Running Tests
-
-```bash
-# Run all tests
-bundle exec rake test
-
-# Run specific test suites
-bundle exec rake unit          # Unit tests
-bundle exec rake acceptance    # Feature tests
-bundle exec cucumber -p chrome # Browser tests
-```
-
-### Development Server
-
-```bash
-# Start the dummy application
-cd spec/dummy
-bundle exec rails server -p 3001
-
-# Visit the test interface
-open http://localhost:3001
-
-# Visit DBWatcher dashboard
-open http://localhost:3001/dbwatcher
-```
-
-### Code Quality
-
-```bash
-# Run linter
-bundle exec rubocop
-
-# Auto-fix issues
-bundle exec rubocop --autocorrect
-
-# Security analysis
-bundle exec brakeman
-```
-
-## 🛠️ Troubleshooting
-
-### Route Helper Errors
-
-If you encounter `undefined method 'dbwatcher_sessions_path'`:
-
-1. **Restart your Rails server** after installing the gem
-2. **Check Rails version** - requires Rails 6.0+
-3. **Manual mounting** - add the mount line to your routes file
-
-### Performance Considerations
-
-- DBWatcher is designed for development environments
-- Disable in production using `config.enabled = false`
-- Use targeted tracking for performance-sensitive operations
-- Regular cleanup prevents storage bloat
-
-### Storage Location
-
-- Default: `Rails.root/tmp/dbwatcher/`
-- Files are JSON formatted for easy inspection
-- Sessions auto-expire based on configuration
-
-## 🔧 Advanced Usage
+## Advanced Features
 
 ### Custom Metadata
 
-Add context to your tracking sessions:
+Add context to your tracking:
 
 ```ruby
 Dbwatcher.track(
-  name: "Complex Business Logic",
-  metadata: {
-    user_id: current_user.id,
-    feature_flag: "new_checkout",
-    version: "2.1.0"
-  }
+  name: "Order Processing",
+  metadata: { user_id: current_user.id, order_type: "premium" }
 ) do
-  # Your database operations
+  # Database operations here
 end
 ```
 
-### Conditional Tracking
-
-```ruby
-Dbwatcher.track(name: "Admin Operations") do
-  # This will only track if DBWatcher is enabled
-  User.where(admin: true).update_all(last_seen: Time.current)
-end if Dbwatcher.enabled?
-```
+### Testing Integration
 
-### Integration with Testing
+Use in your test suite:
 
 ```ruby
-# In your test suite
-RSpec.describe "User Registration" do
-  it "creates user with proper associations" do
-    session_data = nil
-    
-    Dbwatcher.track(name: "Test User Creation") do
-      user = create(:user)
-      expect(user.profile).to be_present
-    end
-    
-    # Analyze the tracked operations
-    expect(Dbwatcher::Storage.last_session).to include_sql(/INSERT INTO users/)
+it "creates user with associations" do
+  Dbwatcher.track(name: "User Creation Test") do
+    user = create(:user)
+    expect(user.profile).to be_present
   end
 end
 ```
 
-## 📁 Project Structure
+## Development
 
-```
-dbwatcher/
-├── app/
-│   ├── controllers/dbwatcher/    # Web interface controllers
-│   └── views/dbwatcher/          # Dashboard templates
-├── config/
-│   └── routes.rb                 # Engine routes
-├── lib/dbwatcher/
-│   ├── configuration.rb         # Configuration management
-│   ├── engine.rb                # Rails engine
-│   ├── middleware.rb            # Rack middleware
-│   ├── storage.rb               # File-based storage
-│   └── tracker.rb               # Core tracking logic
-└── spec/
-    ├── dummy/                    # Test Rails application
-    ├── acceptance/               # Feature tests
-    └── unit/                     # Unit tests
+### Running Tests
+
+```bash
+bundle exec rake test        # All tests
+bundle exec rake unit        # Unit tests only
+bundle exec rake acceptance  # Feature tests only
 ```
 
-## 🤝 Contributing
+### Local Development
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+```bash
+cd spec/dummy
+bundle exec rails server -p 3001
+open http://localhost:3001/dbwatcher
+```
 
-1. Fork the repository
-2. Create a feature branch: `git checkout -b feature/amazing-feature`
-3. Make your changes and add tests
-4. Ensure all tests pass: `bundle exec rake test`
-5. Run the linter: `bundle exec rubocop`
-6. Commit your changes: `git commit -am 'Add amazing feature'`
-7. Push to the branch: `git push origin feature/amazing-feature`
-8. Open a Pull Request
+### Code Quality
 
-## 📝 License
+```bash
+bundle exec rubocop    # Linting
+bundle exec brakeman   # Security analysis
+```
 
-This gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+## Contributing
 
-## 🙏 Acknowledgments
+1. Fork the repository
+2. Create a feature branch: `git checkout -b my-feature`
+3. Make changes and add tests
+4. Run tests: `bundle exec rake test`
+5. Run linter: `bundle exec rubocop`
+6. Commit changes: `git commit -am 'Add feature'`
+7. Push branch: `git push origin my-feature`
+8. Open a Pull Request
 
-- Built with Rails Engine architecture
-- UI powered by Alpine.js and Tailwind CSS
-- Inspired by debugging needs in complex Rails applications
+[Contributing guidelines →](CONTRIBUTING.md)
 
----
+## License
 
-**Happy Debugging!** 🐛✨
+Released under the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/config/dbwatcher_manifest.js

@@ -0,0 +1,15 @@
+//= link_directory ../javascripts .js
+//= link dbwatcher/dbwatcher.js
+//= link dbwatcher/auto_init.js
+//= link dbwatcher/alpine_registrations.js
+//= link_tree ../javascripts/dbwatcher/components
+//= link dbwatcher/components/changes_table_hybrid.js
+//= link_tree ../javascripts/dbwatcher/core
+//= link_tree ../javascripts/dbwatcher/services
+//= link dbwatcher/vendor/lodash.min.js
+//= link dbwatcher/vendor/date-fns-browser.js
+//= link dbwatcher/vendor/tabulator.min.js
+
+// Stylesheets
+//= link dbwatcher/application.css
+//= link dbwatcher/vendor/tabulator.min.css

data/app/assets/javascripts/dbwatcher/alpine_registrations.js

@@ -0,0 +1,39 @@
+/**
+ * Alpine Component Registrations
+ * Provides direct Alpine.js component registrations as a fallback
+ */
+
+document.addEventListener('alpine:init', function() {
+  if (!window.Alpine) {
+    console.error('Alpine.js not found');
+    return;
+  }
+
+  // Register changesTableHybrid component
+  if (window.DBWatcher && window.DBWatcher.components && window.DBWatcher.components.changesTableHybrid) {
+    window.Alpine.data('changesTableHybrid', function(config = {}) {
+      return window.DBWatcher.components.changesTableHybrid(config);
+    });
+    console.log('✅ Registered changesTableHybrid component with Alpine');
+  } else {
+    // Minimal fallback
+    console.warn('⚠️ changesTableHybrid component not found, using minimal fallback');
+    window.Alpine.data('changesTableHybrid', function(config = {}) {
+      return {
+        sessionId: config.sessionId || null,
+        tableData: {},
+        filters: { search: '', operation: '', table: '' },
+        showColumnSelector: false,
+        loading: false,
+        error: 'Component not loaded',
+        
+        init() {
+          console.error('changesTableHybrid: Component failed to load');
+        }
+      };
+    });
+  }
+
+  // Register other components as needed
+  // diagrams, summary, etc.
+});

data/app/assets/javascripts/dbwatcher/auto_init.js

@@ -0,0 +1,23 @@
+/**
+ * DBWatcher Auto-Initializer
+ * This file is the main entry point for auto-initializing the DBWatcher system
+ * and its components when loaded into the browser.
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize DBWatcher
+  if (window.DBWatcher) {
+    window.DBWatcher.init({
+      debug: false
+    });
+  } else {
+    console.error('DBWatcher not loaded!');
+  }
+
+  // Initialize Alpine Store
+  if (window.Alpine) {
+    document.dispatchEvent(new Event('alpine:init'));
+  } else {
+    console.warn('Alpine.js not loaded!');
+  }
+});

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

@@ -0,0 +1,141 @@
+/**
+ * DBWatcher Base Component
+ * Provides standard lifecycle, utilities, and error handling for all components
+ * Optimized to leverage libraries for common utilities
+ */
+DBWatcher.BaseComponent = function(config = {}) {
+  return {
+    // Standard lifecycle properties
+    loading: false,
+    error: null,
+    config: config,
+
+    // Initialization - called automatically by Alpine.js
+    init() {
+      if (this.componentInit) {
+        try {
+          this.componentInit();
+        } catch (error) {
+          this.handleError(error);
+        }
+      }
+    },
+
+    // Cleanup - should be called when component is removed
+    destroy() {
+      if (this.componentDestroy) {
+        try {
+          this.componentDestroy();
+        } catch (error) {
+          console.error("Error during component cleanup:", error);
+        }
+      }
+    },
+
+    // ==========================================
+    // Utility methods (directly use library methods)
+    // ==========================================
+
+    // Date and time formatting (using date-fns)
+    formatDate: (date, format) => window.dateFns?.format(date, format) || new Date(date).toISOString().split('T')[0],
+    formatTime: (date) => window.dateFns?.format(date, 'HH:mm:ss') || new Date(date).toTimeString().split(' ')[0],
+
+    // Collection utilities (using lodash)
+    isEmpty: (value) => window._ ? _.isEmpty(value) : (
+      Array.isArray(value) ? value.length === 0 :
+      typeof value === 'object' && value !== null ? Object.keys(value).length === 0 : !value
+    ),
+
+    // Performance utilities (using lodash)
+    debounce: (fn, wait) => window._ ? _.debounce(fn, wait) : fn,
+    throttle: (fn, wait) => window._ ? _.throttle(fn, wait) : fn,
+
+    // ==========================================
+    // State management
+    // ==========================================
+
+    // Error handling with standardized pattern
+    handleError(error) {
+      this.error = error.message || "An unexpected error occurred";
+      console.error("Component error:", error);
+
+      // Dispatch error event for global tracking
+      if (this.$dispatch) {
+        this.$dispatch('dbwatcher:error', {
+          component: this.constructor.name,
+          error: this.error
+        });
+      }
+    },
+
+    // Clear error state
+    clearError() {
+      this.error = null;
+    },
+
+    // Loading state management
+    setLoading(loading) {
+      this.loading = loading;
+
+      // Dispatch loading state change event
+      if (this.$dispatch) {
+        this.$dispatch('dbwatcher:loading', { loading });
+      }
+    },
+
+    // ==========================================
+    // API integration (using ApiClient)
+    // ==========================================
+
+    // Fetch data with standardized error handling
+    async fetchData(endpoint, options = {}) {
+      this.setLoading(true);
+      this.clearError();
+
+      try {
+        // Use centralized API client if available
+        if (window.ApiClient) {
+          return await window.ApiClient.get(endpoint, options.params || {}, options);
+        }
+
+        // Fallback to standard fetch
+        const url = endpoint.startsWith('/') ? endpoint : `/dbwatcher/api/v1/${endpoint}`;
+        const response = await fetch(url, {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+            ...options.headers
+          },
+          ...options
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        return await response.json();
+      } catch (error) {
+        this.handleError(error);
+        throw error;
+      } finally {
+        this.setLoading(false);
+      }
+    },
+
+    // ==========================================
+    // Event handling
+    // ==========================================
+
+    // Dispatch custom events
+    dispatchEvent(eventName, detail = {}) {
+      if (this.$dispatch) {
+        this.$dispatch(eventName, detail);
+      }
+    },
+
+    // Common UI helpers
+    toggleVisibility(property) {
+      this[property] = !this[property];
+    }
+  };
+};