diff --git a/virtweb_frontend/src/widgets/net/DHCPHostReservations.tsx b/virtweb_frontend/src/widgets/net/DHCPHostReservations.tsx index 9084b89..9d19e9b 100644 --- a/virtweb_frontend/src/widgets/net/DHCPHostReservations.tsx +++ b/virtweb_frontend/src/widgets/net/DHCPHostReservations.tsx @@ -75,7 +75,7 @@ function HostReservationWidget(p: { }; return ( - + setCurrTab(newVal)}> - - + + {(p.editable || p.net.ip_v4) && ( + + )} + + {(p.editable || p.net.ip_v6) && ( + + )} + {!p.editable && ( - { - p.net.ip_v4 = c; - p.onChange?.(); - }} - version={4} - /> - + { + p.net.ip_v4 = c; + p.onChange?.(); + }} + version={4} + /> ); } function NetworkDetailsTabIPv6(p: DetailsInnerProps): React.ReactElement { return ( - - { - p.net.ip_v6 = c; - p.onChange?.(); - }} - version={6} - /> - + { + 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 ( - - } - > - {p.config && ( - <> - { - p.config!.bridge_address = v ?? ""; - p.onChange?.(p.config); - }} + + - - { - p.config!.prefix = Number(v); - p.onChange?.(p.config); - }} - size={p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }} - /> - - { - 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 && ( - <> - + } + > + {p.config && ( + <> { - p.config!.dhcp!.start = v!; - p.onChange(p.config); - }} - /> - { - p.config!.dhcp!.end = v!; - p.onChange(p.config); - }} - /> - - { - p.config!.dhcp = d; + p.config!.bridge_address = v ?? ""; p.onChange?.(p.config); }} /> - - + + { + p.config!.prefix = Number(v); + p.onChange?.(p.config); + }} + size={ + p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 } + } + /> + + )} + + + {p.config && (p.editable || p.config.dhcp) && ( + toggleDHCP(val)} + /> + } + > + {p.config.dhcp && ( + <> + { + p.config!.dhcp!.start = v!; + p.onChange(p.config); + }} + /> + { + p.config!.dhcp!.end = v!; + p.onChange(p.config); + }} + /> + + )} + )} - + + {p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && ( + + { + p.config!.dhcp = d; + p.onChange?.(p.config); + }} + /> + + )} + ); } @@ -389,7 +407,7 @@ function NetworkDetailsTabDanger(p: DetailsInnerProps): React.ReactElement { return ( ); }