diff --git a/virtweb_frontend/src/routes/VMListRoute.tsx b/virtweb_frontend/src/routes/VMListRoute.tsx index 9174740..320b73d 100644 --- a/virtweb_frontend/src/routes/VMListRoute.tsx +++ b/virtweb_frontend/src/routes/VMListRoute.tsx @@ -7,6 +7,7 @@ import { TableBody, TableCell, TableContainer, + TableFooter, TableHead, TableRow, Tooltip, @@ -14,7 +15,7 @@ import { import { filesize } from "filesize"; import React from "react"; import { useNavigate } from "react-router-dom"; -import { VMApi, VMInfo } from "../api/VMApi"; +import { VMApi, VMInfo, VMState } from "../api/VMApi"; import { AsyncWidget } from "../widgets/AsyncWidget"; import { RouterLink } from "../widgets/RouterLink"; import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer"; @@ -64,6 +65,22 @@ function VMListWidget(p: { }): React.ReactElement { const navigate = useNavigate(); + const [runningVMs, setRunningVMs] = React.useState>(new Set()); + + const updateVMState = (v: VMInfo, s: VMState) => { + const running = s !== "Shutoff"; + if (runningVMs.has(v.name) === running) { + return; + } + + if (running) runningVMs.add(v.name); + else runningVMs.delete(v.name); + + setRunningVMs(new Set([...runningVMs])); + }; + + console.log(runningVMs); + return ( @@ -72,6 +89,7 @@ function VMListWidget(p: { NameDescriptionMemory + vCPUStatusActions @@ -88,9 +106,13 @@ function VMListWidget(p: { {row.name} {row.description ?? ""} - {filesize(row.memory * 1000 * 1000)} + {vmMemoryToHuman(row.memory)} + {row.number_vcpu} - + updateVMState(row, s)} + /> @@ -104,7 +126,35 @@ function VMListWidget(p: { ))} + + + + + + {vmMemoryToHuman( + p.list + .filter((v) => runningVMs.has(v.name)) + .reduce((s, v) => s + v.memory, 0) + )} + {" / "} + {vmMemoryToHuman(p.list.reduce((s, v) => s + v.memory, 0))} + + + {p.list + .filter((v) => runningVMs.has(v.name)) + .reduce((s, v) => s + v.number_vcpu, 0)} + {" / "} + {p.list.reduce((s, v) => s + v.number_vcpu, 0)} + + + + +
); } + +function vmMemoryToHuman(size: number): string { + return filesize(size * 1000 * 1000); +}