pg_reports 0.9.0 → 1.0.0

data/app/views/pg_reports/dashboard/_show_scripts.html.erb

@@ -1,11 +1,14 @@
 <script>
   const svgIcon = (name, cls) => `<svg class="icon ${cls || ''}"><use href="#i-${name}"></use></svg>`;
   let currentReportData = null;
+  // Rows in their rendered order. Inline handlers carry an index into this, never
+  // the row itself: report data comes from the database, and any encoding of it
+  // into an attribute that JS re-parses is one decoding step from being code.
+  let renderedRows = [];
   let currentProblemExplanations = {};
   const category = '<%= @category %>';
   const reportKey = '<%= @report_key %>';
-  const railsEnv = '<%= Rails.env %>';
-  const isDevelopment = railsEnv === 'development';
+  const allowMigrationCreation = <%= PgReports.config.allow_migration_creation ? true : false %>;
   const allowRawQueryExecution = <%= PgReports.config.allow_raw_query_execution.to_s.downcase %>;
   let syncingScroll = false;
   let currentSort = { column: null, direction: 'asc' };
@@ -118,6 +121,8 @@
     const tableBody = document.getElementById('results-body');
     if (!tableBody) return;
 
+    renderedRows = data;
+
     let rowsHtml = '';
 
     data.forEach((row, idx) => {
@@ -130,7 +135,7 @@
         rowClass += problemInfo.level === 'critical' ? ' critical-row' : ' warning-row';
         const indicatorClass = problemInfo.level === 'critical' ? 'critical' : 'warning';
         const indicatorIcon = svgIcon('alert');
-        problemIndicator = `<span class="problem-indicator ${indicatorClass}" onclick="event.stopPropagation(); showProblemModal(${JSON.stringify(problemInfo.problems).replace(/"/g, '&quot;')}, ${JSON.stringify(row).replace(/"/g, '&quot;')})">${indicatorIcon}</span>`;
+        problemIndicator = `<span class="problem-indicator ${indicatorClass}" onclick="event.stopPropagation(); showRowProblems(${idx})">${indicatorIcon}</span>`;
       }
 
       // Data row
@@ -347,6 +352,14 @@
     return { level: maxLevel, problems };
   }
 
+  function showRowProblems(rowIndex) {
+    const row = renderedRows[rowIndex];
+    if (!row) return;
+
+    const problemInfo = getRowProblemLevel(row, currentReportData.thresholds, currentReportData.problem_fields);
+    showProblemModal(problemInfo.problems, row);
+  }
+
   // Show problem modal
   function showProblemModal(problems, row) {
     const modal = document.getElementById('problem-modal');
@@ -536,39 +549,44 @@
     const line = lineNumber || 1;
     const urls = [];
 
+    // The path can come from a SQL comment, which anyone with database access
+    // can write, so it is encoded here and never reaches a URL as it was.
+    const urlPath = absolutePath.split('/').map(encodeURIComponent).join('/');
+    const urlParam = encodeURIComponent(absolutePath);
+
     // VSCode (WSL Remote format)
     urls.push({
       name: 'VS Code (WSL)',
-      url: `vscode://vscode-remote/wsl+${wslDistro}${absolutePath}:${line}`
+      url: `vscode://vscode-remote/wsl+${wslDistro}${urlPath}:${line}`
     });
 
     // VSCode (direct path - for native Linux or Windows)
     urls.push({
       name: 'VS Code',
-      url: `vscode://file${absolutePath}:${line}`
+      url: `vscode://file${urlPath}:${line}`
     });
 
     // JetBrains (RubyMine, IntelliJ, etc.)
     urls.push({
       name: 'RubyMine',
-      url: `x-mine://open?file=${absolutePath}&line=${line}`
+      url: `x-mine://open?file=${urlParam}&line=${line}`
     });
 
     urls.push({
       name: 'IntelliJ',
-      url: `idea://open?file=${absolutePath}&line=${line}`
+      url: `idea://open?file=${urlParam}&line=${line}`
     });
 
     // Cursor (WSL Remote format)
     urls.push({
       name: 'Cursor (WSL)',
-      url: `cursor://vscode-remote/wsl+${wslDistro}${absolutePath}:${line}`
+      url: `cursor://vscode-remote/wsl+${wslDistro}${urlPath}:${line}`
     });
 
     // Cursor (direct path)
     urls.push({
       name: 'Cursor',
-      url: `cursor://file${absolutePath}:${line}`
+      url: `cursor://file${urlPath}:${line}`
     });
 
     return urls;
@@ -603,7 +621,7 @@
     if (defaultIde && ideKeyMap[defaultIde] !== undefined) {
       const ideUrl = ideUrls[ideKeyMap[defaultIde]];
       if (ideUrl) {
-        return `<a class="source-badge clickable" href="${ideUrl.url}" onclick="event.stopPropagation();" title="${escapeHtmlAttr(parsed.original)}">${sourceBadgeLabel(parsed)}</a>`;
+        return `<a class="source-badge clickable" href="${escapeHtmlAttr(ideUrl.url)}" onclick="event.stopPropagation();" title="${escapeHtmlAttr(parsed.original)}">${sourceBadgeLabel(parsed)}</a>`;
       }
     }
 
@@ -617,7 +635,7 @@
     `;
 
     for (const ide of ideUrls) {
-      dropdownHtml += `<a href="${ide.url}">${ide.name}</a>`;
+      dropdownHtml += `<a href="${escapeHtmlAttr(ide.url)}">${escapeHtml(ide.name)}</a>`;
     }
 
     dropdownHtml += '</div></div>';
@@ -713,10 +731,9 @@
 
     // Action buttons
     const isSaved = isRecordSaved(rowId);
-    const rowJson = JSON.stringify(row).replace(/"/g, '&quot;');
 
     html += `<div class="detail-actions">`;
-    html += `<button class="btn-save ${isSaved ? 'saved' : ''}" onclick="event.stopPropagation(); toggleSaveRecord('${rowId}', ${rowJson}, this)">${svgIcon('pin')}${isSaved ? PG_REPORTS_I18N.actions.saved_marker : PG_REPORTS_I18N.actions.save_for_comparison}</button>`;
+    html += `<button class="btn-save ${isSaved ? 'saved' : ''}" data-row-id="${rowId}" onclick="event.stopPropagation(); toggleSaveRow(${rowIndex}, this)">${svgIcon('pin')}${isSaved ? PG_REPORTS_I18N.actions.saved_marker : PG_REPORTS_I18N.actions.save_for_comparison}</button>`;
 
     if (hasQuery) {
       // Only show EXPLAIN ANALYZE for SELECT queries
@@ -731,11 +748,8 @@
 
     // Show migration button for index reports (only in development)
     if (hasIndexName && (category === 'indexes')) {
-      const indexName = row.index_name;
-      const tableName = row.table_name || row.tablename || '';
-      const schemaName = row.schema_name || row.schemaname || 'public';
-      if (isDevelopment) {
-        html += `<button class="btn-migration" onclick="event.stopPropagation(); showMigrationModal('${escapeHtml(indexName)}', '${escapeHtml(tableName)}', '${escapeHtml(schemaName)}')">${svgIcon('trash')}Generate Migration</button>`;
+      if (allowMigrationCreation) {
+        html += `<button class="btn-migration" onclick="event.stopPropagation(); showRowMigration(${rowIndex})">${svgIcon('trash')}Generate Migration</button>`;
       } else {
         html += `<button class="btn-migration" disabled title="Migration generation is only available in development environment" >${svgIcon('trash')}Generate Migration (Development Only)</button>`;
       }
@@ -827,7 +841,7 @@
           // Build table header with sortable columns
           if (tableHead) {
             tableHead.innerHTML = '<tr>' + data.columns.map(col =>
-              `<th class="sortable" data-column="${escapeHtml(col)}" onclick="handleSortClick('${escapeHtml(col)}')">${escapeHtml(col)}<span class="sort-indicator">↕</span></th>`
+              `<th class="sortable" data-column="${escapeHtmlAttr(col)}" onclick="handleSortClick(this.dataset.column)">${escapeHtml(col)}<span class="sort-indicator">↕</span></th>`
             ).join('') + '</tr>';
           }
 
@@ -854,7 +868,7 @@
   document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
       closeProblemModal();
-      closeIdeSettingsModal();
+      closeSettingsModal();
       closeExplainModal();
       closeMigrationModal();
     }
@@ -867,44 +881,6 @@
     }
   });
 
-  // IDE Settings functions
-  function showIdeSettingsModal() {
-    const modal = document.getElementById('ide-settings-modal');
-    modal.style.display = 'flex';
-    loadIdeSettingsState();
-  }
-
-  function closeIdeSettingsModal() {
-    document.getElementById('ide-settings-modal').style.display = 'none';
-  }
-
-  function setDefaultIde(ideKey) {
-    if (ideKey) {
-      localStorage.setItem('pgReportsDefaultIde', ideKey);
-    } else {
-      localStorage.removeItem('pgReportsDefaultIde');
-    }
-  }
-
-  function getDefaultIde() {
-    return localStorage.getItem('pgReportsDefaultIde') || '';
-  }
-
-  function loadIdeSettingsState() {
-    const currentIde = getDefaultIde();
-    const radios = document.querySelectorAll('input[name="default-ide"]');
-    radios.forEach(radio => {
-      radio.checked = (radio.value === currentIde);
-    });
-  }
-
-  // Close IDE settings modal on backdrop click
-  document.getElementById('ide-settings-modal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-      closeIdeSettingsModal();
-    }
-  });
-
   // ==========================================
   // SAVED RECORDS FUNCTIONALITY
   // ==========================================
@@ -951,6 +927,11 @@
     return saved.some(r => r.id === rowId);
   }
 
+  function toggleSaveRow(rowIndex, btn) {
+    const row = renderedRows[rowIndex];
+    if (row) toggleSaveRecord(generateRowId(row), row, btn);
+  }
+
   function toggleSaveRecord(rowId, row, btn) {
     const saved = getSavedRecords();
     const existingIdx = saved.findIndex(r => r.id === rowId);
@@ -984,7 +965,7 @@
     renderSavedRecords();
 
     // Update button in table if visible
-    const btn = document.querySelector(`.btn-save[onclick*="'${rowId}'"]`);
+    const btn = document.querySelector(`.btn-save[data-row-id="${CSS.escape(rowId)}"]`);
     if (btn) {
       btn.classList.remove('saved');
       btn.textContent = PG_REPORTS_I18N.actions.save_for_comparison;
@@ -1035,7 +1016,7 @@
           <div class="saved-record-header">
             <span class="saved-record-time">${PG_REPORTS_I18N.saved.saved_at_prefix} ${savedTime}</span>
             <span class="saved-record-expand-hint">${PG_REPORTS_I18N.saved.click_to_expand}</span>
-            <button class="saved-record-remove" onclick="event.stopPropagation(); removeSavedRecord('${record.id}')" title="${PG_REPORTS_I18N.saved.remove_title}">×</button>
+            <button class="saved-record-remove" data-record-id="${escapeHtmlAttr(record.id)}" onclick="event.stopPropagation(); removeSavedRecord(this.dataset.recordId)" title="${PG_REPORTS_I18N.saved.remove_title}">×</button>
           </div>
           <div class="saved-record-data">
       `;
@@ -1350,7 +1331,7 @@
         const indentPx = line.indent_level * 20;
         html += '<span class="explain-line-content ' + nodeColorClass + '" style="padding-left: ' + indentPx + 'px"';
         if (tooltip) {
-          html += ' title="' + escapeHtml(tooltip) + '"';
+          html += ' title="' + escapeHtmlAttr(tooltip) + '"';
         }
         html += '>';
 
@@ -1376,7 +1357,7 @@
         // Problem indicator
         if (lineProblem) {
           const problemIcon = svgIcon('alert');
-          html += '<span class="explain-line-problem-indicator" title="' + escapeHtml(lineProblem.message) + '">' + problemIcon + '</span>';
+          html += '<span class="explain-line-problem-indicator" title="' + escapeHtmlAttr(lineProblem.message) + '">' + problemIcon + '</span>';
         }
 
         html += '</div>';
@@ -1542,49 +1523,38 @@
 
   let currentMigrationData = null;
 
-  function showMigrationModal(indexName, tableName, schemaName) {
-    const migrationName = `remove_${indexName.toLowerCase().replace(/[^a-z0-9]/g, '_')}`;
-    const timestamp = new Date().toISOString().replace(/[-:T]/g, '').substring(0, 14);
-    const className = migrationName.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
-
-    const fullIndexName = schemaName && schemaName !== 'public'
-      ? `${schemaName}.${indexName}`
-      : indexName;
-
-    const migrationCode = `# frozen_string_literal: true
-
-class ${className} < ActiveRecord::Migration[7.0]
-  def change
-    remove_index :${tableName}, name: :${indexName}, if_exists: true
-  end
-end
-`;
-
-    currentMigrationData = {
-      fileName: `${timestamp}_${migrationName}.rb`,
-      code: migrationCode,
-      indexName,
-      tableName,
-      schemaName
+  async function showRowMigration(rowIndex) {
+    const row = renderedRows[rowIndex];
+    if (!row) return;
+
+    // The server builds the migration from the index it finds in the database,
+    // so all it is told is which one.
+    const target = {
+      index_name: row.index_name,
+      schema: row.schema || row.schema_name || row.schemaname || ''
     };
 
-    document.getElementById('migration-code').textContent = migrationCode;
-    document.getElementById('migration-modal').style.display = 'flex';
-
-    // Disable "Create File" button in non-development environments
-    const createBtn = document.getElementById('create-migration-btn');
-    if (createBtn) {
-      if (!isDevelopment) {
-        createBtn.disabled = true;
-        createBtn.style.opacity = '0.5';
-        createBtn.style.cursor = 'not-allowed';
-        createBtn.title = 'Migration file creation is only available in development environment';
-      } else {
-        createBtn.disabled = false;
-        createBtn.style.opacity = '1';
-        createBtn.style.cursor = 'pointer';
-        createBtn.title = '';
+    try {
+      const response = await fetch(`${pgReportsRoot}/migration_preview`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        },
+        body: JSON.stringify(target)
+      });
+      const data = await response.json();
+
+      if (!data.success) {
+        showToast(data.error || PG_REPORTS_I18N.errors.create_migration_failed, 'error');
+        return;
       }
+
+      currentMigrationData = { ...target, code: data.code };
+      document.getElementById('migration-code').textContent = data.code;
+      document.getElementById('migration-modal').style.display = 'flex';
+    } catch (error) {
+      showToast(PG_REPORTS_I18N.errors.network_error_prefix + ' ' + error.message, 'error');
     }
   }
 
@@ -1609,7 +1579,7 @@ end
     if (!currentMigrationData) return;
 
     // Security check
-    if (!allowRawQueryExecution) {
+    if (!allowMigrationCreation) {
       const message = PG_REPORTS_I18N.errors.migration_disabled_toast;
       showToast(message, 'error');
 
@@ -1631,8 +1601,8 @@ end
           'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
         },
         body: JSON.stringify({
-          file_name: currentMigrationData.fileName,
-          code: currentMigrationData.code
+          index_name: currentMigrationData.index_name,
+          schema: currentMigrationData.schema
         })
       });