Reorganize IP tabs
This commit is contained in:
parent
afe5db1fcd
commit
3407c068e1
@ -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 && (
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user