146 lines
4.1 KiB
TypeScript
146 lines
4.1 KiB
TypeScript
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>
|
|
);
|
|
}
|