pg_reports 0.8.0 → 0.8.2

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

@@ -113,13 +113,32 @@
       display: flex;
       align-items: center;
       gap: 0.4rem;
-      padding: 0.4rem 0.75rem;
+      height: 2.125rem;
+      padding: 0 0.75rem;
       background: var(--bg-tertiary);
       border: 1px solid var(--border-color);
       border-radius: 4px;
       font-size: 0.75rem;
     }
 
+    .header-badge-clickable {
+      cursor: pointer;
+      font-family: inherit;
+      color: inherit;
+      transition: border-color 0.15s ease, background 0.15s ease;
+    }
+
+    .header-badge-clickable:hover {
+      background: var(--bg-card);
+      border-color: var(--text-muted);
+    }
+
+    .badge-info-icon {
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      line-height: 1;
+    }
+
     .badge-dot {
       width: 8px;
       height: 8px;
@@ -306,13 +325,14 @@
     }
 
     .btn-primary {
-      background: var(--accent-purple);
-      color: #fff;
-      border-color: var(--accent-purple);
+      background: rgba(124, 138, 246, 0.14);
+      color: var(--accent-purple);
+      border-color: rgba(124, 138, 246, 0.35);
     }
 
     .btn-primary:hover {
-      background: #6b79e4;
+      background: rgba(124, 138, 246, 0.24);
+      border-color: rgba(124, 138, 246, 0.55);
     }
 
     .btn-secondary {
@@ -634,6 +654,7 @@
     }
 
     .query-monitoring-scope {
+      position: relative;
       font-weight: 400;
       font-size: 0.75rem;
       color: var(--text-muted);
@@ -643,6 +664,40 @@
       cursor: help;
     }
 
+    .query-monitoring-scope::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      z-index: 100;
+      width: max-content;
+      max-width: 320px;
+      padding: 0.6rem 0.75rem;
+      background: var(--bg-card);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1.5;
+      white-space: normal;
+      text-align: left;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-4px);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      pointer-events: none;
+    }
+
+    .query-monitoring-scope:hover::after,
+    .query-monitoring-scope:focus::after,
+    .query-monitoring-scope:focus-visible::after {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
     .monitoring-indicator {
       width: 7px;
       height: 7px;
@@ -1000,6 +1055,10 @@
       max-width: 360px;
     }
 
+    .modal-medium {
+      max-width: 560px;
+    }
+
     /* Database selector — used inside .live-monitoring-title and .breadcrumb.
        Sizes to fit its longest option (no artificial cap), capped at the
        parent's available width so it never overruns neighboring controls. */
@@ -1128,7 +1187,10 @@
   <div id="ide-menu" class="ide-menu"></div>
 
   <script>
-    const pgReportsRoot = document.querySelector('meta[name="pg-reports-root"]')?.content || '/pg_reports';
+    // Trailing slash stripped so `${pgReportsRoot}/foo` never becomes `//foo` —
+    // a protocol-relative URL (host "foo") — when the engine is mounted at "/"
+    // (e.g. standalone mode), where the mount path resolves to "/".
+    const pgReportsRoot = (document.querySelector('meta[name="pg-reports-root"]')?.content || '/pg_reports').replace(/\/+$/, '');
     window.PG_REPORTS_I18N = <%= raw I18n.t("pg_reports.ui").to_json %>;
 
     // Format strings with %{var} placeholders
@@ -1137,6 +1199,26 @@
       return template.replace(/%\{(\w+)\}/g, function(_, k) { return vars[k] != null ? vars[k] : ''; });
     };
 
+    // Close the topmost open modal on ESC. Applies to every `.modal` that has a
+    // close (×) button — it triggers that button so each modal's own close
+    // handler (and any cleanup) runs.
+    document.addEventListener('keydown', function(e) {
+      if (e.key !== 'Escape' && e.key !== 'Esc') return;
+      const open = Array.prototype.slice.call(document.querySelectorAll('.modal'))
+        .filter(function(m) {
+          return getComputedStyle(m).display !== 'none' && m.querySelector('.modal-close');
+        });
+      if (!open.length) return;
+      e.preventDefault();
+      const modal = open[open.length - 1];
+      const closeBtn = modal.querySelector('.modal-close');
+      if (closeBtn) {
+        closeBtn.click();
+      } else {
+        modal.style.display = 'none';
+      }
+    });
+
     function showToast(message, type = 'success') {
       const toast = document.getElementById('toast');
       toast.textContent = message;

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

@@ -23,32 +23,41 @@
   </div>
 
   <div class="header-actions">
+    <button class="btn btn-small btn-primary" onclick="showRunQueryModal()" id="run-query-open-btn">
+      <%= t("pg_reports.ui.actions.run_query") %>
+    </button>
     <% if @pg_stat_status[:ready] %>
       <button class="btn btn-small btn-muted" onclick="showResetConfirmModal()" id="reset-btn">
         <%= t("pg_reports.ui.actions.reset_statistics") %>
       </button>
-    <% else %>
-      <button class="btn btn-small btn-primary" onclick="enablePgStatStatements(this)" id="enable-btn">
-        <%= t("pg_reports.ui.actions.create_extension") %>
-      </button>
-      <button class="btn-info" onclick="showPgStatInfo()">?</button>
     <% end %>
     <button class="btn-info" onclick="showIdeSettingsModal()" title="<%= t("pg_reports.ui.actions.ide_settings_button_title") %>">⚙️</button>
-    <div class="header-badge" id="pg-stat-badge">
-      <% if @pg_stat_status[:ready] %>
+
+    <% if !@pg_stat_status[:connected] %>
+      <div class="header-badge" id="pg-stat-badge">
+        <span class="badge-dot error"></span>
+        <span><%= t("pg_reports.ui.status.disconnected") %></span>
+      </div>
+    <% elsif @pg_stat_status[:ready] %>
+      <div class="header-badge" id="pg-stat-badge">
         <span class="badge-dot"></span>
         <span><%= t("pg_reports.ui.status.pg_stat_ready") %></span>
-      <% elsif @pg_stat_status[:extension_installed] %>
+      </div>
+    <% elsif @pg_stat_status[:extension_installed] %>
+      <button type="button" class="header-badge header-badge-clickable" id="pg-stat-badge"
+              onclick="showPgStatInfo()" title="<%= t("pg_reports.ui.status.click_for_details") %>">
         <span class="badge-dot warning"></span>
-        <span><%= t("pg_reports.ui.status.extension_installed") %></span>
-      <% elsif @pg_stat_status[:preloaded] %>
+        <span><%= t("pg_reports.ui.status.not_preloaded") %></span>
+        <span class="badge-info-icon" aria-hidden="true">ⓘ</span>
+      </button>
+    <% else %>
+      <button type="button" class="header-badge header-badge-clickable" id="pg-stat-badge"
+              onclick="showCreateExtensionModal()" title="<%= t("pg_reports.ui.status.click_for_details") %>">
         <span class="badge-dot warning"></span>
-        <span><%= t("pg_reports.ui.status.preloaded") %></span>
-      <% else %>
-        <span class="badge-dot error"></span>
-        <span><%= t("pg_reports.ui.status.not_configured") %></span>
-      <% end %>
-    </div>
+        <span><%= t("pg_reports.ui.status.extension_missing") %></span>
+        <span class="badge-info-icon" aria-hidden="true">ⓘ</span>
+      </button>
+    <% end %>
   </div>
 </header>
 
@@ -81,6 +90,25 @@ pg_stat_statements.track = all</pre>
   </div>
 </div>
 
+<!-- Create extension modal -->
+<div id="create-extension-modal" class="modal" style="display: none;">
+  <div class="modal-content modal-medium">
+    <div class="modal-header">
+      <h3><%= t("pg_reports.ui.modals.create_extension_title") %></h3>
+      <button class="modal-close" onclick="closeCreateExtensionModal()">×</button>
+    </div>
+    <div class="modal-body">
+      <p><%= t("pg_reports.ui.modals.create_extension_intro") %></p>
+      <pre>CREATE EXTENSION IF NOT EXISTS pg_stat_statements;</pre>
+      <p class="warning-subtext"><%= t("pg_reports.ui.modals.create_extension_note") %></p>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeCreateExtensionModal()"><%= t("pg_reports.ui.actions.cancel") %></button>
+        <button class="btn btn-primary" onclick="enablePgStatStatements(this)" id="modal-create-extension-btn"><%= t("pg_reports.ui.actions.create_extension") %></button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Reset statistics confirmation modal -->
 <div id="reset-confirm-modal" class="modal" style="display: none;">
   <div class="modal-content modal-small">
@@ -142,6 +170,42 @@ pg_stat_statements.track = all</pre>
   </div>
 </div>
 
+<!-- Run Query Modal -->
+<div id="run-query-modal" class="modal" style="display: none;">
+  <div class="modal-content modal-run-query">
+    <div class="modal-header">
+      <h3><%= t("pg_reports.ui.modals.run_query_title") %></h3>
+      <button class="modal-close" onclick="closeRunQueryModal()">&times;</button>
+    </div>
+    <div class="modal-body">
+      <% if PgReports.config.allow_raw_query_execution %>
+        <label class="explain-label" for="run-query-input"><%= t("pg_reports.ui.modals.query_label") %></label>
+        <textarea id="run-query-input" class="run-query-textarea" spellcheck="false" placeholder="<%= t("pg_reports.ui.modals.run_query_placeholder") %>"></textarea>
+        <div class="run-query-actions">
+          <button class="btn btn-secondary" onclick="clearRunQuery()"><%= t("pg_reports.ui.actions.clear_all") %></button>
+          <button class="btn btn-primary" onclick="executeRunQuery()" id="btn-run-query"><%= t("pg_reports.ui.actions.run_query") %></button>
+        </div>
+        <div id="run-query-loading" class="loading" style="display: none;">
+          <div class="spinner"></div>
+        </div>
+        <div id="run-query-content"></div>
+      <% else %>
+        <div class="error-message">
+          <strong><%= t("pg_reports.ui.modals.query_execution_disabled_title") %></strong><br><br>
+          <%= t("pg_reports.ui.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>
+          <p style="margin-top: 0.75rem;"><%= t("pg_reports.ui.modals.query_execution_disabled_env_note") %></p>
+          <code style="display: block; margin-top: 0.5rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px;">PG_REPORTS_ALLOW_RAW_QUERY_EXECUTION=true</code>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+
 <!-- Live Monitoring Panel -->
 <div id="live-monitoring" class="live-monitoring-panel" style="display: none;">
   <div class="live-monitoring-header">
@@ -261,13 +325,17 @@ pg_stat_statements.track = all</pre>
   </div>
 </div>
 
-<!-- Query Monitoring Panel -->
+<!-- Query Monitoring Panel: taps ActiveSupport::Notifications in the host
+     application's process. There is no host app in standalone mode, so the
+     panel is hidden entirely rather than showing a monitor with nothing to
+     monitor. -->
+<% unless PgReports.config.standalone %>
 <div id="query-monitoring" class="query-monitoring-panel" style="display: none;">
   <div class="query-monitoring-header">
     <div class="query-monitoring-title">
       <span class="monitoring-indicator" id="monitor-indicator"></span>
       <span><%= t("pg_reports.ui.monitoring.query_monitor_title") %></span>
-      <span class="query-monitoring-scope" title="<%= t("pg_reports.ui.monitoring.scope_note_long", default: "Query Monitor subscribes to ActiveSupport::Notifications in the host application's process. It captures every SQL the host app runs, on whichever database the host app is connected to. The dashboard's database selector does not change this scope.") %>">
+      <span class="query-monitoring-scope" tabindex="0" data-tooltip="<%= t("pg_reports.ui.monitoring.scope_note_long", default: "Query Monitor subscribes to ActiveSupport::Notifications in the host application's process. It captures every SQL the host app runs, on whichever database the host app is connected to. The dashboard's database selector does not change this scope.") %>">
         <%= t("pg_reports.ui.monitoring.scope_note_short", default: "scope: host application") %>
       </span>
       <span class="session-badge" id="session-badge" style="display: none;">
@@ -306,6 +374,7 @@ pg_stat_statements.track = all</pre>
     </div>
   </div>
 </div>
+<% end %>
 
 <div class="categories-grid">
   <% @categories.each do |category_key, category| %>
@@ -363,7 +432,37 @@ pg_stat_statements.track = all</pre>
   <% end %>
 </div>
 
+<footer class="dashboard-footer">
+  <a href="https://github.com/deadalice/pg_reports" target="_blank" rel="noopener noreferrer">github.com/deadalice/pg_reports</a>
+  <span class="footer-sep">·</span>
+  <a href="mailto:deadalice@gmail.com">deadalice@gmail.com</a>
+</footer>
+
 <style>
+  .dashboard-footer {
+    margin-top: 2rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
+  .dashboard-footer a {
+    color: var(--text-secondary);
+    text-decoration: none;
+  }
+  .dashboard-footer a:hover {
+    color: var(--accent-purple);
+    text-decoration: underline;
+  }
+  .dashboard-footer .footer-sep {
+    opacity: 0.5;
+  }
+
   .header-actions {
     display: flex;
     align-items: center;
@@ -375,15 +474,26 @@ pg_stat_statements.track = all</pre>
     font-size: 0.8rem;
   }
 
+  /* Keep the header action button the same height as the status badge and
+     the settings button (all 2.125rem); inline-flex centers the label so no
+     vertical padding is needed. */
+  .header-actions .btn {
+    height: 2.125rem;
+    padding: 0 1rem;
+  }
+
   .btn-info {
-    width: 24px;
-    height: 24px;
+    width: 2.125rem;
+    height: 2.125rem;
     padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     background: var(--bg-tertiary);
     color: var(--text-muted);
     border: 1px solid var(--border-color);
-    border-radius: 50%;
-    font-size: 0.8rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.15s;
@@ -431,7 +541,7 @@ pg_stat_statements.track = all</pre>
 
   .category-warning {
     padding: 0.625rem 1rem;
-    margin: -1.5rem -1.5rem 1rem -1.5rem;
+    margin: -1rem -1rem 1rem -1rem;
     background: rgba(245, 158, 11, 0.1);
     border-bottom: 1px solid rgba(245, 158, 11, 0.2);
     border-radius: 6px 6px 0 0;
@@ -841,9 +951,254 @@ pg_stat_statements.track = all</pre>
   .toast.toast-warning {
     border-left: 3px solid var(--accent-amber);
   }
+
+  /* Run Query Modal */
+  .modal-run-query {
+    max-width: 1100px;
+    width: 95%;
+  }
+
+  .explain-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+  }
+
+  .run-query-textarea {
+    width: 100%;
+    min-height: 180px;
+    padding: 1rem;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    resize: vertical;
+  }
+
+  .run-query-textarea:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(107, 159, 232, 0.2);
+  }
+
+  .run-query-textarea::placeholder {
+    color: var(--text-muted);
+    font-style: italic;
+  }
+
+  .run-query-actions {
+    display: flex;
+    gap: 0.75rem;
+    margin: 1rem 0;
+  }
+
+  .run-query-actions .btn {
+    flex: 1;
+  }
+
+  /* Query Results Table (mirrors _show_styles.html.erb — index.html.erb has
+     its own <style> block and isn't loaded through that partial) */
+  .query-results-wrapper {
+    margin-top: 1rem;
+    max-height: 400px;
+    overflow: auto;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+  }
+
+  .query-results-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.75rem;
+  }
+
+  .query-results-table th {
+    position: sticky;
+    top: 0;
+    padding: 0.75rem;
+    text-align: left;
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 0.65rem;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .query-results-table td {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .query-results-table tr:hover td {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .query-results-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: var(--bg-tertiary);
+    border-radius: 8px;
+    margin-top: 1rem;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+  }
+
+  .query-results-info .count {
+    color: var(--accent-blue);
+    font-weight: 600;
+  }
+
+  .query-results-info .time {
+    color: var(--accent-green);
+    font-weight: 600;
+  }
 </style>
 
 <script>
+  const allowRawQueryExecution = <%= PgReports.config.allow_raw_query_execution.to_s.downcase %>;
+
+  function escapeHtmlAttr(text) {
+    return String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  function showRunQueryModal() {
+    document.getElementById('run-query-modal').style.display = 'flex';
+    document.getElementById('run-query-input')?.focus();
+  }
+
+  function closeRunQueryModal() {
+    document.getElementById('run-query-modal').style.display = 'none';
+  }
+
+  document.getElementById('run-query-modal')?.addEventListener('click', function(e) {
+    if (e.target === this) closeRunQueryModal();
+  });
+
+  document.getElementById('run-query-input')?.addEventListener('keydown', function(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      executeRunQuery();
+    }
+  });
+
+  function clearRunQuery() {
+    document.getElementById('run-query-input').value = '';
+    document.getElementById('run-query-content').innerHTML = '';
+  }
+
+  async function executeRunQuery() {
+    const input = document.getElementById('run-query-input');
+    const loading = document.getElementById('run-query-loading');
+    const content = document.getElementById('run-query-content');
+    const query = input.value.trim();
+
+    if (!query) {
+      showToast(PG_REPORTS_I18N.errors.query_required, 'error');
+      return;
+    }
+
+    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>`;
+      return;
+    }
+
+    loading.style.display = 'flex';
+    content.innerHTML = '';
+
+    try {
+      const response = await fetch(`${pgReportsRoot}/run_query`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        },
+        body: JSON.stringify({ query: query })
+      });
+
+      const data = await response.json();
+      loading.style.display = 'none';
+
+      if (data.success) {
+        let html = '';
+
+        html += `<div class="query-results-info">
+          <span>${PG_REPORTS_I18N.results.rows_label} <span class="count">${data.count}</span></span>
+          <span>${PG_REPORTS_I18N.results.execution_time_label} <span class="time">${data.execution_time} ms</span></span>
+        </div>`;
+
+        if (data.rows && data.rows.length > 0) {
+          html += '<div class="query-results-wrapper">';
+          html += '<table class="query-results-table">';
+
+          html += '<thead><tr>';
+          data.columns.forEach(col => {
+            html += `<th>${escapeHtml(col)}</th>`;
+          });
+          html += '</tr></thead>';
+
+          html += '<tbody>';
+          data.rows.forEach(row => {
+            html += '<tr>';
+            data.columns.forEach(col => {
+              const value = row[col];
+              const displayValue = value === null ? PG_REPORTS_I18N.results.null_placeholder : String(value);
+              html += `<td title="${escapeHtmlAttr(displayValue)}">${escapeHtml(displayValue)}</td>`;
+            });
+            html += '</tr>';
+          });
+          html += '</tbody>';
+
+          html += '</table>';
+          html += '</div>';
+
+          if (data.truncated) {
+            html += `<p style="margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem;">${pgReportsFormat(PG_REPORTS_I18N.results.showing_first_of_total, { count: data.rows.length, total: data.total_count })}</p>`;
+          }
+        } else {
+          html += '<p style="margin-top: 1rem; color: var(--text-muted);">' + PG_REPORTS_I18N.results.no_rows_returned + '</p>';
+        }
+
+        content.innerHTML = html;
+      } else {
+        content.innerHTML = `<div class="error-message">${escapeHtml(data.error || PG_REPORTS_I18N.errors.run_query_failed)}</div>`;
+      }
+    } catch (error) {
+      loading.style.display = 'none';
+      content.innerHTML = `<div class="error-message">${PG_REPORTS_I18N.errors.network_error_prefix} ${escapeHtml(error.message)}</div>`;
+    }
+  }
+
   function showPgStatInfo() {
     document.getElementById('pg-stat-modal').style.display = 'flex';
   }
@@ -857,6 +1212,18 @@ pg_stat_statements.track = all</pre>
     if (e.target === this) closePgStatModal();
   });
 
+  function showCreateExtensionModal() {
+    document.getElementById('create-extension-modal').style.display = 'flex';
+  }
+
+  function closeCreateExtensionModal() {
+    document.getElementById('create-extension-modal').style.display = 'none';
+  }
+
+  document.getElementById('create-extension-modal')?.addEventListener('click', function(e) {
+    if (e.target === this) closeCreateExtensionModal();
+  });
+
   function showResetConfirmModal() {
     document.getElementById('reset-confirm-modal').style.display = 'flex';
   }
@@ -923,6 +1290,7 @@ pg_stat_statements.track = all</pre>
       } else {
         showToast(data.message, 'error');
         if (data.requires_restart) {
+          closeCreateExtensionModal();
           showPgStatInfo();
         }
         button.disabled = false;