Matthew Stobbs
4819cc8e9b
- Pages will go to view - pages will be seperated into each file by type (host, vm, etc.) - each page will have multiple sections in each file that can be either rendered together, or loaded via HTMX, depending on the call - started on htmx api endpoints
52 lines
1.8 KiB
Plaintext
52 lines
1.8 KiB
Plaintext
package view
|
|
|
|
import (
|
|
"git.staur.ca/stobbsm/clustvirt/lib/host"
|
|
bf "github.com/labstack/gommon/bytes"
|
|
"git.staur.ca/stobbsm/clustvirt/view/components"
|
|
"git.staur.ca/stobbsm/clustvirt/view/layouts"
|
|
)
|
|
|
|
// MemChart get's the memory pi chart from the host
|
|
templ MemChart(h *host.Host) {
|
|
<div class={ "flex" , "flex-row" }>
|
|
<div class={ "size-64" }>
|
|
@templ.Raw(h.ChartMemory())
|
|
</div>
|
|
<ul>
|
|
<li>Free: { bf.Format(int64(h.NodeMemory.Free*1024)) }</li>
|
|
<li>Cached: { bf.Format(int64(h.NodeMemory.Cached*1024)) }</li>
|
|
<li>Buffers: { bf.Format(int64(h.NodeMemory.Buffers*1024)) }</li>
|
|
<li>Total: { bf.Format(int64(h.NodeMemory.Total*1024)) }</li>
|
|
</ul>
|
|
</div>
|
|
}
|
|
|
|
// HostConnect is the page that allows us to select a host to get information from
|
|
templ HostMain(navBarItems []components.NavItem) {
|
|
@layouts.Manager("ClustVirt", "Cluster Manager", navBarItems) {
|
|
<div class={ "flex" , "flex-row" , "h-full" }>
|
|
<div id="sysNavBar" class={ "w-1/6" , "border-uigrey-600" , "border" , "rounded" , "border-dotted" , "p-1" }>
|
|
<ul>
|
|
<li><a href="#" hx-target="#sysContent" hx-get="/htmx/host/venus.staur.ca">venus.staur.ca</a></li>
|
|
<li><a href="#" hx-target="#sysContent" hx-get="/htmx/host/earth.staur.ca">earth.staur.ca</a></li>
|
|
<li><a href="#" hx-target="#sysContent" hx-get="/htmx/host/mars.staur.ca">mars.staur.ca</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="sysContent" class={ "w-3/4" , "px-2" }>
|
|
<p>This is where you can see a system overview of all available hosts</p>
|
|
<p>
|
|
For now, there is just this simple box to choose a host to connect to
|
|
and push the button to load the system information via HTMX
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// HostInfo is meant to be an HTMX response
|
|
templ HostInfo(h *host.Host) {
|
|
<h3>{ h.HostName }</h3>
|
|
@MemChart(h)
|
|
}
|