Add a localhost-only web console so VM and image management no longer depends on the CLI for every inspection and lifecycle action. Wire bangerd up to a configurable web listener, expose dashboard and async image-build state through the daemon, and serve CSRF-protected HTML pages with host-path picking, VM/image detail views, logs, ports, and progress polling for long-running operations. Keep the browser path aligned with the existing sudo and host-owned artifact model: surface sudo readiness, print the web URL in daemon status, and document the new workflow. Polish the UI with resource usage cards, clearer clickable affordances, cancel paths, confirmation prompts, image-name links, and HTTP port links. Validation: GOCACHE=/tmp/banger-gocache go test ./...
182 lines
7.9 KiB
HTML
182 lines
7.9 KiB
HTML
{{define "image_list_content"}}
|
|
<div class="section-head">
|
|
<p class="muted">Manage registered rootfs/kernel stacks and promote unmanaged experiments into daemon-owned artifacts.</p>
|
|
<div class="stack-inline">
|
|
<a class="button secondary" href="/images/register">Register Image</a>
|
|
<a class="button" href="/images/build">Build Image</a>
|
|
</div>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Managed</th>
|
|
<th>Docker</th>
|
|
<th>Rootfs</th>
|
|
<th>Created</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Images}}
|
|
<tr>
|
|
<td><a class="table-link" href="/images/{{.ID}}">{{.Name}}</a></td>
|
|
<td>{{formatBool .Managed}}</td>
|
|
<td>{{formatBool .Docker}}</td>
|
|
<td><code>{{.RootfsPath}}</code></td>
|
|
<td>{{relativeTime .CreatedAt}}</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr><td colspan="5" class="muted">No images registered.</td></tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
{{end}}
|
|
|
|
{{define "image_build_content"}}
|
|
<p class="muted">Build a managed image from a base rootfs, then redirect into the async build progress view.</p>
|
|
{{if .ErrorMessage}}
|
|
<div class="inline-error">{{.ErrorMessage}}</div>
|
|
{{end}}
|
|
<form method="post" action="/images/build" class="form-grid">
|
|
{{template "csrf_field" .}}
|
|
<label><span>Name</span><input type="text" name="name" value="{{.ImageBuildForm.Name}}" placeholder="generated when empty"></label>
|
|
<label class="picker-field">
|
|
<span>Base Rootfs</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="base_rootfs" value="{{.ImageBuildForm.BaseRootfs}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="base_rootfs" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label><span>Size Override</span><input type="text" name="size" value="{{.ImageBuildForm.Size}}" placeholder="optional"></label>
|
|
<label class="picker-field">
|
|
<span>Kernel Path</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="kernel_path" value="{{.ImageBuildForm.KernelPath}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="kernel_path" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="picker-field">
|
|
<span>Initrd Path</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="initrd_path" value="{{.ImageBuildForm.InitrdPath}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="initrd_path" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="picker-field">
|
|
<span>Modules Directory</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="modules_dir" value="{{.ImageBuildForm.ModulesDir}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="modules_dir" data-picker-kind="dir">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="docker" {{if .ImageBuildForm.Docker}}checked{{end}}>
|
|
<span>Install Docker</span>
|
|
</label>
|
|
<div class="form-actions">
|
|
<a class="button secondary" href="/images">Cancel</a>
|
|
<button class="button" type="submit" {{if not .MutationAllowed}}disabled{{end}}>Build Image</button>
|
|
</div>
|
|
</form>
|
|
{{end}}
|
|
|
|
{{define "image_register_content"}}
|
|
<p class="muted">Register an existing host-side image stack. Paths stay on the host; nothing is uploaded through the browser.</p>
|
|
{{if .ErrorMessage}}
|
|
<div class="inline-error">{{.ErrorMessage}}</div>
|
|
{{end}}
|
|
<form method="post" action="/images/register" class="form-grid">
|
|
{{template "csrf_field" .}}
|
|
<label><span>Name</span><input type="text" name="name" value="{{.ImageRegisterForm.Name}}"></label>
|
|
<label class="picker-field">
|
|
<span>Rootfs Path</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="rootfs_path" value="{{.ImageRegisterForm.RootfsPath}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="rootfs_path" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="picker-field">
|
|
<span>Work Seed Path</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="work_seed_path" value="{{.ImageRegisterForm.WorkSeedPath}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="work_seed_path" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="picker-field">
|
|
<span>Kernel Path</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="kernel_path" value="{{.ImageRegisterForm.KernelPath}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="kernel_path" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="picker-field">
|
|
<span>Initrd Path</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="initrd_path" value="{{.ImageRegisterForm.InitrdPath}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="initrd_path" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="picker-field">
|
|
<span>Modules Directory</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="modules_dir" value="{{.ImageRegisterForm.ModulesDir}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="modules_dir" data-picker-kind="dir">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="picker-field">
|
|
<span>Packages Manifest</span>
|
|
<div class="picker-input">
|
|
<input type="text" name="packages_path" value="{{.ImageRegisterForm.PackagesPath}}" data-picker-input>
|
|
<button type="button" class="button secondary" data-picker-target="packages_path" data-picker-kind="file">Browse</button>
|
|
</div>
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="docker" {{if .ImageRegisterForm.Docker}}checked{{end}}>
|
|
<span>Mark image as Docker-ready</span>
|
|
</label>
|
|
<div class="form-actions">
|
|
<a class="button secondary" href="/images">Cancel</a>
|
|
<button class="button" type="submit" {{if not .MutationAllowed}}disabled{{end}}>Register Image</button>
|
|
</div>
|
|
</form>
|
|
{{end}}
|
|
|
|
{{define "image_show_content"}}
|
|
<section class="detail-grid">
|
|
<article class="detail-card">
|
|
<h2>{{.Image.Name}}</h2>
|
|
<dl>
|
|
<dt>ID</dt><dd><code>{{.Image.ID}}</code></dd>
|
|
<dt>Managed</dt><dd>{{formatBool .Image.Managed}}</dd>
|
|
<dt>Docker</dt><dd>{{formatBool .Image.Docker}}</dd>
|
|
<dt>Used By</dt><dd>{{.ImageUsers}} VM(s)</dd>
|
|
</dl>
|
|
</article>
|
|
<article class="detail-card">
|
|
<h2>Artifacts</h2>
|
|
<dl>
|
|
<dt>Rootfs</dt><dd><code>{{.Image.RootfsPath}}</code></dd>
|
|
<dt>Work Seed</dt><dd>{{if .Image.WorkSeedPath}}<code>{{.Image.WorkSeedPath}}</code>{{else}}-{{end}}</dd>
|
|
<dt>Kernel</dt><dd><code>{{.Image.KernelPath}}</code></dd>
|
|
<dt>Initrd</dt><dd>{{if .Image.InitrdPath}}<code>{{.Image.InitrdPath}}</code>{{else}}-{{end}}</dd>
|
|
<dt>Modules</dt><dd>{{if .Image.ModulesDir}}<code>{{.Image.ModulesDir}}</code>{{else}}-{{end}}</dd>
|
|
</dl>
|
|
</article>
|
|
<article class="detail-card">
|
|
<h2>Lifecycle</h2>
|
|
<dl>
|
|
<dt>Created</dt><dd>{{relativeTime .Image.CreatedAt}}</dd>
|
|
<dt>Updated</dt><dd>{{relativeTime .Image.UpdatedAt}}</dd>
|
|
<dt>Packages</dt><dd>{{if .Image.PackagesPath}}<code>{{.Image.PackagesPath}}</code>{{else}}-{{end}}</dd>
|
|
<dt>Artifact Dir</dt><dd>{{if .Image.ArtifactDir}}<code>{{.Image.ArtifactDir}}</code>{{else}}-{{end}}</dd>
|
|
</dl>
|
|
</article>
|
|
</section>
|
|
|
|
<div class="stack-inline">
|
|
{{if not .Image.Managed}}
|
|
<form method="post" action="/images/{{.Image.ID}}/promote">{{template "csrf_field" .}}<button class="button" type="submit" {{if not .MutationAllowed}}disabled{{end}}>Promote to Managed</button></form>
|
|
{{end}}
|
|
<form method="post" action="/images/{{.Image.ID}}/delete" data-confirm="Delete image {{.Image.Name}}?">{{template "csrf_field" .}}<button class="button danger" type="submit" {{if not .MutationAllowed}}disabled{{end}}>Delete Image</button></form>
|
|
</div>
|
|
{{end}}
|