roundhouse_ui 0.9.1 → 0.11.0

data/app/views/roundhouse_ui/busy/index.html.erb

@@ -1,21 +1,45 @@
 <% content_for :title, "Busy" %>
 
+<%# Cancellation is inert unless the host installed the middleware or polls
+    cancelled? itself, so the column only exists where the flag says it works. %>
+<% cancellable = RoundhouseUi.cancel_enabled && RoundhouseUi.backend.supports?(:cancel) %>
 <h2 class="rh-h2">Busy <span class="hint"><%= @work.size %> <%= "job".pluralize(@work.size) %> running now</span></h2>
 <table class="rh-table">
-  <thead><tr><th>Job</th><th>Queue</th><th>Worker</th><th class="r">Running for</th><th class="r">Actions</th></tr></thead>
+  <thead><tr><th>Job</th><th>Queue</th><th>Worker</th><th>Running for</th><th class="r">vs typical</th><% if cancellable %><th class="r">Actions</th><% end %></tr></thead>
   <tbody>
     <% if @work.empty? %>
-      <tr><td colspan="5" class="rh-empty">No jobs running right now.</td></tr>
+      <tr><td colspan="<%= cancellable ? 6 : 5 %>" class="rh-empty">No jobs running right now.</td></tr>
     <% else %>
       <% @work.each do |w| %>
         <% elapsed = (Time.now - w[:run_at]).to_i %>
         <% long = elapsed >= @threshold %>
-        <tr>
-          <td><%= w[:job].klass %><br><span class="rh-sub"><%= w[:job].jid %></span></td>
+        <%# Elapsed against what is normal for THIS class, where we know it.
+            A ratio answers "is this wrong" where a duration only answers "how
+            long", and those are different questions on a page about hangs. %>
+        <% typical = @typical[RoundhouseUi.unwrapped_class(w[:job].klass, w[:job].item)] %>
+        <% ratio = typical.to_f.positive? ? elapsed / typical : nil %>
+        <% sev = if ratio.nil? then (long ? "warn" : "ok")
+                 elsif ratio > 2.5 then "crit"
+                 elsif ratio > 1 then "warn"
+                 else "ok" end %>
+        <tr data-rh-sev="<%= sev %>">
+          <td><%= job_display_class(w[:job]) %><br><span class="rh-sub"><%= w[:job].jid %></span></td>
           <td><span class="rh-sub"><%= w[:queue] %></span></td>
           <td><span class="rh-sub"><%= w[:process] %></span></td>
-          <td class="r rh-mono <%= "rh-lat-warn" if long %>"><%= elapsed < 60 ? "#{elapsed}s" : distance_of_time_in_words(0, elapsed) %><%= " ⚠" if long %></td>
-          <td class="r"><%= button_to "Cancel", cancel_job_path(w[:job].jid), method: :post, class: "rh-btn rh-btn-danger", form_class: "rh-inline", data: { turbo_confirm: "Request cancellation of #{w[:job].jid}? Cooperative jobs abort; others are skipped on their next attempt." } %></td>
+          <td class="rh-mono"><%= duration(elapsed) %></td>
+          <td class="r">
+            <div class="rh-elapsed">
+              <div class="t" data-rh-sev="<%= sev %>">
+                <i style="width:<%= ratio ? [ ratio * 100, 100 ].min.round(1) : [ elapsed.to_f / @threshold * 100, 100 ].min.round(1) %>%"></i>
+              </div>
+              <span class="n rh-sub">
+                <%= if ratio then "×#{ratio.round(1)}"
+                    elsif RoundhouseUi.collect_durations then "no baseline"
+                    else "—" end %>
+              </span>
+            </div>
+          </td>
+          <% if cancellable %><td class="r"><%= button_to "Cancel", cancel_job_path(w[:job].jid), method: :post, class: "rh-btn rh-btn-danger", form_class: "rh-inline", data: { turbo_confirm: "Request cancellation of #{w[:job].jid}? Cooperative jobs abort; others are skipped on their next attempt." } %></td><% end %>
         </tr>
       <% end %>
     <% end %>

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

@@ -2,44 +2,55 @@
 <% content_for :crumb, Rails.env %>
 
 <% verdict = { ok: "Healthy", warn: "Degraded", crit: "Critical" }[@health.status] %>
-<details class="rh-health rh-health-<%= @health.status %>"<%= " open".html_safe unless @health.healthy? %>>
-  <summary>
-    <span class="rh-health-dot"></span>
+<%# Verdict, then one tile per check. Failing checks lead — same worst-first
+    rule the Queues page uses, because the order is information. No disclosure:
+    three rows do not need collapsing, and hiding the signals hides the answer. %>
+<% ranked = @health.ranked_signals %>
+<% failing = @health.failing_count %>
+<section class="rh-health is-<%= @health.status %>" aria-label="System health">
+  <div class="rh-health-top">
     <span class="rh-health-verdict"><%= verdict %></span>
     <span class="rh-health-reason"><%= @health.reason %></span>
-    <span class="rh-health-cta">why ▾</span>
-  </summary>
-  <div class="rh-health-signals">
-    <% @health.signals.each do |s| %>
-      <div class="rh-sig">
-        <span class="rh-st rh-st-<%= s.status %>"><%= s.status %></span>
-        <b><%= s.label %></b>
-        <span class="rh-sub"><%= s.detail %></span>
-      </div>
-    <% end %>
+    <span class="rh-health-meta">
+      <%= pluralize(ranked.size, "check") %><%= " · #{failing} failing" if failing.positive? %>
+    </span>
   </div>
-</details>
+  <% if ranked.any? %>
+    <div class="rh-health-signals">
+      <% ranked.each do |s| %>
+        <div class="rh-sig" data-rh-sev="<%= s.status %>">
+          <span class="rh-sig-name"><%= icon(s.status == :ok ? :ok : :warn) %><%= s.label %></span>
+          <span class="rh-sig-detail"><%= s.detail %></span>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</section>
 
 <div class="rh-cards">
   <div class="rh-card">
     <div class="k">Processed</div>
     <div class="v num" data-stat="processed"><%= number_with_delimiter @stats.processed %></div>
     <div class="d"><span class="num" data-stat="rate">—</span> / min · <%= ((1 - @metrics.failure_ratio) * 100).round(1) %>% ok</div>
+    <canvas data-rh-card="processed" width="300" height="52" aria-hidden="true" title="Processed per interval — the running total only goes up"></canvas>
   </div>
   <div class="rh-card">
     <div class="k">Failed · total</div>
     <div class="v num" data-stat="failed"><%= number_with_delimiter @stats.failed %></div>
     <div class="d bad"><span class="num" data-stat="dead"><%= number_with_delimiter @stats.dead_size %></span> dead · <%= (@metrics.failure_ratio * 100).round(1) %>% rate</div>
+    <canvas data-rh-card="failed" width="300" height="52" aria-hidden="true" title="Failures per interval — the running total only goes up"></canvas>
   </div>
   <div class="rh-card">
     <div class="k">Busy threads</div>
     <div class="v num" data-stat="busy"><%= @stats.workers_size %></div>
     <div class="d"><%= @metrics.utilization ? "#{(@metrics.utilization * 100).round}% of #{@metrics.concurrency} busy" : "no workers reporting" %></div>
+    <canvas data-rh-card="busy" width="300" height="52" aria-hidden="true"></canvas>
   </div>
   <div class="rh-card">
     <div class="k">Backlog</div>
     <div class="v num"><%= number_with_delimiter @metrics.backlog %></div>
     <div class="d">enqueued <span class="num" data-stat="enqueued"><%= number_with_delimiter @stats.enqueued %></span> · scheduled <span class="num" data-stat="scheduled"><%= number_with_delimiter @stats.scheduled_size %></span></div>
+    <canvas data-rh-card="backlog" width="300" height="52" aria-hidden="true"></canvas>
   </div>
 </div>
 
@@ -52,12 +63,15 @@
 <div class="rh-insights">
   <div class="rh-panel rh-insight">
     <div class="rh-insight-h">Top failing job classes <%= link_to "all errors →", errors_path, class: "rh-sub" %></div>
+    <%# One legend, not one vendor lockup per row. Five stacked wordmarks read as
+        five logos; the same legend-plus-icon treatment the Errors page uses. %>
+    <div class="rh-insight-legend"><%= trace_legend(@top_errors) %></div>
     <% if @top_errors.empty? %>
       <div class="rh-empty">No failing jobs 🎉</div>
     <% else %>
       <% @top_errors.each do |g| %>
         <div class="rh-insight-row">
-          <div class="rh-insight-main"><%= link_to g[:klass], errors_path(q: g[:klass]), class: "rh-joblink" %> <%= error_trace_link(klass: g[:klass], error: g[:error]) %><br><span class="rh-err"><%= g[:error] %></span></div>
+          <div class="rh-insight-main"><%= link_to g[:klass], errors_path(q: g[:klass]), class: "rh-joblink" %> <%= tag_badges(tags_for_class(g[:klass])) %> <%= error_trace_icon(klass: g[:klass], error: g[:error]) %><br><span class="rh-err"><%= g[:error] %></span></div>
           <span class="rh-pill"><%= number_with_delimiter g[:count] %></span>
         </div>
       <% end %>
@@ -73,13 +87,44 @@
         <% label, css = queue_state(q.latency) %>
         <div class="rh-insight-row">
           <div class="rh-insight-main"><%= link_to q.name, queues_path, class: "rh-joblink rh-mono" %><br><span class="rh-sub"><%= number_with_delimiter q.size %> waiting</span></div>
-          <span class="rh-st <%= css %>"><%= q.latency < 60 ? "#{q.latency.round(1)}s" : distance_of_time_in_words(0, q.latency) %></span>
+          <span class="rh-st <%= css %>"><%= duration(q.latency) %></span>
         </div>
       <% end %>
     <% end %>
   </div>
 </div>
 
+<%# Daily history, from the counters Sidekiq already keeps. The live throughput
+    chart above answers "what is happening"; this answers "is that normal",
+    which nothing in Roundhouse could answer before. %>
+<% if @history.present? %>
+  <div class="rh-chart-wrap">
+    <div class="top">
+      <h3>History</h3>
+      <span class="rh-sub">daily · processed and failure rate</span>
+      <span class="rh-hist-ranges">
+        <% RoundhouseUi::History::RANGES.each do |days, label| %>
+          <%= link_to label, root_path(history: days),
+                class: "rh-qf#{' is-on' if @history_days == days.to_i}" %>
+        <% end %>
+      </span>
+    </div>
+    <canvas id="rh-history"
+            width="1100" height="150"
+            data-rh-history="<%= @history.map { |d| { d: d.date, p: d.processed, f: d.failed, r: d.failure_rate.round(5) } }.to_json %>"
+            data-rh-typical="<%= @typical_failure_rate %>"
+            aria-hidden="true"></canvas>
+    <div class="rh-hist-legend">
+      <span><i class="rh-swatch is-proc"></i>processed</span>
+      <span><i class="rh-swatch is-rate"></i>failure rate</span>
+      <% if @typical_failure_rate %>
+        <span class="rh-sub">typical <%= (@typical_failure_rate * 100).round(2) %>%</span>
+      <% end %>
+      <span class="rh-sub rh-hist-hover" id="rh-hist-read"></span>
+    </div>
+  </div>
+<% end %>
+
 <h2 class="rh-h2">Queues <span class="hint">live · click a queue to manage</span></h2>
 <table class="rh-table">
   <thead><tr><th>Queue</th><th>State</th><th class="r">Depth</th><th class="r">Oldest job</th><th></th></tr></thead>
@@ -93,7 +138,7 @@
           <td class="rh-mono"><%= q.name %></td>
           <td><span class="rh-st <%= css %>"><%= label %></span></td>
           <td class="r rh-mono"><%= number_with_delimiter q.size %></td>
-          <td class="r rh-mono <%= "rh-lat-warn" if q.latency > 60 %>"><%= q.latency < 60 ? "#{q.latency.round(1)}s" : "#{distance_of_time_in_words(0, q.latency)}" %></td>
+          <td class="r rh-mono <%= "rh-lat-warn" if q.latency > 60 %>"><%= duration(q.latency) %></td>
           <td class="r"><%= link_to "Manage →", queues_path, class: "rh-btn" %></td>
         </tr>
       <% end %>

data/app/views/roundhouse_ui/dead/index.html.erb

@@ -1,54 +1,76 @@
 <% content_for :title, "Dead set" %>
 
-<form method="get" action="<%= dead_set_path %>" class="rh-search">
-  <input type="search" name="q" value="<%= @query %>" placeholder="search class, jid, error, or arg value…">
-</form>
+<%= render "roundhouse_ui/shared/search_bar", action: dead_set_path,
+      noun: "class, jid, error or arguments" %>
 
-<h2 class="rh-h2">Dead set · <%= number_with_delimiter @total %> jobs</h2>
+<%= render "roundhouse_ui/shared/filter_error" %>
+<%= render "roundhouse_ui/shared/tag_filter" %>
 
-<% if @query.present? %>
-  <div class="rh-bulkbar">
-    <%= button_to "↻ Retry all matching", bulk_all_dead_path, method: :post, params: { op: "retry", q: @query }, class: "rh-btn", form_class: "rh-inline", data: { turbo_confirm: "Retry every dead job matching “#{@query}” (up to #{RoundhouseUi::JobSetBrowsing::BULK_CAP})?" } %>
-    <%= button_to "✕ Delete all matching", bulk_all_dead_path, method: :post, params: { op: "delete", q: @query }, class: "rh-btn rh-btn-danger", form_class: "rh-inline", data: { turbo_confirm: "Permanently delete every dead job matching “#{@query}” (up to #{RoundhouseUi::JobSetBrowsing::BULK_CAP})?" } %>
-    <span class="rh-sub">acts on every match for “<%= @query %>”, not just this page</span>
-  </div>
-<% end %>
+<%= set_heading("Dead set", showing: @jobs.size, total: @total, query: @query, tag: @tag) %>
 
-<%= form_with url: bulk_dead_path, method: :post, data: { turbo: false } do %>
-  <div class="rh-bulkbar">
-    <button type="submit" name="op" value="retry" class="rh-btn">↻ Retry selected</button>
-    <button type="submit" name="op" value="delete" class="rh-btn rh-btn-danger">✕ Delete selected</button>
-    <span class="rh-sub">tick rows, then choose an action</span>
+<%# One toolbar, two scopes. They used to be stacked bars whose captions were the
+    only thing distinguishing "the rows you ticked" from "every job that matches",
+    which is a dangerous distinction to bury. The selected-rows buttons live here
+    but submit the form wrapping the table, via the HTML form= attribute. %>
+<div class="rh-actionbar">
+  <div class="rh-actiongroup">
+    <span class="rh-actionlabel">Selected rows</span>
+    <button type="submit" form="rh-bulk-dead" name="op" value="retry" class="rh-btn">↻ Retry</button>
+    <button type="submit" form="rh-bulk-dead" name="op" value="delete" class="rh-btn rh-btn-danger">✕ Delete</button>
   </div>
+
+  <% if any_filter?(@query, @tag) %>
+    <div class="rh-actiongroup">
+      <span class="rh-actionlabel" title="<%= filter_description(@query, @tag) %>">
+        All <%= number_with_delimiter @total %> <%= filter_description(@query, @tag) %>
+      </span>
+      <%= link_to "↻ Retry", preview_bulk_dead_path(**filter_params(op: "retry")), class: "rh-btn" %>
+      <%= link_to "✕ Delete", preview_bulk_dead_path(**filter_params(op: "delete")), class: "rh-btn rh-btn-danger" %>
+    </div>
+  <% end %>
+</div>
+
+<%# The form is EMPTY and sits beside the table, not around it. Wrapping the table
+    nested every row's button_to form inside this one, which is invalid HTML: the
+    parser closes the outer form at the first </form>, so the bulk form swallowed
+    the first row's authenticity_token. Two tokens in one submission and Rails
+    takes the last — a per-form token scoped to a row action, not to /dead/bulk —
+    so every bulk action failed with InvalidAuthenticityToken while carrying a
+    token that looked perfectly valid. The checkboxes join it by id instead, the
+    same HTML form= association the toolbar buttons above already use. %>
+<%= form_with url: bulk_dead_path, method: :post, id: "rh-bulk-dead", data: { turbo: false } do %><% end %>
+
+<%= trace_legend(@jobs) %>
   <table class="rh-table">
-    <thead><tr><th style="width:28px"><input type="checkbox" id="rh-all" aria-label="select all"></th><th>Job</th><th>Last error</th><th class="r">Died</th></tr></thead>
+    <thead><tr><th style="width:28px"><input type="checkbox" id="rh-all" aria-label="select all"></th><th>Job</th><% if tag_column? %><th><%= tag_column_label %></th><% end %><th>Queue</th><th>Last error</th><th class="r">Died</th><th class="r">Actions</th></tr></thead>
     <tbody>
       <% if @jobs.empty? %>
-        <tr><td colspan="4" class="rh-empty"><%= @query.present? ? "No dead jobs match “#{@query}”." : "Dead set is empty 🎉" %></td></tr>
+        <tr><td colspan="<%= tag_column? ? 7 : 6 %>" class="rh-empty"><%= empty_state(@query, @tag, noun: "dead jobs", all_clear: "Dead set is empty 🎉") %></td></tr>
       <% else %>
         <% @jobs.each do |job| %>
           <tr>
-            <td><input type="checkbox" name="jids[]" value="<%= job.jid %>" class="rh-check" aria-label="select <%= job.jid %>"></td>
-            <td><%= link_to job.klass, job_path(set: "dead", jid: job.jid), class: "rh-joblink" %><br><span class="rh-sub"><%= job.jid %></span> <%= trace_link(klass: job.klass, jid: job.jid, queue: job.queue) %><% if RoundhouseUi.allow_job_editing %> <%= link_to "edit", edit_job_path(set: "dead", jid: job.jid), class: "rh-trace" %><% end %></td>
+            <td><input type="checkbox" form="rh-bulk-dead" name="jids[]" value="<%= job.jid %>" class="rh-check" aria-label="select <%= job.jid %>"></td>
+            <td><%= job_identity(job_display_class(job), job.jid, job_path(set: "dead", jid: job.jid)) %></td>
+            <% if tag_column? %><td><%= tag_cell(tags_for(job)) %></td><% end %>
+            <td><%= queue_pill(job.queue, link: true) %></td>
             <td>
               <span class="rh-err"><%= job.item["error_class"] %></span>
-              <% if job.item["error_message"].present? %><br><span class="rh-sub"><%= truncate(job.item["error_message"], length: 90) %></span><% end %>
+              <% if job.item["error_message"].present? %><br><span class="rh-sub" title="<%= job.item["error_message"] %>"><%= truncate(job.item["error_message"], length: 90) %></span><% end %>
+            </td>
+            <td class="r"><%= job_time(job.at, overdue: "#{time_ago_in_words(job.at)} ago") %></td>
+            <td class="r rh-cell-actions">
+              <%= find_like_link("dead", job) %>
+              <%= trace_icon(klass: job_display_class(job), jid: job.jid, queue: job.queue) %>
+              <% if job_editing? %><%= link_to "Edit", edit_job_path(set: "dead", jid: job.jid), class: "rh-btn" %><% end %>
+              <%= button_to "Retry", retry_dead_job_path(job.jid), method: :post, class: "rh-btn", form_class: "rh-inline" %>
+              <%= button_to "Delete", delete_dead_job_path(job.jid), method: :post, class: "rh-btn rh-btn-danger", form_class: "rh-inline", data: { turbo_confirm: "Delete #{job.jid}?" } %>
             </td>
-            <td class="r"><%= time_ago_in_words(job.at) %> ago</td>
           </tr>
         <% end %>
       <% end %>
     </tbody>
   </table>
-<% end %>
 <%= render "roundhouse_ui/shared/pager" %>
 
-<script nonce="<%= content_nonce %>">
-  (function () {
-    var all = document.getElementById("rh-all");
-    if (!all) return;
-    all.addEventListener("change", function () {
-      document.querySelectorAll(".rh-check").forEach(function (cb) { cb.checked = all.checked; });
-    });
-  })();
-</script>
+<%# The select-all handler lives in the layout head, delegated from document, so
+    it survives Turbo body swaps. Don't reintroduce a body script here. #26 %>

data/app/views/roundhouse_ui/errors/index.html.erb

@@ -1,23 +1,63 @@
 <% content_for :title, "Errors" %>
 
-<form method="get" action="<%= errors_path %>" class="rh-search">
-  <input type="search" name="q" value="<%= @query %>" placeholder="filter by job class or error…">
-</form>
+<%= render "roundhouse_ui/shared/search_bar", action: errors_path,
+      keys: RoundhouseUi::ErrorsController::FILTER_KEYS,
+      noun: "class, error or squad" %>
+<%= render "roundhouse_ui/shared/filter_error" %>
 
-<h2 class="rh-h2">Errors · <%= @groups.size %> issues</h2>
+<%# Counts come from the same scan that built the groups, so this costs no extra
+    Redis work. Each chip narrows the list below rather than sending you elsewhere. %>
+<%= render "roundhouse_ui/shared/tag_filter", counts: @tag_counts %>
+
+<h2 class="rh-h2">
+  Errors · <%= pluralize(@groups.size, "issue") %>
+  <% if @tag %><span class="hint">filtered to <%= @tag[0] %>: <%= @tag[1] %></span><% end %>
+</h2>
+
+<%= trace_legend(@groups) %>
 <table class="rh-table">
-  <thead><tr><th>Issue</th><th class="r">Occurrences</th><th>In</th><th>Queues</th><th class="r">Last seen</th></tr></thead>
+  <thead>
+    <tr>
+      <th>Issue</th>
+      <% if tag_column? %><th><%= tag_column_label %></th><% end %>
+      <th class="r">Occurrences</th>
+      <th>In</th>
+      <th>Queues</th>
+      <th class="r">Last seen</th>
+    </tr>
+  </thead>
   <tbody>
     <% if @groups.empty? %>
-      <tr><td colspan="5" class="rh-empty"><%= @query.present? ? "No issues match “#{@query}”." : "No failing jobs 🎉" %></td></tr>
+      <tr><td colspan="<%= tag_column? ? 6 : 5 %>" class="rh-empty">
+        <%= empty_state(@query, @tag, noun: "issues", all_clear: "No failing jobs 🎉") %>
+      </td></tr>
     <% else %>
+      <%# Occurrences carry magnitude as well as a figure: 340 and 2 should not
+          look the same when you are scanning for the one that matters. Severity
+          is by share of the total, since "a lot" is relative to the page. %>
+      <% worst = @groups.map { |x| x[:count].to_i }.max || 0 %>
       <% @groups.each do |g| %>
-        <tr>
-          <td><%= g[:klass] %> <%= error_trace_link(klass: g[:klass], error: g[:error]) %><br><span class="rh-err"><%= g[:error] %></span></td>
-          <td class="r"><%= number_with_delimiter g[:count] %></td>
+        <% share = worst.positive? ? g[:count].to_f / worst : 0 %>
+        <tr data-rh-sev="<%= share >= 0.5 ? "crit" : share >= 0.15 ? "warn" : "ok" %>">
+          <td><%= g[:klass] %> <%= error_trace_icon(klass: g[:klass], error: g[:error]) %>
+            <%# The grouped rows are where someone lands during an incident, so the
+                runbook belongs here as much as on the individual job. %>
+            <%= runbook_link(g[:klass], label: "runbook") %>
+            <br><span class="rh-err"><%= g[:error] %></span></td>
+          <% if tag_column? %><td><%= tag_cell(@group_tags[g[:klass]]) %></td><% end %>
+          <td class="r">
+            <span class="rh-count" data-rh-sev="<%= share >= 0.5 ? "crit" : share >= 0.15 ? "warn" : "ok" %>"
+                  title="<%= number_with_delimiter g[:count] %><%= "+" if @truncated %> of <%= number_with_delimiter worst %><%= "+" if @truncated %> in the worst group<%= " — counts are floors, the scan stopped at #{number_with_delimiter @scan_limit}" if @truncated %>">
+              <i style="width:<%= (share * 100).round(1) %>%"></i>
+              <%# A truncated scan yields floors, not totals: the group holds at least
+                  this many. Printing an exact figure for a number we know is capped
+                  is the one thing the note below the table cannot fix. %>
+              <span><%= number_with_delimiter g[:count] %><%= "+" if @truncated %></span>
+            </span>
+          </td>
           <td><span class="rh-sub"><%= g[:sources].join(", ") %></span></td>
-          <td><span class="rh-sub"><%= g[:queues].join(", ") %></span></td>
-          <td class="r"><%= g[:last_at] ? "#{time_ago_in_words(g[:last_at])} ago" : "—" %></td>
+          <td><%= safe_join(g[:queues].map { |q| queue_pill(q) }, " ") %></td>
+          <td class="r"><%= job_time(g[:last_at], overdue: "#{time_ago_in_words(g[:last_at])} ago" ) if g[:last_at] %><%= content_tag(:span, "—", class: "rh-sub") unless g[:last_at] %></td>
         </tr>
       <% end %>
     <% end %>

data/app/views/roundhouse_ui/jobs/show.html.erb

@@ -1,11 +1,16 @@
-<% content_for :title, @entry.item["class"] %>
+<%# item binds first: the title needs it, and reading @entry.item["class"] above
+    this line would leave the two able to disagree. %>
 <% item = @entry.item %>
+<% content_for :title, RoundhouseUi.unwrapped_class(item["class"], item) %>
 
 <div class="rh-tags">
   <span class="rh-tag"><%= @set %></span>
   <span class="rh-tag">queue <%= @entry.queue %></span>
   <% if item["retry_count"] %><span class="rh-tag">retry <%= item["retry_count"] %></span><% end %>
+  <%= tag_badges(tags_for(@entry)) %>
   <span class="rh-tag rh-mono"><%= @entry.jid %></span>
+  <%# The person reading a failed job at 3am is rarely the person who wrote it. %>
+  <%= runbook_link(item["class"], item) %>
 </div>
 
 <div class="rh-sec">Arguments<% if RoundhouseUi.redact_args.present? %> <span class="rh-sub">— sensitive keys masked</span><% end %></div>
@@ -32,13 +37,13 @@
   <% end %>
 <% end %>
 
-<% trace = trace_link(klass: item["class"], jid: @entry.jid, queue: @entry.queue) %>
+<% trace = trace_link(klass: RoundhouseUi.unwrapped_class(item["class"], item), jid: @entry.jid, queue: @entry.queue) %>
 <% if trace.present? %>
   <div class="rh-sec">Observability</div>
   <%= trace %>
 <% end %>
 
 <div class="rh-pager">
-  <% if RoundhouseUi.allow_job_editing %><%= link_to "Edit", edit_job_path(set: @set, jid: @entry.jid), class: "rh-btn rh-btn-primary" %><% end %>
+  <% if job_editing? %><%= link_to "Edit", edit_job_path(set: @set, jid: @entry.jid), class: "rh-btn rh-btn-primary" %><% end %>
   <%= link_to "← Back", { "dead" => dead_set_path, "retry" => retries_path, "scheduled" => scheduled_path }[@set] || root_path, class: "rh-btn" %>
 </div>

data/app/views/roundhouse_ui/metrics/show.html.erb

@@ -46,6 +46,20 @@
     <div class="v num" id="rh-m-eta">—</div>
     <div class="d">backlog clears in, at current rate</div>
   </div>
+  <%# Capacity is deliberately whole-fleet rather than per queue: Sidekiq counts
+      processed jobs globally, so there is no honest way to say what share of
+      throughput belongs to one queue. See #36. %>
+  <div class="rh-card">
+    <div class="k">Capacity
+      <select id="rh-m-deadline" class="rh-btn rh-cap-pick" aria-label="Clear the backlog within">
+        <option value="900">15m</option>
+        <option value="3600" selected>1h</option>
+        <option value="14400">4h</option>
+      </select>
+    </div>
+    <div class="v num" id="rh-m-capacity">—</div>
+    <div class="d" id="rh-m-capacity-note">threads needed to clear in time</div>
+  </div>
 </div>
 
 <% if RoundhouseUi.collect_durations %>
@@ -54,14 +68,23 @@
     <div class="rh-panel"><div class="rh-empty">No durations recorded yet — jobs need to run with the collector middleware installed.</div></div>
   <% else %>
     <table class="rh-table">
-      <thead><tr><th>Job class</th><th class="r">Runs</th><th class="r">Avg</th><th class="r">Total time</th></tr></thead>
+      <thead><tr><th>Job class</th><th class="r">Runs</th><th class="r">Avg</th><th>Total time</th></tr></thead>
       <tbody>
+        <%# The point of "slowest classes" is proportion — this one class is most
+            of your compute — and proportion is a length, not a figure you compare
+            by reading down a column. %>
+        <% worst = @durations.map { |d| d[:total_ms].to_f }.max || 0 %>
         <% @durations.each do |d| %>
           <tr>
             <td class="rh-mono"><%= d[:klass] %></td>
             <td class="r rh-mono"><%= number_with_delimiter d[:count] %></td>
-            <td class="r rh-mono <%= "rh-lat-warn" if d[:avg_ms] >= 1000 %>"><%= d[:avg_ms] >= 1000 ? "#{(d[:avg_ms] / 1000).round(1)}s" : "#{d[:avg_ms].round}ms" %></td>
-            <td class="r rh-mono"><%= d[:total_ms] >= 1000 ? "#{(d[:total_ms] / 1000).round(1)}s" : "#{d[:total_ms].round}ms" %></td>
+            <td class="r rh-mono <%= "rh-lat-warn" if d[:avg_ms] >= 1000 %>"><%= duration_ms(d[:avg_ms]) %></td>
+            <td>
+              <div class="rh-dbar">
+                <div class="t"><i style="width:<%= worst.positive? ? (d[:total_ms].to_f / worst * 100).round(1) : 0 %>%"></i></div>
+                <span class="n"><%= duration_ms(d[:total_ms]) %></span>
+              </div>
+            </td>
           </tr>
         <% end %>
       </tbody>

data/app/views/roundhouse_ui/queues/index.html.erb

@@ -1,6 +1,11 @@
 <% content_for :title, "Queues" %>
 
-<% if RoundhouseUi.allow_job_editing %>
+<%= render "roundhouse_ui/shared/search_bar", action: queues_path,
+      keys: RoundhouseUi::QueuesController::INDEX_FILTER_KEYS,
+      noun: "queue names" %>
+<%= render "roundhouse_ui/shared/filter_error" %>
+
+<% if job_editing? %>
   <div class="rh-toolbar"><%= link_to "+ Enqueue job", new_job_path, class: "rh-btn rh-btn-primary" %></div>
 <% end %>
 
@@ -11,20 +16,59 @@
   </div>
 <% end %>
 
-<h2 class="rh-h2">Queues</h2>
+<%# State chips. A paused queue is the single most common thing an operator is
+    hunting for on this page — it is why work is not moving. Hidden where pausing
+    is turned off: filtering by a state you cannot set is a dead end. %>
+<% if RoundhouseUi.pause_enabled %>
+<div class="rh-quickfilters">
+  <%= link_to filter_url(state: nil, page: nil), class: "rh-qf#{' is-on' if @state.blank?}" do %>
+    All <span class="rh-qf-n"><%= @state_counts.values.sum %></span>
+  <% end %>
+  <%= link_to filter_url(state: "active", page: nil), class: "rh-qf#{' is-on' if @state == 'active'}" do %>
+    Active <span class="rh-qf-n"><%= @state_counts["active"] %></span>
+  <% end %>
+  <%= link_to filter_url(state: "paused", page: nil), class: "rh-qf#{' is-on' if @state == 'paused'}" do %>
+    Paused <span class="rh-qf-n"><%= @state_counts["paused"] %></span>
+  <% end %>
+</div>
+<% end %>
+
+<h2 class="rh-h2">Queues · <%= number_with_delimiter @total_size %> waiting<% if @query.present? %> <span class="hint">filtered to “<%= @query %>”</span><% end %><% if @state.present? %> <span class="hint"><%= @state %> only</span><% end %></h2>
 <table class="rh-table">
-  <thead><tr><th>Queue</th><th>State</th><th class="r">Size</th><th class="r">Latency</th><th class="r">Actions</th></tr></thead>
+  <thead><tr>
+    <th class="rh-sort" data-sort-col="0" data-sort-type="text">Queue</th>
+    <th class="rh-sort" data-sort-col="1" data-sort-type="text">State</th>
+    <th class="rh-sort r" data-sort-col="2" data-sort-type="num">Size</th>
+    <th class="rh-sort r" data-sort-col="3" data-sort-type="num">Latency</th>
+    <th class="rh-trend-h">Trend</th>
+    <th class="rh-sort" data-sort-col="5" data-sort-type="num">Forecast</th>
+    <th class="r">Actions</th>
+  </tr></thead>
   <tbody>
     <% if @queues.empty? %>
-      <tr><td colspan="5" class="rh-empty">No active queues</td></tr>
+      <tr><td colspan="7" class="rh-empty"><%= empty_state(@query, nil, noun: "queues", all_clear: "No active queues") %></td></tr>
     <% else %>
       <% @queues.each do |q| %>
         <% paused = @paused.include?(q.name) %>
-        <tr>
-          <td><%= q.name %></td>
-          <td><% if paused %><span class="rh-pill rh-pill-warn">paused</span><% else %><span class="rh-sub">active</span><% end %></td>
-          <td class="r"><%= number_with_delimiter q.size %></td>
-          <td class="r <%= "rh-lat-warn" if q.latency > 60 %>"><%= q.latency.round(2) %>s</td>
+        <% latency = q.latency %>
+        <%# data-rh-sev is set by the poll once a velocity exists; the server seeds
+            what it can already know so the stripe is not blank on first paint. %>
+        <tr data-rh-sev="<%= q.size.zero? ? "ok" : (latency > 600 ? "crit" : latency > 60 ? "warn" : "ok") %>">
+          <td data-sort-value="<%= q.name %>"><%= link_to queue_pill(q.name), queue_path(q.name), class: "rh-pill-link" %></td>
+          <td data-sort-value="<%= paused ? "paused" : "active" %>"><% if paused %><span class="rh-pill rh-pill-warn">paused</span><% else %><span class="rh-sub">active</span><% end %></td>
+          <td class="r" data-sort-value="<%= q.size %>"><%= number_with_delimiter q.size %></td>
+          <td class="r <%= "rh-lat-warn" if latency > 60 %>" data-sort-value="<%= latency.to_f %>"><%= duration(latency) %></td>
+          <%# Filled by the stats poll — it needs two samples for a velocity, so
+              the first paint honestly says it is still measuring. %>
+          <%# Both render; the poll reveals the canvas once it has two samples to
+              draw. Shown the other way round the canvas would be a blank gap. %>
+          <td class="rh-trend">
+            <span class="rh-trend-empty" data-rh-spark-wait="<%= q.name %>"></span>
+            <canvas width="176" height="44" data-rh-spark="<%= q.name %>" aria-hidden="true" hidden></canvas>
+          </td>
+          <%# sort-value starts unknown and is written by the poll, so an unmeasured
+              queue sorts last rather than pretending to be zero. %>
+          <td data-sort-value=""><span class="rh-fc rh-fc-wait" data-rh-forecast="<%= q.name %>"><%= q.size.zero? ? "clear" : "measuring…" %></span></td>
           <td class="r">
             <% if RoundhouseUi.pause_enabled %>
               <% if paused %>
@@ -33,7 +77,7 @@
                 <%= button_to "Pause", pause_queue_path(q.name), method: :post, class: "rh-btn", form_class: "rh-inline" %>
               <% end %>
             <% end %>
-            <%= button_to "Snapshot", snapshot_queue_path(q.name), method: :post, class: "rh-btn", form_class: "rh-inline" %>
+            <% if RoundhouseUi.backend.supports?(:snapshots) %><%= button_to "Snapshot", snapshot_queue_path(q.name), method: :post, class: "rh-btn", form_class: "rh-inline" %><% end %>
             <%= button_to "Purge", purge_queue_path(q.name),
                   method: :post,
                   class: "rh-btn rh-btn-danger",

data/app/views/roundhouse_ui/queues/show.html.erb

@@ -0,0 +1,55 @@
+<% content_for :title, "Queue #{@name}" %>
+
+<%= render "roundhouse_ui/shared/search_bar", action: queue_path(@name),
+      noun: "class, jid or arguments" %>
+
+<%= render "roundhouse_ui/shared/filter_error" %>
+<%= render "roundhouse_ui/shared/tag_filter" %>
+
+<h2 class="rh-h2">
+  <%= queue_pill(@name) %>
+  <span class="hint">
+    <%= number_with_delimiter @total %> waiting
+    <% if @latency %>· oldest <%= duration(@latency) %><% end %>
+    · <span class="rh-fc rh-fc-wait" data-rh-forecast="<%= @name %>">measuring…</span>
+    <% if @paused %>· <span class="rh-pill rh-pill-warn">paused</span><% end %>
+  </span>
+  <span class="rh-spacer"></span>
+  <%= link_to "← All queues", queues_path, class: "rh-btn" %>
+</h2>
+
+<table class="rh-table">
+  <thead>
+    <tr>
+      <th>Job</th>
+      <% if tag_column? %><th><%= tag_column_label %></th><% end %>
+      <th>Arguments</th>
+      <th class="r">Enqueued</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if @jobs.empty? %>
+      <tr><td colspan="<%= tag_column? ? 4 : 3 %>" class="rh-empty">
+        <%= empty_state(@query, @tag, noun: "jobs on “#{@name}”", all_clear: "Nothing waiting on “#{@name}”.") %>
+      </td></tr>
+    <% else %>
+      <% @jobs.each do |job| %>
+        <tr>
+          <td>
+            <%= job_display_class(job) %>
+            <div class="rh-sub rh-mono rh-jid" title="<%= job.jid %>"><%= job.jid %></div>
+          </td>
+          <% if tag_column? %><td><%= tag_cell(tags_for(job)) %></td><% end %>
+          <td><%= job_args_preview(job) %></td>
+          <td class="r"><%= job_time(RoundhouseUi.enqueued_at(job.item), overdue: "just now") %></td>
+        </tr>
+      <% end %>
+    <% end %>
+  </tbody>
+</table>
+<%= render "roundhouse_ui/shared/pager" %>
+
+<p class="rh-note">
+  Jobs waiting to be picked up, oldest last. Queue-level actions live on the
+  <%= link_to "queues list", queues_path %>.
+</p>