Files
Vetting/internal/web/templates/host_detail.templ
T
josh bb658a8435
CI / Lint + build + test (push) Has been cancelled
Host detail page + pipeline timeline
Click a tile to open /hosts/{id} — the canonical control surface per
host. Timeline renders every pre-stage, stage, and terminal node in
order, with the current one pulsing, failed ones flagged, and
downstream ones dimmed as skipped. Detail page shows summary, hold
card (when holding), all action buttons, spec diffs, a full-height
log pane, and a collapsed expected-spec YAML.

Tile slims to name, last-seen, status, and one primary action; a
CSS-overlay <a> makes the whole card clickable while buttons stay
receptive via z-index.

Runner.publishTileUpdate now also emits pipeline-{runID} fragments,
and CompleteStage wraps Stages.CompleteByName so stage completions
advance the timeline live — without this the dots only moved on
state transitions.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-17 23:59:43 -04:00

166 lines
5.1 KiB
Plaintext

package templates
import (
"fmt"
"vetting/internal/model"
)
// HostDetailData is the full payload the detail handler hands to the
// HostDetail template. Tile carries host + latest-run enrichment (same
// shape the dashboard tile uses), Stages/SpecDiffs drive the pipeline
// and diff list.
type HostDetailData struct {
Tile TileData
Stages []model.Stage
SpecDiffs []model.SpecDiff
}
templ HostDetail(d HostDetailData) {
@Layout(d.Tile.Host.Name) {
<section class="detail" hx-ext="sse" sse-connect="/events">
<nav class="breadcrumb">
<a href="/">Dashboard</a>
<span class="breadcrumb-sep">/</span>
<span>{ d.Tile.Host.Name }</span>
</nav>
<header class={ "detail-summary", "tile-" + tileMood(d.Tile.Latest) }>
<div class="detail-summary-head">
<h1 class="detail-name">{ d.Tile.Host.Name }</h1>
<div class="detail-status-row">
<span class={ "tile-last-seen", lastSeenClass(d.Tile.LastSeenAt) }>{ lastSeenLabel(d.Tile.LastSeenAt) }</span>
<span class="tile-status">{ tileStatus(d.Tile.Latest) }</span>
</div>
</div>
<dl class="detail-meta">
<div>
<dt>MAC</dt>
<dd>{ d.Tile.Host.MAC }</dd>
</div>
<div>
<dt>WoL</dt>
<dd>{ fmt.Sprintf("%s:%d", d.Tile.Host.WoLBroadcastIP, d.Tile.Host.WoLPort) }</dd>
</div>
if d.Tile.Latest != nil && d.Tile.Latest.FailedStage != "" {
<div>
<dt>Failed at</dt>
<dd class="bad">{ d.Tile.Latest.FailedStage }</dd>
</div>
}
if d.Tile.SpecDiffCritical > 0 {
<div>
<dt>Spec diffs</dt>
<dd class="bad">{ fmt.Sprintf("%d critical", d.Tile.SpecDiffCritical) }</dd>
</div>
}
</dl>
</header>
if d.Tile.Latest != nil {
<section
id={ fmt.Sprintf("pipeline-%d", d.Tile.Latest.ID) }
class="detail-section"
sse-swap={ fmt.Sprintf("pipeline-%d", d.Tile.Latest.ID) }
hx-swap="outerHTML"
>
<h2>Pipeline</h2>
@Pipeline(BuildPipeline(d.Tile.Latest, d.Stages))
</section>
} else {
<section class="detail-section">
<h2>Pipeline</h2>
@Pipeline(BuildPipeline(nil, nil))
</section>
}
if d.Tile.Latest != nil && d.Tile.Latest.State == model.StateFailedHolding && d.Tile.Latest.HoldIP != "" {
<section class="detail-section detail-hold">
<h2>Host is holding — SSH available</h2>
<code class="hold-ssh">{ sshInvocation(d.Tile.HoldKeyPath, d.Tile.Latest.HoldIP) }</code>
</section>
}
<section class="detail-section detail-actions">
<h2>Actions</h2>
<div class="detail-actions-row">
if canStart(d.Tile.Latest) {
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/start", d.Tile.Host.ID)) } class="inline">
<button type="submit">Start vetting</button>
</form>
} else {
<button type="button" disabled>Run in flight</button>
}
if canOverrideWipe(d.Tile.Latest) {
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/override-wipe", d.Tile.Host.ID)) } class="inline">
<button type="submit" class="danger">Override wipe-probe</button>
</form>
}
if hasReport(d.Tile.Latest) {
<a class="button-like" href={ templ.SafeURL(fmt.Sprintf("/reports/%d", d.Tile.Latest.ID)) } target="_blank" rel="noopener">View report</a>
}
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/delete", d.Tile.Host.ID)) } class="inline">
<button type="submit" class="danger">Delete host</button>
</form>
</div>
</section>
if len(d.SpecDiffs) > 0 {
<section class="detail-section detail-diffs">
<details open?={ hasCriticalDiff(d.SpecDiffs) }>
<summary><h2>Spec diffs ({ fmt.Sprintf("%d", len(d.SpecDiffs)) })</h2></summary>
<ul class="diff-list">
for _, diff := range d.SpecDiffs {
<li class={ "diff-row", "diff-" + diff.Severity }>
<div class="diff-field">{ diff.Field }</div>
<div class="diff-expected">expected: <code>{ diff.Expected }</code></div>
<div class="diff-actual">actual: <code>{ diff.Actual }</code></div>
</li>
}
</ul>
</details>
</section>
}
if d.Tile.Latest != nil {
<section class="detail-section">
<h2>Log</h2>
<div
class="detail-log"
id={ fmt.Sprintf("log-%d", d.Tile.Latest.ID) }
sse-swap={ fmt.Sprintf("log-%d", d.Tile.Latest.ID) }
hx-swap="beforeend"
></div>
</section>
}
<section class="detail-section detail-host-meta">
<details>
<summary><h2>Host details</h2></summary>
if d.Tile.Host.Notes != "" {
<div class="detail-notes">
<h3>Notes</h3>
<p>{ d.Tile.Host.Notes }</p>
</div>
}
<div class="detail-spec">
<h3>Expected spec</h3>
<pre class="detail-spec-yaml">{ d.Tile.Host.ExpectedSpecYAML }</pre>
</div>
</details>
</section>
</section>
}
}
// hasCriticalDiff opens the spec-diff <details> by default when any
// diff is critical — operator shouldn't have to click to see the blocker.
func hasCriticalDiff(diffs []model.SpecDiff) bool {
for _, d := range diffs {
if d.Severity == "critical" && !d.Ignored {
return true
}
}
return false
}