inecs
f8d3cbdd59
Add the FastAPI app, PostgreSQL migrations, Docker/Helm packaging, API contracts, docs, client examples, and the unit/integration/compatibility test suite for local client and tooling labs without a real vCenter.
343 lines
14 KiB
HTML
343 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>VMware API Emulator · Console</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--bg: #0b1020;
|
|
--panel: #121a2f;
|
|
--panel-2: #18233d;
|
|
--border: #2a3555;
|
|
--text: #e8eefc;
|
|
--muted: #93a0c0;
|
|
--accent: #8EC368;
|
|
--accent-2: #A4DB6E;
|
|
--danger: #ff6b7a;
|
|
--ok: #4ade80;
|
|
--shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
|
|
--radius: 16px;
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: var(--sans);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(122, 193, 66, 0.20), transparent 28%),
|
|
radial-gradient(circle at top right, rgba(143, 209, 79, 0.12), transparent 24%),
|
|
var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.wrap { max-width: 1180px; margin: 0 auto; padding: 32px 20px 48px; }
|
|
header {
|
|
display: flex; justify-content: space-between; align-items: flex-start;
|
|
gap: 16px; margin-bottom: 28px;
|
|
}
|
|
h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 2vw, 2.2rem); }
|
|
.subtitle { color: var(--muted); max-width: 56ch; line-height: 1.5; }
|
|
.links { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.links a {
|
|
color: var(--text); text-decoration: none; border: 1px solid var(--border);
|
|
background: rgba(255,255,255,0.03); padding: 8px 12px; border-radius: 999px;
|
|
font-size: 0.92rem;
|
|
}
|
|
.grid {
|
|
display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px;
|
|
}
|
|
.card {
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--panel);
|
|
border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.span-4 { grid-column: span 4; }
|
|
.span-5 { grid-column: span 5; }
|
|
.span-7 { grid-column: span 7; }
|
|
.span-8 { grid-column: span 8; }
|
|
.span-12 { grid-column: span 12; }
|
|
@media (max-width: 900px) {
|
|
.span-4, .span-5, .span-7, .span-8 { grid-column: span 12; }
|
|
}
|
|
h2 { margin: 0 0 14px; font-size: 1rem; letter-spacing: 0.02em; }
|
|
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
|
|
input, select, textarea, button {
|
|
width: 100%; font: inherit; border-radius: 12px; border: 1px solid var(--border);
|
|
background: var(--panel-2); color: var(--text); padding: 11px 12px;
|
|
}
|
|
textarea { min-height: 120px; font-family: var(--mono); font-size: 0.88rem; resize: vertical; }
|
|
button {
|
|
cursor: pointer; background: linear-gradient(135deg, var(--accent), #6FA84A);
|
|
border: none; font-weight: 600; margin-top: 10px;
|
|
}
|
|
button.secondary {
|
|
background: transparent; border: 1px solid var(--border); font-weight: 500;
|
|
}
|
|
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
.stat {
|
|
background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px;
|
|
padding: 14px;
|
|
}
|
|
.stat .label { color: var(--muted); font-size: 0.82rem; margin-bottom: 6px; }
|
|
.stat .value { font-size: 1.25rem; font-weight: 700; }
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
|
|
border-radius: 999px; background: rgba(74, 222, 128, 0.12); color: var(--ok);
|
|
border: 1px solid rgba(74, 222, 128, 0.25); font-size: 0.85rem;
|
|
}
|
|
.pill.warn { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border-color: rgba(251,191,36,0.25); }
|
|
pre {
|
|
margin: 0; padding: 14px; border-radius: 14px; background: #070b14;
|
|
border: 1px solid var(--border); overflow: auto; font-family: var(--mono);
|
|
font-size: 0.84rem; line-height: 1.45; min-height: 180px;
|
|
}
|
|
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.actions button { width: auto; flex: 1 1 140px; margin-top: 0; }
|
|
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 8px; line-height: 1.4; }
|
|
.error { color: var(--danger); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header>
|
|
<div>
|
|
<h1>VMware API Emulator</h1>
|
|
<p class="subtitle">
|
|
Lab console for the vSphere REST surface. Sign in with a session, inspect
|
|
inventory, and send requests using the <code>vmware-api-session-id</code> header.
|
|
</p>
|
|
</div>
|
|
<div class="links">
|
|
<a href="/" rel="noreferrer">Full lab UI</a>
|
|
<a href="/docs" target="_blank" rel="noreferrer">OpenAPI</a>
|
|
<a href="/health/ready" target="_blank" rel="noreferrer">Readiness</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid">
|
|
<section class="card span-4">
|
|
<h2>Authentication</h2>
|
|
<label for="username">Username</label>
|
|
<input id="username" value="administrator@vsphere.local" autocomplete="username">
|
|
<label for="password">Password</label>
|
|
<input id="password" type="password" value="VMware1!" autocomplete="current-password">
|
|
<button id="login-btn">Create session</button>
|
|
<button id="logout-btn" class="secondary">Delete session</button>
|
|
<p class="hint">Default lab user: <code>administrator@vsphere.local</code> / <code>VMware1!</code>.</p>
|
|
<label for="session">vmware-api-session-id</label>
|
|
<input id="session" readonly>
|
|
<div id="auth-status" class="pill warn" style="margin-top:12px;">Not authenticated</div>
|
|
</section>
|
|
|
|
<section class="card span-8">
|
|
<h2>Inventory snapshot</h2>
|
|
<div class="stats">
|
|
<div class="stat"><div class="label">vCenter</div><div class="value" id="stat-version">—</div></div>
|
|
<div class="stat"><div class="label">Hosts</div><div class="value" id="stat-hosts">—</div></div>
|
|
<div class="stat"><div class="label">VMs</div><div class="value" id="stat-vms">—</div></div>
|
|
</div>
|
|
<div class="actions" style="margin-top:14px;">
|
|
<button class="secondary" data-action="refresh">Refresh overview</button>
|
|
<button class="secondary" data-action="hosts">GET /api/vcenter/host</button>
|
|
<button class="secondary" data-action="vms">GET /api/vcenter/vm</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card span-5">
|
|
<h2>Quick request</h2>
|
|
<div class="row">
|
|
<div>
|
|
<label for="method">Method</label>
|
|
<select id="method">
|
|
<option>GET</option>
|
|
<option>POST</option>
|
|
<option>PUT</option>
|
|
<option>PATCH</option>
|
|
<option>DELETE</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="path">Path</label>
|
|
<input id="path" value="/api/vcenter/vm">
|
|
</div>
|
|
</div>
|
|
<label for="body">Body (JSON)</label>
|
|
<textarea id="body"></textarea>
|
|
<button id="send-btn">Send request</button>
|
|
<p class="hint">Authenticated requests attach the session header automatically.</p>
|
|
</section>
|
|
|
|
<section class="card span-7">
|
|
<h2>Response</h2>
|
|
<pre id="output">Waiting for a request…</pre>
|
|
</section>
|
|
|
|
<section class="card span-12">
|
|
<h2>Task lookup</h2>
|
|
<div class="row">
|
|
<div>
|
|
<label for="task">Task id</label>
|
|
<input id="task" placeholder="task-… from a mutation">
|
|
</div>
|
|
<div>
|
|
<label for="vm">VM id (optional)</label>
|
|
<input id="vm" placeholder="vm-111">
|
|
</div>
|
|
</div>
|
|
<div class="actions" style="margin-top:10px;">
|
|
<button class="secondary" id="task-status-btn">GET /api/cis/tasks/{task}</button>
|
|
<button class="secondary" id="vm-get-btn">GET /api/vcenter/vm/{vm}</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const output = document.getElementById("output");
|
|
const sessionInput = document.getElementById("session");
|
|
const authStatus = document.getElementById("auth-status");
|
|
const LS_KEY = "vmware-console-session";
|
|
|
|
function show(data, status) {
|
|
output.textContent = JSON.stringify({ status, data }, null, 2);
|
|
output.classList.remove("error");
|
|
}
|
|
|
|
function sessionId() {
|
|
return (sessionInput.value || "").trim();
|
|
}
|
|
|
|
function setAuthUi(username) {
|
|
const sid = sessionId();
|
|
if (sid && username) {
|
|
authStatus.textContent = `Authenticated as ${username}`;
|
|
authStatus.classList.remove("warn");
|
|
document.cookie = `vmware-api-session-id=${encodeURIComponent(sid)}; path=/; SameSite=Strict`;
|
|
localStorage.setItem(LS_KEY, JSON.stringify({ ticket: sid, username }));
|
|
} else {
|
|
authStatus.textContent = "Not authenticated";
|
|
authStatus.classList.add("warn");
|
|
document.cookie = "vmware-api-session-id=; Max-Age=0; path=/; SameSite=Strict";
|
|
localStorage.removeItem(LS_KEY);
|
|
}
|
|
}
|
|
|
|
async function apiFetch(path, options = {}) {
|
|
const headers = new Headers(options.headers || {});
|
|
headers.set("Accept", "application/json");
|
|
const sid = sessionId();
|
|
if (sid) headers.set("vmware-api-session-id", sid);
|
|
const response = await fetch(path, { ...options, headers, credentials: "include" });
|
|
let data;
|
|
const text = await response.text();
|
|
try { data = text ? JSON.parse(text) : null; } catch { data = { raw: text }; }
|
|
show(data, response.status);
|
|
return { response, data };
|
|
}
|
|
|
|
async function refreshOverview() {
|
|
const version = await apiFetch("/api/appliance/system/version");
|
|
document.getElementById("stat-version").textContent =
|
|
version.data?.version || "unknown";
|
|
if (!sessionId()) {
|
|
const demo = await fetch("/ui/api/demo/state").then((r) => r.json()).catch(() => null);
|
|
document.getElementById("stat-hosts").textContent = demo?.vsphere?.hosts ?? "—";
|
|
document.getElementById("stat-vms").textContent = demo?.vsphere?.vms ?? "—";
|
|
return;
|
|
}
|
|
const hosts = await apiFetch("/api/vcenter/host");
|
|
const demo = await fetch("/ui/api/demo/state").then((r) => r.json()).catch(() => null);
|
|
document.getElementById("stat-hosts").textContent =
|
|
Array.isArray(hosts.data) ? hosts.data.length : (demo?.vsphere?.hosts ?? "0");
|
|
document.getElementById("stat-vms").textContent = demo?.vsphere?.vms ?? "—";
|
|
}
|
|
|
|
document.getElementById("login-btn").addEventListener("click", async () => {
|
|
const username = document.getElementById("username").value.trim();
|
|
const password = document.getElementById("password").value;
|
|
const basic = btoa(`${username}:${password}`);
|
|
const result = await apiFetch("/api/session", {
|
|
method: "POST",
|
|
headers: { Authorization: `Basic ${basic}` },
|
|
});
|
|
let sid = typeof result.data === "string" ? result.data : result.data?.value || null;
|
|
sid = sid || result.response.headers.get("vmware-api-session-id");
|
|
if (result.response.ok && sid) {
|
|
sessionInput.value = sid;
|
|
setAuthUi(username);
|
|
await refreshOverview();
|
|
} else {
|
|
sessionInput.value = "";
|
|
setAuthUi(null);
|
|
authStatus.textContent = "Authentication failed";
|
|
authStatus.classList.add("warn");
|
|
}
|
|
});
|
|
|
|
document.getElementById("logout-btn").addEventListener("click", async () => {
|
|
if (sessionId()) {
|
|
await apiFetch("/api/session", { method: "DELETE" });
|
|
}
|
|
sessionInput.value = "";
|
|
setAuthUi(null);
|
|
await refreshOverview();
|
|
});
|
|
|
|
document.getElementById("send-btn").addEventListener("click", async () => {
|
|
const method = document.getElementById("method").value;
|
|
const path = document.getElementById("path").value.trim();
|
|
const rawBody = document.getElementById("body").value.trim();
|
|
const options = { method };
|
|
if (rawBody && method !== "GET" && method !== "DELETE") {
|
|
options.headers = { "Content-Type": "application/json" };
|
|
options.body = rawBody;
|
|
}
|
|
await apiFetch(path, options);
|
|
});
|
|
|
|
document.querySelector('[data-action="refresh"]').addEventListener("click", () => refreshOverview());
|
|
document.querySelector('[data-action="hosts"]').addEventListener("click", () =>
|
|
apiFetch("/api/vcenter/host"));
|
|
document.querySelector('[data-action="vms"]').addEventListener("click", () =>
|
|
apiFetch("/api/vcenter/vm"));
|
|
|
|
document.getElementById("task-status-btn").addEventListener("click", async () => {
|
|
const task = encodeURIComponent(document.getElementById("task").value.trim());
|
|
if (!task) {
|
|
show({ error: "Enter a task id" }, 0);
|
|
return;
|
|
}
|
|
await apiFetch(`/api/cis/tasks/${task}`);
|
|
});
|
|
|
|
document.getElementById("vm-get-btn").addEventListener("click", async () => {
|
|
const vm = encodeURIComponent(document.getElementById("vm").value.trim());
|
|
if (!vm) {
|
|
show({ error: "Enter a VM id" }, 0);
|
|
return;
|
|
}
|
|
await apiFetch(`/api/vcenter/vm/${vm}`);
|
|
});
|
|
|
|
try {
|
|
const stored = JSON.parse(localStorage.getItem(LS_KEY) || "null");
|
|
if (stored?.ticket) {
|
|
sessionInput.value = stored.ticket;
|
|
setAuthUi(stored.username || "session");
|
|
}
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
|
|
refreshOverview().catch((error) => {
|
|
output.textContent = String(error);
|
|
output.classList.add("error");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|