pg_reports 0.9.0 → 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 */
@@ -1330,44 +1368,57 @@
       font-size: 0.9rem;
     }
 
-    .ide-options {
+    /* Settings modal sections. The option rows are shared by every section —
+       language, IDE, and whatever is added next. */
+    .settings-section-title {
+      font-size: 0.6875rem;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      margin-bottom: 0.5rem;
+    }
+
+    .settings-options {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: 0.375rem;
     }
 
-    .ide-option {
+    .settings-option {
       display: flex;
       align-items: center;
-      gap: 0.75rem;
-      padding: 0.75rem 1rem;
+      gap: 0.625rem;
+      padding: 0.5rem 0.75rem;
       background: var(--bg-tertiary);
       border: 1px solid var(--border-color);
-      border-radius: 6px;
+      border-radius: var(--radius-sm);
       cursor: pointer;
-      transition: all 0.15s;
+      transition: background-color 0.12s ease, border-color 0.12s ease;
     }
 
-    .ide-option:hover {
+    .settings-option:hover {
       background: var(--bg-hover);
       border-color: var(--border-strong);
     }
 
-    .ide-option:has(input:checked) {
+    .settings-option:has(input:checked) {
       background: var(--purple-soft);
       border-color: var(--purple-line);
     }
 
-    .ide-option input[type="radio"] {
+    .settings-option input[type="radio"] {
       accent-color: var(--accent-purple);
+      flex: none;
     }
 
-    .ide-option span {
+    .settings-option span {
       color: var(--text-secondary);
-      font-size: 0.875rem;
+      font-size: 0.8125rem;
     }
 
-    .ide-option:has(input:checked) span {
+    .settings-option:has(input:checked) span {
       color: var(--text-primary);
     }
 
@@ -1508,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 {
@@ -1634,6 +1693,76 @@
       ].join('');
     };
 
+    // Settings modal. Shared by the dashboard and the report pages; the language
+    // section posts a form (server-side session), the IDE section only writes
+    // localStorage, so there is nothing to submit for it.
+    // Picking a language posts a form and the page reloads (everything on it has
+    // to re-render in the new language), which would leave the user staring at a
+    // dashboard with the settings they were editing gone. Remember that the
+    // modal was open and bring it back on the way in.
+    const SETTINGS_REOPEN_KEY = 'pgReportsSettingsReopen';
+
+    function rememberSettingsOpen() {
+      try {
+        sessionStorage.setItem(SETTINGS_REOPEN_KEY, '1');
+      } catch (e) {
+        // Storage can be unavailable (private mode, blocked cookies); losing the
+        // reopen is a cosmetic downgrade, not a reason to block the switch.
+      }
+    }
+
+    function consumeSettingsReopen() {
+      try {
+        if (!sessionStorage.getItem(SETTINGS_REOPEN_KEY)) return false;
+        sessionStorage.removeItem(SETTINGS_REOPEN_KEY);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+
+    function showSettingsModal() {
+      const modal = document.getElementById('settings-modal');
+      if (!modal) return;
+
+      modal.style.display = 'flex';
+      loadSettingsState();
+    }
+
+    function closeSettingsModal() {
+      const modal = document.getElementById('settings-modal');
+      if (modal) modal.style.display = 'none';
+    }
+
+    function setDefaultIde(ideKey) {
+      if (ideKey) {
+        localStorage.setItem('pgReportsDefaultIde', ideKey);
+      } else {
+        localStorage.removeItem('pgReportsDefaultIde');
+      }
+    }
+
+    function getDefaultIde() {
+      return localStorage.getItem('pgReportsDefaultIde') || '';
+    }
+
+    // The language radios are rendered already checked by the server; only the
+    // IDE choice lives in localStorage and has to be restored on open.
+    function loadSettingsState() {
+      const currentIde = getDefaultIde();
+      document.querySelectorAll('input[name="default-ide"]').forEach(radio => {
+        radio.checked = (radio.value === currentIde);
+      });
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+      document.getElementById('settings-modal')?.addEventListener('click', function(e) {
+        if (e.target === this) closeSettingsModal();
+      });
+
+      if (consumeSettingsReopen()) showSettingsModal();
+    });
+
     function showToast(message, type = 'success') {
       const toast = document.getElementById('toast');
       toast.textContent = message;

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

@@ -0,0 +1,55 @@
+<%# Shared by the dashboard and the report pages. Language is persisted server
+    side (session, via a form post); the IDE choice is client side in
+    localStorage — hence one <form> section and one plain section. %>
+<div id="settings-modal" class="modal" style="display: none;">
+  <div class="modal-content modal-small">
+    <div class="modal-header">
+      <h3><%= t("pg_reports.ui.modals.settings_title") %></h3>
+      <button class="modal-close" onclick="closeSettingsModal()" aria-label="<%= t("pg_reports.ui.actions.cancel") %>">&times;</button>
+    </div>
+    <div class="modal-body">
+      <% if dashboard_locales.size > 1 %>
+        <section class="settings-section">
+          <h4 class="settings-section-title"><%= t("pg_reports.ui.language.label") %></h4>
+          <form class="settings-options"
+                action="<%= switch_locale_path %>"
+                method="post"
+                data-turbo="false">
+            <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+            <% dashboard_locales.each do |locale| %>
+              <%# Each option is named in its own language, not the current one. %>
+              <label class="settings-option">
+                <input type="radio"
+                       name="locale"
+                       value="<%= locale %>"
+                       <%= "checked" if locale.to_s == selected_locale.to_s %>
+                       onchange="rememberSettingsOpen(); this.form.submit()">
+                <span><%= t("pg_reports.ui.language.name", locale: locale, default: locale.to_s.upcase) %></span>
+              </label>
+            <% end %>
+          </form>
+        </section>
+      <% end %>
+
+      <section class="settings-section">
+        <h4 class="settings-section-title"><%= t("pg_reports.ui.settings.default_ide_label") %></h4>
+        <div class="settings-options">
+          <% {
+               "" => "ide_show_menu",
+               "vscode-wsl" => "ide_vscode_wsl",
+               "vscode" => "ide_vscode",
+               "rubymine" => "ide_rubymine",
+               "intellij" => "ide_intellij",
+               "cursor-wsl" => "ide_cursor_wsl",
+               "cursor" => "ide_cursor"
+             }.each do |value, key| %>
+            <label class="settings-option">
+              <input type="radio" name="default-ide" value="<%= value %>" onchange="setDefaultIde('<%= value %>')">
+              <span><%= t("pg_reports.ui.settings.#{key}") %></span>
+            </label>
+          <% end %>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

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

@@ -1,45 +1,4 @@
-<!-- IDE Settings Modal -->
-<div id="ide-settings-modal" class="modal" style="display: none;">
-  <div class="modal-content modal-small">
-    <div class="modal-header">
-      <h3><%= t("pg_reports.ui.modals.ide_settings_title") %></h3>
-      <button class="modal-close" onclick="closeIdeSettingsModal()">&times;</button>
-    </div>
-    <div class="modal-body">
-      <p class="settings-label"><%= t("pg_reports.ui.settings.default_ide_label") %></p>
-      <div class="ide-options">
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="" onchange="setDefaultIde('')">
-          <span><%= t("pg_reports.ui.settings.ide_show_menu") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode-wsl" onchange="setDefaultIde('vscode-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="vscode" onchange="setDefaultIde('vscode')">
-          <span><%= t("pg_reports.ui.settings.ide_vscode") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="rubymine" onchange="setDefaultIde('rubymine')">
-          <span><%= t("pg_reports.ui.settings.ide_rubymine") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="intellij" onchange="setDefaultIde('intellij')">
-          <span><%= t("pg_reports.ui.settings.ide_intellij") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor-wsl" onchange="setDefaultIde('cursor-wsl')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor_wsl") %></span>
-        </label>
-        <label class="ide-option">
-          <input type="radio" name="default-ide" value="cursor" onchange="setDefaultIde('cursor')">
-          <span><%= t("pg_reports.ui.settings.ide_cursor") %></span>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
+<%= render "settings_modal" %>
 
 <!-- Problem Explanation Modal -->
 <div id="problem-modal" class="problem-modal" style="display: none;">