dbwatcher 1.0.0 → 1.1.0

data/app/views/layouts/dbwatcher/application.html.erb

@@ -5,254 +5,87 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
 
-    <!-- Alpine.js -->
+    <!-- Alpine.js and Plugins - ensure plugins load BEFORE Alpine.js core -->
+    <script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
-    <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-
-    <!-- Custom styles for compact theme -->
-    <style>
-      :root {
-        --navy-dark: #00285D;
-        --blue-light: #96C1E7;
-        --blue-medium: #6CADDF;
-        --gold-dark: #D4A11E;
-        --gold-light: #FFC758;
-      }
-
-      /* Compact table styles */
-      .compact-table {
-        font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
-        font-size: 12px;
-        line-height: 1.2;
-      }
-
-      .compact-table th {
-        padding: 4px 8px;
-        font-weight: 500;
-        text-transform: none;
-        font-size: 11px;
-        background: #f3f3f3;
-        border-bottom: 2px solid #e8e8e8;
-        border-right: 1px solid #e8e8e8;
-        position: sticky;
-        top: 0;
-        z-index: 10;
-      }
-
-      .compact-table td {
-        padding: 2px 8px;
-        border-right: 1px solid #f0f0f0;
-        border-bottom: 1px solid #f0f0f0;
-        max-width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .compact-table tr:hover {
-        background: #f8f8f8;
-      }
-
-      .compact-table tr.selected {
-        background: #e6f3ff;
-      }
-
-      /* Sidebar styles */
-      .sidebar-item {
-        font-size: 13px;
-        padding: 6px 12px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        border-radius: 3px;
-        transition: all 0.15s;
-      }
-
-      .sidebar-item:hover {
-        background: rgba(108, 173, 223, 0.1);
-        color: #6CADDF;
-      }
-
-      .sidebar-item.active {
-        background: #00285D;
-        color: white;
-      }
-
-      /* Compact form controls */
-      .compact-input {
-        padding: 3px 8px;
-        font-size: 12px;
-        border: 1px solid #d1d5db;
-        border-radius: 3px;
-      }
-
-      .compact-select {
-        padding: 3px 24px 3px 8px;
-        font-size: 12px;
-        border: 1px solid #d1d5db;
-        border-radius: 3px;
-        background-size: 16px;
-      }
-
-      .compact-button {
-        padding: 4px 12px;
-        font-size: 12px;
-        border-radius: 3px;
-        font-weight: 500;
-      }
-
-      /* Tab styles */
-      .tab-bar {
-        background: #f3f3f3;
-        border-bottom: 1px solid #e8e8e8;
-        display: flex;
-        align-items: center;
-        height: 32px;
-        font-size: 12px;
-      }
-
-      .tab-item {
-        padding: 0 16px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        border-right: 1px solid #e8e8e8;
-        cursor: pointer;
-        transition: all 0.15s;
-      }
-
-      .tab-item:hover {
-        background: #e8e8e8;
-      }
-
-      .tab-item.active {
-        background: white;
-        color: #00285D;
-        font-weight: 500;
-      }
-
-      /* Status badges */
-      .badge-insert { background: #10b981; color: white; }
-      .badge-update { background: #6CADDF; color: white; }
-      .badge-delete { background: #ef4444; color: white; }
-      .badge-select { background: #6b7280; color: white; }
-
-      .badge {
-        padding: 1px 6px;
-        font-size: 10px;
-        border-radius: 2px;
-        font-weight: 500;
-        text-transform: uppercase;
-      }
-
-      /* Highlight colors */
-      .highlight-change { background: rgba(255, 199, 88, 0.3); }
-      .highlight-new { background: rgba(16, 185, 129, 0.2); }
-      .highlight-deleted { background: rgba(239, 68, 68, 0.2); }
-
-      /* Splitter */
-      .splitter {
-        width: 4px;
-        background: #e8e8e8;
-        cursor: col-resize;
-      }
-
-      .splitter:hover {
-        background: #6CADDF;
-      }
-
-      /* Scrollbar styling */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-
-      ::-webkit-scrollbar-track {
-        background: #f3f3f3;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background: #c8c8c8;
-        border-radius: 4px;
-      }
-
-      ::-webkit-scrollbar-thumb:hover {
-        background: #6CADDF;
-      }
-
-      /* Enhanced table styles for data readability */
-      .table-detailed .compact-table td {
-        max-width: 300px;
-        padding: 4px 8px;
-      }
-
-      .cell-content {
-        position: relative;
-        display: inline-block;
-        max-width: 100%;
-      }
+    <!-- Mermaid.js for database diagrams -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js" crossorigin="anonymous"></script>
 
-      .cell-compact {
-        max-width: 150px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
+    <!-- SVG Pan Zoom Library -->
+    <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
 
-      .cell-detailed {
-        max-width: 300px;
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
+    <!-- Tabulator.js for table library -->
+    <%= javascript_include_tag "dbwatcher/vendor/tabulator.min" %>
+    <%= stylesheet_link_tag "dbwatcher/vendor/tabulator.min", media: "all" %>
 
-      .cell-value {
-        cursor: help;
-      }
+    <!-- DBWatcher Core Architecture -->
+    <%= javascript_include_tag "dbwatcher/vendor/lodash.min" %>
+    <%= javascript_include_tag "dbwatcher/vendor/date-fns-browser" %>
+    <%= javascript_include_tag "dbwatcher/dbwatcher" %>
+    <%= javascript_include_tag "dbwatcher/core/component_registry" %>
+    <%= javascript_include_tag "dbwatcher/core/component_loader" %>
+    <%= javascript_include_tag "dbwatcher/components/base" %>
+    <%= javascript_include_tag "dbwatcher/components/changes_table_hybrid" %>
+    <%= javascript_include_tag "dbwatcher/components/diagrams" %>
+    <%= javascript_include_tag "dbwatcher/components/summary" %>
 
-      /* Column type styling */
-      .column-meta {
-        background-color: rgba(156, 163, 175, 0.1);
-      }
+    <!-- DBWatcher Services -->
+    <%= javascript_include_tag "dbwatcher/core/alpine_store" %>
+    <%= javascript_include_tag "dbwatcher/core/api_client" %>
+    <%= javascript_include_tag "dbwatcher/services/mermaid" %>
 
-      .column-timestamp {
-        background-color: rgba(59, 130, 246, 0.1);
-        font-family: monospace;
-      }
+    <!-- Alpine.js Component Registrations -->
+    <%= javascript_include_tag "dbwatcher/alpine_registrations" %>
 
-      .column-id {
-        background-color: rgba(245, 158, 11, 0.1);
-        font-family: monospace;
-      }
+    <!-- Auto-initialization -->
+    <%= javascript_include_tag "dbwatcher/auto_init" %>
 
-      /* Tooltip improvements */
-      .tooltip-content {
-        max-height: 200px;
-        overflow-y: auto;
-        font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
-      }
+    <script>
+      // Initialize DBWatcher before Alpine.js starts
+      document.addEventListener('alpine:init', () => {
+        try {
+          if (window.DBWatcher) {
+            DBWatcher.init();
+            console.log('✅ DBWatcher initialized with optimized architecture');
+          } else {
+            console.error('❌ DBWatcher not loaded');
+          }
+        } catch (error) {
+          console.error('❌ Error during DBWatcher initialization:', error);
+        }
+      });
 
-      /* Essential mode adjustments */
-      .view-essential .compact-table th,
-      .view-essential .compact-table td {
-        font-size: 11px;
-        padding: 2px 6px;
-      }
+      // Fallback initialization with better error handling
+      document.addEventListener('DOMContentLoaded', function() {
+        // Small delay to ensure Alpine is available
+        setTimeout(() => {
+          try {
+            if (window.DBWatcher && !DBWatcher.initialized) {
+              DBWatcher.init();
+              console.log('✅ DBWatcher initialized (fallback)');
+            }
+          } catch (error) {
+            console.error('❌ Error during DBWatcher fallback initialization:', error);
+          }
+        }, 100);
+
+        // Plugin verification
+        setTimeout(() => {
+          if (window.Alpine && !window.Alpine.directive('collapse')) {
+            console.warn('⚠️ Alpine.js Collapse plugin may not be properly loaded');
+          } else if (window.Alpine && window.Alpine.directive('collapse')) {
+            console.log('✅ Alpine.js Collapse plugin verified');
+          }
+        }, 200);
+      });
+    </script>
 
-      /* JSON/Array content indicators */
-      .json-indicator {
-        color: #6366f1;
-        font-style: italic;
-        font-size: 10px;
-      }
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
 
-      .array-indicator {
-        color: #059669;
-        font-style: italic;
-        font-size: 10px;
-      }
-    </style>
+    <!-- DBWatcher Styles -->
+    <%= stylesheet_link_tag 'dbwatcher/application.css', 'data-turbolinks-track': 'reload' %>
 
     <script>
       tailwind.config = {
@@ -331,7 +164,17 @@
 
           <!-- Actions -->
           <div class="p-2 border-t border-gray-700">
-            <!-- TODO: Add more action later -->
+            <!-- Clear All Action -->
+            <%= button_to clear_all_path,
+                method: :delete,
+                data: { confirm: "Clear all data?" },
+                class: "sidebar-item w-full justify-center bg-red-900 hover:bg-red-800 text-red-200" do %>
+              <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+              </svg>
+              <span x-show="!sidebarCollapsed" class="text-xs">Clear All</span>
+            <% end %>
           </div>
         </div>
       </aside>
@@ -365,17 +208,52 @@
       </main>
     </div>
 
+    <!-- Initialize DBWatcher system -->
     <script>
-      mermaid.initialize({
-        startOnLoad: true,
-        theme: 'neutral',
-        themeVariables: {
-          primaryColor: '#00285D',
-          primaryTextColor: '#fff',
-          primaryBorderColor: '#6CADDF',
-          lineColor: '#96C1E7',
-          secondaryColor: '#FFC758',
-          tertiaryColor: '#D4A11E'
+      document.addEventListener('DOMContentLoaded', function() {
+        // Initialize DBWatcher if available
+        if (window.DBWatcher) {
+          // Ensure BaseComponent is available
+          if (!window.DBWatcher.BaseComponent && typeof DBWatcher.BaseComponent !== 'function') {
+            window.DBWatcher.BaseComponent = function(config = {}) {
+              return {
+                init() {
+                  if (this.componentInit) {
+                    try {
+                      this.componentInit();
+                    } catch (error) {
+                      console.error("Error during component initialization:", error);
+                    }
+                  }
+                }
+              };
+            };
+            console.log('Added fallback BaseComponent');
+          }
+
+          // Register legacy components with Alpine directly if ComponentRegistry isn't available
+          if (!window.DBWatcher.ComponentRegistry) {
+            console.log('ComponentRegistry not available, using direct Alpine registration');
+
+            // Ensure Alpine is available
+            if (window.Alpine) {
+              // Direct registration of components with Alpine
+              if (!window.Alpine.data('changesTable') && window.DBWatcher.components && window.DBWatcher.components.changesTable) {
+                window.Alpine.data('changesTable', (config = {}) => {
+                  const component = window.DBWatcher.components.changesTable(config);
+                  return component;
+                });
+                console.log('Registered changesTable component with Alpine');
+              }
+            }
+          }
+
+          console.log('✅ DBWatcher initialized (fallback)');
+        }
+
+        // Verify Alpine.js plugins
+        if (window.Alpine && window.Alpine.directive && window.Alpine.directive('collapse')) {
+          console.log('✅ Alpine.js Collapse plugin verified');
         }
       });
     </script>

data/bin/compile_scss

@@ -0,0 +1,49 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Script to compile SCSS to CSS for DBWatcher
+
+require 'rubygems'
+require 'bundler/setup'
+require 'sassc'
+require 'fileutils'
+
+# Get the root directory
+root_dir = File.expand_path('..', __dir__)
+
+# Path to the main SCSS file
+scss_dir = File.join(root_dir, 'app', 'assets', 'stylesheets', 'dbwatcher')
+scss_file = File.join(scss_dir, 'application.scss')
+css_file = File.join(scss_dir, 'application.css')
+
+puts "Compiling DBWatcher SCSS files to CSS..."
+puts "SCSS file: #{scss_file}"
+puts "CSS file: #{css_file}"
+
+# Read the SCSS content
+scss_content = File.read(scss_file)
+
+# Create a list of import paths
+load_paths = [scss_dir]
+
+# Compile SCSS to CSS
+begin
+  css_content = SassC::Engine.new(
+    scss_content,
+    style: :expanded,
+    load_paths: load_paths,
+    syntax: :scss
+  ).render
+
+  # Add a header comment
+  css_content = "/**\n * DBWatcher Application Styles\n * Compiled CSS for all components\n * Generated at #{Time.now}\n */\n\n" + css_content
+
+  # Write to file
+  File.write(css_file, css_content)
+
+  puts "SCSS compilation complete! CSS written to #{css_file}"
+rescue => e
+  puts "Error compiling SCSS: #{e.message}"
+  puts e.backtrace.join("\n")
+  exit 1
+end

data/config/routes.rb

@@ -3,12 +3,38 @@
 Dbwatcher::Engine.routes.draw do
   root to: "dashboard#index"
 
+  # Dashboard clear all action
+  delete :clear_all, to: "dashboard#clear_all"
+
   resources :sessions do
+    member do
+      get :changes
+      get :summary
+      get :diagrams
+    end
+
     collection do
       delete :clear
     end
   end
 
+  # API namespace for JSON-only endpoints
+  namespace :api do
+    namespace :v1 do
+      resources :sessions, only: [] do
+        member do
+          get :changes_data
+          get :summary_data
+          get :diagram_data
+        end
+
+        collection do
+          get :diagram_types
+        end
+      end
+    end
+  end
+
   resources :tables, only: %i[index show] do
     member do
       get :changes

data/lib/dbwatcher/configuration.rb

@@ -1,26 +1,78 @@
 # frozen_string_literal: true
 
 module Dbwatcher
+  # Configuration class for DBWatcher
+  #
+  # This class manages all configuration options for DBWatcher, including
+  # storage, tracking, and diagram visualization settings.
   class Configuration
-    attr_accessor :storage_path, :enabled, :max_sessions, :auto_clean_after_days,
-                  :track_queries, :slow_query_threshold, :max_query_logs_per_day,
-                  :mount_path
+    # Storage configuration
+    attr_accessor :storage_path, :enabled, :max_sessions, :auto_clean_after_days
 
+    # Query tracking configuration
+    attr_accessor :track_queries, :slow_query_threshold, :max_query_logs_per_day
+
+    # Routing configuration
+    attr_accessor :mount_path
+
+    # Diagram configuration
+    attr_accessor :diagram_show_attributes, :diagram_show_methods, :diagram_show_cardinality,
+                  :diagram_max_attributes, :diagram_attribute_types, :diagram_relationship_labels,
+                  :diagram_preserve_table_case, :diagram_direction, :diagram_cardinality_format,
+                  :diagram_show_attribute_count, :diagram_show_method_count
+
+    # Initialize with default values
     def initialize
+      # Storage configuration defaults
       @storage_path = default_storage_path
       @enabled = true
-      @max_sessions = 100
+      @max_sessions = 50
       @auto_clean_after_days = 7
-      @mount_path = "/dbwatcher"
 
-      # SQL Query tracking
+      # Query tracking configuration defaults
       @track_queries = true
-      @slow_query_threshold = 100.0 # milliseconds
-      @max_query_logs_per_day = 10_000
+      @slow_query_threshold = 200 # milliseconds
+      @max_query_logs_per_day = 1000
+
+      # Routing configuration defaults
+      @mount_path = "/dbwatcher"
+
+      # Initialize diagram configuration with defaults
+      initialize_diagram_config
+    end
+
+    # Initialize diagram configuration with default values
+    def initialize_diagram_config
+      @diagram_show_attributes = true
+      @diagram_show_methods = false # Hide methods by default
+      @diagram_show_cardinality = true
+      @diagram_max_attributes = 10
+      @diagram_attribute_types = true # Changed from array to boolean
+      @diagram_relationship_labels = true # Changed from symbol to boolean
+      @diagram_preserve_table_case = false # Changed from true to false
+      @diagram_direction = "LR" # Left to right by default
+      @diagram_cardinality_format = :simple # Use simpler 1:N format
+      @diagram_show_attribute_count = true
+      @diagram_show_method_count = true
+    end
+
+    # Validate configuration
+    #
+    # @return [Boolean] true if configuration is valid
+    def valid?
+      validate_storage_path
+      validate_max_sessions
+      validate_auto_clean_after_days
+      validate_slow_query_threshold
+      validate_max_query_logs_per_day
+      true
     end
 
     private
 
+    # Default storage path based on Rails or current directory
+    #
+    # @return [String] default storage path
     def default_storage_path
       if defined?(Rails) && Rails.respond_to?(:root) && Rails.root
         Rails.root.join("tmp", "dbwatcher").to_s
@@ -28,5 +80,47 @@ module Dbwatcher
         File.join(Dir.pwd, "tmp", "dbwatcher")
       end
     end
+
+    # Validate storage path
+    def validate_storage_path
+      return if storage_path.nil? || Dir.exist?(storage_path)
+
+      begin
+        FileUtils.mkdir_p(storage_path)
+      rescue StandardError => e
+        raise ConfigurationError, "Failed to create storage path: #{e.message}"
+      end
+    end
+
+    # Validate max sessions
+    def validate_max_sessions
+      return if max_sessions.is_a?(Integer) && max_sessions.positive?
+
+      raise ConfigurationError, "max_sessions must be a positive integer"
+    end
+
+    # Validate auto clean after days
+    def validate_auto_clean_after_days
+      return if auto_clean_after_days.is_a?(Integer) && auto_clean_after_days.positive?
+
+      raise ConfigurationError, "auto_clean_after_days must be a positive integer"
+    end
+
+    # Validate slow query threshold
+    def validate_slow_query_threshold
+      return if slow_query_threshold.is_a?(Integer) && slow_query_threshold.positive?
+
+      raise ConfigurationError, "slow_query_threshold must be a positive integer"
+    end
+
+    # Validate max query logs per day
+    def validate_max_query_logs_per_day
+      return if max_query_logs_per_day.is_a?(Integer) && max_query_logs_per_day.positive?
+
+      raise ConfigurationError, "max_query_logs_per_day must be a positive integer"
+    end
   end
+
+  # Configuration error class
+  class ConfigurationError < StandardError; end
 end

data/lib/dbwatcher/engine.rb

@@ -4,8 +4,24 @@ module Dbwatcher
   class Engine < ::Rails::Engine
     isolate_namespace Dbwatcher
 
+    # Configure autoload paths
+    config.autoload_paths += %W[
+      #{root}/lib
+    ]
+
+    # Serve static assets
+    initializer "dbwatcher.assets", before: :add_to_load_path do |app|
+      # Define asset paths
+      app.config.assets.paths << root.join("app", "assets", "stylesheets")
+      app.config.assets.paths << root.join("app", "assets", "javascripts")
+      app.config.assets.paths << root.join("app", "assets", "config")
+
+      # Load engine's manifest file
+      app.config.assets.precompile << "dbwatcher_manifest.js"
+    end
+
     initializer "dbwatcher.setup" do |app|
-      if Dbwatcher.configuration.enabled && !Rails.env.production?
+      if Dbwatcher.configuration.enabled
         # Auto-include in all models
         ActiveSupport.on_load(:active_record) do
           include Dbwatcher::ModelExtension
@@ -25,11 +41,5 @@ module Dbwatcher
         mount Dbwatcher::Engine => "/dbwatcher", as: :dbwatcher
       end
     end
-
-    # Serve static assets
-    initializer "dbwatcher.assets" do |app|
-      app.config.assets.paths << root.join("app", "assets", "stylesheets")
-      app.config.assets.paths << root.join("app", "assets", "javascripts")
-    end
   end
 end