ui: update chip + per-host button
- Surface UpdateAvailable + TargetVersion on the dashboard host row, the host_chrome header, and the JSON Host shape. - New host_update_chip partial renders an amber out-of-date pill next to the agent-version display when the host's agent trails the server. - Host detail right-rail gains an admin-only Update agent button (disabled when host is offline or already updating). - New .update-chip and .btn-amber CSS tokens; tailwind output refreshed.
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -104,6 +104,65 @@
|
||||
.btn-lg { font-size: 13px; padding: 9px 14px; }
|
||||
.btn-block { width: 100%; justify-content: center; }
|
||||
|
||||
/* Amber action — used for the per-host "Update agent" button and
|
||||
the fleet-update Start button. Same warning palette as the
|
||||
update-chip below. */
|
||||
.btn-amber {
|
||||
color: oklch(0.18 0.01 80);
|
||||
background: var(--warn);
|
||||
border-color: var(--warn);
|
||||
}
|
||||
.btn-amber:hover { filter: brightness(1.08); }
|
||||
.btn-amber:disabled, .btn-amber[disabled] {
|
||||
opacity: 0.45; cursor: not-allowed; pointer-events: none;
|
||||
}
|
||||
|
||||
/* Update-available chip — small amber pill rendered next to a host's
|
||||
agent version (in the row OS column and in the host detail
|
||||
header). Hidden when the host is up to date. */
|
||||
.update-chip {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px; font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: oklch(0.18 0.01 80);
|
||||
background: color-mix(in oklch, var(--warn), transparent 30%);
|
||||
border: 1px solid color-mix(in oklch, var(--warn), transparent 50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Hero tile — large, clickable summary card on the dashboard.
|
||||
Today only used by the "N hosts behind" tile; the existing
|
||||
four summary boxes use bespoke grid markup. Add more variants
|
||||
as adjacent dashboard tiles adopt this. */
|
||||
.hero-tile {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--line-soft);
|
||||
background: var(--panel);
|
||||
text-decoration: none;
|
||||
transition: filter 120ms ease, background 120ms ease;
|
||||
}
|
||||
.hero-tile:hover { filter: brightness(1.08); }
|
||||
.hero-tile .hero-num {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 22px; font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ink);
|
||||
}
|
||||
.hero-tile .hero-label {
|
||||
font-size: 11.5px;
|
||||
color: var(--ink-mute);
|
||||
}
|
||||
.hero-tile--amber {
|
||||
background: color-mix(in oklch, var(--warn), transparent 88%);
|
||||
border-color: color-mix(in oklch, var(--warn), transparent 60%);
|
||||
}
|
||||
.hero-tile--amber .hero-num { color: oklch(0.86 0.13 80); }
|
||||
.hero-tile--amber .hero-label { color: oklch(0.78 0.08 80); }
|
||||
|
||||
/* ---------- nav tabs ---------- */
|
||||
.nav-tab {
|
||||
font-size: 13px; padding: 18px 0;
|
||||
|
||||
@@ -78,6 +78,26 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{if and $page.CanAdmin $page.UpdateAvailable}}
|
||||
<div class="panel rounded-[7px] px-4 py-3.5">
|
||||
<div class="text-[11px] text-ink-fade uppercase tracking-[0.1em] mb-2.5">Agent update</div>
|
||||
<p class="text-[12px] text-ink-mute leading-[1.55] mb-3">
|
||||
Agent at <span class="mono text-ink-mid">{{$host.AgentVersion}}</span> ·
|
||||
server at <span class="mono text-ink-mid">{{$page.TargetVersion}}</span>.
|
||||
Pushes a self-update command; the agent re-launches into the new binary
|
||||
and reconnects.
|
||||
</p>
|
||||
<form hx-post="/hosts/{{$host.ID}}/update" hx-swap="none">
|
||||
<button class="btn btn-amber btn-block"
|
||||
{{if not $page.Online}}disabled title="Agent must be online"
|
||||
{{else if $page.UpdateInProgress}}disabled title="Update already in progress"
|
||||
{{end}}>
|
||||
Update agent
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="panel rounded-[7px] px-4 py-3.5">
|
||||
<div class="text-[11px] text-ink-fade uppercase tracking-[0.1em] mb-2.5">Restore</div>
|
||||
<p class="text-[12px] text-ink-mute leading-[1.55] mb-3">
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
<div class="flex items-center gap-3 mt-3 text-[13px] text-ink-mute">
|
||||
<span class="mono text-ink-mid">{{$host.OS}}/{{$host.Arch}}</span>
|
||||
<span class="text-ink-fade">·</span>
|
||||
<span>agent <span class="mono text-ink-mid">{{if $host.AgentVersion}}{{$host.AgentVersion}}{{else}}—{{end}}</span></span>
|
||||
<span>agent <span class="mono text-ink-mid">{{if $host.AgentVersion}}{{$host.AgentVersion}}{{else}}—{{end}}</span>{{if $page.UpdateAvailable}} {{template "host_update_chip" $page}}{{end}}</span>
|
||||
<span class="text-ink-fade">·</span>
|
||||
<span>restic <span class="mono text-ink-mid">{{if $host.ResticVersion}}{{$host.ResticVersion}}{{else}}—{{end}}</span></span>
|
||||
<span class="text-ink-fade">·</span>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
{{- end -}}
|
||||
</div>
|
||||
<div class="mono {{if eq $h.Status "offline"}}text-ink-mid{{else}}text-ink{{end}} font-medium">{{$h.Name}}</div>
|
||||
<div class="mono text-ink-mid text-[12px]">{{$h.OS}}/{{$h.Arch}}</div>
|
||||
<div class="mono text-ink-mid text-[12px]">{{$h.OS}}/{{$h.Arch}}{{if .UpdateAvailable}} {{template "host_update_chip" .}}{{end}}</div>
|
||||
<div class="text-xs text-ink-mid">
|
||||
{{- if $h.CurrentJobID -}}
|
||||
<span class="text-accent">backup running…</span><br>
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
{{/*
|
||||
host_update_chip — small amber chip rendered when the agent version
|
||||
on a host is behind the server's. Expects:
|
||||
.UpdateAvailable bool
|
||||
.TargetVersion string
|
||||
.Host store.Host (for AgentVersion)
|
||||
Hidden entirely when UpdateAvailable is false.
|
||||
*/}}
|
||||
{{define "host_update_chip"}}
|
||||
{{if .UpdateAvailable}}<span class="update-chip" title="Agent at {{.Host.AgentVersion}}; server at {{.TargetVersion}}">out of date · {{.Host.AgentVersion}} → {{.TargetVersion}}</span>{{end}}
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user