pg_reports 0.9.1 → 1.0.0

data/app/controllers/pg_reports/metrics_controller.rb

@@ -6,7 +6,7 @@ module PgReports
   class MetricsController < ActionController::Base
     CONTENT_TYPE = "text/plain; version=0.0.4; charset=utf-8"
 
-    before_action :authenticate_metrics!, if: -> { PgReports.config.grafana_metrics_token.present? }
+    before_action :authenticate_metrics!
 
     def show
       render plain: PgReports::Grafana::Exporter.render, content_type: CONTENT_TYPE
@@ -14,14 +14,23 @@ module PgReports
 
     private
 
+    # Row labels can hold table names and query text, so without a token this is
+    # held to the same rule as the dashboard.
     def authenticate_metrics!
-      expected = PgReports.config.grafana_metrics_token.to_s
+      token = PgReports.config.grafana_metrics_token
+      return if token == AccessPolicy::HOST_MANAGED
+
+      if token.blank?
+        head :forbidden unless AccessPolicy.open_access_allowed?(request)
+        return
+      end
+
       provided = request.headers["Authorization"].to_s.sub(/\Abearer\s+/i, "")
 
-      a = ::Digest::SHA256.digest(expected)
+      a = ::Digest::SHA256.digest(token.to_s)
       b = ::Digest::SHA256.digest(provided)
 
-      head :unauthorized unless ActiveSupport::SecurityUtils.secure_compare(a, b) && expected.present?
+      head :unauthorized unless ActiveSupport::SecurityUtils.secure_compare(a, b)
     end
   end
 end

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

@@ -1089,14 +1089,63 @@
       font-weight: 600;
     }
 
+    .query-source-switch {
+      display: inline-flex;
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+    }
+
+    .query-source-switch[hidden] {
+      display: none;
+    }
+
+    .query-source-switch button {
+      padding: 0.3rem 0.6rem;
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      font-size: 0.72rem;
+      cursor: pointer;
+    }
+
+    .query-source-switch button + button {
+      border-left: 1px solid var(--border-color);
+    }
+
+    .query-source-switch button.active {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    .query-source-switch button:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .query-scope-warning {
+      margin-bottom: 0.75rem;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      color: var(--accent-amber);
+      background: var(--amber-soft);
+      border: 1px solid var(--amber-line);
+      border-radius: var(--radius-sm);
+    }
+
+    .query-monitor-error {
+      color: var(--accent-rose);
+      background: var(--rose-soft);
+      border-color: var(--rose-line);
+    }
+
     /* Query Feed */
     .query-feed {
-      max-height: 500px;
+      max-height: 420px;
       overflow-y: auto;
       background: var(--bg-tertiary);
       border: 1px solid var(--border-color);
       border-radius: 6px;
-      padding: 0.75rem;
     }
 
     .query-feed::-webkit-scrollbar {
@@ -1124,118 +1173,107 @@
       font-size: 0.8rem;
     }
 
-    .query-item {
-      background: var(--bg-card);
-      border: 1px solid var(--border-color);
-      border-radius: 6px;
-      padding: 0.5rem;
-      margin-bottom: 0.5rem;
-      font-size: 0.8rem;
-      transition: all 0.15s;
+    .query-feed-table {
+      width: 100%;
+      /* Fixed, so the SQL cell ellipsizes instead of widening the table */
+      table-layout: fixed;
+      border-collapse: collapse;
+      font-size: 0.72rem;
     }
 
-    .query-item:hover {
-      border-color: var(--border-strong);
+    .query-feed-table th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      padding: 0.3rem 0.6rem;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border-color);
+      color: var(--text-muted);
+      font-weight: 500;
+      text-align: left;
     }
 
-    .query-item:last-child {
-      margin-bottom: 0;
+    .query-feed-table td {
+      padding: 0.2rem 0.6rem;
+      border-bottom: 1px solid var(--border-color);
+      color: var(--text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .query-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.3rem;
+    .query-feed-table .col-time { width: 6.5rem; }
+    .query-feed-table .col-duration { width: 4.5rem; text-align: right; }
+    .query-feed-table .col-source { width: 15rem; }
+
+    .query-feed-table td.col-time,
+    .query-feed-table td.col-duration {
+      font-variant-numeric: tabular-nums;
     }
 
-    .query-meta {
-      display: flex;
-      gap: 0.6rem;
-      font-size: 0.7rem;
-      color: var(--text-muted);
+    .query-feed-table td.col-sql,
+    .query-feed-table td.col-source {
+      font-family: <%= PgReports.config.load_external_fonts ? "'JetBrains Mono', " : "" %>monospace;
     }
 
-    .query-timestamp {
-      color: var(--text-secondary);
-      font-size: 0.7rem;
+    .query-feed-table td.col-sql {
+      color: var(--text-primary);
+    }
+
+    .query-row {
+      cursor: pointer;
+    }
+
+    .query-row:hover td,
+    .query-row.expanded td {
+      background: var(--bg-card);
+    }
+
+    .query-row.expanded td {
+      border-bottom-color: transparent;
     }
 
-    .query-duration {
+    .query-feed-table td.query-duration {
       color: var(--accent-amber);
       font-weight: 600;
-      font-size: 0.7rem;
     }
 
-    .query-duration.fast {
+    .query-feed-table td.query-duration.fast {
       color: var(--accent-green);
     }
 
-    .query-duration.slow {
+    .query-feed-table td.query-duration.slow {
       color: var(--accent-rose);
     }
 
-    .query-name {
-      color: var(--text-secondary);
-      font-style: italic;
-      font-size: 0.7rem;
-    }
-
-    .query-expand-btn {
-      background: transparent;
-      border: none;
-      color: var(--text-muted);
-      cursor: pointer;
-      padding: 0.15rem 0.35rem;
-      font-size: 0.7rem;
-      transition: all 0.15s;
-      border-radius: 3px;
+    .query-source-link {
+      color: var(--accent-purple);
+      text-decoration: none;
     }
 
-    .query-expand-btn:hover {
-      background: var(--bg-tertiary);
-      color: var(--accent-purple);
+    .query-source-link:hover {
+      text-decoration: underline;
     }
 
-    .query-sql-wrapper {
-      margin-bottom: 0.3rem;
+    .query-feed-table .query-row-detail td {
+      padding: 0.25rem 0.6rem 0.6rem;
+      background: var(--bg-card);
+      white-space: normal;
     }
 
-    .query-sql {
+    .query-row-detail pre {
+      margin: 0.35rem 0 0;
       padding: 0.5rem;
+      max-height: 16rem;
+      overflow: auto;
       background: var(--bg-primary);
       border: 1px solid var(--border-color);
       border-radius: 4px;
       font-family: <%= PgReports.config.load_external_fonts ? "'JetBrains Mono', " : "" %>monospace;
-      font-size: 0.7rem;
-      color: var(--accent-blue);
-      word-wrap: break-word;
-      overflow-x: auto;
-    }
-
-    .query-sql-collapsed {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .query-sql-expanded {
+      font-size: 0.72rem;
+      color: var(--text-primary);
       white-space: pre-wrap;
-    }
-
-    .query-source {
-      font-size: 0.7rem;
-      color: var(--text-muted);
-      font-family: <%= PgReports.config.load_external_fonts ? "'JetBrains Mono', " : "" %>monospace;
-    }
-
-    .query-source a {
-      color: var(--accent-purple);
-      text-decoration: none;
-    }
-
-    .query-source a:hover {
-      text-decoration: underline;
+      word-break: break-word;
     }
 
     /* IDE Dropdown for query source links */
@@ -1521,6 +1559,14 @@
         flex-wrap: wrap;
       }
 
+      /* The source is still one tap away, in the expanded row */
+      .query-feed-table .col-source {
+        display: none;
+      }
+
+      .query-feed-table .col-time { width: 5rem; }
+      .query-feed-table .col-duration { width: 3.5rem; }
+
       /* Anchored to its chip, this tooltip runs off the screen and stretches
          the page with it; on a phone it reads as a bottom sheet instead. */
       .query-monitoring-scope::after {

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>';
           }
 
@@ -913,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);
@@ -946,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;
@@ -997,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">
       `;
@@ -1312,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 += '>';
 
@@ -1338,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>';
@@ -1504,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');
     }
   }
 
@@ -1571,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');
 
@@ -1593,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
         })
       });