From b2c4cbe37856d3a5e496238f39ce4ea48af6f099 Mon Sep 17 00:00:00 2001
From: david kiania <kianiadee@gmail.com>
Date: Fri, 19 Jun 2026 12:34:48 +0300
Subject: [PATCH] feat(tickets): explorer engineer dropdown + ticket pulldown
 (datalist)

Engineer is now a <select> of all engineers; Ticket ID is an input with a
datalist of open ticket ids (pick an open ticket, or type any id for substring
search across history). Both populated once from GET /webhook/inc-filter-options;
cluster select also filled from the full cluster list.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/index.html | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index 411c677..b3b0f22 100644
--- a/src/index.html
+++ b/src/index.html
@@ -438,8 +438,8 @@
     <div class="card span12">
       <h2>Ticket explorer <span class="count" id="tk-x-count"></span></h2>
       <div class="x-filters">
-        <div class="ff"><label for="tk-x-id">Ticket ID</label><input type="text" id="tk-x-id" placeholder="WOT…" autocomplete="off"></div>
-        <div class="ff"><label for="tk-x-eng">Engineer</label><input type="text" id="tk-x-eng" placeholder="name…" autocomplete="off"></div>
+        <div class="ff"><label for="tk-x-id">Ticket ID</label><input type="text" id="tk-x-id" list="tk-x-id-list" placeholder="pick open / type any…" autocomplete="off"><datalist id="tk-x-id-list"></datalist></div>
+        <div class="ff"><label for="tk-x-eng">Engineer</label><select id="tk-x-eng"><option value="">All engineers</option></select></div>
         <div class="ff"><label for="tk-x-cluster">Cluster</label><select id="tk-x-cluster"><option value="">All clusters</option></select></div>
         <div class="ff"><label for="tk-x-state">State</label>
           <select id="tk-x-state">
@@ -1094,8 +1094,8 @@ function initIncMap() {
     $('tk-x-ff-end').classList.toggle('show', c);
   });
   $('tk-x-search').addEventListener('click', loadIncSearch);
-  ['tk-x-id', 'tk-x-eng'].forEach((id) =>
-    $(id).addEventListener('keydown', (e) => { if (e.key === 'Enter') loadIncSearch(); }));
+  $('tk-x-id').addEventListener('keydown', (e) => { if (e.key === 'Enter') loadIncSearch(); });
+  loadIncFilterOptions();   // fill engineer/cluster pulldowns + open-ticket-id datalist (once)
 
   tkMap = new maplibregl.Map({
     container: 'tk-map', style: BASEMAP, center: [37.5, -1.1], zoom: 6,
@@ -1218,6 +1218,19 @@ function incSearchQs() {
 }
 
 let tkSearchRows = [];
+// Populate the explorer pulldowns once: engineers + clusters (selects) and open
+// ticket ids (datalist; closed ids are ~22k so use the ticket-id substring search).
+let incFilterOptionsInit = false;
+async function loadIncFilterOptions() {
+  if (incFilterOptionsInit) return;
+  try {
+    const o = await api('/webhook/inc-filter-options');
+    incFilterOptionsInit = true;
+    const eng = $('tk-x-eng'); (o.owners || []).forEach((n) => eng.add(new Option(n, n)));
+    const cl = $('tk-x-cluster'); (o.clusters || []).forEach((c) => cl.add(new Option(c, c)));
+    $('tk-x-id-list').innerHTML = (o.open_ticket_ids || []).map((id) => `<option value="${escapeHtml(id)}"></option>`).join('');
+  } catch (e) { console.error('filter options failed', e); }
+}
 async function loadIncSearch() {
   const wrap = $('tk-x-wrap');
   wrap.innerHTML = '<div class="empty">Searching…</div>';
@@ -1268,7 +1281,6 @@ function initIncDropdowns(m) {
     Object.keys(obj || {}).filter(k => k !== '').sort().forEach(k => el.add(new Option(k, k)));
   };
   fill('tk-cluster', m.by_cluster);
-  fill('tk-x-cluster', m.by_cluster);
   fill('tk-status', m.by_status);
 }