Matthew Stobbs
ed9acb7e10
- modified host menu to include the cluster view - whole site now works via htmx - about page is still static
82 lines
2.1 KiB
Plaintext
82 lines
2.1 KiB
Plaintext
package view
|
|
|
|
import (
|
|
"fmt"
|
|
"git.staur.ca/stobbsm/clustvirt/lib/host"
|
|
)
|
|
|
|
script memchart(used uint64, free uint64, buf uint64, cache uint64) {
|
|
ctx = document.getElementById('memchart');
|
|
|
|
new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: [
|
|
'Used',
|
|
'Free',
|
|
'Cached',
|
|
'Buffered'
|
|
],
|
|
datasets: [{
|
|
label: 'Memory Usage',
|
|
data: [
|
|
used,
|
|
free,
|
|
cache,
|
|
buf,
|
|
],
|
|
backgroundColor: [
|
|
'rgb(255,0,0)',
|
|
'rgb(0,255,0)',
|
|
'rgb(128,128,0)',
|
|
'rgb(0,0,255)'
|
|
],
|
|
hoverOffset: 4
|
|
}],
|
|
}
|
|
});
|
|
}
|
|
|
|
// MemChart get's the memory pi chart from the host
|
|
templ MemChart(h *host.Host) {
|
|
<div class={ "flex" , "flex-row" }>
|
|
<div class={ "size-40" , "md:size-80" }>
|
|
<canvas id="memchart" class={ "size-40" , "md:size-80" }></canvas>
|
|
</div>
|
|
<ul>
|
|
<li>Free: <span id="memfree">{ fmt.Sprintf("%d Gi", h.NodeMemory.Free/1024/1024) }</span></li>
|
|
<li>Cached: <span id="memcach">{ fmt.Sprintf("%d Gi", h.NodeMemory.Cached/1024/1024) }</span></li>
|
|
<li>Buffers: <span id="membuf">{ fmt.Sprintf("%d Gi", h.NodeMemory.Buffers/1024/1024) }</span></li>
|
|
<li>Total: <span id="memtot">{ fmt.Sprintf("%d Gi", h.NodeMemory.Total/1024/1024) }</span></li>
|
|
</ul>
|
|
</div>
|
|
@memchart(h.NodeMemory.Total-h.NodeMemory.Free-h.NodeMemory.Buffers-h.NodeMemory.Cached, h.NodeMemory.Free,
|
|
h.NodeMemory.Buffers, h.NodeMemory.Cached)
|
|
}
|
|
|
|
// HostConnect is the page that allows us to select a host to get information from
|
|
templ HostMain() {
|
|
}
|
|
|
|
// HostInfo is meant to be an HTMX response
|
|
templ HostInfo(h *host.Host) {
|
|
<div class={ "flex" , "flex-col" }>
|
|
<div
|
|
class={ "flex" , "flex-row" , "justify-start" , "px-2" }
|
|
hx-trigger="every 30s"
|
|
hx-get={ fmt.Sprintf("/htmx/host/%s/stats", h.HostName) }
|
|
hx-target="#sysInfo"
|
|
>
|
|
<h3>{ h.HostName }</h3>
|
|
<img class={ "h-6" , "px-2" , "htmx-indicator" , "inline-block" } src="/static/images/grid.svg"/>
|
|
</div>
|
|
<div class={ "flex" , "flex-row" , "flex-wrap" } id="sysInfo">
|
|
@HostStats(h)
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ HostStats(h *host.Host) {
|
|
@MemChart(h)
|
|
}
|