feat(ui): 15-point UX overhaul — affordances, feedback, and navigation
Address friction points identified in a full interface audit: - Re-add status badge to dashboard tiles so run state is visible at a glance - Add active nav indicator and SSE connection health monitor (live/stale) - Show manual registration form by default instead of hiding behind <details> - Add copy-to-clipboard buttons on SSH hold command and quick-register one-liner - Replace tooltip-only profile descriptions with inline visible text - Clarify non-destructive toggle with explicit stage impact description - Replace disabled "Start vetting" button with actionable offline guidance - Swap browser confirm() dialogs for styled inline confirmations - Add colored badge to spec diffs summary visible when collapsed - Add distinct "cancelled" mood for cancelled runs (vs idle) - Add match count to log search and aria-label for accessibility - Add styled 404 page rendered inside the app shell Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -104,31 +104,38 @@ templ HostActions(d HostPageData) {
|
||||
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/start", d.Host.ID)) } class="inline host-start-form">
|
||||
<fieldset class="host-profile-picker">
|
||||
<legend>Profile</legend>
|
||||
<label title="~10 min — post-repair sanity: all probes + gates, short budgets">
|
||||
<label>
|
||||
<input type="radio" name="profile" value="quick" checked/>
|
||||
quick
|
||||
<span class="profile-label">quick</span>
|
||||
<span class="profile-desc">~10 min — post-repair sanity check</span>
|
||||
</label>
|
||||
<label title="~8–12 h — overnight soak: long CPU/RAM, full-disk fio verify, 30 min network">
|
||||
<label>
|
||||
<input type="radio" name="profile" value="deep"/>
|
||||
deep
|
||||
<span class="profile-label">deep</span>
|
||||
<span class="profile-desc">~8–12 h — overnight full-disk verify</span>
|
||||
</label>
|
||||
<label title="≥24 h — week-long burn-in; opt-in when you suspect intermittent faults">
|
||||
<label>
|
||||
<input type="radio" name="profile" value="soak"/>
|
||||
soak
|
||||
<span class="profile-label">soak</span>
|
||||
<span class="profile-desc">≥24 h — burn-in for intermittent faults</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<label class="host-nd-toggle">
|
||||
<input type="checkbox" name="non_destructive" value="1"/>
|
||||
Non-destructive (skip wipe-probe + disk writes)
|
||||
<span>Non-destructive</span>
|
||||
<span class="nd-hint">Skips the Storage wipe-and-verify stage. All other stages run normally.</span>
|
||||
</label>
|
||||
<button type="submit" class="btn-primary">Start vetting</button>
|
||||
</form>
|
||||
} else if hostCanStartIfOnline(d) {
|
||||
<button type="button" disabled title="host is not heartbeating — install the reporter via /register/quick.sh on the target host">Start vetting</button>
|
||||
<div class="offline-hint">
|
||||
<button type="button" disabled>Start vetting</button>
|
||||
<span>Host is offline — <a href="/hosts/new">run the reporter script</a> on the target host to bring it online.</span>
|
||||
</div>
|
||||
} else {
|
||||
<button type="button" disabled>Run in flight</button>
|
||||
}
|
||||
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/delete", d.Host.ID)) } class="inline" onsubmit="return confirm('Delete host and all its runs?');">
|
||||
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/delete", d.Host.ID)) } class="inline" data-confirm="Delete this host and all its runs?">
|
||||
<button type="submit" class="btn-danger">Delete host</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -168,7 +175,10 @@ templ HostEmptyState(d HostPageData) {
|
||||
<button type="submit" class="btn-primary big">Start vetting</button>
|
||||
</form>
|
||||
} else {
|
||||
<button type="button" class="btn-primary big" disabled title="host is not heartbeating — install the reporter via /register/quick.sh on the target host">Start vetting</button>
|
||||
<div class="offline-hint">
|
||||
<button type="button" class="btn-primary big" disabled>Start vetting</button>
|
||||
<span>Host is offline — <a href="/hosts/new">run the reporter script</a> on the target host to bring it online.</span>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
@@ -322,6 +332,15 @@ func hasCriticalDiff(diffs []model.SpecDiff) bool {
|
||||
return false
|
||||
}
|
||||
|
||||
func diffBadgeClass(diffs []model.SpecDiff) string {
|
||||
for _, d := range diffs {
|
||||
if d.Severity == "critical" && !d.Ignored {
|
||||
return "diff-badge-critical"
|
||||
}
|
||||
}
|
||||
return "diff-badge-warn"
|
||||
}
|
||||
|
||||
// relativeTime renders a past time as "2m ago" / "1h ago" / "3d ago".
|
||||
// Future times (clock skew) render as "now" so the runs table never
|
||||
// shows nonsense when a host's clock is ahead of the orchestrator.
|
||||
|
||||
Reference in New Issue
Block a user