Display allocated ressources to running VMs

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<Set<string>>(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 (
     <TableContainer component={Paper}>
       <Table>
@@ -72,6 +89,7 @@ function VMListWidget(p: {
             <TableCell>Name</TableCell>
             <TableCell>Description</TableCell>
             <TableCell>Memory</TableCell>
+            <TableCell>vCPU</TableCell>
             <TableCell>Status</TableCell>
             <TableCell>Actions</TableCell>
           </TableRow>
@@ -88,9 +106,13 @@ function VMListWidget(p: {
                 {row.name}
               </TableCell>
               <TableCell>{row.description ?? ""}</TableCell>
-              <TableCell>{filesize(row.memory * 1000 * 1000)}</TableCell>
+              <TableCell>{vmMemoryToHuman(row.memory)}</TableCell>
+              <TableCell>{row.number_vcpu}</TableCell>
               <TableCell>
-                <VMStatusWidget vm={row} />
+                <VMStatusWidget
+                  vm={row}
+                  onChange={(s) => updateVMState(row, s)}
+                />
               </TableCell>
               <TableCell>
                 <Tooltip title="View this VM">
@@ -104,7 +126,35 @@ function VMListWidget(p: {
             </TableRow>
           ))}
         </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell></TableCell>
+            <TableCell>
+              {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))}
+            </TableCell>
+            <TableCell>
+              {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)}
+            </TableCell>
+            <TableCell></TableCell>
+            <TableCell></TableCell>
+          </TableRow>
+        </TableFooter>
       </Table>
     </TableContainer>
   );
 }
+
+function vmMemoryToHuman(size: number): string {
+  return filesize(size * 1000 * 1000);
+}