pgbus 0.2.9 → 0.3.1

data/app/models/pgbus/job_stat.rb

@@ -10,15 +10,19 @@ module Pgbus
     scope :dead_lettered, -> { where(status: "dead_lettered") }
 
     # Record a job execution stat. Called by the executor after each job.
-    def self.record!(job_class:, queue_name:, status:, duration_ms:)
+    def self.record!(job_class:, queue_name:, status:, duration_ms:, enqueue_latency_ms: nil, retry_count: 0)
       return unless table_exists?
 
-      create!(
+      attrs = {
         job_class: job_class,
         queue_name: queue_name,
         status: status,
         duration_ms: duration_ms
-      )
+      }
+      attrs[:enqueue_latency_ms] = enqueue_latency_ms if latency_columns?
+      attrs[:retry_count] = retry_count if latency_columns?
+
+      create!(attrs)
     rescue StandardError => e
       Pgbus.logger.debug { "[Pgbus] Failed to record job stat: #{e.message}" }
     end
@@ -34,6 +38,15 @@ module Pgbus
       @table_exists = false
     end
 
+    # Memoized — checks if the latency migration has been applied.
+    def self.latency_columns?
+      return @latency_columns if defined?(@latency_columns)
+
+      @latency_columns = table_exists? && column_names.include?("enqueue_latency_ms")
+    rescue StandardError
+      @latency_columns = false
+    end
+
     # Throughput: jobs per minute bucketed by minute for the last N minutes
     def self.throughput(minutes: 60)
       since(minutes.minutes.ago)
@@ -67,16 +80,30 @@ module Pgbus
 
     # Single-query aggregate summary using conditional counts.
     def self.summary(minutes: 60)
-      row = since(minutes.minutes.ago).pick(
-        Arel.sql("COUNT(*)"),
-        Arel.sql("COUNT(*) FILTER (WHERE status = 'success')"),
-        Arel.sql("COUNT(*) FILTER (WHERE status = 'failed')"),
-        Arel.sql("COUNT(*) FILTER (WHERE status = 'dead_lettered')"),
-        Arel.sql("ROUND(AVG(duration_ms)::numeric, 1)"),
-        Arel.sql("MAX(duration_ms)")
-      )
-
-      {
+      cols = [
+        "COUNT(*)",
+        "COUNT(*) FILTER (WHERE status = 'success')",
+        "COUNT(*) FILTER (WHERE status = 'failed')",
+        "COUNT(*) FILTER (WHERE status = 'dead_lettered')",
+        "ROUND(AVG(duration_ms)::numeric, 1)",
+        "MAX(duration_ms)"
+      ]
+      if latency_columns?
+        cols.push(
+          "ROUND(AVG(enqueue_latency_ms) FILTER (WHERE enqueue_latency_ms IS NOT NULL)::numeric, 1)",
+          "PERCENTILE_CONT(0.5) WITHIN GROUP (ORDER BY enqueue_latency_ms) " \
+          "FILTER (WHERE enqueue_latency_ms IS NOT NULL)",
+          "PERCENTILE_CONT(0.95) WITHIN GROUP (ORDER BY enqueue_latency_ms) " \
+          "FILTER (WHERE enqueue_latency_ms IS NOT NULL)",
+          "PERCENTILE_CONT(0.99) WITHIN GROUP (ORDER BY enqueue_latency_ms) " \
+          "FILTER (WHERE enqueue_latency_ms IS NOT NULL)",
+          "ROUND(AVG(retry_count) FILTER (WHERE retry_count IS NOT NULL)::numeric, 2)"
+        )
+      end
+
+      row = since(minutes.minutes.ago).pick(*cols.map { |c| Arel.sql(c) })
+
+      result = {
         total: row[0].to_i,
         success: row[1].to_i,
         failed: row[2].to_i,
@@ -84,6 +111,51 @@ module Pgbus
         avg_duration_ms: row[4]&.to_f || 0,
         max_duration_ms: row[5].to_i
       }
+
+      if latency_columns?
+        result.merge!(
+          avg_latency_ms: row[6]&.to_f || 0,
+          p50_latency_ms: row[7]&.to_f || 0,
+          p95_latency_ms: row[8]&.to_f || 0,
+          p99_latency_ms: row[9]&.to_f || 0,
+          avg_retries: row[10]&.to_f || 0
+        )
+      end
+
+      result
+    end
+
+    # Latency trend: average enqueue latency per minute bucketed
+    def self.latency_trend(minutes: 60)
+      return [] unless latency_columns?
+
+      since(minutes.minutes.ago)
+        .where.not(enqueue_latency_ms: nil)
+        .group("date_trunc('minute', created_at)")
+        .order(Arel.sql("date_trunc('minute', created_at)"))
+        .pluck(
+          Arel.sql("date_trunc('minute', created_at)"),
+          Arel.sql("ROUND(AVG(enqueue_latency_ms))"),
+          Arel.sql("ROUND(PERCENTILE_CONT(0.95) WITHIN GROUP (ORDER BY enqueue_latency_ms))")
+        )
+        .map { |time, avg, p95| { time: time, avg_ms: avg.to_i, p95_ms: p95.to_i } }
+    end
+
+    # Average latency by queue
+    def self.avg_latency_by_queue(minutes: 60)
+      return [] unless latency_columns?
+
+      since(minutes.minutes.ago)
+        .where.not(enqueue_latency_ms: nil)
+        .group(:queue_name)
+        .order(Arel.sql("AVG(enqueue_latency_ms) DESC"))
+        .pluck(
+          :queue_name,
+          Arel.sql("ROUND(AVG(enqueue_latency_ms))"),
+          Arel.sql("ROUND(PERCENTILE_CONT(0.95) WITHIN GROUP (ORDER BY enqueue_latency_ms))"),
+          Arel.sql("COUNT(*)")
+        )
+        .map { |q, avg, p95, count| { queue_name: q, avg_ms: avg.to_i, p95_ms: p95.to_i, count: count.to_i } }
     end
 
     # Cleanup old stats

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

@@ -4,63 +4,19 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title><%= t("pgbus.layout.title") %></title>
-  <style>
-    /* Prevent white flash during navigation in dark mode.
-       Applied before Tailwind CDN loads so the background is correct immediately. */
-    html.dark { background-color: #030712; } /* gray-950 */
-    html.dark body { background-color: #030712; }
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
 
-    /* Responsive tables: stack rows as cards on small screens */
-    @media (max-width: 1023px) {
-      .pgbus-table thead { display: none; }
-      .pgbus-table tbody tr {
-        display: block;
-        margin-bottom: 0.75rem;
-        border-radius: 0.5rem;
-        padding: 0.75rem;
-        border: 1px solid #e5e7eb;
-      }
-      html.dark .pgbus-table tbody tr { border-color: #374151; }
-      .pgbus-table tbody td {
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-        padding: 0.25rem 0;
-        border: none;
-        text-align: right;
-      }
-      .pgbus-table tbody td::before {
-        content: attr(data-label);
-        font-weight: 600;
-        font-size: 0.75rem;
-        text-transform: uppercase;
-        color: #6b7280;
-        text-align: left;
-        margin-right: 1rem;
-        flex-shrink: 0;
-      }
-      html.dark .pgbus-table tbody td::before { color: #9ca3af; }
-      .pgbus-table tbody td[colspan] {
-        display: block;
-        text-align: center;
-      }
-      .pgbus-table tbody td[colspan]::before { display: none; }
-    }
-  </style>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = { darkMode: 'class' };
-    // Restore dark mode preference
+  <%# Prevent white flash in dark mode — must run before stylesheet loads %>
+  <script nonce="<%= content_security_policy_nonce %>">
     if (localStorage.getItem('pgbus-dark') === 'true' ||
         (!localStorage.getItem('pgbus-dark') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
       document.documentElement.classList.add('dark');
     }
-    // Dark mode toggle — must be in non-module script for onclick access
     function toggleDarkMode() {
       var isDark = document.documentElement.classList.toggle('dark');
       localStorage.setItem('pgbus-dark', isDark);
     }
-    // Mobile menu toggle
     function toggleMobileMenu() {
       var menu = document.getElementById('pgbus-mobile-menu');
       var openIcon = document.getElementById('pgbus-menu-open');
@@ -69,7 +25,6 @@
       openIcon.classList.toggle('hidden');
       closeIcon.classList.toggle('hidden');
     }
-    // Close locale dropdown when clicking outside
     document.addEventListener('click', function(e) {
       var switcher = document.getElementById('pgbus-locale-switcher');
       var menu = document.getElementById('pgbus-locale-menu');
@@ -78,103 +33,27 @@
       }
     });
   </script>
-  <script type="module">
-    import * as Turbo from "https://esm.sh/@hotwired/turbo@8";
-
-    // -- Custom confirm dialog (replaces browser confirm) --
-    Turbo.config.forms.confirm = (message, element) => {
-      const dialog = document.getElementById("pgbus-confirm-dialog");
-      const messageEl = document.getElementById("pgbus-confirm-message");
-      const titleEl = document.getElementById("pgbus-confirm-title");
-      const confirmBtn = document.getElementById("pgbus-confirm-btn");
-      const iconEl = document.getElementById("pgbus-confirm-icon");
-
-      // Detect action type from the element
-      const turboMethod = element.getAttribute("data-turbo-method");
-      const isDelete = turboMethod === "delete";
-
-      // Set title based on action
-      titleEl.textContent = isDelete ? "<%= t("pgbus.dialogs.delete_title", default: "Delete") %>" : "<%= t("pgbus.dialogs.confirm_title", default: "Are you sure?") %>";
-      messageEl.textContent = message;
-
-      // Style confirm button based on action severity
-      confirmBtn.className = "rounded-md px-4 py-2 text-sm font-medium text-white focus:outline-none focus:ring-2";
-      if (isDelete) {
-        confirmBtn.classList.add("bg-red-600", "hover:bg-red-500", "focus:ring-red-500");
-        confirmBtn.textContent = "<%= t("pgbus.dialogs.delete", default: "Delete") %>";
-        iconEl.className = "flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30";
-      } else {
-        confirmBtn.classList.add("bg-yellow-500", "hover:bg-yellow-400", "focus:ring-yellow-500");
-        confirmBtn.textContent = "<%= t("pgbus.dialogs.confirm", default: "Confirm") %>";
-        iconEl.className = "flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-900/30";
-      }
 
-      dialog.showModal();
+  <%# Self-hosted assets — no external CDN dependencies %>
+  <%= tag.link rel: "stylesheet", href: frontend_static_path(:style, format: :css, locale: nil), nonce: content_security_policy_nonce %>
 
-      return new Promise((resolve) => {
-        dialog.addEventListener("close", () => {
-          resolve(dialog.returnValue === "confirm");
-        }, { once: true });
-      });
-    };
+  <%# Importmap for ES modules %>
+  <% importmaps = Pgbus::FrontendsController.js_modules.keys.index_with { |mod| frontend_module_path(mod, format: :js, locale: nil) } %>
+  <%= tag.script({ imports: importmaps }.to_json.html_safe, type: "importmap", nonce: content_security_policy_nonce) %>
+  <%= tag.script("", src: frontend_static_path(:apexcharts, format: :js, locale: nil), nonce: content_security_policy_nonce) %>
 
-    // -- Toast notifications --
-    function showToast(message, type = "success") {
-      const container = document.getElementById("pgbus-toast-container");
-      const toast = document.createElement("div");
-
-      const colors = {
-        success: "bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800",
-        error: "bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-800",
-        info: "bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-800",
-      };
-
-      toast.className = `rounded-md border p-3 text-sm shadow-lg transition-all duration-300 ${colors[type] || colors.info}`;
-      toast.textContent = message;
-      container.appendChild(toast);
-
-      setTimeout(() => {
-        toast.style.opacity = "0";
-        toast.style.transform = "translateX(100%)";
-        setTimeout(() => toast.remove(), 300);
-      }, 5000);
-    }
-
-    // Render flash toasts from <template> tags.
-    // Must run on turbo:load as well — module scripts only execute once,
-    // but Turbo Drive replaces the body on navigation.
-    function renderFlashToasts() {
-      document.querySelectorAll("template[data-pgbus-toast]").forEach(tpl => {
-        showToast(tpl.content.textContent.trim(), tpl.dataset.pgbusToast);
-        tpl.remove();
-      });
-    }
-    renderFlashToasts();
-    document.addEventListener("turbo:load", renderFlashToasts);
-
-    <% if Pgbus.configuration.web_live_updates %>
-    const interval = <%= Pgbus.configuration.web_refresh_interval %>;
-    if (interval > 0) {
-      let timer;
-      function refreshFrames() {
-        if (document.hidden) return;
-        document.querySelectorAll("turbo-frame[data-auto-refresh]")
-          .forEach(frame => {
-            try {
-              if (!frame.src && frame.dataset.src) frame.src = frame.dataset.src;
-              if (frame.src) frame.reload();
-            } catch (_) { /* Turbo may abort in-flight fetches during navigation */ }
-          });
-      }
-      function start() { timer = setInterval(refreshFrames, interval); }
-      function stop() { clearInterval(timer); }
-      document.addEventListener("visibilitychange", () => document.hidden ? stop() : start());
-      start();
-    }
-    <% end %>
+  <script type="module" nonce="<%= content_security_policy_nonce %>">
+    import "application";
   </script>
 </head>
-<body class="h-full bg-gray-50 dark:bg-gray-950 transition-colors">
+<body class="h-full bg-gray-50 dark:bg-gray-950 transition-colors"
+      <% if Pgbus.configuration.web_live_updates %>data-pgbus-refresh-interval="<%= Pgbus.configuration.web_refresh_interval %>"<% end %>>
+  <%# i18n data for JS modules %>
+  <div id="pgbus-i18n" class="hidden"
+       data-delete-title="<%= t("pgbus.dialogs.delete_title", default: "Delete") %>"
+       data-confirm-title="<%= t("pgbus.dialogs.confirm_title", default: "Are you sure?") %>"
+       data-delete-label="<%= t("pgbus.dialogs.delete", default: "Delete") %>"
+       data-confirm-label="<%= t("pgbus.dialogs.confirm", default: "Confirm") %>"></div>
   <div class="min-h-full">
     <!-- Top nav -->
     <nav class="bg-gray-900 dark:bg-gray-950 border-b border-gray-800">

data/app/views/pgbus/insights/show.html.erb

@@ -51,6 +51,32 @@
   </div>
 </div>
 
+<% if @latency_available %>
+<!-- Latency summary cards -->
+<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 mb-8">
+  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.summary.avg_latency") %></dt>
+    <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_ms_duration(@summary[:avg_latency_ms]) %></dd>
+  </div>
+  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.summary.p50_latency") %></dt>
+    <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= pgbus_ms_duration(@summary[:p50_latency_ms]) %></dd>
+  </div>
+  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.summary.p95_latency") %></dt>
+    <dd class="mt-1 text-2xl font-semibold text-yellow-600 dark:text-yellow-400"><%= pgbus_ms_duration(@summary[:p95_latency_ms]) %></dd>
+  </div>
+  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.summary.p99_latency") %></dt>
+    <dd class="mt-1 text-2xl font-semibold text-orange-600 dark:text-orange-400"><%= pgbus_ms_duration(@summary[:p99_latency_ms]) %></dd>
+  </div>
+  <div class="rounded-lg bg-white dark:bg-gray-800 p-4 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <dt class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.summary.avg_retries") %></dt>
+    <dd class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white"><%= @summary[:avg_retries]&.round(2) || 0 %></dd>
+  </div>
+</div>
+<% end %>
+
 <!-- Charts -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
   <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
@@ -63,6 +89,46 @@
   </div>
 </div>
 
+<% if @latency_available %>
+<!-- Latency chart -->
+<div class="grid grid-cols-1 gap-6 mb-8">
+  <div class="rounded-lg bg-white dark:bg-gray-800 p-5 shadow ring-1 ring-gray-200 dark:ring-gray-700">
+    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4"><%= t("pgbus.insights.show.charts.latency") %></h3>
+    <div id="latency-chart" style="height: 280px;"></div>
+  </div>
+</div>
+
+<!-- Latency by queue -->
+<div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700 mb-8">
+  <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
+    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300"><%= t("pgbus.insights.show.latency_by_queue.title") %></h3>
+  </div>
+  <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+    <thead class="bg-gray-50 dark:bg-gray-900">
+      <tr>
+        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.latency_by_queue.headers.queue") %></th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.latency_by_queue.headers.count") %></th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.latency_by_queue.headers.avg") %></th>
+        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400"><%= t("pgbus.insights.show.latency_by_queue.headers.p95") %></th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+      <% @latency_by_queue.each do |row| %>
+        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+          <td data-label="Queue" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><%= row[:queue_name] %></td>
+          <td data-label="Count" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_number(row[:count]) %></td>
+          <td data-label="Avg" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:avg_ms]) %></td>
+          <td data-label="P95" class="px-4 py-3 text-sm text-right font-mono text-gray-700 dark:text-gray-300"><%= pgbus_ms_duration(row[:p95_ms]) %></td>
+        </tr>
+      <% end %>
+      <% if @latency_by_queue.empty? %>
+        <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500"><%= t("pgbus.insights.show.latency_by_queue.empty") %></td></tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+<% end %>
+
 <!-- Slowest job classes -->
 <div class="rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
   <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -93,91 +159,31 @@
   </table>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/apexcharts@4"></script>
-<script>
-(function() {
-  // IIFE prevents "redeclaration of let" when Turbo re-executes on navigation
-  var throughputChart, statusChart;
-
-  function getThemeColors() {
-    var isDark = document.documentElement.classList.contains('dark');
-    return {
-      isDark: isDark,
-      text: isDark ? '#9ca3af' : '#6b7280',
-      grid: isDark ? '#374151' : '#e5e7eb',
-      tooltip: isDark ? 'dark' : 'light',
-      dataLabel: isDark ? '#fff' : '#000'
-    };
-  }
-
-  function renderCharts(data) {
-    var t = getThemeColors();
+<script type="module" nonce="<%= content_security_policy_nonce %>">
+  import { renderCharts, observeThemeChanges } from "charts";
 
-    if (throughputChart) throughputChart.destroy();
-    if (statusChart) statusChart.destroy();
+  const i18n = {
+    seriesName: "<%= j(t("pgbus.insights.show.charts.series_name")) %>",
+    noData: "<%= j(t("pgbus.insights.show.charts.no_data")) %>",
+    failedToLoad: "<%= j(t("pgbus.insights.show.charts.failed_to_load")) %>",
+    latencyAvg: "<%= j(t("pgbus.insights.show.charts.latency_avg")) %>",
+    latencyP95: "<%= j(t("pgbus.insights.show.charts.latency_p95")) %>",
+  };
 
-    var throughputData = data.throughput.map(function(p) {
-      return { x: new Date(p.time).getTime(), y: p.count };
-    });
+  let chartData = null;
 
-    throughputChart = new ApexCharts(document.querySelector('#throughput-chart'), {
-      series: [{ name: '<%= j(t("pgbus.insights.show.charts.series_name")) %>', data: throughputData }],
-      chart: { type: 'area', height: 280, toolbar: { show: false }, background: 'transparent', foreColor: t.text },
-      stroke: { curve: 'smooth', width: 2 },
-      fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05, stops: [0, 100] } },
-      colors: ['#6366f1'],
-      xaxis: { type: 'datetime', labels: { style: { colors: t.text } } },
-      yaxis: { labels: { style: { colors: t.text } } },
-      grid: { borderColor: t.grid },
-      tooltip: { theme: t.tooltip },
-      dataLabels: { enabled: false }
-    });
-    throughputChart.render();
+  observeThemeChanges(() => chartData, i18n);
 
-    var statusLabels = Object.keys(data.status_counts);
-    var statusValues = Object.values(data.status_counts);
-    var statusColors = statusLabels.map(function(s) {
-      if (s === 'success') return '#10b981';
-      if (s === 'failed') return '#ef4444';
-      if (s === 'dead_lettered') return '#f97316';
-      return '#6b7280';
-    });
-
-    if (statusLabels.length > 0) {
-      statusChart = new ApexCharts(document.querySelector('#status-chart'), {
-        series: statusValues, labels: statusLabels,
-        chart: { type: 'donut', height: 280, background: 'transparent', foreColor: t.text },
-        colors: statusColors,
-        legend: { position: 'bottom', labels: { colors: t.text } },
-        plotOptions: { pie: { donut: { size: '60%' } } },
-        dataLabels: { style: { colors: [t.dataLabel] } },
-        tooltip: { theme: t.tooltip }
-      });
-      statusChart.render();
-    } else {
-      document.querySelector('#status-chart').innerHTML =
-        '<p class="text-center text-sm text-gray-400 dark:text-gray-500 pt-24"><%= j(t("pgbus.insights.show.charts.no_data")) %></p>';
-    }
-  }
-
-  var chartData = null;
-  fetch('<%= pgbus.api_insights_path(minutes: @minutes) %>')
-    .then(function(r) {
-      if (!r.ok) throw new Error('HTTP ' + r.status);
+  fetch("<%= pgbus.api_insights_path(minutes: @minutes) %>")
+    .then(r => {
+      if (!r.ok) throw new Error("HTTP " + r.status);
       return r.json();
     })
-    .then(function(data) { chartData = data; renderCharts(data); })
-    .catch(function(err) {
-      if (err.name === 'AbortError') return;
-      var msg = '<p class="text-center text-sm text-gray-400 dark:text-gray-500 pt-24"><%= j(t("pgbus.insights.show.charts.failed_to_load")) %></p>';
-      var el1 = document.querySelector('#throughput-chart');
-      var el2 = document.querySelector('#status-chart');
-      if (el1) el1.innerHTML = msg;
-      if (el2) el2.innerHTML = msg;
+    .then(data => { chartData = data; renderCharts(data, i18n); })
+    .catch(err => {
+      const msg = '<p class="text-center text-sm text-gray-400 dark:text-gray-500 pt-24">' + i18n.failedToLoad + "</p>";
+      document.querySelectorAll("#throughput-chart, #status-chart, #latency-chart").forEach(el => {
+        el.innerHTML = msg;
+      });
     });
-
-  new MutationObserver(function() {
-    if (chartData) renderCharts(chartData);
-  }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-})();
 </script>

data/app/views/pgbus/jobs/_enqueued_table.html.erb

@@ -1,6 +1,13 @@
 <turbo-frame id="jobs-enqueued" data-auto-refresh data-src="<%= pgbus.jobs_path(request.query_parameters.merge(frame: 'enqueued')) %>">
   <div>
-    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"><%= t("pgbus.jobs.enqueued_table.title") %></h2>
+    <div class="flex items-center justify-between mb-3">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white"><%= t("pgbus.jobs.enqueued_table.title") %></h2>
+      <% if @jobs.any? %>
+        <%= button_to t("pgbus.jobs.enqueued_table.discard_all"), pgbus.discard_all_enqueued_jobs_path, method: :post,
+              class: "rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-500",
+              data: { turbo_confirm: t("pgbus.jobs.enqueued_table.discard_all_confirm"), turbo_frame: "_top" } %>
+      <% end %>
+    </div>
     <div class="overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow ring-1 ring-gray-200 dark:ring-gray-700">
       <table class="pgbus-table min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <thead class="bg-gray-50 dark:bg-gray-900">

data/config/locales/da.yml

@@ -179,6 +179,8 @@ da:
         title: Job i kø
         discard: Kassér
         discard_confirm: Kassér denne besked?
+        discard_all: Kassér alle
+        discard_all_confirm: Kassér alle ventende jobs og frigiv deres låse? Dette kan ikke fortrydes.
         retry: Prøv igen
         retry_confirm: Nulstil synlighedstimeout og prøv igen?
       failed_table:
@@ -197,6 +199,7 @@ da:
       index:
         discard_all: Kassér alle
         discard_all_confirm: Kassér alle mislykkede job?
+        discard_all_enqueued_notice: Kasserede %{count} ventende jobs og frigav deres låse.
         retry_all: Forsøg alle igen
         retry_all_confirm: Forsøg alle mislykkede job igen?
         title: Job

data/config/locales/de.yml

@@ -179,6 +179,8 @@ de:
         title: Eingereihte Jobs
         discard: Verwerfen
         discard_confirm: Diese Nachricht verwerfen?
+        discard_all: Alle verwerfen
+        discard_all_confirm: Alle eingereihten Jobs verwerfen und ihre Sperren freigeben? Dies kann nicht rückgängig gemacht werden.
         retry: Wiederholen
         retry_confirm: Sichtbarkeits-Timeout zurücksetzen und erneut versuchen?
       failed_table:
@@ -197,6 +199,7 @@ de:
       index:
         discard_all: Alle verwerfen
         discard_all_confirm: Alle fehlgeschlagenen Jobs verwerfen?
+        discard_all_enqueued_notice: "%{count} eingereihte Jobs verworfen und Sperren freigegeben."
         retry_all: Alle wiederholen
         retry_all_confirm: Alle fehlgeschlagenen Jobs wiederholen?
         title: Jobs

data/config/locales/en.yml

@@ -128,11 +128,22 @@ en:
       show:
         charts:
           failed_to_load: Failed to load chart data
+          latency: Queue Latency (ms)
+          latency_avg: Avg
+          latency_p95: P95
           no_data: No data yet
           series_name: Jobs/min
           status_distribution: Status Distribution
           throughput: Throughput (jobs/min)
         description_html: Job performance metrics for the last %{range}
+        latency_by_queue:
+          empty: No latency data yet
+          headers:
+            avg: Avg (ms)
+            count: Count
+            p95: P95 (ms)
+            queue: Queue
+          title: Latency by Queue
         slowest:
           empty: No job stats yet
           headers:
@@ -143,9 +154,14 @@ en:
           title: Slowest Job Classes (avg duration)
         summary:
           avg_duration: Avg Duration
+          avg_latency: Avg Latency
+          avg_retries: Avg Retries
           dead_lettered: Dead Lettered
           failed: Failed
           max_duration: Max Duration
+          p50_latency: P50 Latency
+          p95_latency: P95 Latency
+          p99_latency: P99 Latency
           succeeded: Succeeded
           total_jobs: Total Jobs
         time_ranges:
@@ -177,6 +193,8 @@ en:
           timezone: 'Timezone:'
           visible_at: 'Visible at:'
         discard: Discard
+        discard_all: Discard All
+        discard_all_confirm: Discard all enqueued jobs and release their locks? This cannot be undone.
         discard_confirm: Discard this message?
         retry: Retry
         retry_confirm: Reset visibility timeout and retry?
@@ -197,6 +215,7 @@ en:
       index:
         discard_all: Discard All
         discard_all_confirm: Discard all failed jobs?
+        discard_all_enqueued_notice: Discarded %{count} enqueued jobs and released their locks.
         retry_all: Retry All
         retry_all_confirm: Retry all failed jobs?
         title: Jobs

data/config/locales/es.yml

@@ -179,6 +179,8 @@ es:
         title: Trabajos en Cola
         discard: Descartar
         discard_confirm: "¿Descartar este mensaje?"
+        discard_all: Descartar todos
+        discard_all_confirm: "¿Descartar todos los trabajos en cola y liberar sus bloqueos? Esta acción no se puede deshacer."
         retry: Reintentar
         retry_confirm: "¿Restablecer tiempo de visibilidad y reintentar?"
       failed_table:
@@ -197,6 +199,7 @@ es:
       index:
         discard_all: Descartar Todo
         discard_all_confirm: "¿Descartar todos los trabajos fallidos?"
+        discard_all_enqueued_notice: Se descartaron %{count} trabajos en cola y se liberaron sus bloqueos.
         retry_all: Reintentar Todo
         retry_all_confirm: "¿Reintentar todos los trabajos fallidos?"
         title: Trabajos

data/config/locales/fi.yml

@@ -179,6 +179,8 @@ fi:
         title: Jonotetut työt
         discard: Hylkää
         discard_confirm: Hylätä tämä viesti?
+        discard_all: Hylkää kaikki
+        discard_all_confirm: Hylkää kaikki jonossa olevat tehtävät ja vapauta lukot? Tätä ei voi perua.
         retry: Yritä uudelleen
         retry_confirm: Nollaa näkyvyysaika ja yritä uudelleen?
       failed_table:
@@ -197,6 +199,7 @@ fi:
       index:
         discard_all: Hylkää kaikki
         discard_all_confirm: Hylätäänkö kaikki epäonnistuneet työt?
+        discard_all_enqueued_notice: Hylättiin %{count} jonossa olevaa tehtävää ja vapautettiin lukot.
         retry_all: Yritä uudelleen kaikki
         retry_all_confirm: Yritetäänkö uudelleen kaikki epäonnistuneet työt?
         title: Työt