Start to build VM page

2023-10-17 18:11:31 +02:00
parent fcf66e3e93
commit 62364594c9
8 changed files with 221 additions and 148 deletions
--- a/virtweb_frontend/src/routes/VMListRoute.tsx
+++ b/virtweb_frontend/src/routes/VMListRoute.tsx
@ -0,0 +1,144 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import {
+  Button,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+} from "@mui/material";
+import { filesize } from "filesize";
+import React from "react";
+import { VMApi, VMInfo } from "../api/VMApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { RouterLink } from "../widgets/RouterLink";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
+
+export function VMListRoute(): React.ReactElement {
+  const [list, setList] = React.useState<VMInfo[] | undefined>();
+
+  const loadKey = React.useRef(1);
+
+  const load = async () => {
+    setList(await VMApi.GetList());
+  };
+
+  const reload = () => {
+    loadKey.current += 1;
+    setList(undefined);
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={loadKey.current}
+      errMsg="Failed to load Virtual Machines list!"
+      load={load}
+      ready={list !== undefined}
+      build={() => (
+        <VirtWebRouteContainer
+          label="Virtual Machines"
+          actions={
+            <>
+              <RouterLink to="/vms/new">
+                <Button>New</Button>
+              </RouterLink>
+            </>
+          }
+        >
+          <VMListWidget list={list!} onReload={reload} />
+        </VirtWebRouteContainer>
+      )}
+    />
+  );
+}
+
+function VMListWidget(p: {
+  list: VMInfo[];
+  onReload: () => void;
+}): React.ReactElement {
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+
+  const deleteVM = async (v: VMInfo) => {
+    try {
+      if (
+        !(await confirm(
+          `Do you really want to delete the vm ${v.name}? The operation CANNOT be undone!`,
+          "Delete a VM",
+          "DELETE"
+        ))
+      )
+        return;
+
+      const keepData = !(await confirm(
+        "Do you want to delete the files of the VM?",
+        "Delete a VM",
+        "Delete the data",
+        "keep the data"
+      ));
+
+      await VMApi.Delete(v, keepData);
+      snackbar("The VM was successfully deleted!");
+
+      p.onReload();
+    } catch (e) {
+      console.error(e);
+      snackbar("Failed to delete VM!");
+    }
+  };
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Description</TableCell>
+            <TableCell>Memory</TableCell>
+            <TableCell>Status</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {p.list.map((row) => (
+            <TableRow
+              key={row.name}
+              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell>{row.description ?? ""}</TableCell>
+              <TableCell>{filesize(row.memory * 1000 * 1000)}</TableCell>
+              <TableCell>
+                <VMStatusWidget vm={row} />
+              </TableCell>
+              <TableCell>
+                <Tooltip title="View this VM">
+                  <RouterLink to={row.ViewURL}>
+                    <IconButton>
+                      <VisibilityIcon />
+                    </IconButton>
+                  </RouterLink>
+                </Tooltip>
+                <Tooltip title="Delete this VM">
+                  <IconButton onClick={() => deleteVM(row)}>
+                    <DeleteIcon />
+                  </IconButton>
+                </Tooltip>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}