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

Add support to bridge option on Web UI
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Pierre HUBERT
2025-05-26 21:02:02 +02:00
parent a8171375a8
commit 6a7af7e6c4
5 changed files with 83 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
virtweb_frontend/src/widgets/forms/VMNetworksList.tsx
View File

@ -29,6 +29,7 @@ export function VMNetworksList(p: {
onChange?: () => void;
editable: boolean;
networksList: NetworkInfo[];
bridgesList: string[];
networkFiltersList: NWFilter[];
}): React.ReactElement {
const addNew = () => {
@ -72,6 +73,7 @@ function NetworkInfoWidget(p: {
onChange?: () => void;
removeFromList: () => void;
networksList: NetworkInfo[];
bridgesList: string[];
networkFiltersList: NWFilter[];
}): React.ReactElement {
const confirm = useConfirm();
@ -130,6 +132,11 @@ function NetworkInfoWidget(p: {
value: "DefinedNetwork",
description: "Attach to a defined network",
},
{
label: "Host bridge",
value: "Bridge",
description: "Attach to an host's bridge",
},
]}
/>
) : (
@ -149,31 +156,53 @@ function NetworkInfoWidget(p: {
}}
/>
{/* Defined network selection */}
{p.network.type === "DefinedNetwork" && (
<SelectInput
editable={p.editable}
label="Defined network"
options={p.networksList.map((n) => {
const chars = [n.forward_mode.toString()];
if (n.ip_v4) chars.push("IPv4");
if (n.ip_v6) chars.push("IPv6");
if (n.description) chars.push(n.description);
return {
label: n.name,
value: n.name,
description: chars.join(" - "),
};
})}
value={p.network.network}
onValueChange={(v) => {
if (p.network.type === "DefinedNetwork")
p.network.network = v as any;
p.onChange?.();
}}
/>
)}
{/* Bridge selection */}
{p.network.type === "Bridge" && (
<SelectInput
editable={p.editable}
label="Host bridge"
options={p.bridgesList.map((n) => {
return {
label: n,
value: n,
};
})}
value={p.network.bridge}
onValueChange={(v) => {
if (p.network.type === "Bridge") p.network.bridge = v as any;
p.onChange?.();
}}
/>
)}
{p.network.type !== "UserspaceSLIRPStack" && (
<>
<SelectInput
editable={p.editable}
label="Defined network"
options={p.networksList.map((n) => {
const chars = [n.forward_mode.toString()];
if (n.ip_v4) chars.push("IPv4");
if (n.ip_v6) chars.push("IPv6");
if (n.description) chars.push(n.description);
return {
label: n.name,
value: n.name,
description: chars.join(" - "),
};
})}
value={p.network.network}
onValueChange={(v) => {
if (p.network.type === "DefinedNetwork")
p.network.network = v as any;
p.onChange?.();
}}
/>
{/* Network Filter */}
<NWFilterSelectInput
editable={p.editable}