kianiadee/fleetops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(tickets): explorer engineer dropdown + ticket pulldown (datalist)

Browse source 
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>
This commit is contained in:
david kiania 2026-06-19 12:34:48 +03:00
parent a364418df1
commit b2c4cbe378
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/index.html
View file

@ -438,8 +438,8 @@
<div class="card span12"> <div class="card span12">
<h2>Ticket explorer <span class="count" id="tk-x-count"></span></h2> <h2>Ticket explorer <span class="count" id="tk-x-count"></span></h2>
<div class="x-filters"> <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-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><input type="text" id="tk-x-eng" placeholder="name…" autocomplete="off"></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-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> <div class="ff"><label for="tk-x-state">State</label>
<select id="tk-x-state"> <select id="tk-x-state">
@ -1094,8 +1094,8 @@ function initIncMap() {
$('tk-x-ff-end').classList.toggle('show', c); $('tk-x-ff-end').classList.toggle('show', c);
}); });
$('tk-x-search').addEventListener('click', loadIncSearch); $('tk-x-search').addEventListener('click', loadIncSearch);
['tk-x-id', 'tk-x-eng'].forEach((id) => $('tk-x-id').addEventListener('keydown', (e) => { if (e.key === 'Enter') loadIncSearch(); });
$(id).addEventListener('keydown', (e) => { if (e.key === 'Enter') loadIncSearch(); })); loadIncFilterOptions(); // fill engineer/cluster pulldowns + open-ticket-id datalist (once)
tkMap = new maplibregl.Map({ tkMap = new maplibregl.Map({
container: 'tk-map', style: BASEMAP, center: [37.5, -1.1], zoom: 6, container: 'tk-map', style: BASEMAP, center: [37.5, -1.1], zoom: 6,
@ -1218,6 +1218,19 @@ function incSearchQs() {
} }
let tkSearchRows = []; 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() { async function loadIncSearch() {
const wrap = $('tk-x-wrap'); const wrap = $('tk-x-wrap');
wrap.innerHTML = '<div class="empty">Searching…</div>'; 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))); Object.keys(obj || {}).filter(k => k !== '').sort().forEach(k => el.add(new Option(k, k)));
}; };
fill('tk-cluster', m.by_cluster); fill('tk-cluster', m.by_cluster);
fill('tk-x-cluster', m.by_cluster);
fill('tk-status', m.by_status); fill('tk-status', m.by_status);
} }