clustvirt/view/hostinfo.templ

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)
}