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

Reorganize IP tabs

Browse Source
This commit is contained in:
Pierre HUBERT 2024-01-02 23:58:48 +01:00
parent afe5db1fcd
commit 3407c068e1
2 changed files with 127 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
virtweb_frontend/src/widgets/net/DHCPHostReservations.tsx
View File

@ -75,7 +75,7 @@ function HostReservationWidget(p: {
}; };
return ( return (
<Paper elevation={3} style={{ padding: "10px", marginTop: "20px" }}> <Paper elevation={3} style={{ padding: "20px", marginBottom: "20px" }}>
<ListItem <ListItem
secondaryAction={ secondaryAction={
p.editable && ( p.editable && (

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

@ -55,8 +55,15 @@ function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
<Box sx={{ borderBottom: 1, borderColor: "divider" }}> <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}> <Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
<Tab label="General" tabIndex={VMTab.General} /> <Tab label="General" tabIndex={VMTab.General} />
{(p.editable || p.net.ip_v4) && (
<Tab label="IPv4" tabIndex={VMTab.IPv4} /> <Tab label="IPv4" tabIndex={VMTab.IPv4} />
)}
{(p.editable || p.net.ip_v6) && (
<Tab label="IPv6" tabIndex={VMTab.IPv6} /> <Tab label="IPv6" tabIndex={VMTab.IPv6} />
)}
{!p.editable && ( {!p.editable && (
<Tab <Tab
label="Danger zone" label="Danger zone"
@ -205,7 +212,6 @@ function NetworkDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement { function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement {
return ( return (
<Grid container spacing={2}>
<IPSection <IPSection
editable={p.editable} editable={p.editable}
config={p.net.ip_v4} config={p.net.ip_v4}
@ -215,13 +221,11 @@ function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement {
}} }}
version={4} version={4}
/> />
</Grid>
); );
} }
function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement { function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement {
return ( return (
<Grid container spacing={2}>
<IPSection <IPSection
editable={p.editable} editable={p.editable}
config={p.net.ip_v6} config={p.net.ip_v6}
@ -231,7 +235,6 @@ function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement {
}} }}
version={6} version={6}
/> />
</Grid>
); );
} }
@ -262,9 +265,25 @@ function IPSection(p: {
}); });
}; };
const toggleDHCP = (v: boolean) => {
if (v)
p.config!.dhcp =
p.version === 4
? {
start: "192.168.1.100",
end: "192.168.1.200",
hosts: [],
}
: { start: "fd00::100", end: "fd00::f00", hosts: [] };
else p.config!.dhcp = undefined;
p.onChange?.(p.config);
};
if (!p.config && !p.editable) return <></>; if (!p.config && !p.editable) return <></>;
return ( return (
<Grid container spacing={2}>
<EditSection <EditSection
title={`IPv${p.version} network`} title={`IPv${p.version} network`}
actions={ actions={
@ -297,33 +316,27 @@ function IPSection(p: {
p.config!.prefix = Number(v); p.config!.prefix = Number(v);
p.onChange?.(p.config); p.onChange?.(p.config);
}} }}
size={p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }} size={
/> p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }
<CheckboxInput
checked={!!p.config.dhcp}
editable={p.editable}
label="Enable DHCP"
onValueChange={(v) => {
if (v)
p.config!.dhcp =
p.version === 4
? {
start: "192.168.1.100",
end: "192.168.1.200",
hosts: [],
} }
: { start: "fd00::100", end: "fd00::f00", hosts: [] };
else p.config!.dhcp = undefined;
p.onChange?.(p.config);
}}
/> />
</> </>
)} )}
</EditSection>
{p.config?.dhcp && ( {p.config && (p.editable || p.config.dhcp) && (
<EditSection
title={`DHCP v${p.version}`}
actions={
<Checkbox
disabled={!p.editable}
checked={!!p.config.dhcp}
onChange={(_ev, val) => toggleDHCP(val)}
/>
}
>
{p.config.dhcp && (
<> <>
<Paper elevation={3} style={{ padding: "10px" }}>
<IPInput <IPInput
label="DHCP allocation start" label="DHCP allocation start"
editable={p.editable} editable={p.editable}
@ -344,7 +357,13 @@ function IPSection(p: {
p.onChange(p.config); p.onChange(p.config);
}} }}
/> />
</>
)}
</EditSection>
)}
{p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && (
<EditSection title="DHCP hosts reservations">
<DHCPHostReservations <DHCPHostReservations
{...p} {...p}
dhcp={p.config.dhcp} dhcp={p.config.dhcp}
@ -353,10 +372,9 @@ function IPSection(p: {
p.onChange?.(p.config); p.onChange?.(p.config);
}} }}
/> />
</Paper>
</>
)}
</EditSection> </EditSection>
)}
</Grid>
); );
} }
@ -389,7 +407,7 @@ function NetworkDetailsTabDanger(p: DetailsInnerProps): React.ReactElement {
return ( return (
<Button color="error" onClick={requestDelete}> <Button color="error" onClick={requestDelete}>
Delete the network Delete this network
</Button> </Button>
); );
} }