dbviewer 0.6.7 → 0.7.0

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

@@ -1,3 +1,8 @@
+<% content_for :head do %>
+  <%= stylesheet_link_tag "dbviewer/home", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "dbviewer/home", "data-turbo-track": "reload" %>
+<% end %>
+
 <div class="container-fluid px-0">
   <div class="row mb-3">
     <div class="col">
@@ -131,502 +136,7 @@
   </div>
 </div>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  // Helper function to format numbers with commas
-  function numberWithDelimiter(number) {
-    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  }
-
-  // Helper function to format file sizes
-  function numberToHumanSize(bytes) {
-    if (bytes === null || bytes === undefined) return 'N/A';
-    if (bytes === 0) return '0 Bytes';
-    
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  }
-
-  // Function to update analytics cards
-  function updateTablesCount(data) {
-    document.getElementById('tables-loading').classList.add('d-none');
-    document.getElementById('tables-count').classList.remove('d-none');
-    document.getElementById('tables-count').textContent = data.total_tables || 0;
-  }
-  
-  function updateRelationshipsCount(data) {
-    document.getElementById('relationships-loading').classList.add('d-none');
-    document.getElementById('relationships-count').classList.remove('d-none');
-    document.getElementById('relationships-count').textContent = data.total_relationships || 0;
-  }
-  
-  function updateDatabaseSize(data) {
-    document.getElementById('size-loading').classList.add('d-none');
-    document.getElementById('size-count').classList.remove('d-none');
-    document.getElementById('size-count').textContent = numberToHumanSize(data.schema_size);
-  }
-  
-  function updateRecordsData(recordsData) {
-    // Update records count
-    document.getElementById('records-loading').classList.add('d-none');
-    document.getElementById('records-count').classList.remove('d-none');
-    document.getElementById('records-count').textContent = numberWithDelimiter(recordsData.total_records || 0);
-    
-    // Update largest tables
-    updateLargestTables(recordsData);
-  }
-
-  // Function to update largest tables
-  function updateLargestTables(data) {
-    const container = document.getElementById('largest-tables-container');
-    
-    if (data.largest_tables && data.largest_tables.length > 0) {
-      const tableHtml = `
-        <div class="table-responsive">
-          <table class="table table-sm table-hover">
-            <thead>
-              <tr>
-                <th>Table Name</th>
-                <th class="text-end">Records</th>
-              </tr>
-            </thead>
-            <tbody>
-              ${data.largest_tables.map(table => `
-                <tr>
-                  <td>
-                    <a href="${window.location.origin}${window.location.pathname.replace(/\/$/, '')}/tables/${table.name}">
-                      ${table.name}
-                    </a>
-                  </td>
-                  <td class="text-end">${numberWithDelimiter(table.record_count)}</td>
-                </tr>
-              `).join('')}
-            </tbody>
-          </table>
-        </div>
-      `;
-      container.innerHTML = tableHtml;
-    } else {
-      container.innerHTML = `
-        <div class="text-center my-4 empty-data-message">
-          <p>No table data available</p>
-        </div>
-      `;
-    }
-  }
-
-  // Function to update recent queries
-  function updateRecentQueries(data) {
-    const container = document.getElementById('recent-queries-container');
-    const linkContainer = document.getElementById('queries-view-all-link');
-    
-    if (data.enabled) {
-      // Show "View All Logs" link if query logging is enabled
-      linkContainer.innerHTML = `
-        <a href="${window.location.origin}${window.location.pathname.replace(/\/$/, '')}/logs" class="btn btn-sm btn-primary">View All Logs</a>
-      `;
-      linkContainer.classList.remove('d-none');
-      
-      if (data.queries && data.queries.length > 0) {
-        const tableHtml = `
-          <div class="table-responsive">
-            <table class="table table-sm table-hover mb-0">
-              <thead>
-                <tr>
-                  <th>Query</th>
-                  <th class="text-end" style="width: 120px">Duration</th>
-                  <th class="text-end" style="width: 180px">Time</th>
-                </tr>
-              </thead>
-              <tbody>
-                ${data.queries.map(query => {
-                  const duration = query.duration_ms;
-                  const durationClass = duration > 100 ? 'query-duration-slow' : 'query-duration';
-                  const timestamp = new Date(query.timestamp);
-                  const timeString = timestamp.toLocaleTimeString();
-                  
-                  return `
-                    <tr>
-                      <td class="text-truncate" style="max-width: 500px;">
-                        <code class="sql-query-code">${query.sql}</code>
-                      </td>
-                      <td class="text-end">
-                        <span class="${durationClass}">
-                          ${duration} ms
-                        </span>
-                      </td>
-                      <td class="text-end query-timestamp">
-                        <small>${timeString}</small>
-                      </td>
-                    </tr>
-                  `;
-                }).join('')}
-              </tbody>
-            </table>
-          </div>
-        `;
-        container.innerHTML = tableHtml;
-      } else {
-        container.innerHTML = `
-          <div class="text-center my-4 empty-data-message">
-            <p>No queries recorded yet</p>
-          </div>
-        `;
-      }
-    } else {
-      container.innerHTML = `
-        <div class="text-center my-4 empty-data-message">
-          <p>Query logging is disabled</p>
-          <small class="text-muted">Enable it in the configuration to see SQL queries here</small>
-        </div>
-      `;
-    }
-  }
-
-  // Function to show error state
-  function showError(containerId, message) {
-    const container = document.getElementById(containerId);
-    container.innerHTML = `
-      <div class="text-center my-4 text-danger">
-        <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
-        <p>Error loading data</p>
-        <small>${message}</small>
-      </div>
-    `;
-  }
-
-  // Load tables count data
-  fetch('<%= dbviewer.api_tables_path %>', {
-    headers: {
-      'Accept': 'application/json',
-      'X-Requested-With': 'XMLHttpRequest'
-    }
-  })
-  .then(response => {
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    return response.json();
-  })
-  .then(data => {
-    updateTablesCount(data);
-  })
-  .catch(error => {
-    console.error('Error loading tables count:', error);
-    const loading = document.getElementById('tables-loading');
-    const count = document.getElementById('tables-count');
-    loading.classList.add('d-none');
-    count.classList.remove('d-none');
-    count.innerHTML = '<span class="text-danger">Error</span>';
-  });
-
-  // Load database size data
-  fetch('<%= dbviewer.size_api_database_path %>', {
-    headers: {
-      'Accept': 'application/json',
-      'X-Requested-With': 'XMLHttpRequest'
-    }
-  })
-  .then(response => {
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    return response.json();
-  })
-  .then(data => {
-    updateDatabaseSize(data);
-  })
-  .catch(error => {
-    console.error('Error loading database size:', error);
-    const loading = document.getElementById('size-loading');
-    const count = document.getElementById('size-count');
-    loading.classList.add('d-none');
-    count.classList.remove('d-none');
-    count.innerHTML = '<span class="text-danger">Error</span>';
-  });
-  
-  // Load records data separately
-  fetch('<%= dbviewer.records_api_tables_path %>', {
-    headers: {
-      'Accept': 'application/json',
-      'X-Requested-With': 'XMLHttpRequest'
-    }
-  })
-  .then(response => {
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    return response.json();
-  })
-  .then(recordsData => {
-    updateRecordsData(recordsData);
-  })
-  .catch(error => {
-    console.error('Error loading records data:', error);
-    // Update records-related UI with error state
-    const recordsLoading = document.getElementById('records-loading');
-    const recordsCount = document.getElementById('records-count');
-    recordsLoading.classList.add('d-none');
-    recordsCount.classList.remove('d-none');
-    recordsCount.innerHTML = '<span class="text-danger">Error</span>';
-    
-    showError('largest-tables-container', error.message);
-  });
-
-  // Load recent queries data
-  fetch('<%= dbviewer.recent_api_queries_path %>', {
-    headers: {
-      'Accept': 'application/json',
-      'X-Requested-With': 'XMLHttpRequest'
-    }
-  })
-  .then(response => {
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    return response.json();
-  })
-  .then(data => {
-    updateRecentQueries(data);
-  })
-  .catch(error => {
-    console.error('Error loading recent queries:', error);
-    showError('recent-queries-container', error.message);
-  });
-});
-</script>
-
-<style>
-  /* ================================================
-     CSS Custom Properties (CSS Variables)
-     ================================================ */
-  :root {
-    /* Colors */
-    --dbviewer-code-bg: rgba(0, 0, 0, 0.05);
-    --dbviewer-code-border: rgba(0, 0, 0, 0.1);
-    --dbviewer-muted-color: #6c757d;
-    --dbviewer-success-color: #28a745;
-    --dbviewer-danger-color: #dc3545;
-    --dbviewer-warning-color: #ffc107;
-    
-    /* Skeleton loader colors */
-    --skeleton-base-color: #f0f0f0;
-    --skeleton-highlight-color: #e0e0e0;
-    
-    /* Typography */
-    --dbviewer-monospace-font: 'Courier New', Courier, monospace;
-    --dbviewer-code-font-size: 0.85rem;
-    
-    /* Spacing and sizing */
-    --dbviewer-border-radius: 4px;
-    --dbviewer-border-radius-sm: 3px;
-    --dbviewer-padding-sm: 2px 4px;
-  }
-
-  /* ================================================
-     Dark Mode Support
-     ================================================ */
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
-      --dbviewer-code-border: rgba(255, 255, 255, 0.15);
-      --dbviewer-muted-color: #adb5bd;
-      --skeleton-base-color: #2a2a2a;
-      --skeleton-highlight-color: #404040;
-    }
-  }
-
-  /* Bootstrap dark mode support */
-  [data-bs-theme="dark"] {
-    --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
-    --dbviewer-code-border: rgba(255, 255, 255, 0.15);
-    --dbviewer-muted-color: #adb5bd;
-    --skeleton-base-color: #2a2a2a;
-    --skeleton-highlight-color: #404040;
-  }
-
-  /* ================================================
-     SQL Query Styling
-     ================================================ */
-  .sql-query-code {
-    font-family: var(--dbviewer-monospace-font);
-    font-size: var(--dbviewer-code-font-size);
-    background-color: var(--dbviewer-code-bg);
-    padding: var(--dbviewer-padding-sm);
-    border-radius: var(--dbviewer-border-radius-sm);
-    border: 1px solid var(--dbviewer-code-border);
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-  }
-
-  .sql-query-code:hover {
-    background-color: var(--dbviewer-code-bg);
-    filter: brightness(0.95);
-  }
-
-  /* ================================================
-     Query Performance Indicators
-     ================================================ */
-  .query-duration {
-    color: var(--dbviewer-success-color);
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-    transition: color 0.2s ease;
-  }
-  
-  .query-duration-slow {
-    color: var(--dbviewer-danger-color);
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    transition: color 0.2s ease;
-  }
-  
-  .query-timestamp {
-    color: var(--dbviewer-muted-color);
-    font-variant-numeric: tabular-nums;
-    transition: color 0.2s ease;
-  }
-
-  /* ================================================
-     Empty States and Messages
-     ================================================ */
-  .empty-data-message {
-    color: var(--dbviewer-muted-color);
-    transition: color 0.2s ease;
-  }
-
-  .empty-data-message p {
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-  }
-
-  .empty-data-message small {
-    opacity: 0.8;
-  }
-
-  /* ================================================
-     Loading States
-     ================================================ */
-  .spinner-border-sm {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  /* ================================================
-     Skeleton Loader System
-     ================================================ */
-  .skeleton-loader {
-    display: inline-block;
-    height: 1.2em;
-    width: 100%;
-    background: linear-gradient(
-      90deg, 
-      var(--skeleton-base-color) 25%, 
-      var(--skeleton-highlight-color) 37%, 
-      var(--skeleton-base-color) 63%
-    );
-    background-size: 400% 100%;
-    animation: skeleton-loading 1.2s ease-in-out infinite;
-    border-radius: var(--dbviewer-border-radius);
-  }
-
-  /* Skeleton loader variants */
-  .skeleton-loader.number-loader {
-    width: 2.5em;
-    height: 1.5em;
-    margin-bottom: 0.2em;
-  }
-
-  .skeleton-loader.table-cell-loader {
-    width: 6em;
-    height: 1.2em;
-  }
-
-  .skeleton-loader.records-loader {
-    width: 3em;
-    height: 1.2em;
-  }
-
-  .skeleton-loader.query-cell-loader {
-    width: 12em;
-    height: 1.2em;
-  }
-
-  .skeleton-loader.duration-cell-loader {
-    width: 4em;
-    height: 1.2em;
-  }
-
-  .skeleton-loader.time-cell-loader {
-    width: 7em;
-    height: 1.2em;
-  }
-
-  /* ================================================
-     Animations
-     ================================================ */
-  @keyframes skeleton-loading {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
-  }
-
-  /* ================================================
-     Table Enhancements
-     ================================================ */
-  .table-hover tbody tr:hover .sql-query-code {
-    background-color: var(--dbviewer-code-bg);
-    filter: brightness(0.9);
-  }
-
-  /* ================================================
-     Responsive Design
-     ================================================ */
-  @media (max-width: 768px) {
-    .sql-query-code {
-      font-size: 0.75rem;
-      padding: 1px 3px;
-    }
-    
-    .query-cell-loader {
-      width: 8em;
-    }
-    
-    .duration-cell-loader {
-      width: 3em;
-    }
-    
-    .time-cell-loader {
-      width: 5em;
-    }
-  }
-
-  /* ================================================
-     Accessibility Improvements
-     ================================================ */
-  @media (prefers-reduced-motion: reduce) {
-    .skeleton-loader {
-      animation: none;
-      background: var(--skeleton-base-color);
-    }
-    
-    .sql-query-code,
-    .query-duration,
-    .query-duration-slow,
-    .query-timestamp,
-    .empty-data-message {
-      transition: none;
-    }
-  }
-
-  /* Focus states for better keyboard navigation */
-  .sql-query-code:focus-visible {
-    outline: 2px solid var(--dbviewer-success-color);
-    outline-offset: 2px;
-  }
-</style>
+<input type="text" id="recent_api_queries_path" class="d-none" value="<%= dbviewer.recent_api_queries_path %>">
+<input type="text" id="api_tables_path" class="d-none" value="<%= dbviewer.api_tables_path %>">
+<input type="text" id="size_api_database_path" class="d-none" value="<%= dbviewer.size_api_database_path %>">
+<input type="text" id="records_api_tables_path" class="d-none" value="<%= dbviewer.records_api_tables_path %>">