Add IP search and status filter to the Overview and Registry dashboard pages

Both pages rendered their full lists with no way to narrow them. Adds a
?q=&status= filter (substring match on address, exact match on result
status) applied dashboard-side, in Go, over the already-fetched list —
no control-api/db changes needed.

Overview: the filter form lives outside the polling target (#overview-live)
so the recurring poll never wipes out what's typed/selected; the poll and
both filter inputs share hx-sync="#overview-live:queue last" (the same
fix that resolved the earlier abandoned /ips auto-refresh races) and the
poll now carries hx-include="#overview-filter" so it keeps honoring the
current filter on every tick. Applies uniformly to both the "Текущая
проверка" and "Последние N завершённых" tables, per the confirmed design:
picking a specific status naturally hides in-progress rows, since they
have no result yet.

Registry: no polling exists there, so the filter form reuses the full page
via hx-select/hx-replace-url — simpler than adding a parallel fragment
endpoint, and gives a bookmarkable/shareable filtered URL.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ayurishchevandClaude Sonnet 5 committed 2026-09-23 11:58:53 +03:00
1 parent db97b83cd6
commit 0838abc4a2
11 files changed
+296 -13

No files matched your search

+30 -1
View File
@@ -23,7 +23,36 @@
<div class="topbar">
<h1>Обзор</h1>
</div>
<div id="overview-live" hx-get="/overview/fragment" hx-trigger="every {{.PollSeconds}}s" hx-swap="innerHTML">
<form id="overview-filter" class="panel" onsubmit="return false">
<div class="panel-body field-row">
<div class="field" style="flex:1 1 260px">
<label for="overview-q">Поиск по IP</label>
<input type="search" id="overview-q" name="q" value="{{.Query}}" placeholder="203.0.113.10"
hx-get="/overview/fragment" hx-target="#overview-live" hx-swap="innerHTML"
hx-include="#overview-filter" hx-trigger="input changed delay:300ms"
hx-sync="#overview-live:queue last">
</div>
<div class="field">
<label for="overview-status">Статус</label>
<select id="overview-status" name="status"
hx-get="/overview/fragment" hx-target="#overview-live" hx-swap="innerHTML"
hx-include="#overview-filter" hx-trigger="change" hx-sync="#overview-live:queue last">
<option value="">Все</option>
<option value="pass" {{if eq .StatusFilter "pass"}}selected{{end}}>pass</option>
<option value="partial" {{if eq .StatusFilter "partial"}}selected{{end}}>partial</option>
<option value="fail" {{if eq .StatusFilter "fail"}}selected{{end}}>fail</option>
<option value="cancelled" {{if eq .StatusFilter "cancelled"}}selected{{end}}>cancelled</option>
</select>
</div>
</div>
<p class="muted" style="padding:0 16px 12px">Действует на обе таблицы ниже. Фильтр по статусу — это фильтр по
итоговому результату, поэтому при выборе конкретного статуса строки «Текущей проверки» (у неё ещё нет результата)
не показываются.</p>
</form>
<div id="overview-live" hx-get="/overview/fragment" hx-trigger="every {{.PollSeconds}}s"
hx-include="#overview-filter" hx-sync="#overview-live:queue last" hx-swap="innerHTML">
{{template "overview_fragment" .}}
</div>
{{end}}
@@ -29,7 +29,8 @@
</div>
</div>
{{else}}
<p class="muted">Сейчас нет адресов в обработке.</p>
{{if or .Query .StatusFilter}}<p class="muted">Ничего не найдено по текущему фильтру.</p>
{{else}}<p class="muted">Сейчас нет адресов в обработке.</p>{{end}}
{{end}}
<h2 class="section-title">Последние {{.LastN}} завершённых</h2>
@@ -58,6 +59,7 @@
</div>
</div>
{{else}}
<p class="muted">Пока ничего не завершено.</p>
{{if or .Query .StatusFilter}}<p class="muted">Ничего не найдено по текущему фильтру.</p>
{{else}}<p class="muted">Пока ничего не завершено.</p>{{end}}
{{end}}
{{end}}
@@ -25,6 +25,37 @@
сохраняется здесь даже после удаления адреса из <a href="/ips">очереди</a> и не теряется при повторном добавлении.
Глубина хранимой истории на адрес настраивается на <a href="/settings">странице настроек</a>.</p>
<form id="registry-filter" class="panel" onsubmit="return false" style="margin-bottom:16px">
<div class="panel-body field-row">
<div class="field" style="flex:1 1 260px">
<label for="registry-q">Поиск по IP</label>
<input type="search" id="registry-q" name="q" value="{{.Query}}" placeholder="203.0.113.10"
hx-get="/registry" hx-select="#registry-table-wrap" hx-target="#registry-table-wrap" hx-swap="outerHTML"
hx-include="#registry-filter" hx-trigger="input changed delay:300ms"
hx-replace-url="true" hx-sync="#registry-table-wrap:queue last">
</div>
<div class="field">
<label for="registry-status">Статус</label>
<select id="registry-status" name="status"
hx-get="/registry" hx-select="#registry-table-wrap" hx-target="#registry-table-wrap" hx-swap="outerHTML"
hx-include="#registry-filter" hx-trigger="change"
hx-replace-url="true" hx-sync="#registry-table-wrap:queue last">
<option value="">Все</option>
<option value="pass" {{if eq .StatusFilter "pass"}}selected{{end}}>pass</option>
<option value="partial" {{if eq .StatusFilter "partial"}}selected{{end}}>partial</option>
<option value="fail" {{if eq .StatusFilter "fail"}}selected{{end}}>fail</option>
<option value="cancelled" {{if eq .StatusFilter "cancelled"}}selected{{end}}>cancelled</option>
</select>
</div>
</div>
</form>
<div id="registry-table-wrap">
{{template "registry_table" .}}
</div>
{{end}}
{{define "registry_table"}}
{{if .Items}}
<div class="panel">
<div class="table-scroll">
@@ -53,5 +84,6 @@
</table>
</div>
</div>
{{else if or .Query .StatusFilter}}<p class="muted">Ничего не найдено по текущему фильтру.</p>
{{else}}<p class="muted">Реестр пуст — ни один адрес ещё не ставился на проверку.</p>{{end}}
{{end}}