Maintainarr/internal/views/pages/node.gohtml

{{define "content"}}
{{$data := .Content}}
<section class="d-flex flex-column flex-xl-row justify-content-between align-items-xl-end gap-3 mb-4">
  <div>
    <div class="text-uppercase small fw-semibold text-primary mb-2">{{$data.Node.Distro}}</div>
    <h1 class="display-6 fw-bold mb-2">{{$data.Node.Name}}</h1>
    <p class="text-body-secondary mb-0">{{$data.Node.Hostname}} · {{$data.Node.IPAddress}}{{if $data.Node.GroupName}} · {{$data.Node.GroupName}}{{end}}{{if $data.Node.Tag}} · #{{$data.Node.Tag}}{{end}}</p>
  </div>
  <div class="d-flex flex-wrap gap-2">
    <form method="post" action="/nodes/{{$data.Node.ID}}/actions/refresh"><button class="btn btn-outline-primary"><i class="ti ti-refresh me-2"></i>Refresh Stats</button></form>
    <form method="post" action="/nodes/{{$data.Node.ID}}/actions/wake"><button class="btn btn-outline-secondary"><i class="ti ti-bolt me-2"></i>Wake</button></form>
    <form method="post" action="/nodes/{{$data.Node.ID}}/actions/restart"><button class="btn btn-outline-secondary"><i class="ti ti-rotate-clockwise-2 me-2"></i>Restart</button></form>
    <form method="post" action="/nodes/{{$data.Node.ID}}/actions/shutdown"><button class="btn btn-danger"><i class="ti ti-power me-2"></i>Shutdown</button></form>
    <form method="post" action="/nodes/{{$data.Node.ID}}/delete" onsubmit="return confirm('Delete this VM? This removes its jobs and command history.')"><button class="btn btn-outline-danger"><i class="ti ti-trash me-2"></i>Delete VM</button></form>
  </div>
</section>

<section class="row g-3 mb-4 node-live" data-node-id="{{$data.Node.ID}}">
  <div class="col-12 col-md-6 col-xxl-3">
    <div class="card border-0 shadow-sm stat-card kpi-card h-100" data-kpi="cpu">
      <div class="kpi-graph"></div>
      <div class="card-body position-relative">
        <div class="small text-body-secondary mb-2">CPU</div>
        <div class="display-6 fw-bold" data-kpi-value="cpu">{{printf "%.1f" $data.Node.CPUUsage}}%</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-6 col-xxl-3">
    <div class="card border-0 shadow-sm stat-card kpi-card h-100" data-kpi="ram">
      <div class="kpi-graph"></div>
      <div class="card-body position-relative">
        <div class="small text-body-secondary mb-2">RAM</div>
        <div class="display-6 fw-bold" data-kpi-value="ram">{{printf "%.1f" $data.Node.RAMUsage}}%</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-6 col-xxl-3">
    <div class="card border-0 shadow-sm stat-card kpi-card h-100" data-kpi="disk">
      <div class="kpi-graph"></div>
      <div class="card-body position-relative">
        <div class="small text-body-secondary mb-2">Disk</div>
        <div class="display-6 fw-bold" data-kpi-value="disk">{{printf "%.1f" $data.Node.DiskUsage}}%</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-6 col-xxl-3">
    <div class="card border-0 shadow-sm stat-card kpi-card h-100" data-kpi="uptime">
      <div class="kpi-graph"></div>
      <div class="card-body position-relative">
        <div class="small text-body-secondary mb-2">Uptime</div>
        <div class="fs-3 fw-bold" data-kpi-value="uptime">{{uptime $data.Node.UptimeSeconds}}</div>
      </div>
    </div>
  </div>
</section>

<section class="row g-4">
  <div class="col-12 col-xl-4">
    <article class="card border-0 shadow-sm h-100">
      <div class="card-body p-4">
        <div class="system-summary vstack gap-3">
          <div class="system-summary-item">
            <div class="chip-icon system-summary-icon">
              <i class="{{nodeIconClass $data.Node.Distro $data.Node.PackageManager}}"></i>
            </div>
            <div class="min-w-0">
              <div class="system-summary-label">Distribution</div>
              <div class="system-summary-value text-truncate">{{$data.Node.Distro}}</div>
            </div>
          </div>
          <div class="system-summary-item">
            <div class="chip-icon system-summary-icon">
              <i class="{{packageManagerIconClass $data.Node.PackageManager}}"></i>
            </div>
            <div class="min-w-0">
              <div class="system-summary-label">Package Manager</div>
              <div class="system-summary-value text-truncate">{{packageManagerLabel $data.Node.PackageManager}}</div>
            </div>
          </div>
          <div class="system-summary-stats">
            <div class="system-summary-stat">
              <span class="text-body-secondary">Architecture</span>
              <span class="text-end">{{$data.Node.Architecture}}</span>
            </div>
            <div class="system-summary-stat">
              <span class="text-body-secondary">Kernel</span>
              <span class="text-end">{{$data.Node.KernelVersion}}</span>
            </div>
            <div class="system-summary-stat">
              <span class="text-body-secondary">Memory</span>
              <span class="text-end">{{if $data.Node.MemoryTotalMB}}{{$data.Node.MemoryTotalMB}} MB{{else}}-{{end}}</span>
            </div>
            <div class="system-summary-stat">
              <span class="text-body-secondary">Disk</span>
              <span class="text-end">{{if $data.Node.DiskTotalGB}}{{$data.Node.DiskTotalGB}} GB{{else}}-{{end}}</span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>

  <div class="col-12 col-xl-8">
    <article class="card border-0 shadow-sm h-100">
      <div class="card-body p-0">
        <div class="console-shell">
          <div id="console" class="console-output console-terminal" data-ws="/nodes/{{$data.Node.ID}}/console/ws" data-xterm="true"></div>
        </div>
      </div>
    </article>
  </div>
</section>
{{end}}