Filter the queue by cluster

A team with a cluster per alert source can now narrow the queue to one
cluster. A dropdown under the status chips lists the clusters, and appears
once there are two or more to choose between, the rule the team selector
follows. The choice is kept per browser, like the selected team, and dropped
if the server no longer knows the cluster rather than leaving an empty list
with no explanation. The status chip counts follow it, and a row leaves out
its cluster chip once the queue is narrowed to one.

The filter is on the server. The list is capped at 50 rows, so filtering what
is on screen would quietly miss older incidents in the Resolved and Archived
lists. GET /api/incidents takes ?cluster=<value>, matched against the
incident's `cluster` group label, and GET /api/incidents/clusters lists the
distinct values from the last 90 days (optionally for one team), so the
dropdown is not limited to what the current page happens to show. Both are
additive: no existing parameter or JSON shape changed, so terdut-tui keeps
working unchanged and has nothing it must mirror.

An incident carries the label only when `cluster` is in Alertmanager's
group_by, so the filter only sees those; the README says so.

internal/web/static/app.css

@@ -404,6 +404,16 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
 }
 
+/* The queue's cluster filter: a pill-shaped select under the status chips. */
+.queue-origin { position: relative; display: flex; align-items: center; padding: 0 16px 8px; }
+.origin-select-icon { position: absolute; left: 28px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
+.origin-select {
+  min-height: 34px; max-width: 100%; padding: 0 12px 0 34px;
+  border: 1px solid var(--border-strong); border-radius: 999px;
+  background: var(--surface); color: var(--text);
+  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
+}
+
 /* ---------- lists ---------- */
 
 .list { padding: 0 16px 16px; display: grid; gap: 8px; }

internal/web/static/index.html

@@ -154,6 +154,9 @@
     <section id="view-queue" class="view view-queue" data-view="queue">
       <div class="pane pane-list">
         <div class="chips" id="queue-filters" role="tablist" aria-label="Filter"></div>
+        <!-- The cluster filter. Hidden until the queue has seen two or more
+             clusters; queue.js fills it in. -->
+        <div class="queue-origin" id="queue-origin" hidden></div>
         <div id="queue-list" class="list"></div>
       </div>
       <div class="pane pane-detail" id="detail" aria-live="polite"></div>

internal/web/static/js/api.js

@@ -83,6 +83,7 @@ export const setNotifyTarget = (id, ntfyTopic) =>
 
 // incidents
 export const incidents = (query, opts) => call('GET', '/incidents', { query, ...opts });
+export const clusters = (query) => call('GET', '/incidents/clusters', { query });
 export const incident = (id) => call('GET', `/incidents/${id}`);
 export const timeline = (id) => call('GET', `/incidents/${id}/timeline`);
 

internal/web/static/js/queue.js

@@ -1,7 +1,7 @@
 // The incident queue: filter chips and a list of incident rows.
 
 import * as api from './api.js';
-import { h, clear, badge, severityBadge, originChip, emptyState, spinner, fadeOnOverflow } from './ui.js';
+import { h, clear, icon, badge, severityBadge, originChip, emptyState, spinner, fadeOnOverflow } from './ui.js';
 import { ago, until, isFuture, severityClass, labelSummary, originOf, titleWithoutOrigin } from './format.js';
 import { state, myID, onTeamChange } from './state.js';
 import * as onboarding from './onboarding.js';
@@ -30,8 +30,10 @@ onboarding.onRerender(() => renderList());
 // The queue used to keep its own team filter (a per-tab sessionStorage value,
 // out of step with team.js's own picker); both now defer to the global
 // selector's shared state, so re-render whenever it changes.
-onTeamChange(() => {
+onTeamChange(async () => {
   renderChips();
+  await loadClusters(true);
+  renderOrigin();
   refresh({ fresh: true });
 });
 
@@ -52,6 +54,63 @@ function loadFilter() {
   return 'open';
 }
 
+// Which cluster the queue is narrowed to, or null for all of them. Kept in
+// localStorage like the selected team: it is a standing choice, not a
+// per-tab one.
+const ORIGIN_KEY = 'terdut.queue.cluster';
+let origin = loadOrigin();
+let clusters = []; // the clusters the server has seen, for the dropdown
+let clustersAt = 0;
+
+function loadOrigin() {
+  try {
+    return localStorage.getItem(ORIGIN_KEY) || null;
+  } catch {
+    return null; // storage unavailable
+  }
+}
+
+function saveOrigin() {
+  try {
+    if (origin) localStorage.setItem(ORIGIN_KEY, origin);
+    else localStorage.removeItem(ORIGIN_KEY);
+  } catch {
+    /* storage unavailable */
+  }
+}
+
+// The clusters to offer, from the server because the list on screen is only
+// the fifty most recent. Asked again at most every five minutes; a cluster
+// first met in an incident on screen is added at once (see noteClusters). A
+// remembered choice the server no longer knows would filter to nothing with no
+// hint why, so it is dropped.
+async function loadClusters(force = false) {
+  if (!force && Date.now() - clustersAt < 5 * 60 * 1000) return;
+  try {
+    const query = state.selectedTeamID != null ? { team_id: state.selectedTeamID } : undefined;
+    clusters = await api.clusters(query);
+    clustersAt = Date.now();
+    if (origin && !clusters.includes(origin)) {
+      origin = null;
+      saveOrigin();
+    }
+  } catch {
+    /* the filter is a convenience: without the list it stays hidden */
+  }
+}
+
+function noteClusters(list) {
+  let added = false;
+  for (const inc of list || []) {
+    const c = originOf(inc.group_labels);
+    if (c && !clusters.includes(c)) {
+      clusters = [...clusters, c].sort();
+      added = true;
+    }
+  }
+  return added;
+}
+
 function saveFilter() {
   try {
     sessionStorage.setItem('terdut.queue.filter', filter);
@@ -64,6 +123,7 @@ export function show(incidentID) {
   selected = incidentID;
   if (!built) {
     renderChips();
+    renderOrigin();
     built = true;
   }
   renderList();
@@ -73,15 +133,22 @@ export async function refresh({ fresh = false } = {}) {
   const f = FILTERS.find((x) => x.id === filter);
   const requested = filter;
   try {
+    // First, so a remembered cluster the server no longer knows is dropped
+    // before it is sent as a filter.
+    await loadClusters();
     // The open list is already fetched for the badges; no need to ask twice.
     // The cached open queue covers every team, so it can only be reused when
     // no team filter is applied.
-    const query = state.selectedTeamID != null ? { ...f.query, team_id: state.selectedTeamID } : f.query;
-    const cached = filter === 'open' && !fresh && state.selectedTeamID == null;
+    const query = { ...f.query };
+    if (state.selectedTeamID != null) query.team_id = state.selectedTeamID;
+    if (origin) query.cluster = origin;
+    const cached = filter === 'open' && !fresh && state.selectedTeamID == null && !origin;
     const result = cached ? state.open : await api.incidents(query);
     await onboarding.load();
     if (requested !== filter) return;
     items = result;
+    noteClusters(state.open);
+    noteClusters(items);
     error = null;
   } catch (err) {
     if (requested !== filter) return;
@@ -91,6 +158,7 @@ export async function refresh({ fresh = false } = {}) {
   // whichever caller updated it before calling here — app.js's poll, or the
   // `cached` branch above.
   renderChips();
+  renderOrigin();
   renderList();
 }
 
@@ -109,9 +177,9 @@ function setFilter(id) {
 // for the badges — Snoozed/Resolved/Archived would need a request of their
 // own, so those chips stay count-less for now.
 function chipCount(id) {
-  const open = state.selectedTeamID == null
-    ? state.open
-    : state.open.filter((i) => i.team_id === state.selectedTeamID);
+  const open = state.open.filter((i) =>
+    (state.selectedTeamID == null || i.team_id === state.selectedTeamID)
+    && (!origin || originOf(i.group_labels) === origin));
   if (id === 'open') return open.length;
   if (id === 'triggered') return open.filter((i) => i.status === 'triggered').length;
   if (id === 'acknowledged') return open.filter((i) => i.status === 'acknowledged').length;
@@ -144,6 +212,30 @@ function renderChips() {
   chipsFade();
 }
 
+// The cluster dropdown, under the status chips. Not shown at all until there
+// are two clusters to choose between, the same rule the team selector follows.
+function renderOrigin() {
+  const el = document.getElementById('queue-origin');
+  if (clusters.length < 2) {
+    el.hidden = true;
+    return;
+  }
+  const select = h('select', { class: 'origin-select', 'aria-label': 'Cluster' },
+    h('option', { value: '', text: 'All clusters', selected: !origin }),
+    clusters.map((c) => h('option', { value: c, text: c, selected: c === origin })));
+  select.addEventListener('change', () => {
+    origin = select.value || null;
+    saveOrigin();
+    items = null;
+    cursor = -1;
+    renderChips();
+    renderList();
+    refresh({ fresh: true });
+  });
+  clear(el, icon('server', 'icon origin-select-icon'), select);
+  el.hidden = false;
+}
+
 function renderList() {
   const el = document.getElementById('queue-list');
   const checklist = onboarding.card();
@@ -201,7 +293,7 @@ function row(inc, index) {
     ? h('span', { class: 'row-team', text: inc.team_name })
     : null;
 
-  const origin = originOf(inc.group_labels);
+  const rowOrigin = originOf(inc.group_labels);
 
   return h('a', {
     class: `row ${severityClass(inc.severity)} ${resolved ? 'resolved' : ''} ${index === cursor ? 'kbd-focus' : ''}`,
@@ -209,10 +301,10 @@ function row(inc, index) {
     'aria-current': inc.id === selected ? 'true' : null,
     dataset: { index: String(index) },
   },
-    h('div', { class: 'row-title', text: titleWithoutOrigin(inc.title, origin) }),
+    h('div', { class: 'row-title', text: titleWithoutOrigin(inc.title, rowOrigin) }),
     h('div', { class: 'row-age', title: inc.triggered_at, text: `Triggered ${ago(inc.triggered_at)}` }),
     h('div', { class: 'row-meta' },
-      origin && originChip(origin),
+      rowOrigin && !origin && originChip(rowOrigin),
       !impliedStatus && status,
       // The left-border colour alone doesn't say what it means; spell it out
       // too, same badge the incident detail page uses for severity.