VirtWeb/virtweb_frontend/src/routes/NetworksListRoute.tsx

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";
import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
import { useNavigate } from "react-router-dom";

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!\n${e}`);
    }
  };

  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 {
  const navigate = useNavigate();

  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>State</TableCell>
              <TableCell>Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {p.list.map((t) => {
              return (
                <TableRow
                  key={t.uuid}
                  hover
                  onDoubleClick={() => navigate(NetworkURL(t))}
                >
                  <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>
                    <NetworkStatusWidget net={t} />
                  </TableCell>
                  <TableCell>
                    <RouterLink to={NetworkURL(t)}>
                      <IconButton>
                        <VisibilityIcon />
                      </IconButton>
                    </RouterLink>
                    <IconButton onClick={() => p.onRequestDelete(t)}>
                      <DeleteIcon />
                    </IconButton>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </VirtWebRouteContainer>
  );
}