dbviewer 0.5.7 → 0.6.0

data/app/views/dbviewer/connections/index.html.erb

@@ -0,0 +1,119 @@
+<% content_for :title, "Database Connections" %>
+
+<div class="container-fluid">
+  <div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-database-fill me-2"></i> Database Connections</h1>
+  </div>
+
+  <div class="row">
+    <div class="col-12">
+      <div class="alert alert-info">
+        <i class="bi bi-info-circle me-2"></i>
+        You can switch between multiple database connections to view different databases in your application.
+      </div>
+    </div>
+  </div>
+
+  <% if flash[:alert] %>
+    <div class="row">
+      <div class="col-12">
+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+          <i class="bi bi-exclamation-triangle-fill me-2"></i>
+          <%= flash[:alert] %>
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <% if flash[:notice] %>
+    <div class="row">
+      <div class="col-12">
+        <div class="alert alert-success alert-dismissible fade show" role="alert">
+          <i class="bi bi-check-circle-fill me-2"></i>
+          <%= flash[:notice] %>
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  
+  <div class="row">
+    <% @connections.each do |connection| %>
+      <div class="col-md-6 col-lg-4 mb-4">
+        <div class="card dbviewer-card h-100 <%= 'border-primary' if connection[:current] %>">
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <h5 class="card-title mb-0">
+              <% if connection[:adapter_name]&.downcase&.include?('sqlite') %>
+                <i class="bi bi-database-fill me-2 text-success"></i>
+              <% elsif connection[:adapter_name]&.downcase&.include?('mysql') %>
+                <i class="bi bi-database-fill me-2 text-warning"></i>
+              <% elsif connection[:adapter_name]&.downcase&.include?('postgres') %>
+                <i class="bi bi-database-fill me-2 text-info"></i>
+              <% else %>
+                <i class="bi bi-database me-2"></i>
+              <% end %>
+              <%= connection[:name] %>
+            </h5>
+            <% if connection[:current] %>
+              <span class="badge bg-success">Current</span>
+            <% end %>
+          </div>
+          <div class="card-body">
+            <% if connection[:current] %>
+              <p class="mb-3"><em>Currently active connection</em></p>
+            <% end %>
+            <p><strong>Key:</strong> <%= connection[:key] %></p>
+            <% if connection[:adapter_name] %>
+              <p><strong>Adapter:</strong> <%= connection[:adapter_name] %></p>
+            <% end %>
+            
+            <div class="d-flex flex-column mt-3">
+              <div class="d-flex justify-content-between mb-2">
+                <% if connection[:current] %>
+                  <button class="btn btn-outline-secondary btn-sm" disabled>
+                    <i class="bi bi-check-circle-fill me-1"></i> Currently Active
+                  </button>
+                <% else %>
+                  <%= button_to connection_path(connection[:key]), method: :post, class: "btn btn-primary btn-sm" do %>
+                    <i class="bi bi-lightning-charge me-1"></i> Switch to this Connection
+                  <% end %>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<script>
+  // Form validation script
+  document.addEventListener('DOMContentLoaded', function() {
+    const forms = document.querySelectorAll('.needs-validation')
+    
+    // Loop over them and prevent submission
+    Array.from(forms).forEach(form => {
+      form.addEventListener('submit', event => {
+        if (!form.checkValidity()) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        
+        form.classList.add('was-validated')
+      }, false)
+    })
+    
+    // Auto-generate a key from the name
+    const nameInput = document.getElementById('connection_name')
+    const keyInput = document.getElementById('connection_key')
+    
+    nameInput.addEventListener('input', function() {
+      keyInput.value = this.value
+        .toLowerCase()
+        .replace(/\s+/g, '_')
+        .replace(/[^a-z0-9_]/g, '')
+    })
+  })
+</script>

data/app/views/dbviewer/connections/new.html.erb

@@ -0,0 +1,79 @@
+<% content_for :title, "Add New Database Connection" %>
+
+<div class="container-fluid">
+  <div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-plus-circle me-2"></i> Add New Database Connection</h1>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-md-8 col-lg-6 mx-auto">
+      <div class="card dbviewer-card">
+        <div class="card-header">
+          <h5 class="card-title mb-0">Connection Details</h5>
+        </div>
+        <div class="card-body">
+          <%= form_tag connections_path, method: :post, class: "needs-validation", novalidate: true do %>
+            <div class="mb-3">
+              <label for="connection_name" class="form-label">Connection Name*</label>
+              <input type="text" class="form-control" id="connection_name" name="connection_name" 
+                     placeholder="e.g. Blog Database" required>
+              <div class="form-text">A human-readable name for this connection</div>
+            </div>
+            
+            <div class="mb-3">
+              <label for="connection_key" class="form-label">Connection Key*</label>
+              <input type="text" class="form-control" id="connection_key" name="connection_key" 
+                     placeholder="e.g. blog_db" required>
+              <div class="form-text">A unique identifier for this connection (lowercase, no spaces)</div>
+            </div>
+            
+            <div class="mb-3">
+              <label for="connection_class" class="form-label">Connection Class*</label>
+              <input type="text" class="form-control" id="connection_class" name="connection_class" 
+                     placeholder="e.g. BlogDatabase" required>
+              <div class="form-text">
+                The fully qualified class name that establishes the connection.
+                This class must inherit from ActiveRecord::Base.
+              </div>
+            </div>
+            
+            <div class="d-flex justify-content-between mt-4">
+              <%= link_to "Cancel", connections_path, class: "btn btn-secondary" %>
+              <button type="submit" class="btn btn-primary">Add Connection</button>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Form validation script
+  document.addEventListener('DOMContentLoaded', function() {
+    const forms = document.querySelectorAll('.needs-validation')
+    
+    // Loop over them and prevent submission
+    Array.from(forms).forEach(form => {
+      form.addEventListener('submit', event => {
+        if (!form.checkValidity()) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        
+        form.classList.add('was-validated')
+      }, false)
+    })
+    
+    // Auto-generate a key from the name
+    const nameInput = document.getElementById('connection_name')
+    const keyInput = document.getElementById('connection_key')
+    
+    nameInput.addEventListener('input', function() {
+      keyInput.value = this.value
+        .toLowerCase()
+        .replace(/\s+/g, '_')
+        .replace(/[^a-z0-9_]/g, '')
+    })
+  })
+</script>

data/app/views/dbviewer/shared/_tables_sidebar.html.erb

@@ -0,0 +1,49 @@
+<%# Table list for sidebar %>
+<% if tables.any? %>
+  <% tables.each do |table| %>
+    <% 
+      # Build table URL with creation filter params if they exist
+      table_url_params = {}
+      table_url_params[:creation_filter_start] = @creation_filter_start if defined?(@creation_filter_start) && @creation_filter_start.present?
+      table_url_params[:creation_filter_end] = @creation_filter_end if defined?(@creation_filter_end) && @creation_filter_end.present?
+    %>
+    <%= link_to dbviewer.table_path(table[:name], table_url_params), 
+                title: table[:name],
+                class: "list-group-item list-group-item-action d-flex align-items-center #{'active' if current_table?(table[:name])}", 
+                tabindex: "0", 
+                data: { table_name: table[:name] },
+                onkeydown: "
+                  if(event.key === 'ArrowDown') { 
+                    event.preventDefault();
+                    let next = this.nextElementSibling;
+                    while(next && next.classList.contains('d-none')) {
+                      next = next.nextElementSibling;
+                    }
+                    if(next) next.focus();
+                  } else if(event.key === 'ArrowUp') { 
+                    event.preventDefault();
+                    let prev = this.previousElementSibling;
+                    while(prev && prev.classList.contains('d-none')) {
+                      prev = prev.previousElementSibling;
+                    }
+                    if(prev) prev.focus();
+                  }" do %>
+      <div class="d-flex justify-content-between align-items-center w-100">
+        <div class="text-truncate">
+          <i class="bi bi-table me-2 small"></i>
+          <span><%= table[:name] %></span>
+        </div>
+        <% if table[:record_count].present? %>
+          <span class="badge bg-light text-dark fw-normal">
+            <%= number_with_delimiter(table[:record_count]) %>
+          </span>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% else %>
+  <div class="list-group-item text-muted small">
+    <i class="bi bi-info-circle me-1"></i>
+    No tables found in this database
+  </div>
+<% end %>

data/app/views/dbviewer/tables/index.html.erb

@@ -4,14 +4,6 @@
 
 <div class="d-flex justify-content-between align-items-center mb-4">
   <h1>Database Tables</h1>
-  <div>
-    <%= link_to dashboard_path, class: "btn btn-outline-primary me-2" do %>
-      <i class="bi bi-house-door me-1"></i> Dashboard
-    <% end %>
-    <%= link_to entity_relationship_diagrams_path, class: "btn btn-outline-primary" do %>
-      <i class="bi bi-diagram-3 me-1"></i> View ERD
-    <% end %>
-  </div>
 </div>
 
 <% if flash[:error] %>

data/app/views/dbviewer/tables/show.html.erb

@@ -120,6 +120,15 @@
       background-color: var(--bs-tertiary-bg, #f8f9fa);
     }
     
+    /* Styling for disabled input fields (IS NULL, IS NOT NULL) */
+    .column-filter:disabled, .disabled-filter {
+      background-color: var(--bs-tertiary-bg, #f0f0f0);
+      border-color: var(--bs-border-color, #dee2e6);
+      color: var(--bs-secondary-color, #6c757d);
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    
     /* Action column styling */
     .action-column {
       width: 60px;
@@ -777,7 +786,11 @@
             const primaryKeyValue = recordData[Object.keys(recordData).find(key => key === 'id') || Object.keys(recordData)[0]];
             
             if (primaryKeyValue !== null && primaryKeyValue !== undefined && primaryKeyValue !== '') {
-              relationshipsContent.appendChild(createRelationshipSection('Has Many', reverseForeignKeys, recordData, 'has_many', primaryKeyValue));
+              const hasManySection = createRelationshipSection('Has Many', reverseForeignKeys, recordData, 'has_many', primaryKeyValue);
+              relationshipsContent.appendChild(hasManySection);
+              
+              // Fetch relationship counts asynchronously
+              fetchRelationshipCounts('<%= @table_name %>', primaryKeyValue, reverseForeignKeys, hasManySection);
             }
           }
           
@@ -814,11 +827,61 @@
       };
     }
     
+    // Function to handle operator changes for IS NULL and IS NOT NULL operators
+    function setupNullOperators() {
+      operatorSelects.forEach(select => {
+        // Initial setup for existing null operators
+        if (select.value === 'is_null' || select.value === 'is_not_null') {
+          const columnName = select.name.match(/\[(.*?)_operator\]/)[1];
+          const inputContainer = select.closest('.filter-input-group');
+          // Check for display field (the visible disabled field)
+          const displayField = inputContainer.querySelector(`[data-column="${columnName}_display"]`);
+          if (displayField) {
+            displayField.classList.add('disabled-filter');
+          }
+          
+          // Make sure the value field properly reflects the null operator
+          const valueField = inputContainer.querySelector(`[data-column="${columnName}"]`);
+          if (valueField) {
+            valueField.value = select.value;
+          }
+        }
+        
+        // Handle operator changes
+        select.addEventListener('change', function() {
+          const columnName = this.name.match(/\[(.*?)_operator\]/)[1];
+          const filterForm = this.closest('form');
+          const inputContainer = this.closest('.filter-input-group');
+          const hiddenField = inputContainer.querySelector(`[data-column="${columnName}"]`);
+          const displayField = inputContainer.querySelector(`[data-column="${columnName}_display"]`);
+          const wasNullOperator = hiddenField && (hiddenField.value === 'is_null' || hiddenField.value === 'is_not_null');
+          const isNullOperator = this.value === 'is_null' || this.value === 'is_not_null';
+          
+          if (isNullOperator) {
+            // Configure for null operator
+            if (hiddenField) {
+              hiddenField.value = this.value;
+            }
+            // Submit immediately
+            filterForm.submit();
+          } else if (wasNullOperator) {
+            // Clear value when switching from null operator to regular operator
+            if (hiddenField) {
+              hiddenField.value = '';
+            }
+          }
+        });
+      });
+    }
+    
     // Function to submit the form
     const submitForm = debounce(function() {
       filterForm.submit();
     }, 500);
     
+    // Initialize the null operators handling
+    setupNullOperators();
+    
     // Add event listeners to all filter inputs
     columnFilters.forEach(function(filter) {
       // For text fields use input event
@@ -1433,6 +1496,55 @@
   });
   
   // Helper function to create relationship sections
+  // Function to fetch relationship counts from API
+  async function fetchRelationshipCounts(tableName, recordId, relationships, hasManySection) {
+    try {
+      const response = await fetch(`/dbviewer/api/tables/${tableName}/relationship_counts?record_id=${recordId}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      
+      // Update each count in the UI
+      const countSpans = hasManySection.querySelectorAll('.relationship-count');
+      
+      relationships.forEach((relationship, index) => {
+        const countSpan = countSpans[index];
+        if (countSpan) {
+          const relationshipData = data.relationships.find(r => 
+            r.table === relationship.from_table && r.foreign_key === relationship.column
+          );
+          
+          if (relationshipData) {
+            const count = relationshipData.count;
+            let badgeClass = 'bg-secondary';
+            let badgeText = `${count} record${count !== 1 ? 's' : ''}`;
+            
+            // Use different colors based on count
+            if (count > 0) {
+              badgeClass = count > 10 ? 'bg-warning' : 'bg-success';
+            }
+            
+            countSpan.innerHTML = `<span class="badge ${badgeClass}">${badgeText}</span>`;
+          } else {
+            // Fallback if no data found
+            countSpan.innerHTML = '<span class="badge bg-danger">Error</span>';
+          }
+        }
+      });
+      
+    } catch (error) {
+      console.error('Error fetching relationship counts:', error);
+      
+      // Show error state in UI
+      const countSpans = hasManySection.querySelectorAll('.relationship-count');
+      countSpans.forEach(span => {
+        span.innerHTML = '<span class="badge bg-danger">Error</span>';
+      });
+    }
+  }
+
   function createRelationshipSection(title, relationships, recordData, type, primaryKeyValue = null) {
     const section = document.createElement('div');
     section.className = 'relationship-section mb-4';
@@ -1503,7 +1615,12 @@
             <span class="text-muted">${fk.from_table}.</span><strong>${fk.column}</strong>
           </td>
           <td>
-            <span class="badge bg-secondary">View All</span>
+            <span class="relationship-count">
+              <span class="badge bg-secondary">
+                <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                Loading...
+              </span>
+            </span>
           </td>
           <td>
             <a href="/dbviewer/tables/${fk.from_table}?column_filters[${fk.column}]=${encodeURIComponent(primaryKeyValue)}" 
@@ -2108,12 +2225,6 @@
     background: transparent !important;
   }
   
-  [data-bs-theme="dark"] .flatpickr-day.disabled:hover {
-    background: transparent !important;
-    color: #6c757d !important;
-    cursor: not-allowed;
-  }
-  
   /* Dark mode other day states */
   [data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
   [data-bs-theme="dark"] .flatpickr-day.prevMonthDay {
@@ -2263,6 +2374,19 @@
   .flatpickr-next-month:hover {
     background: rgba(var(--bs-primary-rgb), 0.1);
   }
+
+  /* Relationship count styling */
+  .relationship-count .badge {
+    min-width: 80px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .relationship-count .spinner-border-sm {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
 </style>
 
 <script>

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

@@ -1357,6 +1357,27 @@
             <% end %>
           </ul>
           <ul class="navbar-nav ms-auto">
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDatabaseDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class="bi bi-database"></i> <%= (current_conn = available_connections.find { |c| c[:current] }) ? current_conn[:name] : "Database" %>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDatabaseDropdown">
+                <% available_connections.each do |connection| %>
+                  <li>
+                    <%= button_to connection_path(connection[:key]), method: :post, class: "dropdown-item border-0 w-100 text-start #{'active' if connection[:current]}" do %>
+                      <% if connection[:current] %>
+                        <i class="bi bi-check2-circle me-2"></i>
+                      <% else %>
+                        <i class="bi bi-circle me-2"></i>
+                      <% end %>
+                      <%= connection[:name] %>
+                    <% end %>
+                  </li>
+                <% end %>
+                <li><hr class="dropdown-divider"></li>
+                <li><%= link_to "<i class='bi bi-gear'></i> Manage Connections".html_safe, connections_path, class: "dropdown-item" %></li>
+              </ul>
+            </li>
             <li class="nav-item">
               <button type="button" class="theme-toggle nav-link" aria-label="<%= theme_toggle_label %>">
                 <%= theme_toggle_icon %>
@@ -1364,7 +1385,7 @@
             </li>
             <li class="nav-item">
               <span class="navbar-text ms-2 text-light d-flex align-items-center">
-                <small><i class="bi bi-database"></i> <%= Rails.env %> environment</small>
+                <small><i class="bi bi-tools"></i> <%= Rails.env %> environment</small>
               </span>
             </li>
           </ul>

data/config/routes.rb

@@ -10,6 +10,12 @@ Dbviewer::Engine.routes.draw do
 
   resources :entity_relationship_diagrams, only: [ :index ]
 
+  resources :connections, only: [ :index, :new, :create, :destroy ] do
+    member do
+      post :update
+    end
+  end
+
   resources :logs, only: [ :index ] do
     collection do
       delete :destroy_all
@@ -25,6 +31,9 @@ Dbviewer::Engine.routes.draw do
         get "records"
         get "relationships_count"
       end
+      member do
+        get "relationship_counts"
+      end
     end
 
     resources :entity_relationship_diagrams, only: [] do
@@ -43,6 +52,12 @@ Dbviewer::Engine.routes.draw do
         get "recent"
       end
     end
+
+    resources :connections, only: [] do
+      member do
+        get "test"
+      end
+    end
   end
 
   root to: "home#index"

data/lib/dbviewer/configuration.rb

@@ -41,6 +41,16 @@ module Dbviewer
     # Default column to order table details by (e.g., 'updated_at')
     attr_accessor :default_order_column
 
+    # Multiple database connections configuration
+    # @example {
+    #   primary: { connection_class: "ActiveRecord::Base", name: "Primary DB" },
+    #   secondary: { connection_class: "SomeClass", name: "Secondary DB" }
+    # }
+    attr_accessor :database_connections
+
+    # The key of the current active connection
+    attr_accessor :current_connection
+
     def initialize
       @per_page_options = [ 10, 20, 50, 100 ]
       @default_per_page = 20
@@ -55,6 +65,13 @@ module Dbviewer
       @enable_query_logging = true
       @admin_credentials = nil
       @default_order_column = "updated_at"
+      @database_connections = {
+        default: {
+          connection_class: "ActiveRecord::Base",
+          name: "Default Database"
+        }
+      }
+      @current_connection = :default
     end
   end
 end

data/lib/dbviewer/database/dynamic_model_factory.rb

@@ -14,8 +14,7 @@ module Dbviewer
       # @param table_name [String] Name of the table
       # @return [Class] ActiveRecord model class for the table
       def get_model_for(table_name)
-        cached_model = @cache_manager.get_model(table_name)
-        return cached_model if cached_model
+        return @cache_manager.get_model(table_name) if @cache_manager.has_model?(table_name)
 
         model = create_model_for(table_name)
         @cache_manager.store_model(table_name, model)
@@ -28,10 +27,7 @@ module Dbviewer
       # @param table_name [String] Name of the table
       # @return [Class] ActiveRecord model class for the table
       def create_model_for(table_name)
-        model_name = table_name.classify
-
-        # Create a new model class dynamically
-        model = Class.new(ActiveRecord::Base) do
+        model = Dbviewer.const_set(table_name.classify, Class.new(ActiveRecord::Base) do
           self.table_name = table_name
 
           # Some tables might not have primary keys, so we handle that
@@ -47,13 +43,9 @@ module Dbviewer
 
           # Disable timestamps for better compatibility
           self.record_timestamps = false
-        end
+        end)
 
-        # Set model name constant if not already taken
-        # Use a namespace to avoid polluting the global namespace
-        unless Dbviewer.const_defined?("DynamicModel_#{model_name}")
-          Dbviewer.const_set("DynamicModel_#{model_name}", model)
-        end
+        model.establish_connection(@connection.instance_variable_get(:@config))
 
         model
       end

data/lib/dbviewer/database/manager.rb

@@ -3,10 +3,12 @@ module Dbviewer
     # Manager handles all database interactions for the DBViewer engine
     # It provides methods to access database structure and data
     class Manager
-      attr_reader :connection, :adapter_name, :table_query_operations
+      attr_reader :connection, :adapter_name, :table_query_operations, :connection_key
 
       # Initialize the database manager
-      def initialize
+      # @param connection_key [Symbol] The key identifying the connection in configuration
+      def initialize(connection_key = nil)
+        @connection_key = connection_key || Dbviewer.configuration.current_connection
         ensure_connection
         @cache_manager = ::Dbviewer::Database::CacheManager.new(configuration.cache_expiry)
         @table_metadata_manager = ::Dbviewer::Database::MetadataManager.new(@connection, @cache_manager)
@@ -151,6 +153,13 @@ module Dbviewer
         end
       end
 
+      # Get a dynamic AR model for a table
+      # @param table_name [String] Name of the table
+      # @return [Class] ActiveRecord model class
+      def get_model_for(table_name)
+        @dynamic_model_factory.get_model_for(table_name)
+      end
+
       private
 
       def fetch_mysql_size
@@ -182,8 +191,15 @@ module Dbviewer
       # @return [ActiveRecord::ConnectionAdapters::AbstractAdapter] The database connection
       def ensure_connection
         return @connection if @connection
+        connection_config = Dbviewer.configuration.database_connections[@connection_key]
+
+        if connection_config && connection_config[:connection_class]
+          @connection = connection_config[:connection_class].constantize.connection
+        else
+          Rails.logger.warn "DBViewer: Using default connection for key: #{@connection_key}"
+          @connection = ActiveRecord::Base.connection
+        end
 
-        @connection = ActiveRecord::Base.connection
         @adapter_name = @connection.adapter_name.downcase
         @connection
       end
@@ -192,13 +208,6 @@ module Dbviewer
       def reset_cache_if_needed
         @cache_manager.reset_if_needed
       end
-
-      # Get a dynamic AR model for a table
-      # @param table_name [String] Name of the table
-      # @return [Class] ActiveRecord model class
-      def get_model_for(table_name)
-        @dynamic_model_factory.get_model_for(table_name)
-      end
     end
   end
 end