pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases 5 Wiki Activity

Can configure network NAT settings from UI

Browse Source
This commit is contained in:
Pierre HUBERT
2024-01-09 21:57:18 +01:00
parent 71e22bc328
commit f82925dbcb
11 changed files with 446 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
virtweb_frontend/src/widgets/net/NetworkDetails.tsx
View File

@ -8,13 +8,14 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
import { AsyncWidget } from "../AsyncWidget";
import { TabsWidget } from "../TabsWidget";
import { XMLAsyncWidget } from "../XMLWidget";
import { EditSection } from "../forms/EditSection";
import { IPInput } from "../forms/IPInput";
import { NetDHCPHostReservations } from "../forms/NetDHCPHostReservations";
import { NetNatConfiguration } from "../forms/NetNatConfiguration";
import { ResAutostartInput } from "../forms/ResAutostartInput";
import { SelectInput } from "../forms/SelectInput";
import { TextInput } from "../forms/TextInput";
import { NetDHCPHostReservations } from "../forms/NetDHCPHostReservations";
import { XMLAsyncWidget } from "../XMLWidget";
interface DetailsProps {
net: NetworkInfo;
@ -223,7 +224,7 @@ function NetworkDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement {
return (
<IPSection
editable={p.editable}
{...p}
config={p.net.ip_v4}
onChange={(c) => {
p.net.ip_v4 = c;
@ -237,7 +238,7 @@ function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement {
function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement {
return (
<IPSection
editable={p.editable}
{...p}
config={p.net.ip_v6}
onChange={(c) => {
p.net.ip_v6 = c;
@ -253,6 +254,7 @@ function IPSection(p: {
config?: IpConfig;
onChange: (c: IpConfig | undefined) => void;
version: 4 | 6;
nicsList: string[];
}): React.ReactElement {
const confirm = useConfirm();
@ -260,7 +262,7 @@ function IPSection(p: {
if (!!p.config) {
if (
!(await confirm(
`Do you really want to disable IPv${p.version} on this network?`
`Do you really want to disable IPv${p.version} on this network? Specific configuration will be deleted!`
))
)
return;
@ -275,8 +277,8 @@ function IPSection(p: {
});
};
const toggleDHCP = (v: boolean) => {
if (v)
const toggleDHCP = async (v: boolean) => {
if (v) {
p.config!.dhcp =
p.version === 4
? {
@ -285,7 +287,32 @@ function IPSection(p: {
hosts: [],
}
: { start: "fd00::100", end: "fd00::f00", hosts: [] };
else p.config!.dhcp = undefined;
} else {
if (
!(await confirm(
`Do you really want to disable DHCPv${p.version} on this network? Specific configuration will be deleted!`
))
)
return;
p.config!.dhcp = undefined;
}
p.onChange?.(p.config);
};
const toggleNAT = async (v: boolean) => {
if (v) {
p.config!.nat = [];
} else {
if (
(p.config?.nat?.length ?? 0 > 0) &&
!(await confirm(
`Do you really want to disable NAT port forwarding on this network? Specific configuration will be deleted!`
))
)
return;
p.config!.nat = undefined;
}
p.onChange?.(p.config);
};
@ -384,6 +411,31 @@ function IPSection(p: {
/>
</EditSection>
)}
{p.config && (p.editable || p.config.nat) && (
<EditSection
title={`NAT v${p.version} ports redirection`}
fullWidth
actions={
<Checkbox
disabled={!p.editable}
checked={!!p.config.nat}
onChange={(_ev, val) => toggleNAT(val)}
/>
}
>
{p.config.nat && (
<NetNatConfiguration
{...p}
nat={p.config.nat}
onChange={(n) => {
p.config!.nat = n;
p.onChange?.(p.config);
}}
/>
)}
</EditSection>
)}
</Grid>
);
}