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

export function NetworksListRoute(): React.ReactElement {
  const [list, setList] = React.useState<NetworkInfo[] | undefined>();

  const [count] = React.useState(1);

  const load = async () => {
    setList(await NetworkApi.GetList());
  };

  return (
    <AsyncWidget
      loadKey={count}
      load={load}
      ready={list !== undefined}
      errMsg="Failed to load the list of networks!"
      build={() => <NetworksListRouteInner list={list!} />}
    />
  );
}

function NetworksListRouteInner(p: {
  list: NetworkInfo[];
}): React.ReactElement {
  const navigate = useNavigate();

  return (
    <VirtWebRouteContainer
      label="Networks"
      actions={
        <RouterLink to="/net/new">
          <Button>New</Button>
        </RouterLink>
      }
    >
      <NetworkHookStatusWidget hiddenIfInstalled />

      <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>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </VirtWebRouteContainer>
  );
}