dbviewer 0.6.6 → 0.6.8

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

@@ -1,6 +1,22 @@
 <% content_for :title, "SQL Query Logs" %>
 
+<% content_for :head do %>
+  <%= stylesheet_link_tag "dbviewer/logs", "data-turbo-track": "reload" %>
+<% end %>
+
+
 <div class="container-fluid">
+  <% unless Rails.env.development? %>
+    <div class="alert alert-warning mb-3">
+      <div class="d-flex align-items-center">
+        <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
+        <div>
+          <strong>Warning:</strong> SQL Query logs are disabled in non-development environments.
+        </div>
+      </div>
+    </div>
+  <% end %>
+
   <div class="d-flex justify-content-between align-items-center mb-2">
     <h1>
       <i class="bi bi-journal-code me-2"></i>SQL Query Logs
@@ -378,7 +394,12 @@
                 <td colspan="6" class="text-center py-5 empty-data-message">
                   <i class="bi bi-database-x fs-2 d-block mb-2"></i>
                   No SQL queries logged yet.
-                  <p class="mt-2">Navigate through the application to see queries being logged here.</p>
+                  <% if Rails.env.development? %>
+                    <p class="mt-2">Navigate through the application to see queries being logged here.</p>
+                  <% else %>
+                    <p class="mt-2">SQL Query logs are disabled in non-development environments.</p>
+                    <small class="text-muted d-block">To enable logs in this environment, set <code>enable_query_logging = true</code> in your configuration.</small>
+                  <% end %>
                 </td>
               </tr>
             <% end %>
@@ -388,223 +409,3 @@
     </div>
   </div>
 </div>
-
-<% if @stats[:tables_queried].present? %>
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const ctx = document.getElementById('tablesChart').getContext('2d');
-    const tableData = <%= raw @stats[:tables_queried].to_json %>;
-    const labels = Object.keys(tableData);
-    const values = Object.values(tableData);
-    
-    // Get theme-compatible colors
-    const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
-    const chartBgColor = isDarkMode ? 'rgba(75, 192, 192, 0.4)' : 'rgba(75, 192, 192, 0.6)';
-    const chartBorderColor = isDarkMode ? 'rgba(75, 192, 192, 0.8)' : 'rgba(75, 192, 192, 1)';
-    
-    const chart = new Chart(ctx, {
-      type: 'bar',
-      data: {
-        labels: labels,
-        datasets: [{
-          label: 'Query Count',
-          data: values,
-          backgroundColor: chartBgColor,
-          borderColor: chartBorderColor,
-          borderWidth: 1
-        }]
-      },
-      options: {
-        scales: {
-          y: {
-            beginAtZero: true,
-            ticks: {
-              precision: 0,
-              color: getComputedStyle(document.documentElement).getPropertyValue('--bs-body-color')
-            },
-            grid: {
-              color: getComputedStyle(document.documentElement).getPropertyValue('--bs-border-color-translucent')
-            }
-          },
-          x: {
-            ticks: {
-              color: getComputedStyle(document.documentElement).getPropertyValue('--bs-body-color')
-            },
-            grid: {
-              color: getComputedStyle(document.documentElement).getPropertyValue('--bs-border-color-translucent')
-            }
-          }
-        },
-        plugins: {
-          legend: {
-            display: false,
-            labels: {
-              color: getComputedStyle(document.documentElement).getPropertyValue('--bs-body-color')
-            }
-          },
-          title: {
-            display: true,
-            text: 'Number of Queries by Table',
-            color: getComputedStyle(document.documentElement).getPropertyValue('--bs-body-color')
-          },
-          tooltip: {
-            callbacks: {
-              label: function(context) {
-                return `${context.parsed.y} queries`;
-              }
-            }
-          }
-        }
-      });
-    
-    // Update chart when theme changes
-    document.addEventListener('dbviewerThemeChanged', function(e) {
-      const isDarkMode = e.detail.theme === 'dark';
-      const chartBgColor = isDarkMode ? 'rgba(75, 192, 192, 0.4)' : 'rgba(75, 192, 192, 0.6)';
-      const chartBorderColor = isDarkMode ? 'rgba(75, 192, 192, 0.8)' : 'rgba(75, 192, 192, 1)';
-      
-      chart.data.datasets[0].backgroundColor = chartBgColor;
-      chart.data.datasets[0].borderColor = chartBorderColor;
-      
-      // Update text colors
-      chart.options.scales.y.ticks.color = getComputedStyle(document.documentElement).getPropertyValue('--bs-body-color');
-      chart.options.scales.x.ticks.color = getComputedStyle(document.documentElement).getPropertyValue('--bs-body-color');
-      chart.options.scales.y.grid.color = getComputedStyle(document.documentElement).getPropertyValue('--bs-border-color-translucent');
-      chart.options.scales.x.grid.color = getComputedStyle(document.documentElement).getPropertyValue('--bs-border-color-translucent');
-      chart.options.plugins.title.color = getComputedStyle(document.documentElement).getPropertyValue('--bs-body-color');
-      
-      chart.update();
-    });
-  });
-</script>
-<% end %>
-
-<style>
-  .sql-query {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    max-height: 100px;
-    overflow-y: auto;
-    font-size: 0.85rem;
-    background-color: #f8f9fa;
-    border-radius: 3px;
-    padding: 0.5rem;
-  }
-  
-  .request-group-header {
-    border-top: 2px solid #dee2e6;
-  }
-  
-  .request-group-header:first-child {
-    border-top: none;
-  }
-  
-  details summary {
-    cursor: pointer;
-  }
-  
-  .cursor-pointer {
-    cursor: pointer;
-  }
-  
-  /* Rotate icon when expanded */
-  .collapsed-section[aria-expanded="true"] .bi-chevron-down {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease;
-  }
-  
-  .collapsed-section[aria-expanded="false"] .bi-chevron-down {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
-  }
-</style>
-
-<style>
-  /* SQL query styling with dark mode support */
-  .sql-query {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    max-height: 100px;
-    overflow-y: auto;
-    font-size: 0.85rem;
-    border-radius: 3px;
-    padding: 0.5rem;
-  }
-  
-  /* Dark mode compatible styling */
-  .sql-code-block {
-    background-color: var(--bs-secondary-bg);
-  }
-
-  [data-bs-theme="dark"] .sql-code-block {
-    background-color: var(--bs-tertiary-bg);
-  }
-  
-  /* Request group header styling */
-  .request-group-header {
-    border-top: 2px solid var(--bs-border-color);
-  }
-  
-  .request-header-bg {
-    background-color: var(--bs-secondary-bg);
-  }
-  
-  .request-group-header:first-child {
-    border-top: none;
-  }
-  
-  /* Collapsed section styling */
-  details summary {
-    cursor: pointer;
-  }
-  
-  .cursor-pointer {
-    cursor: pointer;
-  }
-  
-  /* Rotate icon when expanded */
-  .collapsed-section[aria-expanded="true"] .bi-chevron-down {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease;
-  }
-  
-  .collapsed-section[aria-expanded="false"] .bi-chevron-down {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
-  }
-  
-  /* Code styling */
-  .pattern-code, .query-binds {
-    background-color: var(--bs-secondary-bg);
-    border: 1px solid var(--bs-border-color);
-  }
-  
-  /* Empty data message */
-  .empty-data-message {
-    color: var(--bs-secondary-color);
-  }
-</style>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Add Bootstrap collapse event handlers to animate icons
-    const n1CollapseTrigger = document.querySelector('[data-bs-target="#n1QueriesCollapse"]');
-    const slowestCollapseTrigger = document.querySelector('[data-bs-target="#slowestQueriesCollapse"]');
-    
-    if (n1CollapseTrigger) {
-      n1CollapseTrigger.classList.add('collapsed-section');
-      n1CollapseTrigger.addEventListener('click', function() {
-        const isExpanded = this.getAttribute('aria-expanded') === 'true';
-        this.setAttribute('aria-expanded', !isExpanded);
-      });
-    }
-    
-    if (slowestCollapseTrigger) {
-      slowestCollapseTrigger.classList.add('collapsed-section');
-      slowestCollapseTrigger.addEventListener('click', function() {
-        const isExpanded = this.getAttribute('aria-expanded') === 'true';
-        this.setAttribute('aria-expanded', !isExpanded);
-      });
-    }
-  });
-</script>

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

@@ -49,68 +49,3 @@
     </div>
   </div>
 </div>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Table search functionality
-    const searchInput = document.getElementById('tableSearch');
-    if (searchInput) {
-      searchInput.addEventListener('keyup', function() {
-        const filter = this.value.toLowerCase();
-        const tableRows = document.querySelectorAll('tbody tr');
-        
-        tableRows.forEach(function(row) {
-          const tableName = row.querySelector('td:first-child').textContent.toLowerCase();
-          if (tableName.includes(filter)) {
-            row.style.display = '';
-          } else {
-            row.style.display = 'none';
-          }
-        });
-      });
-    }
-    
-    // Update table styling when theme changes
-    function updateTableStyling() {
-      const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
-      const tables = document.querySelectorAll('.table');
-      
-      tables.forEach(table => {
-        if (isDarkMode) {
-          table.classList.add('table-dark');
-        } else {
-          table.classList.remove('table-dark');
-        }
-      });
-    }
-    
-    // Initial styling
-    updateTableStyling();
-    
-    // Listen for theme changes
-    document.addEventListener('dbviewerThemeChanged', function(event) {
-      updateTableStyling();
-    });
-  });
-</script>
-
-<style>
-  /* Dark mode table styles */
-  [data-bs-theme="dark"] .table {
-    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
-    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
-  }
-  
-  /* Fix badge styling for dark mode */
-  [data-bs-theme="dark"] .bg-secondary-subtle {
-    background-color: rgba(255, 255, 255, 0.15) !important;
-    color: #e9ecef !important;
-  }
-  
-  [data-bs-theme="light"] .bg-secondary-subtle {
-    background-color: #e9ecef !important;
-    color: #212529 !important;
-  }
-</style>
-
-