1import { VMMenu } from "../components/VMMenu.tsx";
2import { useSearchParams } from "@solidjs/router";
3import CircuitBoard from "lucide-solid/icons/circuit-board";
4import HardDrive from "lucide-solid/icons/hard-drive";
5import Network from "lucide-solid/icons/network";
6import Monitor from "lucide-solid/icons/monitor";
7import SquareTerminal from "lucide-solid/icons/square-terminal";
8import Plus from "lucide-solid/icons/plus";
9import Power from "lucide-solid/icons/power";
10import Play from "lucide-solid/icons/play";
11import Disc3 from "lucide-solid/icons/disc-3";
12import Disc2 from "lucide-solid/icons/disc-2";
13import RotateCw from "lucide-solid/icons/rotate-cw";
14import Save from "lucide-solid/icons/save";
15import Trash from "lucide-solid/icons/trash";
16import Square from "lucide-solid/icons/square";
17import KeyRound from "lucide-solid/icons/key-round";
18import Usb from "lucide-solid/icons/usb";
19import { createEffect, createMemo, createResource, createSignal, For, lazy, onCleanup, Show } from "solid-js";
20import { LIVE_INTERVAL } from "../types/model.ts";
21import type { Domain, DOMAIN_ACTIONS, Hostdev, VMLibrary } from "../types/vms.ts";
22import { VM_SETUP } from "../types/vms.ts";
23import { DetailedError, parseResponse } from "hono/client";
24import { api, queries, reason, unconnected } from "../api.ts";
25import { VMConsole } from "../components/VMConsole.tsx";
26import { Checkbox } from "../components/Checkbox.tsx";
27import { Copy } from "../components/Copy.tsx";
28import { showConfirmDialog, showTextDialog } from "../components/Dialog.tsx";
29import { ListPage } from "../components/ListPage.tsx";
30import { lastGood, Loaded } from "../components/Loaded.tsx";
31import { Meter } from "../components/Meter.tsx";
32import { type StatusKind, StatusLabel } from "../components/Status.tsx";
33import { TimeChart } from "../components/TimeChart.tsx";
34import { TabBar } from "../components/TabBar.tsx";
35import { toast } from "../components/Toast.tsx";
36import { bytes, datetime, duration, percent, plural } from "../format.ts";
37import "./VMs.css";
38
39const VMSerial = lazy(() => import("../components/VMSerial.tsx"));
40
41const GiB = 2 ** 30;
42/** A guest whose agent hasn't answered this long after power-on counts as up anyway; many never install one. */
43const STARTING = 180;
44
45const REASONS: Record<string, string> = {
46 user: "paused manually",
47 ioerror: "paused after a disk error, check the vms pool's free space",
48 watchdog: "paused by its watchdog",
49 panicked: "the guest kernel panicked",
50};
51
52const isOff = (vm: Domain) => vm.state === "shutoff" || vm.state === "crashed";
53const running = (vm: Domain) => vm.state === "running" || vm.state === "blocked";
54
55function status(vm: Domain): [StatusKind, string, tip?: string] {
56 if (running(vm)) {
57 if (vm.setup && vm.setup !== "ready") return [vm.setup === "failed" ? "down" : vm.setup === "restarting" ? "restarting" : "starting", VM_SETUP[vm.setup]];
58 if (vm.startedAt === null) return ["healthy", "up"];
59 const up = Date.now() / 1000 - vm.startedAt!;
60 const started = `started ${datetime(vm.startedAt!)}`;
61 if (vm.agent !== "disconnected") return ["healthy", `up ${duration(up)}`, started];
62 if (up < STARTING) return ["starting", "starting", started];
63 return ["healthy", `up ${duration(up)}`, `${started}, guest agent not answering`];
64 }
65 const tip = vm.reason ? REASONS[vm.reason] ?? vm.reason : undefined;
66 switch (vm.state) {
67 case "paused": return ["stopped", "paused", tip];
68 case "pmsuspended": return ["stopped", "asleep", tip];
69 case "shutdown": return ["restarting", "stopping"];
70 case "crashed": return ["down", "crashed", tip];
71 default: return ["stopped", "off"];
72 }
73}
74
75/** "/dev/disk/by-id/nvme-Samsung_SSD_980_PRO_1TB_S5GX…" reads as "Samsung SSD 980 PRO 1TB": no bus, no serial. */
76const drive = (path: string) => path.split("/").at(-1)!.replace(/^[a-z]+-/, "").replace(/_[^_]+$/, "").replaceAll("_", " ");
77
78/** [8, 9, 10, 12] reads "8–10, 12". */
79const threads = (list: number[]) => list
80 .reduce<[number, number][]>((runs, n) => {
81 const last = runs.at(-1);
82 if (last && n === last[1] + 1) last[1] = n;
83 else runs.push([n, n]);
84 return runs;
85 }, [])
86 .map(([from, to]) => (from === to ? `${from}` : `${from}–${to}`))
87 .join(", ");
88
89/** Current and max memory, like "16 GiB", or "8–12 GiB" while the balloon holds some back. */
90const allocated = (vm: Domain) => (vm.balloon < vm.memory ? `${+(vm.balloon / GiB).toFixed(1)}–${bytes(vm.memory)}` : bytes(vm.memory));
91
92/** Remote desktop for Windows, the web UI for Home Assistant, ssh for the rest. */
93function remote(os: string, address: string): [href: string, label: string] {
94 const host = address.includes(":") ? `[${address}]` : address;
95 if (os.startsWith("Windows")) return [`rdp://full%20address=s:${host}:3389`, "rdp"];
96 if (os.startsWith("Home Assistant")) return [`http://${host}:8123`, "open"];
97 return [`ssh://${host}`, "ssh"];
98}
99
100/** Devices sharing an IOMMU group pass through together, so a GPU and its audio function read as one. */
101function groups(devices: Hostdev[]) {
102 const byGroup = new Map<number | Hostdev, Hostdev[]>();
103 for (const dev of devices) byGroup.set(dev.iommuGroup ?? dev, [...(byGroup.get(dev.iommuGroup ?? dev) ?? []), dev]);
104 return [...byGroup.values()];
105}
106
107async function act(vm: Domain, action: (typeof DOMAIN_ACTIONS)[number], refetch: () => unknown) {
108 await parseResponse(api.vms[":name"][":action"].$post({ param: { name: vm.name, action } }));
109 await refetch();
110}
111
112const stop = (vm: Domain, refetch: () => unknown) => showConfirmDialog({
113 title: `Stop ${vm.name}?`,
114 description: `${vm.name} shuts down as if its power button were pressed. If it hangs, force it off.`,
115 confirmLabel: "stop",
116 destructive: true,
117 onConfirm: () => act(vm, "shutdown", refetch),
118});
119
120const restart = (vm: Domain, refetch: () => unknown) => showConfirmDialog({
121 title: `Restart ${vm.name}?`,
122 description: `${vm.name} shuts down and boots again. Anyone using it is interrupted.`,
123 confirmLabel: "restart",
124 onConfirm: () => act(vm, "reboot", refetch),
125});
126
127const forceOff = (vm: Domain, refetch: () => unknown) => showConfirmDialog({
128 title: `Force off ${vm.name}?`,
129 description: `${vm.name} loses power without shutting down. Unsaved work in it is lost.`,
130 confirmLabel: "force off",
131 destructive: true,
132 onConfirm: () => act(vm, "destroy", refetch),
133});
134
135const describe = (vm: Domain, refetch: () => unknown) => showTextDialog({
136 title: `Describe ${vm.name}`,
137 label: "what it's for",
138 placeholder: "game streaming to the TV…",
139 initialValue: vm.description,
140 validateInput: () => true,
141 confirmLabel: "save",
142 onConfirm: async (description) => {
143 await parseResponse(api.vms[":name"].$patch({ param: { name: vm.name }, json: { description } }));
144 await refetch();
145 },
146});
147
148function remove(vm: Domain, refetch: () => unknown) {
149 const volumes = vm.disks.filter((disk) => disk.pool);
150 const size = bytes(volumes.reduce((sum, disk) => sum + disk.capacity, 0));
151 showConfirmDialog({
152 title: `Delete ${vm.name}?`,
153 description: () => (
154 <>
155 <p>{isOff(vm) ? "" : `${vm.name} is forced off first. `}<Show when={volumes.length}>Its managed disks ({size}) will be deleted. </Show>This can't be undone.</p>
156 <Show when={vm.disks.length > volumes.length}><p>Passed-through drives are left as they are.</p></Show>
157 </>
158 ),
159 confirmLabel: "delete",
160 destructive: true,
161 onConfirm: async () => {
162 await parseResponse(api.vms[":name"].$delete({ param: { name: vm.name }, query: { disks: "1" } }));
163 await refetch();
164 },
165 });
166}
167
168function uploadIso(refetch: () => unknown, onUploaded?: (volume: string) => void) {
169 let progress: (value: number) => void = () => {};
170 showConfirmDialog({
171 title: "Upload ISO",
172 confirmLabel: "upload",
173 body: () => {
174 const [percent, setPercent] = createSignal<number | null>(null);
175 progress = setPercent;
176 return <>
177 <label class="field">ISO file<input name="iso" class="search" type="file" accept=".iso" required /></label>
178 <span class="hint">Up to 32 GiB. The ISO stays in your library for future VMs</span>
179 <Show when={percent() !== null}><div class="vm-upload-progress" role="status">
180 <progress max="100" value={percent()!} />
181 <span>{percent() === 100 ? "Saving…" : `Uploading… ${percent()}%`}</span>
182 </div></Show>
183 </>;
184 },
185 onConfirm: async (form) => {
186 const file = form.get("iso");
187 if (!(file instanceof File) || !file.name.toLowerCase().endsWith(".iso")) throw new DetailedError("Choose an ISO file.", { detail: { data: "Choose an ISO file." } });
188 if (file.size < 32768 || file.size > 32 * GiB) throw new DetailedError("Choose an ISO between 32 KiB and 32 GiB.", { detail: { data: "Choose an ISO between 32 KiB and 32 GiB." } });
189 progress(0);
190 const volume = await new Promise<string>((resolve, reject) => {
191 const upload = new XMLHttpRequest();
192 upload.open("PUT", `/api/vms/iso?name=${encodeURIComponent(file.name)}`);
193 upload.upload.onprogress = (event) => event.lengthComputable && progress(Math.round(event.loaded / event.total * 100));
194 upload.onload = async () => {
195 try {
196 const value = upload.getResponseHeader("content-type")?.includes("json") ? JSON.parse(upload.responseText) : upload.responseText;
197 if (upload.status < 200 || upload.status >= 300) throw new DetailedError("ISO upload", { statusCode: upload.status, detail: { data: value } });
198 if (typeof value?.volume !== "string") throw new Error("Missing ISO identity");
199 resolve(value.volume);
200 } catch (failure) { reject(failure); }
201 };
202 upload.onerror = () => reject(new DetailedError("Upload interrupted", { detail: { data: "The upload was interrupted. Check your connection and try again." } }));
203 upload.send(file);
204 });
205 await refetch();
206 onUploaded?.(volume);
207 },
208 });
209}
210
211function create(node: { cpus: number; memory: number; availableMemory: number }, library: () => VMLibrary, domains: Domain[], refetch: () => unknown, onCreated: (name: string) => void) {
212 const installers = () => library().installers.filter((item) => item.arch === library().arch);
213 showConfirmDialog({
214 title: "New virtual machine",
215 confirmLabel: "create vm",
216 body: () => {
217 const suffix = Array.from(crypto.getRandomValues(new Uint8Array(4)), (byte) => byte.toString(16).padStart(2, "0")).join("");
218 const [choice, setChoice] = createSignal(library().presets[0]?.id ?? "");
219 const [iso, setIso] = createSignal(installers()[0]?.volume ?? "blank");
220 const selected = () => library().presets.find((item) => item.id === choice());
221 const generatedName = () => `testbox-${(choice() || "custom").slice(0, 46)}-${suffix}`;
222 const [name, setName] = createSignal(generatedName());
223 const recommended = () => selected()?.recommended ?? { vcpus: 2, memory: 4 * GiB, disk: 32 * GiB };
224 const maximumCpus = () => selected()?.platform === "macos" ? 1 : node.cpus;
225 const [vcpus, setVcpus] = createSignal(Math.min(maximumCpus(), recommended().vcpus));
226 const [memory, setMemory] = createSignal(Math.min(node.memory, recommended().memory) / GiB);
227 const [disk, setDisk] = createSignal(Math.ceil(recommended().disk / GiB));
228 const minimumDisk = () => Math.max(1, Math.ceil((selected()?.capacity ?? 0) / GiB));
229 const installer = () => installers().find((item) => item.volume === iso());
230 const problem = () => domains.some((vm) => vm.name === name()) ? `${name()} already exists. Pick another name` : "";
231 return <div class="vm-create">
232 <input type="hidden" name="mode" value={selected() ? "preset" : "iso"} />
233 <input type="hidden" name="image" value={selected()?.id ?? iso()} />
234 <label class="field">OS Preset<select class="search" onChange={(event) => {
235 const previousName = generatedName();
236 setChoice(event.currentTarget.value);
237 if (name() === previousName) setName(generatedName());
238 setVcpus(Math.min(maximumCpus(), recommended().vcpus));
239 setMemory(Math.min(node.memory, recommended().memory) / GiB);
240 setDisk(Math.ceil(recommended().disk / GiB));
241 }}>
242 <For each={library().presets}>{(item) => <option value={item.id} selected={choice() === item.id}>{item.os}</option>}</For>
243 <option value="" selected={!choice()}>Custom (Upload ISO)</option>
244 </select></label>
245 <Show when={!selected()}>
246 <div class="vm-custom-iso">
247 <label class="field">Installer ISO<select class="search" onChange={(event) => setIso(event.currentTarget.value)}>
248 <For each={installers()}>{(item) => <option value={item.volume} selected={iso() === item.volume}>{item.os}</option>}</For>
249 <option value="blank" selected={iso() === "blank"}>Attach an ISO later</option>
250 </select></label>
251 <button type="button" class="button small" onClick={() => uploadIso(refetch, setIso)}>upload ISO</button>
252 </div>
253 </Show>
254 <label class="field">name<input name="name" class="search" required pattern="[a-z0-9][a-z0-9\-]{0,62}" value={name()}
255 autocomplete="off" spellcheck={false} aria-invalid={!!problem()} aria-describedby="vm-name-problem"
256 ref={(input) => createEffect(() => input.setCustomValidity(problem()))} onInput={(event) => setName(event.currentTarget.value)} />
257 <Show when={problem()}><span id="vm-name-problem" class="error">{problem()}</span></Show>
258 </label>
259 <div class="vm-resources">
260 <label class="vm-resource"><span>CPUs<output>{vcpus()}</output></span>
261 <input name="vcpus" aria-label="CPUs" type="range" min="1" max={maximumCpus()} value={vcpus()} onInput={(event) => setVcpus(Number(event.currentTarget.value))} />
262 <span class="vm-resource-scale"><span>1</span><span>{maximumCpus()}</span></span>
263 </label>
264 <label class="vm-resource"><span>Memory<output>{bytes(memory() * GiB)}</output></span>
265 <input name="memory" aria-label="Memory" type="range" min="0.5" max={Math.floor(node.memory / GiB)} step="0.5" value={memory()} onInput={(event) => setMemory(Number(event.currentTarget.value))} />
266 <span class="vm-resource-scale"><span>512 MiB</span><span>{bytes(node.availableMemory)} unallocated</span></span>
267 </label>
268 <label class="vm-resource"><span>Disk<output>{bytes(disk() * GiB)}</output></span>
269 <input name="disk" aria-label="Disk" type="range" min={minimumDisk()} max={Math.max(1024, minimumDisk() * 2)} value={disk()} onInput={(event) => setDisk(Number(event.currentTarget.value))} />
270 <span class="vm-resource-scale"><span>{bytes(minimumDisk() * GiB)}</span><span>{bytes(Math.max(1024, minimumDisk() * 2) * GiB)}</span></span>
271 </label>
272 </div>
273 <Show when={!selected()} fallback={<>
274 <input type="hidden" name="firmware" value={selected()?.firmware ?? "bios"} />
275 <input type="hidden" name="platform" value={selected()?.platform ?? "linux"} />
276 </>}>
277 <details class="vm-hardware"><summary>Hardware settings</summary><div class="row">
278 <label class="field">firmware<select name="firmware" class="search" value={/windows (xp|vista|7|8)/i.test(installer()?.os ?? "") ? "bios" : "uefi"}><option value="uefi">UEFI</option><option value="bios">Legacy BIOS</option></select></label>
279 <label class="field">guest hardware<select name="platform" class="search" value={/windows|win11|win10/i.test(installer()?.os ?? "") ? "windows" : "linux"}><option value="linux">Linux (VirtIO)</option><option value="windows">Windows (SATA)</option></select></label>
280 </div></details>
281 </Show>
282 <Show when={!selected()}><p class="hint">Created powered off. Use the Machine menu to boot your installer</p></Show>
283 </div>;
284 },
285 onConfirm: async (form) => {
286 const name = String(form.get("name"));
287 await parseResponse(api.vms.$post({ json: {
288 name, image: String(form.get("image")), mode: form.get("mode") === "preset" ? "preset" : "iso",
289 firmware: form.get("firmware") === "uefi" ? "uefi" : "bios", platform: form.get("platform") === "windows" ? "windows" : form.get("platform") === "macos" ? "macos" : "linux",
290 vcpus: Number(form.get("vcpus")), memory: Math.round(Number(form.get("memory")) * GiB), disk: Math.round(Number(form.get("disk")) * GiB),
291 } }));
292 await refetch();
293 onCreated(name);
294 },
295 });
296}
297function attachIso(vm: Domain, library: () => VMLibrary, refetch: () => unknown) {
298 const [image, setImage] = createSignal("");
299 showConfirmDialog({
300 title: `Attach ISO to ${vm.name}`,
301 confirmLabel: "attach ISO",
302 canConfirm: () => !!image(),
303 body: () => <>
304 <label class="field">Installer ISO<select name="image" class="search" required value={image()} onChange={(event) => setImage(event.currentTarget.value)}>
305 <option value="">Choose an installer</option>
306 <For each={library().installers.filter((item) => item.arch === library().arch)}>{(item) => <option value={item.volume}>{item.os}</option>}</For>
307 </select></label>
308 <button type="button" class="button small" onClick={() => uploadIso(refetch)}>upload ISO</button>
309 </>,
310 onConfirm: async (form) => {
311 await parseResponse(api.vms[":name"].media.$put({ param: { name: vm.name }, json: { image: String(form.get("image")) } }));
312 await refetch();
313 },
314 });
315}
316
317function savePreset(vm: Domain, refetch: () => unknown) {
318 showConfirmDialog({
319 title: `Save ${vm.name} as preset`,
320 description: "New VMs start from this prepared OS. Finish setup and remove private files before saving.",
321 confirmLabel: "save preset",
322 body: () => <>
323 <label class="field">preset ID<input name="id" class="search" required pattern="[a-z0-9][a-z0-9\-]{0,62}" value={vm.name} /></label>
324 <label class="field">operating system<input name="os" class="search" required maxlength="100" value={vm.os} /></label>
325 <label class="field">description<input name="description" class="search" maxlength="200" value={vm.description} /></label>
326 </>,
327 onConfirm: async (form) => {
328 await parseResponse(api.vms[":name"].preset.$post({ param: { name: vm.name }, json: { id: String(form.get("id")), os: String(form.get("os")), description: String(form.get("description")) } }));
329 await refetch();
330 },
331 });
332}
333
334function Hardware(props: { vm: Domain; refetch: () => unknown; username?: string; hostname?: string }) {
335 const [history, { refetch }] = createResource(() => props.vm.name, (name) =>
336 parseResponse(api.vms.history.$get({ query: { range: "3600", name } })));
337 const timer = setInterval(refetch, 30_000);
338 onCleanup(() => clearInterval(timer));
339 const [saving, setSaving] = createSignal(false);
340 const setAutostart = async (autostart: boolean) => {
341 setSaving(true);
342 try {
343 await parseResponse(api.vms[":name"].$patch({ param: { name: props.vm.name }, json: { autostart } }));
344 await props.refetch();
345 } catch (failure) {
346 toast(`Couldn't change autostart. ${reason(failure)}`);
347 } finally {
348 setSaving(false);
349 }
350 };
351 return (
352 <div class="vm-detail">
353 <div class="vm-media">
354 <span class="muted">CD drive</span>
355 <span class="source">{props.vm.media.find((item) => item.source)?.source ?? "No ISO attached"}</span>
356 <span class="spacer" /><span class="muted">{props.vm.firmware === "uefi" ? "UEFI" : "Legacy BIOS"}</span>
357 </div>
358 <Loaded data={history} what="usage history" retry={refetch} skeleton={
359 <div class="vm-charts"><div class="skeleton" /><div class="skeleton" /></div>
360 }>
361 {(latest) => {
362 const samples = () => latest().domains[props.vm.name];
363 return (
364 <Show when={samples()?.cpu.some((v) => v !== null)} fallback={<p class="off-hour">Off for the last hour</p>}>
365 <div class="vm-charts">
366 <TimeChart series={[{ name: "cpu", t: latest().t, v: samples()!.cpu }]} format={percent} max={100}
367 colors={["var(--series-1)"]} height={104} inline sync={`vm-${props.vm.name}`} />
368 <TimeChart series={[{ name: "memory", t: latest().t, v: samples()!.memory }]} format={bytes} max={props.vm.memory}
369 colors={["var(--series-2)"]} height={104} inline sync={`vm-${props.vm.name}`} />
370 </div>
371 </Show>
372 );
373 }}
374 </Loaded>
375 <div class="facts">
376 <div class="settings">
377 <dl class="kv">
378 <Show when={props.username}><dt>guest user</dt><dd>{props.username}</dd></Show>
379 <Show when={props.hostname}>{(hostname) => <><dt>hostname</dt><dd><Copy value={hostname()} /></dd></>}</Show>
380 <dt>for</dt>
381 <dd>
382 <button class="describe" classList={{ empty: !props.vm.description }} data-tip="edit"
383 onClick={() => describe(props.vm, props.refetch)}>
384 {props.vm.description || "add a description"}
385 </button>
386 </dd>
387 <dt>autostart</dt>
388 <dd>
389 <Checkbox checked={props.vm.autostart} disabled={saving()} onChange={setAutostart}>start with the host</Checkbox>
390 </dd>
391 <dt>cpu</dt>
392 <dd>{props.vm.pinned ? `pinned to threads ${threads(props.vm.pinned)}` : "floats over all threads"}</dd>
393 </dl>
394 </div>
395 <dl class="kv">
396 <dt>disks</dt>
397 <dd class="lines disks">
398 <For each={props.vm.disks}>
399 {(disk) => (
400 <div>
401 <span class="muted mono">{disk.target}</span>
402 <span class="source" classList={{ mono: !!disk.pool }}>
403 <Copy value={disk.source} label={disk.pool ? "volume name" : "device path"}>
404 {disk.pool ? disk.source : drive(disk.source)}
405 </Copy>
406 </span>
407 <Show when={disk.pool} fallback={<span class="muted used">whole drive</span>}>
408 <span class="used" data-tip={`${bytes(disk.allocation)} / ${bytes(disk.capacity)} (${percent((disk.allocation / disk.capacity) * 100)})`}>
409 <Meter value={disk.allocation} max={disk.capacity} />
410 </span>
411 </Show>
412 <span class="num">{bytes(disk.capacity)}</span>
413 </div>
414 )}
415 </For>
416 </dd>
417 <dt>network</dt>
418 <dd class="lines nics">
419 <For each={props.vm.interfaces}>
420 {(nic) => (
421 <div>
422 <span class="muted mono">{nic.source}</span>
423 <span class="mono">
424 <Show when={nic.addresses[0]} fallback={<span class="muted">{running(props.vm) ? "no address" : ""}</span>}>
425 {(address) => <Copy value={address()} />}
426 </Show>
427 </span>
428 <span class="mono muted"><Copy value={nic.mac} label="MAC address" /></span>
429 </div>
430 )}
431 </For>
432 </dd>
433 <Show when={props.vm.hostdevs.length}>
434 <dt>passthrough</dt>
435 <dd class="lines devices">
436 <For each={props.vm.hostdevs}>
437 {(dev) => (
438 <div>
439 <span class="mono muted"><Copy value={dev.address}>{dev.address.replace(/^0000:/, "")}</Copy></span>
440 <span>{dev.name}</span>
441 </div>
442 )}
443 </For>
444 </dd>
445 </Show>
446 </dl>
447 </div>
448 </div>
449 );
450}
451
452function PowerControls(props: { vm: Domain; refetch: () => unknown }) {
453 const [pending, setPending] = createSignal(false);
454 const run = async (action: "start" | "resume") => {
455 setPending(true);
456 try {
457 await act(props.vm, action, props.refetch);
458 } catch (failure) {
459 toast(`Couldn't ${action} ${props.vm.name}. ${reason(failure)}`);
460 } finally {
461 setPending(false);
462 }
463 };
464 return <>
465 <Show when={isOff(props.vm)}>
466 <button class="button small" disabled={pending()} aria-busy={pending()} onClick={() => run("start")}><Play size={14} aria-hidden="true" />start</button>
467 </Show>
468 <Show when={props.vm.state === "paused" || props.vm.state === "pmsuspended"}>
469 <button class="button small" disabled={pending()} aria-busy={pending()} onClick={() => run("resume")}><Play size={14} aria-hidden="true" />resume</button>
470 </Show>
471 <Show when={props.vm.state === "shutdown"}>
472 <button class="button small danger" onClick={() => forceOff(props.vm, props.refetch)}><Square size={14} aria-hidden="true" />force off</button>
473 </Show>
474 <Show when={running(props.vm)}>
475 <button class="button small" onClick={() => stop(props.vm, props.refetch)}><Power size={14} aria-hidden="true" />stop</button>
476 </Show>
477 </>;
478}
479
480function Row(props: {
481 vm: Domain;
482 hostCpus: number;
483 onOpen: () => void;
484 refetch: () => unknown;
485}) {
486 const state = () => status(props.vm);
487 const pinned = () => props.vm.pinned && `pinned to threads ${threads(props.vm.pinned)}`;
488 const cpuTip = () => {
489 if (!props.vm.usage) return pinned() || undefined;
490 const busy = (props.vm.usage.cpu / 100) * props.vm.vcpus;
491 return [`${busy.toFixed(1)} of ${props.vm.vcpus} vcpus busy, ${percent((busy / props.hostCpus) * 100)} of the host`, pinned()]
492 .filter(Boolean).join(", ");
493 };
494 const memoryTip = () => {
495 const used = props.vm.usage?.memory;
496 const grows = props.vm.balloon < props.vm.memory && `can grow to ${bytes(props.vm.memory)}`;
497 if (used === undefined) return grows ? `boots with ${bytes(props.vm.balloon)}, ${grows}` : undefined;
498 return [`${bytes(used)} / ${bytes(props.vm.balloon)} (${percent((used / props.vm.balloon) * 100)})`, grows]
499 .filter(Boolean).join(", ");
500 };
501 return (
502 <tbody class="vm" classList={{ off: isOff(props.vm) }} onClick={props.onOpen}>
503 <tr class="top">
504 <td class="title">
505 <button>
506 <span class="vm-name">{props.vm.name}</span>
507 <Show when={props.vm.description}><span class="for">{props.vm.description}</span></Show>
508 </button>
509 </td>
510 <td class="state" tabindex={state()[2] ? 0 : undefined} data-tip={state()[2]}>
511 <StatusLabel health={state()[0]}>{state()[1]}</StatusLabel>
512 </td>
513 <td class="num" data-tip={cpuTip()}>{props.vm.usage && percent(props.vm.usage.cpu)}</td>
514 <td class="num" data-tip={memoryTip()}>{props.vm.usage && bytes(props.vm.usage.memory)}</td>
515 <td class="actions" rowspan="2" onClick={(event) => event.stopPropagation()}>
516 <div>
517 <Show when={!isOff(props.vm) && props.vm.console}><button onClick={props.onOpen}>screen</button></Show>
518 <Show when={running(props.vm) && props.vm.interfaces.flatMap((nic) => nic.addresses)[0]}>
519 {(value) => {
520 const target = () => remote(props.vm.os, value());
521 return <a href={target()[0]} target="_blank" rel="noreferrer">{target()[1]}</a>;
522 }}
523 </Show>
524 <PowerControls vm={props.vm} refetch={props.refetch} />
525 </div>
526 </td>
527 </tr>
528 <tr class="bottom">
529 <td class="specs" colspan="2">
530 <div onClick={(event) => event.stopPropagation()}>
531 <span>{props.vm.os}</span>
532 <For each={props.vm.interfaces}>
533 {(nic) => (
534 <span>
535 <Network size={12} aria-label={nic.source} />
536 <Show when={nic.addresses[0]} fallback={nic.source}>{(value) => <span class="mono"><Copy value={value()} /></span>}</Show>
537 </span>
538 )}
539 </For>
540 <For each={groups(props.vm.hostdevs)}>
541 {(group) => (
542 <span tabindex="0" data-tip={[
543 group[0]!.address.replace(/^0000:/, ""),
544 group[0]!.iommuGroup !== null && `iommu group ${group[0]!.iommuGroup}`,
545 ...group.slice(1).map((dev) => `with ${dev.address.replace(/^0000:/, "")} ${dev.name}`),
546 ].filter(Boolean).join(", ")}>
547 {group[0]!.iommuGroup === null ? <Usb size={12} aria-label="usb" /> : <CircuitBoard size={12} aria-label="pci" />}
548 {group[0]!.name.match(/\[(.+)\]/)?.[1] ?? group[0]!.name}
549 </span>
550 )}
551 </For>
552 <For each={props.vm.disks}>
553 {(disk) => (
554 <span tabindex="0" data-tip={disk.pool
555 ? `${bytes(disk.allocation)} / ${bytes(disk.capacity)} (${percent((disk.allocation / disk.capacity) * 100)})`
556 : `${drive(disk.source)}, whole drive`}>
557 <HardDrive size={12} aria-label="disk" />{bytes(disk.capacity)}
558 </span>
559 )}
560 </For>
561 <Show when={props.vm.autostart}><span><Power size={12} aria-hidden="true" />autostart</span></Show>
562 </div>
563 </td>
564 <td class="num" tabindex={cpuTip() ? 0 : undefined} data-tip={cpuTip()}>{plural(props.vm.vcpus, "vcpu")}</td>
565 <td class="num" tabindex={memoryTip() ? 0 : undefined} data-tip={memoryTip()}>{allocated(props.vm)}</td>
566 </tr>
567
568 </tbody>
569 );
570}
571
572export function VMs() {
573 const [data, { refetch }] = queries.vms.use();
574 const timer = setInterval(() => data.loading || unconnected(data.error) || refetch(), LIVE_INTERVAL * 1000);
575 onCleanup(() => clearInterval(timer));
576 const [params, setParams] = useSearchParams<{ vm?: string; tab?: string }>();
577 const loaded = lastGood(data);
578 const activeTab = createMemo(() => {
579 if (params.tab === "hardware") return "hardware";
580 const vm = loaded()?.domains.find((vm) => vm.name === params.vm);
581 return params.tab === "console" && vm?.platform === "linux" && vm.serial ? "console" : "screen";
582 });
583 const newVm = () => {
584 const latest = loaded();
585 if (latest) create(latest.node, () => loaded()?.library ?? latest.library, latest.domains, refetch,
586 (name) => setParams({ vm: name, tab: undefined }));
587 };
588 const newButton = (label: string) => <button class="button primary" disabled={!loaded()} onClick={newVm}><Plus size={14} />{label}</button>;
589 return <ListPage id="vms" class={`vms ${params.vm ? "vm-active" : ""}`} flush head={
590 <Show when={!params.vm}><div class="page-head">
591 <h1>virtual machines</h1>
592 <Show when={loaded()}>{(value) => <span class="muted vm-count">{plural(value().domains.length, "vm")}</span>}</Show>
593 <span class="spacer" />
594 <button class="button" disabled={!loaded()} onClick={() => uploadIso(refetch)}>upload ISO</button>
595 {newButton("new vm")}
596 </div></Show>
597 }>
598 <Loaded data={data} what="virtual machines" retry={refetch} skeleton={
599 <div class="edge vms-list"><For each={Array(4)}>{() => <div class="skeleton row-skeleton" />}</For></div>
600 }>{(latest) => <Show when={params.vm} keyed fallback={
601 <>
602 <Show when={latest().domains.length} fallback={
603 <div class="empty vms-empty"><p>No virtual machines yet.</p>{newButton("create vm")}</div>
604 }>
605 <div class="edge vms-list"><table class="data">
606 <thead><tr><th>name</th><th>state</th><th class="num">cpu</th><th class="num">memory</th><th><span class="sr-only">actions</span></th></tr></thead>
607 <For each={latest().domains.map((vm) => vm.name)}>{(name) => <Show when={latest().domains.find((vm) => vm.name === name)}>{(vm) =>
608 <Row vm={vm()} hostCpus={latest().node.cpus}
609 onOpen={() => setParams({ vm: name, tab: undefined })} refetch={refetch} />
610 }</Show>}</For>
611 </table></div>
612 </Show>
613 <section class="vm-library">
614 <h2>OS library <span class="muted">{plural(latest().library.presets.length, "preset")}</span></h2>
615 <Show when={latest().library.presets.length} fallback={<p class="muted">No presets yet. Install an OS to prepare your first one.</p>}>
616 <For each={latest().library.presets}>{(preset) => <div class="vm-library-item"><span>{preset.os}</span><span class="muted">{preset.description}</span><span class="spacer" /><span class="muted">{datetime(preset.createdAt)}</span><span>{bytes(preset.capacity)}</span></div>}</For>
617 </Show>
618 <details><summary>Installer ISOs ({latest().library.installers.filter((item) => item.arch === latest().library.arch).length})</summary><For each={latest().library.installers.filter((item) => item.arch === latest().library.arch)}>{(iso) =>
619 <div class="vm-library-item"><span>{iso.os}</span><span class="spacer" /><span class="muted">{bytes(iso.capacity)}</span></div>
620 }</For></details>
621 </section>
622 </>
623 }>{(name) => {
624 const [access] = createResource(() => name, (name) => parseResponse(api.vms[":name"].access.$get({ param: { name } })));
625 const [consoleOpened, setConsoleOpened] = createSignal(false);
626 createEffect(() => { if (activeTab() === "console") setConsoleOpened(true); });
627 return <Show when={latest().domains.find((vm) => vm.name === name)} fallback={
628 <div class="empty vms-empty"><p>This VM isn't in your account.</p><button class="button" onClick={() => setParams({ vm: undefined, tab: undefined })}>VM home</button></div>
629 }>{(vm) => <section class="vm-workspace" aria-label={`${name} workspace`}>
630 <h1 class="sr-only">{name}</h1>
631 <VMConsole name={name} enabled={!isOff(vm())} active={activeTab() === "screen"} setup={vm().setup}
632 content={(toolbar) => <>
633 <Show when={consoleOpened()}><VMSerial name={name} enabled={running(vm()) && vm().platform === "linux" && vm().serial} active={activeTab() === "console"} toolbar={toolbar} /></Show>
634 <Show when={activeTab() === "hardware"}><Hardware vm={vm()} refetch={refetch} username={access()?.username} hostname={access()?.hostname} /></Show>
635 </>}
636 toolbar={<>
637 <TabBar label="VM workspace">
638 <button aria-pressed={activeTab() === "screen"} onClick={() => setParams({ tab: undefined })}><Monitor size={13} />Screen</button>
639 <Show when={vm().platform === "linux" && vm().serial}><button aria-pressed={activeTab() === "console"} onClick={() => setParams({ tab: "console" })}><SquareTerminal size={13} />Console</button></Show>
640 <button aria-pressed={activeTab() === "hardware"} onClick={() => setParams({ tab: "hardware" })}><CircuitBoard size={13} />Hardware</button>
641 </TabBar>
642 <VMMenu label="Machine">
643 <PowerControls vm={vm()} refetch={refetch} />
644 <button disabled={!running(vm())} onClick={() => restart(vm(), refetch)}><RotateCw size={14} aria-hidden="true" />Restart</button>
645 <Show when={vm().state !== "shutdown"}><button disabled={isOff(vm())} onClick={() => forceOff(vm(), refetch)}><Square size={14} aria-hidden="true" />Force off</button></Show>
646 <Show when={latest().canPublish && vm().platform !== "macos"}><button disabled={vm().state !== "shutoff"} title={vm().state !== "shutoff" ? "Shut down before saving a preset" : undefined} onClick={() => savePreset(vm(), refetch)}><Save size={14} aria-hidden="true" />Save preset</button></Show>
647 <button class="danger" onClick={() => remove(vm(), refetch)}><Trash size={14} aria-hidden="true" />Delete</button>
648 </VMMenu>
649 <VMMenu label="Media">
650 <button onClick={() => attachIso(vm(), () => latest().library, refetch)}><Disc3 size={14} aria-hidden="true" />Attach ISO</button>
651 <button disabled={!vm().media.some((item) => item.source)} onClick={async () => {
652 try { await parseResponse(api.vms[":name"].media.$put({ param: { name }, json: { image: "" } })); await refetch(); }
653 catch (failure) { toast(`Unable to eject ISO. ${reason(failure)}`); }
654 }}><Disc2 size={14} aria-hidden="true" />Eject ISO</button>
655 <span class="muted vm-menu-info">{vm().media.find((item) => item.source)?.source ?? "No ISO attached"}</span>
656 </VMMenu>
657 <Show when={access()}>{(login) => <VMMenu label="Password">
658 <label class="vm-password">Guest password<input aria-label="Guest password" value={login().password} readOnly spellcheck={false} /></label>
659 <Copy value={login().password} label="guest password"><KeyRound size={14} aria-hidden="true" />Copy password</Copy>
660 </VMMenu>}</Show>
661 </>} />
662 </section>}</Show>;
663 }}</Show>}</Loaded>
664 </ListPage>;
665}