vm management

static/main.js

@@ -1,4 +1,5 @@
 // ------ helpers ------
+const tblVmAdmin = document.querySelector("#vm-admin");
 const $ = (q) => document.querySelector(q);
 function safe(v) { return (v === undefined || v === null || v === '') ? '—' : String(v); }
 function ensureArr(a) { return Array.isArray(a) ? a : []; }
@@ -87,6 +88,7 @@ async function doRefresh() {
   const d = await fetchSnapshot();
   renderSnap(d);
   if (!doRefresh.didNonHA) { await renderNonHA(); doRefresh.didNonHA = true; }
+  if (!doRefresh.didAdmin) { await renderVMAdmin(); doRefresh.didAdmin = true; }
 }
 btnRefresh.onclick = doRefresh;
 btnAuto.onclick = () => {
@@ -656,3 +658,66 @@ function renderSnap(d) {
 
 // initial one-shot load (auto refresh OFF by default)
 doRefresh().catch(console.error);
+
+
+// ------ VM Admin API/UI ------
+async function fetchAllVmct() {
+  const r = await fetch('/api/list-all-vmct');
+  return await r.json();
+}
+async function vmAction(sid, action, target) {
+  const body = { sid, action };
+  if (target) body.target = target;
+  const r = await fetch('/api/vm-action', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  const d = await r.json();
+  if (!d.ok) throw new Error(d.error || 'action failed');
+  return d;
+}
+async function renderVMAdmin() {
+  const data = await fetchAllVmct();
+  const arr = ensureArr(data.all);
+  const nodes = ensureArr(data.nodes);
+  const tbody = document.querySelector('#vm-admin tbody');
+  if (!arr.length) { setRows(tbody, [rowHTML(['No VMs/CTs'])]); return; }
+
+  const rows = arr.map(x => {
+    const sid = safe(x.sid), type = safe(x.type), name = safe(x.name), node = safe(x.node);
+    const st = /running/i.test(x.status || '') ? badge(x.status, 'ok') : badge(x.status || '—', 'dark');
+    const actions = `
+      <div class="btn-group btn-group-sm" role="group">
+        <button class="btn btn-outline-secondary act-unlock">Unlock</button>
+        <button class="btn btn-outline-success act-start">Start</button>
+        <button class="btn btn-outline-warning act-shutdown">Shutdown</button>
+        <button class="btn btn-outline-danger act-stop">Stop</button>
+        <button class="btn btn-outline-primary act-migrate">Migrate (offline)</button>
+      </div>`;
+    const sel = `<select class="form-select form-select-sm target-node" style="min-width:140px">
+      ${nodes.map(n => `<option value="${n}" ${n === x.node ? 'disabled' : ''}>${n}${n === x.node ? ' (src)' : ''}</option>`).join('')}
+    </select>`;
+    return rowHTML([sid, type.toUpperCase(), name, node, st, actions, sel], `data-sid="${sid}"`);
+  });
+
+  setRows(tbody, rows);
+
+  Array.from(tbody.querySelectorAll('tr[data-sid]')).forEach(tr => {
+    const sid = tr.getAttribute('data-sid');
+    const getTarget = () => tr.querySelector('.target-node')?.value || '';
+    const bind = (sel, action, needsTarget = false) => {
+      const btn = tr.querySelector(sel);
+      if (!btn) return;
+      btn.onclick = async () => {
+        btn.disabled = true;
+        try {
+          await vmAction(sid, action, needsTarget ? getTarget() : undefined);
+          await doRefresh();
+        } catch (e) { alert('ERROR: ' + e.message); }
+        btn.disabled = false;
+      };
+    };
+    bind('.act-unlock', 'unlock');
+    bind('.act-start', 'start');
+    bind('.act-stop', 'stop');
+    bind('.act-shutdown', 'shutdown');
+    bind('.act-migrate', 'migrate', true);
+  });
+}