Can list and delete networks

2023-10-31 15:55:15 +01:00
parent 9a99e0b54e
commit 0e3945089c
4 changed files with 199 additions and 1 deletions
--- a/virtweb_frontend/src/routes/NetworksListRoute.tsx
+++ b/virtweb_frontend/src/routes/NetworksListRoute.tsx
@ -0,0 +1,133 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import {
+  Button,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { RouterLink } from "../widgets/RouterLink";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+
+export function NetworksListRoute(): React.ReactElement {
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+  const alert = useAlert();
+
+  const [list, setList] = React.useState<NetworkInfo[] | undefined>();
+
+  const [count, setCount] = React.useState(1);
+
+  const load = async () => {
+    setList(await NetworkApi.GetList());
+  };
+
+  const reload = () => {
+    setList(undefined);
+    setCount(count + 1);
+  };
+
+  const requestDelete = async (n: NetworkInfo) => {
+    try {
+      if (
+        !(await confirm(
+          "Do you really want to delete this network?",
+          `Delete network ${n.name}`,
+          "Delete"
+        ))
+      )
+        return;
+
+      await NetworkApi.Delete(n);
+      reload();
+      snackbar("The network was successfully deleted!");
+    } catch (e) {
+      console.error(e);
+      alert("Failed to delete the network!");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={count}
+      load={load}
+      ready={list !== undefined}
+      errMsg="Failed to load the list of networks!"
+      build={() => (
+        <NetworksListRouteInner list={list!} onRequestDelete={requestDelete} />
+      )}
+    />
+  );
+}
+
+function NetworksListRouteInner(p: {
+  list: NetworkInfo[];
+  onRequestDelete: (n: NetworkInfo) => void;
+}): React.ReactElement {
+  return (
+    <VirtWebRouteContainer
+      label="Networks"
+      actions={
+        <RouterLink to="/net/new">
+          <Button>New</Button>
+        </RouterLink>
+      }
+    >
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell>Network type</TableCell>
+              <TableCell>IP</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {p.list.map((t) => {
+              return (
+                <TableRow key={t.uuid} hover>
+                  <TableCell>{t.name}</TableCell>
+                  <TableCell>
+                    {t.description ?? (
+                      <Typography style={{ fontStyle: "italic" }}>
+                        None
+                      </Typography>
+                    )}
+                  </TableCell>
+                  <TableCell>{t.forward_mode}</TableCell>
+                  <TableCell>
+                    {t.ip_v4 && "IPv4"} {t.ip_v6 && "IPv6"}
+                  </TableCell>
+                  <TableCell>
+                    <RouterLink to={NetworkURL(t)}>
+                      <IconButton>
+                        <VisibilityIcon />
+                      </IconButton>
+                    </RouterLink>
+                    <IconButton onClick={() => p.onRequestDelete(t)}>
+                      <DeleteIcon />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </VirtWebRouteContainer>
+  );
+}