pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 2 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 && (

234
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} />
<Tab label="IPv4" tabIndex={VMTab.IPv4} />
<Tab label="IPv6" tabIndex={VMTab.IPv6} />
{(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,33 +212,29 @@ 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}
onChange={(c) => {
p.net.ip_v4 = c;
p.onChange?.();
}}
version={4}
/>
</Grid>
<IPSection
editable={p.editable}
config={p.net.ip_v4}
onChange={(c) => {
p.net.ip_v4 = c;
p.onChange?.();
}}
version={4}
/>
);
}
function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement {
return (
<Grid container spacing={2}>
<IPSection
editable={p.editable}
config={p.net.ip_v6}
onChange={(c) => {
p.net.ip_v6 = c;
p.onChange?.();
}}
version={6}
/>
</Grid>
<IPSection
editable={p.editable}
config={p.net.ip_v6}
onChange={(c) => {
p.net.ip_v6 = c;
p.onChange?.();
}}
version={6}
/>
);
}
@ -262,101 +265,116 @@ 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 (
<EditSection
title={`IPv${p.version} network`}
actions={
<Checkbox
disabled={!p.editable}
checked={!!p.config}
onChange={toggleNetwork}
/>
}
>
{p.config && (
<>
<IPInput
editable={p.editable}
label="Bridge address"
version={p.version}
value={p.config?.bridge_address}
onValueChange={(v) => {
p.config!.bridge_address = v ?? "";
p.onChange?.(p.config);
}}
<Grid container spacing={2}>
<EditSection
title={`IPv${p.version} network`}
actions={
<Checkbox
disabled={!p.editable}
checked={!!p.config}
onChange={toggleNetwork}
/>
<TextInput
label="Prefix"
editable={p.editable}
value={p.config.prefix.toString()}
type="number"
onValueChange={(v) => {
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: [],
}
: { start: "fd00::100", end: "fd00::f00", hosts: [] };
else p.config!.dhcp = undefined;
p.onChange?.(p.config);
}}
/>
</>
)}
{p.config?.dhcp && (
<>
<Paper elevation={3} style={{ padding: "10px" }}>
}
>
{p.config && (
<>
<IPInput
label="DHCP allocation start"
editable={p.editable}
label="Bridge address"
version={p.version}
value={p.config.dhcp.start}
value={p.config?.bridge_address}
onValueChange={(v) => {
p.config!.dhcp!.start = v!;
p.onChange(p.config);
}}
/>
<IPInput
label="DHCP allocation end"
editable={p.editable}
version={p.version}
value={p.config.dhcp.end}
onValueChange={(v) => {
p.config!.dhcp!.end = v!;
p.onChange(p.config);
}}
/>
<DHCPHostReservations
{...p}
dhcp={p.config.dhcp}
onChange={(d) => {
p.config!.dhcp = d;
p.config!.bridge_address = v ?? "";
p.onChange?.(p.config);
}}
/>
</Paper>
</>
<TextInput
label="Prefix"
editable={p.editable}
value={p.config.prefix.toString()}
type="number"
onValueChange={(v) => {
p.config!.prefix = Number(v);
p.onChange?.(p.config);
}}
size={
p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }
}
/>
</>
)}
</EditSection>
{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 && (
<>
<IPInput
label="DHCP allocation start"
editable={p.editable}
version={p.version}
value={p.config.dhcp.start}
onValueChange={(v) => {
p.config!.dhcp!.start = v!;
p.onChange(p.config);
}}
/>
<IPInput
label="DHCP allocation end"
editable={p.editable}
version={p.version}
value={p.config.dhcp.end}
onValueChange={(v) => {
p.config!.dhcp!.end = v!;
p.onChange(p.config);
}}
/>
</>
)}
</EditSection>
)}
</EditSection>
{p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && (
<EditSection title="DHCP hosts reservations">
<DHCPHostReservations
{...p}
dhcp={p.config.dhcp}
onChange={(d) => {
p.config!.dhcp = d;
p.onChange?.(p.config);
}}
/>
</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>
);
}