pg_reports 0.8.1 → 0.9.0

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

@@ -34,6 +34,7 @@
   </span>
 <% elsif @database_error %>
   <span class="db-selector-error" title="<%= @database_error[:detail] %>">
-    ⚠ <%= @database_error[:title] %>
+    <svg class="icon" aria-hidden="true"><use href="#i-alert"></use></svg>
+    <%= @database_error[:title] %>
   </span>
 <% end %>

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

@@ -71,7 +71,7 @@
         <div id="explain-params-inputs"></div>
       </div>
       <div class="explain-actions">
-        <button class="btn btn-secondary" onclick="executeExplainAnalyze()" id="btn-explain">
+        <button class="btn btn-primary" onclick="executeExplainAnalyze()" id="btn-explain">
           <%= t("pg_reports.ui.actions.explain_analyze") %>
         </button>
         <button class="btn btn-secondary" onclick="executeQuery()" id="btn-execute">
@@ -94,12 +94,15 @@
       <button class="modal-close" onclick="closeMigrationModal()">&times;</button>
     </div>
     <div class="modal-body" id="migration-modal-body">
-      <div class="migration-warning" style="background: rgba(255, 152, 0, 0.1); border: 1px solid rgba(255, 152, 0, 0.3); padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
-        <p style="margin: 0 0 0.5rem 0; font-weight: 600; color: #ffb74d;"><%= t("pg_reports.ui.documentation.threshold_warning_label").chomp(":") %></p>
-        <p style="margin: 0; color: #ffcc80; font-size: 0.875rem; line-height: 1.5;">
-          <%= t("pg_reports.ui.modals.migration_warning") %>
-          <strong><%= t("pg_reports.ui.modals.migration_warning_dev_only") %></strong>
-        </p>
+      <div class="callout callout-warning">
+        <svg class="icon" aria-hidden="true"><use href="#i-alert"></use></svg>
+        <div>
+          <strong><%= t("pg_reports.ui.documentation.threshold_warning_label").chomp(":") %></strong>
+          <p>
+            <%= t("pg_reports.ui.modals.migration_warning") %>
+            <strong><%= t("pg_reports.ui.modals.migration_warning_dev_only") %></strong>
+          </p>
+        </div>
       </div>
       <p class="settings-label"><%= t("pg_reports.ui.modals.migration_subtitle") %></p>
       <div id="migration-code" class="migration-code"></div>

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

@@ -1,4 +1,5 @@
 <script>
+  const svgIcon = (name, cls) => `<svg class="icon ${cls || ''}"><use href="#i-${name}"></use></svg>`;
   let currentReportData = null;
   let currentProblemExplanations = {};
   const category = '<%= @category %>';
@@ -18,8 +19,10 @@
 
     if (!topScrollWrapper || !topScrollContent || !tableWrapper || !table) return;
 
-    // Check if table overflows
-    if (table.scrollWidth > tableWrapper.clientWidth) {
+    // Check if table overflows. On touch there is no visible scrollbar to
+    // drag, so the proxy would only be an empty strip above the table.
+    const coarsePointer = window.matchMedia('(pointer: coarse)').matches;
+    if (table.scrollWidth > tableWrapper.clientWidth && !coarsePointer) {
       topScrollWrapper.style.display = 'block';
       topScrollContent.style.width = table.scrollWidth + 'px';
 
@@ -126,7 +129,7 @@
       if (problemInfo && problemInfo.level) {
         rowClass += problemInfo.level === 'critical' ? ' critical-row' : ' warning-row';
         const indicatorClass = problemInfo.level === 'critical' ? 'critical' : 'warning';
-        const indicatorIcon = problemInfo.level === 'critical' ? '🔴' : '⚠️';
+        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>`;
       }
 
@@ -157,6 +160,8 @@
 
     tableBody.innerHTML = rowsHtml;
 
+    markClippedSources(tableBody);
+
     // Re-setup top scrollbar
     setTimeout(setupTopScrollbar, 0);
   }
@@ -409,11 +414,16 @@
     let lineNumber = null;
     let methodName = null;
 
-    // Try to match file:line pattern
-    const fileLineMatch = source.match(/^([^:]+\.(rb|erb|js|ts|py|go|java)):(\d+)/);
+    // Try to match file:line pattern. Deliberately no extension allow-list —
+    // source locations legitimately end in .rake, .jbuilder, .ru, .haml, or in
+    // no extension at all (Rakefile:5), and anything the list missed silently
+    // lost its shortening and its IDE link. Lazy up to the first ":<line>" that
+    // ends the token, so a trailing ":in `method'" or a Windows drive letter
+    // ("C:\app\x.rb:12") doesn't derail it.
+    const fileLineMatch = source.match(/^(.+?):(\d+)(?=$|[:\s])/);
     if (fileLineMatch) {
       filePath = fileLineMatch[1];
-      lineNumber = parseInt(fileLineMatch[3], 10);
+      lineNumber = parseInt(fileLineMatch[2], 10);
     }
 
     // Try to match Controller#action pattern (e.g., PostsController#index)
@@ -449,6 +459,70 @@
   const railsRootPath = '<%= Rails.root.to_s %>';
   const wslDistro = 'Ubuntu';
 
+  // Prefix to strip when displaying a source path. Only meaningful when the
+  // engine is mounted in a host app — in standalone mode Rails.root is a
+  // throwaway tmpdir that no query's source location will ever sit under.
+  const sourceRootPath = <%== (PgReports.config.standalone ? nil : Rails.root.to_s).to_json %>;
+
+  // The badge shows the shortest path that still identifies the line. The full
+  // value stays in the tooltip, the expanded row and the exports; IDE links are
+  // built from the unshortened path.
+  function shortenSourcePath(filePath) {
+    if (!filePath) return filePath;
+
+    if (sourceRootPath && filePath.startsWith(sourceRootPath + '/')) {
+      return filePath.slice(sourceRootPath.length + 1);
+    }
+
+    // A bundled gem: everything before the gem's own directory is install noise.
+    // The greedy prefix is deliberate — a gem home nests "/gems/" twice
+    // ("…/lib/ruby/gems/3.4.0/gems/activerecord-8.1.3/…") and only the last one
+    // starts the gem's own path.
+    const gem = filePath.match(/^.*\/gems\/([^/]+\/.+)$/);
+    if (gem) return gem[1];
+
+    return filePath;
+  }
+
+  // Split so the directory can be clipped while the file name and line — the part
+  // you actually navigate by — stay readable. The directory is clipped at its
+  // *start*: see .source-dir in the styles, and markClippedSources below for the
+  // leading ellipsis.
+  function sourceBadgeLabel(parsed) {
+    if (!parsed.filePath) {
+      return `<span class="source-file"><span>${escapeHtml(parsed.original)}</span></span>`;
+    }
+
+    const shortened = shortenSourcePath(parsed.filePath);
+    const line = parsed.lineNumber ? ':' + parsed.lineNumber : '';
+    const cut = shortened.lastIndexOf('/');
+
+    const ellipsis = '<span class="source-ellipsis" aria-hidden="true">…</span>';
+    const file = (text) => `<span class="source-file"><span>${escapeHtml(text)}</span></span>`;
+
+    if (cut < 0) return ellipsis + file(shortened + line);
+
+    return ellipsis +
+      `<span class="source-dir"><span>${escapeHtml(shortened.slice(0, cut))}</span></span>` +
+      file(shortened.slice(cut) + line);
+  }
+
+  // Whether a part actually overflows can only be known after layout, and the
+  // leading ellipsis must not appear when nothing is cut. Measured on the inner
+  // span, not on its container: the overflow here runs off the *start* edge, and
+  // scrollWidth only ever reports overflow past the end edge.
+  function markClippedSources(root) {
+    (root || document).querySelectorAll('.source-badge').forEach(badge => {
+      const parts = badge.querySelectorAll('.source-dir, .source-file');
+      const clipped = Array.prototype.some.call(parts, part => {
+        const inner = part.firstElementChild;
+        return inner && inner.getBoundingClientRect().width > part.clientWidth + 1;
+      });
+
+      badge.classList.toggle('is-clipped', clipped);
+    });
+  }
+
   // Generate IDE URLs
   function generateIdeUrls(filePath, lineNumber) {
     if (!filePath) return [];
@@ -521,7 +595,7 @@
     const ideUrls = generateIdeUrls(parsed.filePath, parsed.lineNumber);
 
     if (ideUrls.length === 0) {
-      return `<span class="source-badge" title="${escapeHtml(parsed.original)}">${escapeHtml(parsed.original)}</span>`;
+      return `<span class="source-badge" title="${escapeHtmlAttr(parsed.original)}">${sourceBadgeLabel(parsed)}</span>`;
     }
 
     // Check if user has a default IDE set
@@ -529,7 +603,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="${escapeHtml(parsed.original)}">${escapeHtml(parsed.original)}</a>`;
+        return `<a class="source-badge clickable" href="${ideUrl.url}" onclick="event.stopPropagation();" title="${escapeHtmlAttr(parsed.original)}">${sourceBadgeLabel(parsed)}</a>`;
       }
     }
 
@@ -538,7 +612,7 @@
 
     let dropdownHtml = `
       <div class="ide-dropdown">
-        <span class="source-badge clickable" data-dropdown-id="${dropdownId}" title="${escapeHtml(parsed.original)}">${escapeHtml(parsed.original)}</span>
+        <span class="source-badge clickable" data-dropdown-id="${dropdownId}" title="${escapeHtmlAttr(parsed.original)}">${sourceBadgeLabel(parsed)}</span>
         <div class="ide-dropdown-menu" id="${dropdownId}">
     `;
 
@@ -642,7 +716,7 @@
     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)">${isSaved ? '📌 Saved' : '📌 Save for Comparison'}</button>`;
+    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>`;
 
     if (hasQuery) {
       // Only show EXPLAIN ANALYZE for SELECT queries
@@ -651,7 +725,7 @@
         // Use data attribute to pass query hash for security
         const queryBase64 = btoa(unescape(encodeURIComponent(row.query)));
         const queryHash = row.query_hash || '';
-        html += `<button class="btn-explain" data-query-b64="${queryBase64}" data-query-hash="${queryHash}" onclick="event.stopPropagation(); runExplainAnalyzeFromButton(this)">📊 EXPLAIN ANALYZE</button>`;
+        html += `<button class="btn-explain" data-query-b64="${queryBase64}" data-query-hash="${queryHash}" onclick="event.stopPropagation(); runExplainAnalyzeFromButton(this)">${svgIcon('activity')}EXPLAIN ANALYZE</button>`;
       }
     }
 
@@ -661,9 +735,9 @@
       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)}')">🗑️ Generate Migration</button>`;
+        html += `<button class="btn-migration" onclick="event.stopPropagation(); showMigrationModal('${escapeHtml(indexName)}', '${escapeHtml(tableName)}', '${escapeHtml(schemaName)}')">${svgIcon('trash')}Generate Migration</button>`;
       } else {
-        html += `<button class="btn-migration" disabled title="Migration generation is only available in development environment" style="opacity: 0.5; cursor: not-allowed;">🗑️ Generate Migration (Development Only)</button>`;
+        html += `<button class="btn-migration" disabled title="Migration generation is only available in development environment" >${svgIcon('trash')}Generate Migration (Development Only)</button>`;
       }
     }
 
@@ -1158,15 +1232,15 @@
     if (data.summary && data.summary.total_problems > 0) {
       html += '<div class="explain-summary explain-summary-' + data.summary.status + '">';
       html += '<div class="explain-summary-header">';
-      html += '<span class="explain-summary-icon">' + data.summary.status_icon + '</span>';
+      html += svgIcon(data.summary.status === 'good' ? 'check' : 'alert', 'explain-summary-icon');
       html += '<span class="explain-summary-title">' + escapeHtml(data.summary.status_text) + '</span>';
       html += '</div>';
       html += '<div class="explain-summary-stats">';
       if (data.summary.critical_problems > 0) {
-        html += '<span class="explain-summary-stat critical">🔴 ' + data.summary.critical_problems + ' critical</span>';
+        html += '<span class="explain-summary-stat critical">' + svgIcon('alert') + data.summary.critical_problems + ' critical</span>';
       }
       if (data.summary.warnings > 0) {
-        html += '<span class="explain-summary-stat warning">⚠️ ' + data.summary.warnings + ' warnings</span>';
+        html += '<span class="explain-summary-stat warning">' + svgIcon('alert') + data.summary.warnings + ' warnings</span>';
       }
       html += '</div>';
       html += '</div>';
@@ -1212,7 +1286,7 @@
 
       data.problems.forEach(problem => {
         const severityClass = 'problem-' + problem.severity;
-        const severityIcon = problem.severity === 'critical' ? '🔴' : (problem.severity === 'warning' ? '⚠️' : 'ℹ️');
+        const severityIcon = svgIcon(problem.severity === 'info' ? 'info' : 'alert');
 
         html += '<div class="explain-problem ' + severityClass + '">';
         html += '<div class="explain-problem-header">';
@@ -1226,7 +1300,7 @@
           html += '<div class="explain-problem-details">' + escapeHtml(problem.details) + '</div>';
         }
         if (problem.recommendation) {
-          html += '<div class="explain-problem-recommendation">💡 ' + escapeHtml(problem.recommendation) + '</div>';
+          html += '<div class="explain-problem-recommendation">' + svgIcon('bulb') + escapeHtml(problem.recommendation) + '</div>';
         }
         html += '</div>';
       });
@@ -1301,7 +1375,7 @@
 
         // Problem indicator
         if (lineProblem) {
-          const problemIcon = lineProblem.severity === 'critical' ? '🔴' : '⚠️';
+          const problemIcon = svgIcon('alert');
           html += '<span class="explain-line-problem-indicator" title="' + escapeHtml(lineProblem.message) + '">' + problemIcon + '</span>';
         }
 
@@ -1338,15 +1412,7 @@
     // Security check
     if (!allowRawQueryExecution) {
       showToast(PG_REPORTS_I18N.errors.explain_disabled_toast, 'error');
-      content.innerHTML = `<div class="error-message">
-        <strong>${PG_REPORTS_I18N.modals.query_execution_disabled_title}</strong><br><br>
-        ${PG_REPORTS_I18N.modals.query_execution_disabled_intro}<br>
-        <code style="display: block; margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px;">
-PgReports.configure do |config|<br>
-&nbsp;&nbsp;config.allow_raw_query_execution = true<br>
-end
-        </code>
-      </div>`;
+      content.innerHTML = pgReportsDisabledNotice(PG_REPORTS_I18N.modals.query_execution_disabled_title);
       return;
     }
 
@@ -1387,15 +1453,7 @@ end
     // Security check
     if (!allowRawQueryExecution) {
       showToast(PG_REPORTS_I18N.errors.execute_disabled_toast, 'error');
-      content.innerHTML = `<div class="error-message">
-        <strong>${PG_REPORTS_I18N.modals.query_execution_disabled_title}</strong><br><br>
-        ${PG_REPORTS_I18N.modals.query_execution_disabled_intro}<br>
-        <code style="display: block; margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px;">
-PgReports.configure do |config|<br>
-&nbsp;&nbsp;config.allow_raw_query_execution = true<br>
-end
-        </code>
-      </div>`;
+      content.innerHTML = pgReportsDisabledNotice(PG_REPORTS_I18N.modals.query_execution_disabled_title);
       return;
     }
 
@@ -1552,24 +1610,15 @@ end
 
     // Security check
     if (!allowRawQueryExecution) {
-      const message = '⚠️ Создание миграций отключено. Включите в конфигурации: config.allow_raw_query_execution = true';
+      const message = PG_REPORTS_I18N.errors.migration_disabled_toast;
       showToast(message, 'error');
 
       const modalBody = document.getElementById('migration-modal-body');
       if (modalBody) {
-        const errorDiv = document.createElement('div');
-        errorDiv.className = 'error-message';
-        errorDiv.style.marginTop = '1rem';
-        errorDiv.innerHTML = `
-          <strong>⚠️ Migration creation is disabled</strong><br><br>
-          To enable this feature, add to your configuration:<br>
-          <code style="display: block; margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px;">
-PgReports.configure do |config|<br>
-&nbsp;&nbsp;config.allow_raw_query_execution = true<br>
-end
-          </code>
-        `;
-        modalBody.appendChild(errorDiv);
+        modalBody.insertAdjacentHTML(
+          'beforeend',
+          pgReportsDisabledNotice(PG_REPORTS_I18N.modals.migration_disabled_title)
+        );
       }
       return;
     }