dbviewer 0.5.3 → 0.5.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f8d59c15a88c9b63e2765f80b554c2b2a0a33f82fdb094e1ed6f86fdf8dde20
-  data.tar.gz: d2bbe1fd8acae50c791ab4c32a061c78abbee095001e1647e32b4af4e6918753
+  metadata.gz: 5f0218efe5ea6bc79f61ca87472b6b413916b82e3aedf28e6030c37f302b2ca3
+  data.tar.gz: 65c58c041d85f80f0ad609e54225ec9c5bf3707bc36954ea07c36b95eb69a23c
 SHA512:
-  metadata.gz: fcdf464a23ec52c45d85645ea0dcc9f57fe59c69b8452a68de7f000606d31d3e29c8b81ca237a228debc6884b57e8fb7a40500c1f02af550b3c5515456009ae5
-  data.tar.gz: 768b6cb0f7d67c0ecda6301c6a94471ad16a89f37c6164c8e4f976222f1e1f95720b17477e43811f4d9574c79c71e1f6e582471d0acf408b815aeba17b58c961
+  metadata.gz: 15b2f9f0cf3543c59bc0230ef23070b93d64c7038387e8d384aa2613ef0f28badec97957c2b3d48ab991da86f22f48e9fd71a41844d9247d4cf3d8c015f46331
+  data.tar.gz: 05a6f0cfdd61f901a6dd17edbcd2a93c5244f461a4bfe61b350c2ed864af7e83ed1afa6489a8d2d0e81a66b307d0aa65ea8b81c080a4dc3cca896cec4ee20598

data/README.md

@@ -111,7 +111,7 @@ This is necessary because API-only Rails applications don't include the Flash mi
 You can configure DBViewer by using our generator to create an initializer in your application:
 
 ```bash
-rails generate dbviewer:initializer
+rails generate dbviewer:install
 ```
 
 This will create a file at `config/initializers/dbviewer.rb` with the default configuration:
@@ -172,7 +172,7 @@ config.query_logging_mode = :file         # Store queries in a log file
 config.query_log_path = "log/dbviewer.log" # Path where query log file will be stored
 ```
 
-The file format uses one JSON entry per line, making it easy to analyze with standard tools.
+The file format uses one JSON entry per line, making it easy to analyze with standard tools. Query Log collector are disabled by default on non development environtment.
 
 ## 🔒 Security Features
 
@@ -226,7 +226,7 @@ With the addition of Basic Authentication, DBViewer can now be used in any envir
 3. Access the tool through your regular application URL:
 
    ```
-   https://yourdomain.com/dbviewer?override_env_check=your_secure_random_key
+   https://yourdomain.com/dbviewer
    ```
 
 ## 📝 Security Note
@@ -334,6 +334,7 @@ gem build dbviewer.gemspec
 3. The dummy app includes sample data across multiple tables to test various DBViewer features
 
 ### Architecture Diagram
+
 ```mermaid
 graph TB
     subgraph "DBViewer Engine"

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

@@ -33,12 +33,35 @@
         <div class="card-body p-0">
           <div id="erd-container" class="w-100 h-100" style="min-height: 450px;">
             <div id="erd-loading" class="d-flex justify-content-center align-items-center h-100" style="min-height: 450px;">
-              <div class="text-center">
-                <div class="spinner-border text-primary mb-3" role="status">
-                  <span class="visually-hidden">Loading...</span>
+              <div class="text-center" style="width: 100%; max-width: 500px;">
+                <div class="mb-4">
+                  <i class="bi bi-diagram-3 text-primary" style="font-size: 3rem;"></i>
                 </div>
-                <p>Generating Entity Relationship Diagram...</p>
-                <small class="text-muted">This may take a moment for databases with many tables</small>
+                <h5 class="mb-3">Generating Entity Relationship Diagram</h5>
+                <p id="loading-phase" class="mb-3">Initializing...</p>
+                
+                <!-- Progress bar for table loading -->
+                <div class="progress mb-3" style="height: 8px;">
+                  <div id="table-progress-bar" class="progress-bar bg-primary" role="progressbar" 
+                       style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                  </div>
+                </div>
+                
+                <!-- Progress text -->
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                  <small class="text-muted">Table Details</small>
+                  <small id="table-progress-text" class="text-muted">0 / 0</small>
+                </div>
+                
+                <!-- Relationships loading indicator -->
+                <div id="relationships-status" class="d-flex align-items-center justify-content-center mt-3">
+                  <div class="spinner-border spinner-border-sm text-secondary me-2" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                  <small class="text-muted">Loading relationships...</small>
+                </div>
+                
+                <small class="text-muted d-block mt-3">This may take a moment for databases with many tables</small>
               </div>
             </div>
             <!-- The ERD will be rendered here -->
@@ -175,11 +198,13 @@
         console.log('Relationships loaded:', data);
         relationships = data.relationships || [];
         relationshipsLoaded = true;
+        updateRelationshipsStatus(true);
         return relationships;
       })
       .catch(error => {
         console.error('Error fetching relationships:', error);
         relationshipsLoaded = true; // Mark as loaded even on error to prevent infinite loading
+        updateRelationshipsStatus(true);
         return [];
       });
     }
@@ -187,9 +212,48 @@
     // Function to update loading status
     function updateLoadingStatus(message) {
       const loadingElement = document.getElementById('erd-loading');
-      const loadingText = loadingElement.querySelector('p');
-      if (loadingText) {
-        loadingText.textContent = message;
+      const loadingPhase = document.getElementById('loading-phase');
+      if (loadingPhase) {
+        loadingPhase.textContent = message;
+      }
+    }
+    
+    // Function to update table loading progress
+    function updateTableProgress(loaded, total) {
+      const progressBar = document.getElementById('table-progress-bar');
+      const progressText = document.getElementById('table-progress-text');
+      
+      if (progressBar && progressText) {
+        const percentage = total > 0 ? Math.round((loaded / total) * 100) : 0;
+        progressBar.style.width = percentage + '%';
+        progressBar.setAttribute('aria-valuenow', percentage);
+        progressText.textContent = `${loaded} / ${total}`;
+        
+        // Update progress bar color based on completion
+        if (percentage === 100) {
+          progressBar.classList.remove('bg-primary');
+          progressBar.classList.add('bg-success');
+        }
+      }
+    }
+    
+    // Function to update relationships status
+    function updateRelationshipsStatus(loaded) {
+      const relationshipsStatus = document.getElementById('relationships-status');
+      if (relationshipsStatus) {
+        if (loaded) {
+          relationshipsStatus.innerHTML = `
+            <i class="bi bi-check-circle text-success me-2"></i>
+            <small class="text-success">Relationships loaded</small>
+          `;
+        } else {
+          relationshipsStatus.innerHTML = `
+            <div class="spinner-border spinner-border-sm text-secondary me-2" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <small class="text-muted">Loading relationships...</small>
+          `;
+        }
       }
     }
     
@@ -203,8 +267,12 @@
     let columnsLoadedCount = 0;
     const totalTables = tables.length;
     
+    // Initialize progress bar
+    updateTableProgress(0, totalTables);
+    updateLoadingStatus('Loading table details...');
+    
     // Start fetching relationships immediately
-    updateLoadingStatus('Loading database relationships...');
+    updateRelationshipsStatus(false);
     const relationshipsPromise = fetchRelationships();
     
     // First pass: add all tables with minimal info and start loading columns
@@ -227,8 +295,8 @@
           tableColumns[tableName] = data.columns;
           columnsLoadedCount++;
           
-          // Update loading status
-          updateLoadingStatus(`Loading table details... (${columnsLoadedCount}/${totalTables} tables)`);
+          // Update progress bar
+          updateTableProgress(columnsLoadedCount, totalTables);
           
           checkIfReadyToUpdate();
         }
@@ -236,6 +304,7 @@
       .catch(error => {
         console.error(`Error fetching columns for table ${tableName}:`, error);
         columnsLoadedCount++;
+        updateTableProgress(columnsLoadedCount, totalTables);
         checkIfReadyToUpdate();
       });
     });
@@ -261,9 +330,9 @@
       if (isUpdatingDiagram) return;
       
       isUpdatingDiagram = true;
-      console.log('Updating diagram with full column and relationship data');
+      console.log('Rendering diagram with full column and relationship data');
       
-      updateLoadingStatus('Generating diagram...');
+      updateLoadingStatus('Generating final diagram...');
       
       // Regenerate the diagram with complete data
       let updatedDefinition = 'erDiagram\n';
@@ -289,43 +358,33 @@
         updatedDefinition += '  %% No relationships found in the database schema\n';
       }
       
-      // Create a new diagram element
-      const updatedErdDiv = document.createElement('div');
-      updatedErdDiv.className = 'mermaid';
-      updatedErdDiv.innerHTML = updatedDefinition;
+      // Create the diagram element
+      const erdDiv = document.createElement('div');
+      erdDiv.className = 'mermaid';
+      erdDiv.innerHTML = updatedDefinition;
       
-      // Get the container but don't clear it yet
-      const container = document.getElementById('erd-container');
-      
-      // First, clean up any previous zoom instance
-      if (panZoomInstance) {
-        panZoomInstance.destroy();
-        panZoomInstance = null;
-      }
-      
-      // Create a temporary container
+      // Create a temporary container for rendering
       const tempContainer = document.createElement('div');
       tempContainer.style.visibility = 'hidden';
       tempContainer.style.position = 'absolute';
       tempContainer.style.width = '100%';
-      tempContainer.appendChild(updatedErdDiv);
+      tempContainer.appendChild(erdDiv);
       document.body.appendChild(tempContainer);
       
-      // Render in the temporary container first
-      mermaid.init(undefined, updatedErdDiv).then(function() {
-        console.log('Diagram fully updated with all data');
+      // Render the diagram in the temporary container
+      mermaid.init(undefined, erdDiv).then(function() {
+        console.log('Diagram fully rendered with all data');
         
-        // Clear original container and move the rendered content
         try {
           // Remove from temp container without destroying
-          tempContainer.removeChild(updatedErdDiv);
+          tempContainer.removeChild(erdDiv);
           
           // Hide loading indicator
           document.getElementById('erd-loading').style.display = 'none';
           
           // Clear main container and add the diagram
           container.innerHTML = '';
-          container.appendChild(updatedErdDiv);
+          container.appendChild(erdDiv);
           
           // Remove temp container
           document.body.removeChild(tempContainer);
@@ -342,101 +401,16 @@
           isUpdatingDiagram = false;
         }
       }).catch(function(error) {
-        console.error('Error rendering updated diagram:', error);
+        console.error('Error rendering diagram:', error);
         document.body.removeChild(tempContainer);
         isUpdatingDiagram = false;
-        showError('Error rendering diagram', 'There was an error updating the diagram with complete data.', error.message);
+        showError('Error rendering diagram', 'There was an error rendering the entity relationship diagram.', error.message);
       });
     }
     
-    // Add initial relationships placeholder (empty)
-    mermaidDefinition += '  %% Relationships loading...\n';
-    
-    // Create a div for the initial diagram (shows immediately with table names only)
-    const erdDiv = document.createElement('div');
-    erdDiv.className = 'mermaid';
-    erdDiv.innerHTML = mermaidDefinition;
-    
     // Get the container reference for later use
     const container = document.getElementById('erd-container');
     
-    // Create a temporary container for initial rendering
-    const tempInitContainer = document.createElement('div');
-    tempInitContainer.style.visibility = 'hidden';
-    tempInitContainer.style.position = 'absolute';
-    tempInitContainer.style.width = '100%';
-    tempInitContainer.appendChild(erdDiv);
-    document.body.appendChild(tempInitContainer);
-    
-    // Update loading status for initial render
-    updateLoadingStatus('Rendering initial diagram...');
-    
-    // Render the initial diagram in the temporary container
-    mermaid.init(undefined, erdDiv).then(function() {
-      try {
-        // Remove from temp container without destroying
-        tempInitContainer.removeChild(erdDiv);
-        
-        // Hide the loading indicator temporarily (will show updated loading for data fetching)
-        document.getElementById('erd-loading').style.display = 'none';
-        
-        // Add the rendered diagram to the main container
-        container.appendChild(erdDiv);
-        
-        // Remove temp container
-        document.body.removeChild(tempInitContainer);
-        
-        // Setup initial zoom controls
-        setTimeout(() => {
-          setupZoomControls();
-          // Show a subtle loading indicator that data is still loading
-          showDataLoadingIndicator();
-        }, 100);
-      } catch(err) {
-        console.error('Error moving initial diagram to container:', err);
-      }
-    }).catch(function(error) {
-      console.error('Error rendering initial diagram:', error);
-      document.body.removeChild(tempInitContainer);
-      showError('Error generating diagram', 'There was an error generating the initial entity relationship diagram.', error.message);
-    });
-    
-    // Function to show a subtle loading indicator for data loading
-    function showDataLoadingIndicator() {
-      // Create a small loading badge in the top-right corner
-      const loadingBadge = document.createElement('div');
-      loadingBadge.id = 'data-loading-badge';
-      loadingBadge.className = 'position-absolute top-0 end-0 m-3';
-      loadingBadge.style.zIndex = '1000';
-      loadingBadge.innerHTML = `
-        <div class="badge bg-info d-flex align-items-center">
-          <div class="spinner-border spinner-border-sm me-2" role="status" style="width: 0.8rem; height: 0.8rem;">
-            <span class="visually-hidden">Loading...</span>
-          </div>
-          Loading details...
-        </div>
-      `;
-      
-      container.style.position = 'relative';
-      container.appendChild(loadingBadge);
-      
-      // Remove the badge when data loading is complete
-      const checkComplete = () => {
-        if (columnsLoadedCount === totalTables && relationshipsLoaded) {
-          setTimeout(() => {
-            const badge = document.getElementById('data-loading-badge');
-            if (badge) {
-              badge.remove();
-            }
-          }, 500); // Small delay to show completion
-        } else {
-          setTimeout(checkComplete, 500);
-        }
-      };
-      
-      setTimeout(checkComplete, 1000);
-    }
-    
     // SVG Pan Zoom instance
     let panZoomInstance = null;
     

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.5.3"
+  VERSION = "0.5.5"
 end

data/lib/generators/dbviewer/{initializer_generator.rb → install_generator.rb}

@@ -1,6 +1,6 @@
 module Dbviewer
   module Generators
-    class InitializerGenerator < Rails::Generators::Base
+    class InstallGenerator < Rails::Generators::Base
       source_root File.expand_path("../templates", __FILE__)
       desc "Creates a DBViewer initializer file at config/initializers/dbviewer.rb"
 

data/lib/generators/dbviewer/templates/initializer.rb

@@ -1,21 +1,21 @@
 Dbviewer.configure do |config|
-  config.per_page_options = [ 10, 20, 50, 100, 250 ]
-  config.default_per_page = 20
-  config.max_query_length = 10000
-  config.cache_expiry = 300
-  config.max_records = 10000
-  config.enable_data_export = false
-  config.query_timeout = 30
+  config.per_page_options = [ 10, 20, 50, 100, 250 ] # Default pagination options
+  config.default_per_page = 50                       # Default records per page
+  config.max_query_length = 10000                    # Maximum SQL query length
+  config.cache_expiry = 300                          # Cache expiration in seconds
+  config.max_records = 10000                         # Maximum records to return in any query
+  config.enable_data_export = false                  # Whether to allow data exporting
+  config.query_timeout = 30                          # SQL query timeout in seconds
 
   # Query logging options
-  config.enable_query_logging = false
-  config.query_logging_mode = :memory
-  config.query_log_path = "log/dbviewer.log"
-  config.max_memory_queries = 1000
+  config.enable_query_logging = true                 # Enable or disable query logging completely (default: true)
+  config.query_logging_mode = :file                  # Storage mode for SQL queries (:memory or :file)
+  config.query_log_path = "log/dbviewer.log"         # Path for query log file when in :file mode
+  config.max_memory_queries = 1000                   # Maximum number of queries to store in memory
 
-  # Authentication options
-  # config.admin_credentials = { username: "admin", password: "your_secure_password" } # Basic HTTP auth credentials
-
-  # Default table ordering options
-  config.default_order_column = "updated_at"  # Primary column to order by
+  # Authentication options (Basic Auth)
+  # config.admin_credentials = {
+  #   username: "admin",
+  #   password: "your_secure_password"
+  # }
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dbviewer
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.5.5
 platform: ruby
 authors:
 - Wailan Tirajoh
@@ -99,7 +99,7 @@ files:
 - lib/dbviewer/storage/file_storage.rb
 - lib/dbviewer/storage/in_memory_storage.rb
 - lib/dbviewer/version.rb
-- lib/generators/dbviewer/initializer_generator.rb
+- lib/generators/dbviewer/install_generator.rb
 - lib/generators/dbviewer/templates/initializer.rb
 - lib/tasks/dbviewer_tasks.rake
 homepage: https://github.com/wailantirajoh/dbviewer