pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 7 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 (
<Paper elevation={3} style={{ padding: "10px", marginTop: "20px" }}>
<Paper elevation={3} style={{ padding: "20px", marginBottom: "20px" }}>
<ListItem
secondaryAction={
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" }}>
<Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
<Tab label="General" tabIndex={VMTab.General} />
{(p.editable || p.net.ip_v4) && (
<Tab label="IPv4" tabIndex={VMTab.IPv4} />
)}
{(p.editable || p.net.ip_v6) && (
<Tab label="IPv6" tabIndex={VMTab.IPv6} />
)}
{!p.editable && (
<Tab
label="Danger zone"
@ -205,7 +212,6 @@ function NetworkDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement {
return (
<Grid container spacing={2}>
<IPSection
editable={p.editable}
config={p.net.ip_v4}
@ -215,13 +221,11 @@ function NetworkDetailsTabIPv4(p: DetailsInnerProps): React.ReactElement {
}}
version={4}
/>
</Grid>
);
}
function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement {
return (
<Grid container spacing={2}>
<IPSection
editable={p.editable}
config={p.net.ip_v6}
@ -231,7 +235,6 @@ function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement {
}}
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 <></>;
return (
<Grid container spacing={2}>
<EditSection
title={`IPv${p.version} network`}
actions={
@ -297,33 +316,27 @@ function IPSection(p: {
p.config!.prefix = Number(v);
p.onChange?.(p.config);
}}
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: [],
size={
p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }
}
: { 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
label="DHCP allocation start"
editable={p.editable}
@ -344,7 +357,13 @@ function IPSection(p: {
p.onChange(p.config);
}}
/>
</>
)}
</EditSection>
)}
{p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && (
<EditSection title="DHCP hosts reservations">
<DHCPHostReservations
{...p}
dhcp={p.config.dhcp}
@ -353,10 +372,9 @@ function IPSection(p: {
p.onChange?.(p.config);
}}
/>
</Paper>
</>
)}
</EditSection>
)}
</Grid>
);
}
@ -389,7 +407,7 @@ function NetworkDetailsTabDanger(p: DetailsInnerProps): React.ReactElement {
return (
<Button color="error" onClick={requestDelete}>
Delete the network
Delete this network
</Button>
);
}