Fix IPs page race between auto-refresh polling and action buttons

The 5s auto-poll (hx-trigger="every Ns" on #ips-table-wrap) and every
button/form that also swaps #ips-table-wrap (bulk recheck/delete/clear,
per-row recheck/cancel/delete, the add-address form) each fired
independent, uncoordinated htmx requests against the same target. With no
hx-sync, whichever response landed last won — including a poll's
in-flight GET landing *after* a slower mutation's own response and
silently reverting the just-applied change with stale data. This matched
every symptom reported: buttons needing several clicks before they
"took", "Перепроверить выбранные" appearing to do nothing with many rows
selected (more DB writes -> wider race window for a poll to land after
and clobber it), the page "blinking" back to a stale queued state a few
seconds after a bulk recheck actually succeeded, and auto-refresh working
"every other time".

Every element that targets #ips-table-wrap now shares
hx-sync="#ips-table-wrap:queue last", so at most one request affecting it
is ever in flight: a trigger that fires while another is pending gets
queued (never aborted mid-write) and only the most recent queued trigger
actually runs once the current one finishes, guaranteeing responses are
always applied in the order they actually resolve.

Rebuilt bin/admin-dashboard (only internal/dashboard changed) and
bin/SHA256SUMS per docs/SETUP.md's documented build recipe.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ayurishchevandClaude Sonnet 5 committed 2026-09-18 19:10:05 +03:00
1 parent 0e0bcb6af1
commit 5a53705217
4 files changed
+24 -10

No files matched your search

+1 -1
View File
@@ -1,4 +1,4 @@
dcb137ae6a3f6a59465f2772215d48f98fd303dd1c266645b20ec70194ab7915 control-api dcb137ae6a3f6a59465f2772215d48f98fd303dd1c266645b20ec70194ab7915 control-api
b7a6068db1d095ae7b73cbd9b7273d6a1629ae017e9c3c9601e103432894a247 validator-agent b7a6068db1d095ae7b73cbd9b7273d6a1629ae017e9c3c9601e103432894a247 validator-agent
be8e9576c6fbe5e5798b5d4b758a5617b63bea6abe80e326998d10583edbbf5c prober be8e9576c6fbe5e5798b5d4b758a5617b63bea6abe80e326998d10583edbbf5c prober
8c8b41a0f1f2103bef7181fdd9c6741b09ad638955310698e1fd4793e328f39c admin-dashboard cec482fb92246210108261cfc02c10ef9829ce3c7d7c174cf935976baa42fd2c admin-dashboard
Binary file not shown.
+15 -1
View File
@@ -156,13 +156,27 @@ func TestIPsDeleteSelected(t *testing.T) {
} }
func TestIPsPagePollsForFragment(t *testing.T) { func TestIPsPagePollsForFragment(t *testing.T) {
_, caURL := newFakeControlAPI(t) fake, caURL := newFakeControlAPI(t)
now := time.Now()
fake.ips = []ipQueueItem{
{IPAddress: "1.1.1.1", State: "done", OverallResult: "pass", AggregatedAt: &now, UpdatedAt: now, CreatedAt: now},
}
ts := newTestServer(t, caURL) ts := newTestServer(t, caURL)
body := get(t, ts, "/ips") body := get(t, ts, "/ips")
if !strings.Contains(body, `hx-get="/ips/fragment"`) || !strings.Contains(body, `hx-trigger="every 5s"`) { if !strings.Contains(body, `hx-get="/ips/fragment"`) || !strings.Contains(body, `hx-trigger="every 5s"`) {
t.Fatalf("expected ips-table-wrap to auto-poll every 5s, got:\n%s", body) t.Fatalf("expected ips-table-wrap to auto-poll every 5s, got:\n%s", body)
} }
// hx-sync must coordinate the poll with every action that also swaps
// #ips-table-wrap (bulk buttons, per-row buttons, the add-address
// form) so a slow mutation and a poll tick can never race and let a
// stale response clobber a just-applied action (recheck-selected
// appearing to silently fail with many rows selected) — 1 wrapper div
// + 1 add-address form + 3 bulk buttons + 2 per-row buttons (one
// terminal row: "Перепроверить" + "Удалить") = 7.
if got := strings.Count(body, `hx-sync="#ips-table-wrap:queue last"`); got != 7 {
t.Fatalf("expected 7 elements to declare hx-sync, got %d in:\n%s", got, body)
}
} }
func TestIPsFragment(t *testing.T) { func TestIPsFragment(t *testing.T) {
+8 -8
View File
@@ -24,7 +24,7 @@
<div class="panel"> <div class="panel">
<div class="panel-body"> <div class="panel-body">
<form hx-post="/ips" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-on::after-request="this.reset()"> <form hx-post="/ips" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last" hx-on::after-request="this.reset()">
<div class="field-row"> <div class="field-row">
<div class="field" style="flex: 1 1 420px;"> <div class="field" style="flex: 1 1 420px;">
<label for="addresses">Адреса (по одному на строку или через запятую)</label> <label for="addresses">Адреса (по одному на строку или через запятую)</label>
@@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<div id="ips-table-wrap" hx-get="/ips/fragment" hx-trigger="every {{.PollSeconds}}s" hx-swap="innerHTML"> <div id="ips-table-wrap" hx-get="/ips/fragment" hx-trigger="every {{.PollSeconds}}s" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last">
{{template "ips_table" .}} {{template "ips_table" .}}
</div> </div>
{{end}} {{end}}
@@ -47,9 +47,9 @@
<form id="ips-form"> <form id="ips-form">
<div class="panel"> <div class="panel">
<div class="panel-body" style="display:flex; gap:8px; align-items:center;"> <div class="panel-body" style="display:flex; gap:8px; align-items:center;">
<button type="button" class="btn btn-ghost btn-sm" hx-post="/ips/recheck" hx-target="#ips-table-wrap" hx-swap="innerHTML">Перепроверить выбранные</button> <button type="button" class="btn btn-ghost btn-sm" hx-post="/ips/recheck" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last">Перепроверить выбранные</button>
<button type="button" class="btn btn-danger-ghost btn-sm" hx-post="/ips/delete" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-confirm="Удалить выбранные адреса без возможности восстановления?">Удалить выбранные</button> <button type="button" class="btn btn-danger-ghost btn-sm" hx-post="/ips/delete" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last" hx-confirm="Удалить выбранные адреса без возможности восстановления?">Удалить выбранные</button>
<button type="button" class="btn btn-danger-ghost btn-sm" hx-post="/ips/clear" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-confirm="Удалить ВСЕ адреса из очереди, включая те, что сейчас проверяются? Действие необратимо.">Очистить всё</button> <button type="button" class="btn btn-danger-ghost btn-sm" hx-post="/ips/clear" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last" hx-confirm="Удалить ВСЕ адреса из очереди, включая те, что сейчас проверяются? Действие необратимо.">Очистить всё</button>
</div> </div>
<div class="table-scroll"> <div class="table-scroll">
<table> <table>
@@ -68,11 +68,11 @@
<td data-label=""> <td data-label="">
<div class="actions"> <div class="actions">
{{if $terminal}} {{if $terminal}}
<button class="btn btn-ghost btn-sm" hx-post="/ips/{{.IPAddress}}/recheck" hx-target="#ips-table-wrap" hx-swap="innerHTML">Перепроверить</button> <button class="btn btn-ghost btn-sm" hx-post="/ips/{{.IPAddress}}/recheck" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last">Перепроверить</button>
{{else}} {{else}}
<button class="btn btn-danger-ghost btn-sm" hx-post="/ips/{{.IPAddress}}/cancel" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-confirm="Остановить проверку {{.IPAddress}}?">Отменить</button> <button class="btn btn-danger-ghost btn-sm" hx-post="/ips/{{.IPAddress}}/cancel" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last" hx-confirm="Остановить проверку {{.IPAddress}}?">Отменить</button>
{{end}} {{end}}
<button class="btn btn-danger-ghost btn-sm" hx-delete="/ips/{{.IPAddress}}" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-confirm="Удалить {{.IPAddress}} без возможности восстановления?">Удалить</button> <button class="btn btn-danger-ghost btn-sm" hx-delete="/ips/{{.IPAddress}}" hx-target="#ips-table-wrap" hx-swap="innerHTML" hx-sync="#ips-table-wrap:queue last" hx-confirm="Удалить {{.IPAddress}} без возможности восстановления?">Удалить</button>
</div> </div>
</td> </td>
</tr> </tr>