pg_reports 0.3.1 → 0.5.0

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

@@ -91,6 +91,9 @@ pg_stat_statements.track = all</pre>
     <div class="live-monitoring-title">
       <span class="live-indicator"></span>
       <span>Live Monitoring</span>
+      <span class="database-badge">
+        Database: <strong><%= @current_database %></strong>
+      </span>
     </div>
     <div class="live-monitoring-controls">
       <span class="live-monitoring-interval">Updates every 5s</span>
@@ -202,6 +205,46 @@ pg_stat_statements.track = all</pre>
   </div>
 </div>
 
+<!-- Query Monitoring Panel -->
+<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>SQL Query Monitor</span>
+      <span class="session-badge" id="session-badge" style="display: none;">
+        Session: <strong id="session-id"></strong>
+      </span>
+    </div>
+    <div class="query-monitoring-controls">
+      <button class="btn btn-small btn-primary" onclick="startQueryMonitoring(this)" id="start-monitor-btn">
+        ▶ Start Monitoring
+      </button>
+      <button class="btn btn-small btn-danger" onclick="stopQueryMonitoring(this)" id="stop-monitor-btn" style="display: none;">
+        ⏹ Stop Monitoring
+      </button>
+      <div class="download-dropdown" id="monitor-download-dropdown" style="display: none;">
+        <button class="btn btn-small btn-secondary" onclick="toggleMonitorDownloadMenu(event)">
+          📥 Download
+        </button>
+        <div class="download-menu" id="monitor-download-menu" style="display: none;">
+          <a href="#" onclick="downloadQueryMonitor('txt'); return false;">📄 Text (.txt)</a>
+          <a href="#" onclick="downloadQueryMonitor('csv'); return false;">📊 CSV (.csv)</a>
+          <a href="#" onclick="downloadQueryMonitor('json'); return false;">📋 JSON (.json)</a>
+        </div>
+      </div>
+      <span class="query-monitoring-count">
+        Queries: <strong id="query-count">0</strong>
+      </span>
+    </div>
+  </div>
+
+  <div class="query-feed" id="query-feed">
+    <div class="query-feed-empty">
+      Click "Start Monitoring" to begin capturing SQL queries
+    </div>
+  </div>
+</div>
+
 <div class="categories-grid">
   <% @categories.each do |category_key, category| %>
     <div class="category-card<%= ' disabled' if category_key == :queries && !@pg_stat_status[:ready] %>">
@@ -514,6 +557,22 @@ pg_stat_statements.track = all</pre>
     font-size: 1rem;
   }
 
+  .database-badge {
+    margin-left: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+  }
+
+  .database-badge strong {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+
   .live-indicator {
     width: 8px;
     height: 8px;
@@ -1001,4 +1060,364 @@ pg_stat_statements.track = all</pre>
 
   document.addEventListener('DOMContentLoaded', initLiveMonitoring);
   window.addEventListener('beforeunload', stopPolling);
+
+  // ============================================
+  // Query Monitoring
+  // ============================================
+
+  const QUERY_MONITOR_CONFIG = {
+    pollInterval: 2000,
+    maxQueries: 50
+  };
+
+  let queryMonitorEnabled = false;
+  let queryMonitorPollTimer = null;
+  let currentSessionId = null;
+  let queryCount = 0;
+
+  function initQueryMonitoring() {
+    const panel = document.getElementById('query-monitoring');
+    if (!panel) return;
+
+    // Check initial status
+    checkQueryMonitorStatus();
+  }
+
+  async function checkQueryMonitorStatus() {
+    try {
+      const response = await fetch(`${pgReportsRoot}/query_monitor/status`);
+      const data = await response.json();
+
+      if (data.success && data.enabled) {
+        queryMonitorEnabled = true;
+        currentSessionId = data.session_id;
+        queryCount = data.query_count;
+        updateQueryMonitorUI(true);
+        startQueryMonitorPolling();
+      } else {
+        // Monitoring not active - load history from log file
+        queryMonitorEnabled = false;
+        await loadQueryHistory();
+        updateQueryMonitorUI(false);
+      }
+    } catch (error) {
+      console.error('Failed to check query monitor status:', error);
+      // Show panel anyway even if status check fails
+      updateQueryMonitorUI(false);
+    }
+  }
+
+  async function loadQueryHistory() {
+    try {
+      const response = await fetch(
+        `${pgReportsRoot}/query_monitor/history?limit=${QUERY_MONITOR_CONFIG.maxQueries}`
+      );
+      const data = await response.json();
+
+      if (data.success && data.queries && data.queries.length > 0) {
+        renderQueryFeed(data.queries);
+      }
+    } catch (error) {
+      console.error('Failed to load query history:', error);
+    }
+  }
+
+  async function loadSessionFromLog(sessionId) {
+    try {
+      const response = await fetch(
+        `${pgReportsRoot}/query_monitor/history?session_id=${sessionId}&limit=${QUERY_MONITOR_CONFIG.maxQueries}`
+      );
+      const data = await response.json();
+
+      if (data.success && data.queries && data.queries.length > 0) {
+        renderQueryFeed(data.queries);
+      }
+    } catch (error) {
+      console.error('Failed to load session from log:', error);
+    }
+  }
+
+  async function startQueryMonitoring(button) {
+    button.disabled = true;
+    button.innerHTML = '<span class="spinner"></span> Starting...';
+
+    try {
+      const response = await fetch(`${pgReportsRoot}/query_monitor/start`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        }
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        queryMonitorEnabled = true;
+        currentSessionId = data.session_id;
+        updateQueryMonitorUI(true);
+        startQueryMonitorPolling();
+        showToast(data.message);
+      } else {
+        showToast(data.message || 'Failed to start monitoring', 'error');
+        button.disabled = false;
+        button.innerHTML = '▶ Start Monitoring';
+      }
+    } catch (error) {
+      showToast('Network error: ' + error.message, 'error');
+      button.disabled = false;
+      button.innerHTML = '▶ Start Monitoring';
+    }
+  }
+
+  async function stopQueryMonitoring(button) {
+    button.disabled = true;
+    button.innerHTML = '<span class="spinner"></span> Stopping...';
+
+    try {
+      const response = await fetch(`${pgReportsRoot}/query_monitor/stop`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        }
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        queryMonitorEnabled = false;
+        const stoppedSessionId = data.session_id || currentSessionId;
+        currentSessionId = null;
+        stopQueryMonitorPolling();
+
+        // Load complete session data from log file
+        if (stoppedSessionId) {
+          await loadSessionFromLog(stoppedSessionId);
+        }
+
+        updateQueryMonitorUI(false);
+        showToast(data.message);
+      } else {
+        showToast(data.message || 'Failed to stop monitoring', 'error');
+        button.disabled = false;
+        button.innerHTML = '⏹ Stop Monitoring';
+      }
+    } catch (error) {
+      showToast('Network error: ' + error.message, 'error');
+      button.disabled = false;
+      button.innerHTML = '⏹ Stop Monitoring';
+    }
+  }
+
+  function updateQueryMonitorUI(enabled) {
+    const panel = document.getElementById('query-monitoring');
+    const indicator = document.getElementById('monitor-indicator');
+    const startBtn = document.getElementById('start-monitor-btn');
+    const stopBtn = document.getElementById('stop-monitor-btn');
+    const sessionBadge = document.getElementById('session-badge');
+    const sessionIdEl = document.getElementById('session-id');
+    const downloadDropdown = document.getElementById('monitor-download-dropdown');
+    const feed = document.getElementById('query-feed');
+
+    panel.style.display = 'block';
+
+    if (enabled) {
+      indicator.classList.add('active');
+      startBtn.style.display = 'none';
+      stopBtn.style.display = 'inline-block';
+      stopBtn.disabled = false;
+      stopBtn.innerHTML = '⏹ Stop Monitoring';
+      sessionBadge.style.display = 'inline-block';
+      sessionIdEl.textContent = currentSessionId ? currentSessionId.substring(0, 8) : '';
+      downloadDropdown.style.display = 'inline-block';
+    } else {
+      indicator.classList.remove('active');
+      startBtn.style.display = 'inline-block';
+      startBtn.disabled = false;
+      startBtn.innerHTML = '▶ Start Monitoring';
+      stopBtn.style.display = 'none';
+      sessionBadge.style.display = 'none';
+
+      // Keep results visible after stopping, only hide download if no queries
+      const hasQueries = queryCount > 0;
+      downloadDropdown.style.display = hasQueries ? 'inline-block' : 'none';
+
+      // Only clear feed if no queries captured
+      if (!hasQueries) {
+        feed.innerHTML = '<div class="query-feed-empty">Click "Start Monitoring" to begin capturing SQL queries</div>';
+      }
+    }
+  }
+
+  function toggleMonitorDownloadMenu(event) {
+    event.stopPropagation();
+    const menu = document.getElementById('monitor-download-menu');
+    menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
+  }
+
+  function downloadQueryMonitor(format) {
+    // Hide dropdown menu
+    document.getElementById('monitor-download-menu').style.display = 'none';
+
+    // Build download URL
+    const url = `${pgReportsRoot}/query_monitor/download?format=${format}`;
+
+    // Use hidden iframe to download without page reload
+    let iframe = document.getElementById('download-iframe');
+    if (!iframe) {
+      iframe = document.createElement('iframe');
+      iframe.id = 'download-iframe';
+      iframe.style.display = 'none';
+      document.body.appendChild(iframe);
+    }
+    iframe.src = url;
+  }
+
+  // Close download menu when clicking outside
+  document.addEventListener('click', function(event) {
+    const menu = document.getElementById('monitor-download-menu');
+    if (menu && menu.style.display === 'block') {
+      const dropdown = document.getElementById('monitor-download-dropdown');
+      if (dropdown && !dropdown.contains(event.target)) {
+        menu.style.display = 'none';
+      }
+    }
+  });
+
+  function startQueryMonitorPolling() {
+    if (queryMonitorPollTimer) clearInterval(queryMonitorPollTimer);
+
+    fetchQueryFeed(); // Immediate fetch
+    queryMonitorPollTimer = setInterval(fetchQueryFeed, QUERY_MONITOR_CONFIG.pollInterval);
+  }
+
+  function stopQueryMonitorPolling() {
+    if (queryMonitorPollTimer) {
+      clearInterval(queryMonitorPollTimer);
+      queryMonitorPollTimer = null;
+    }
+  }
+
+  async function fetchQueryFeed() {
+    if (!queryMonitorEnabled) return;
+
+    try {
+      const response = await fetch(
+        `${pgReportsRoot}/query_monitor/feed?limit=${QUERY_MONITOR_CONFIG.maxQueries}&session_id=${currentSessionId || ''}`
+      );
+      const data = await response.json();
+
+      if (data.success && data.queries) {
+        renderQueryFeed(data.queries);
+      }
+    } catch (error) {
+      console.error('Failed to fetch query feed:', error);
+    }
+  }
+
+  function renderQueryFeed(queries) {
+    const feed = document.getElementById('query-feed');
+
+    if (queries.length === 0) {
+      feed.innerHTML = '<div class="query-feed-empty">No queries captured yet...</div>';
+      queryCount = 0;
+      document.getElementById('query-count').textContent = '0';
+      return;
+    }
+
+    queryCount = queries.length;
+    document.getElementById('query-count').textContent = queryCount;
+
+    // Render queries in reverse chronological order
+    const html = queries.slice().reverse().map(query => renderQueryItem(query)).join('');
+    feed.innerHTML = html;
+  }
+
+  function renderQueryItem(query) {
+    const duration = query.duration_ms;
+    const durationClass = duration < 10 ? 'fast' : duration > 100 ? 'slow' : '';
+    const timestamp = new Date(query.timestamp).toLocaleTimeString();
+    const queryId = `query-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    let sourceInfo = 'Unknown source';
+    if (query.source_location && query.source_location.file) {
+      const file = query.source_location.file;
+      const line = query.source_location.line;
+      sourceInfo = `<a href="#" onclick="openInIDE('${escapeHtml(file)}', ${line}); return false;">
+         ${escapeHtml(file)}:${line}
+       </a>`;
+    }
+
+    // Prepare SQL: collapse to single line and truncate
+    const fullSql = query.sql.trim();
+    const collapsedSql = fullSql.replace(/\s+/g, ' ').trim();
+    const truncatedSql = collapsedSql.length > 100
+      ? collapsedSql.substring(0, 100) + '...'
+      : collapsedSql;
+
+    return `
+      <div class="query-item">
+        <div class="query-header">
+          <div class="query-meta">
+            <span class="query-timestamp">${timestamp}</span>
+            <span class="query-duration ${durationClass}">${duration.toFixed(2)}ms</span>
+            <span class="query-source">${sourceInfo}</span>
+          </div>
+          <button class="query-expand-btn" onclick="toggleQueryExpand('${queryId}')" title="Expand/Collapse">
+            <span id="${queryId}-icon">▼</span>
+          </button>
+        </div>
+        <div class="query-sql-wrapper">
+          <div class="query-sql query-sql-collapsed" id="${queryId}-sql">
+            ${escapeHtml(truncatedSql)}
+          </div>
+          <div class="query-sql query-sql-expanded" id="${queryId}-sql-full" style="display: none;">
+            ${escapeHtml(fullSql)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  function toggleQueryExpand(queryId) {
+    const collapsedEl = document.getElementById(`${queryId}-sql`);
+    const expandedEl = document.getElementById(`${queryId}-sql-full`);
+    const iconEl = document.getElementById(`${queryId}-icon`);
+
+    if (collapsedEl.style.display === 'none') {
+      // Currently expanded, collapse it
+      collapsedEl.style.display = 'block';
+      expandedEl.style.display = 'none';
+      iconEl.textContent = '▼';
+    } else {
+      // Currently collapsed, expand it
+      collapsedEl.style.display = 'none';
+      expandedEl.style.display = 'block';
+      iconEl.textContent = '▲';
+    }
+  }
+
+  function escapeHtml(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  function showToast(message, type = 'success') {
+    // Simple console log for now - can be enhanced with actual toast UI
+    if (type === 'error') {
+      console.error(message);
+    } else {
+      console.log(message);
+    }
+    // TODO: Implement actual toast notification UI
+  }
+
+  // Initialize on page load
+  document.addEventListener('DOMContentLoaded', initQueryMonitoring);
+  window.addEventListener('beforeunload', () => {
+    stopQueryMonitorPolling();
+  });
 </script>

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

@@ -50,59 +50,101 @@
     </div>
   <% end %>
 
-  <!-- Collapsible Documentation Section -->
-  <% if @documentation && @documentation[:what].present? %>
-    <details class="documentation-section">
-      <summary class="documentation-toggle">
-        <span class="toggle-icon">▶</span>
-        <span>📖 What does this report show?</span>
-      </summary>
-      <div class="documentation-content">
-        <% if @documentation[:what].present? %>
-          <div class="doc-block">
-            <h4>📋 What</h4>
-            <p><%= @documentation[:what] %></p>
-          </div>
-        <% end %>
+  <div class="report-details-grid">
+    <!-- Collapsible Documentation Section -->
+    <% if @documentation && @documentation[:what].present? %>
+      <details class="documentation-section">
+        <summary class="documentation-toggle">
+          <span class="toggle-icon">▶</span>
+          <span>📖 What does this report show?</span>
+        </summary>
+        <div class="documentation-content">
+          <% if @documentation[:what].present? %>
+            <div class="doc-block">
+              <h4>📋 What</h4>
+              <p><%= @documentation[:what] %></p>
+            </div>
+          <% end %>
 
-        <% if @documentation[:why].present? %>
-          <div class="doc-block">
-            <h4>❓ Why It Matters</h4>
-            <p><%= @documentation[:why] %></p>
-          </div>
-        <% end %>
-
-        <% if @documentation[:nuances].present? %>
-          <div class="doc-block">
-            <h4>⚠️ Nuances</h4>
-            <ul class="nuances-list">
-              <% @documentation[:nuances].each do |nuance| %>
-                <li><%= nuance %></li>
-              <% end %>
-            </ul>
-          </div>
-        <% end %>
-
-        <% if @thresholds.present? %>
-          <div class="thresholds-block">
-            <h4>📊 Thresholds</h4>
-            <div class="thresholds-grid">
-              <% @thresholds.each do |field, values| %>
-                <div class="threshold-item">
-                  <span class="threshold-field"><%= field %></span>
-                  <span class="threshold-warning">⚠️ Warning: <%= values[:warning] %></span>
-                  <span class="threshold-critical">🔴 Critical: <%= values[:critical] %></span>
-                  <% if values[:inverted] %>
-                    <span class="threshold-note">(lower is worse)</span>
-                  <% end %>
+          <% if @documentation[:why].present? %>
+            <div class="doc-block">
+              <h4>❓ Why It Matters</h4>
+              <p><%= @documentation[:why] %></p>
+            </div>
+          <% end %>
+
+          <% if @documentation[:nuances].present? %>
+            <div class="doc-block">
+              <h4>⚠️ Nuances</h4>
+              <ul class="nuances-list">
+                <% @documentation[:nuances].each do |nuance| %>
+                  <li><%= nuance %></li>
+                <% end %>
+              </ul>
+            </div>
+          <% end %>
+
+          <% if @thresholds.present? %>
+            <div class="thresholds-block">
+              <h4>📊 Thresholds</h4>
+              <div class="thresholds-grid">
+                <% @thresholds.each do |field, values| %>
+                  <div class="threshold-item">
+                    <span class="threshold-field"><%= field %></span>
+                    <span class="threshold-warning">⚠️ Warning: <%= values[:warning] %></span>
+                    <span class="threshold-critical">🔴 Critical: <%= values[:critical] %></span>
+                    <% if values[:inverted] %>
+                      <span class="threshold-note">(lower is worse)</span>
+                    <% end %>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </details>
+    <% end %>
+
+    <!-- Filter Parameters Section -->
+    <% if @report_filters.present? %>
+      <div class="filter-section">
+        <details class="filter-details">
+          <summary class="filter-toggle">
+            <span class="toggle-icon">▶</span>
+            <span>🔍 Параметры фильтрации</span>
+          </summary>
+          <div class="filter-content">
+            <div class="filter-grid">
+              <% @report_filters.each do |name, config| %>
+                <div class="filter-item">
+                  <label class="filter-label">
+                    <%= config[:label] %>
+                    <% if config[:description] %>
+                      <span class="filter-description"><%= config[:description] %></span>
+                    <% end %>
+                    <% if config[:is_threshold] && config[:current_config] %>
+                      <span class="filter-current-value">(current: <%= config[:current_config] %>)</span>
+                    <% end %>
+                  </label>
+                  <input
+                    type="<%= config[:type] == 'integer' ? 'number' : 'text' %>"
+                    class="filter-input"
+                    data-param="<%= name %>"
+                    value="<%= config[:default] %>"
+                    <% if config[:type] == 'integer' %>
+                      min="0"
+                      step="1"
+                    <% end %>
+                    placeholder="<%= config[:default] %>"
+                  >
                 </div>
               <% end %>
             </div>
           </div>
-        <% end %>
+        </details>
       </div>
-    </details>
-  <% end %>
+    <% end %>
+  </div>
 
   <!-- Saved Records Section -->
   <div class="saved-records-section" id="saved-records-section" style="display: none;">

data/config/locales/en.yml

@@ -249,6 +249,46 @@ en:
           - "Too many idle = application not closing connections or pool is too large."
           - "idle_session_timeout (PostgreSQL 14+) can automatically close idle connections."
 
+      pool_usage:
+        title: "Connection Pool Usage"
+        what: "Current connection pool utilization showing active, idle, and available connections across databases."
+        how: "Analyzes pg_stat_activity connection states and compares against max_connections limit."
+        nuances:
+          - "Utilization above 70% indicates approaching pool limits — consider scaling."
+          - "Idle in transaction connections waste resources and block VACUUM."
+          - "max_connections is database-wide, not per-database."
+          - "Connection poolers (PgBouncer/pgpool) allow many more application connections than database connections."
+
+      pool_wait_times:
+        title: "Pool Wait Time Analysis"
+        what: "Queries currently waiting for resources like locks, I/O, or network operations."
+        how: "Analyzes wait_event and wait_event_type from pg_stat_activity for non-idle connections."
+        nuances:
+          - "ClientRead waits = slow client not consuming data fast enough."
+          - "Lock waits = contention between concurrent queries."
+          - "IO waits = disk performance issues or insufficient cache."
+          - "Waits over 60 seconds are critical and need immediate investigation."
+
+      pool_saturation:
+        title: "Pool Saturation Warnings"
+        what: "Overall connection pool health metrics with saturation warnings and recommendations."
+        how: "Calculates utilization percentages for total, active, idle, and problematic connections."
+        nuances:
+          - "Consistent utilization above 70% = need for pool tuning or scaling."
+          - "High idle in transaction count = application transaction handling issues."
+          - "superuser_reserved_connections reduce available pool capacity."
+          - "Monitor trends — sudden spikes may indicate connection leaks."
+
+      connection_churn:
+        title: "Connection Churn Analysis"
+        what: "Analyzes connection lifecycle patterns to identify excessive connection churn (frequent connect/disconnect)."
+        how: "Examines connection ages to identify short-lived connections and calculate churn rates per application."
+        nuances:
+          - "Connections under 10 seconds = short-lived."
+          - "Churn rate over 50% = missing/misconfigured connection pooling."
+          - "Many short connections = increased CPU and authentication overhead."
+          - "Web apps should maintain connection pools, not create per-request connections."
+
       # === SYSTEM ===
       database_sizes:
         title: "Database Sizes"
@@ -295,6 +335,19 @@ en:
           - "Target value: >99% for OLTP, >95% for mixed workload."
           - "Low cache hit: increase shared_buffers (up to 25% RAM), or the problem is in queries."
 
+      # === SCHEMA ANALYSIS ===
+      missing_validations:
+        title: "Missing Validations"
+        what: "Unique indexes in the database without corresponding uniqueness validations in Rails models."
+        how: "Analyzes all unique indexes (including composite ones) and checks if the corresponding Rails model has validates :column, uniqueness: true validation."
+        nuances:
+          - "Database constraints (indexes) and model validations serve different purposes — both should be present."
+          - "Unique index prevents duplicates at database level, validation provides user-friendly error messages."
+          - "For composite indexes (a, b), need validation with scope: validates :a, uniqueness: { scope: :b }"
+          - "Some tables may not have models — this is normal for join tables or legacy tables."
+          - "Validations in concerns and parent models are also detected."
+          - "Primary keys don't need validations — they are automatically unique."
+
     # Problem explanations for highlighting
     problems:
       high_mean_time: "High mean execution time. Consider adding indexes or optimizing the query."
@@ -308,3 +361,8 @@ en:
       long_running: "Long-running query. May block other operations."
       blocking: "Blocking other queries. Requires attention."
       idle_in_transaction: "Open transaction without activity. Blocks VACUUM and holds locks."
+      high_pool_usage: "Connection pool utilization is high. Scale up max_connections or implement connection pooling."
+      long_wait_time: "Query waiting for resources for too long. Check for lock contention or I/O issues."
+      pool_saturation: "Connection pool is saturated. Risk of connection exhaustion and application errors."
+      high_connection_churn: "High connection churn rate. Implement connection pooling to reduce overhead."
+      too_many_short_connections: "Too many short-lived connections. Application should reuse connections via pooling."