Add support to bridge option on Web UI

virtweb_backend/src/constants.rs

@@ -111,3 +111,6 @@ pub const API_TOKEN_RIGHT_PATH_MAX_LENGTH: usize = 255;
 
 /// Qemu image program path
 pub const QEMU_IMAGE_PROGRAM: &str = "/usr/bin/qemu-img";
+
+/// IP program path
+pub const IP_PROGRAM: &str = "/usr/sbin/ip";

virtweb_backend/src/controllers/server_controller.rs

@@ -188,3 +188,7 @@ pub async fn number_vcpus() -> HttpResult {
 pub async fn networks_list() -> HttpResult {
     Ok(HttpResponse::Ok().json(net_utils::net_list()))
 }
+
+pub async fn bridges_list() -> HttpResult {
+    Ok(HttpResponse::Ok().json(net_utils::bridges_list()?))
+}

virtweb_backend/src/main.rs

@@ -48,6 +48,10 @@ async fn main() -> std::io::Result<()> {
         constants::QEMU_IMAGE_PROGRAM,
         "QEMU disk image utility is required to manipulate QCow2 files!",
     );
+    exec_utils::check_program(
+        constants::IP_PROGRAM,
+        "ip is required to access bridges information!",
+    );
 
     log::debug!("Create required directory, if missing");
     files_utils::create_directory_if_missing(AppConfig::get().iso_storage_path()).unwrap();
@@ -137,6 +141,10 @@ async fn main() -> std::io::Result<()> {
                 "/api/server/networks",
                 web::get().to(server_controller::networks_list),
             )
+            .route(
+                "/api/server/bridges",
+                web::get().to(server_controller::bridges_list),
+            )
             // Auth controller
             .route(
                 "/api/auth/local",

virtweb_backend/src/utils/net_utils.rs

@@ -1,6 +1,8 @@
+use crate::constants;
 use nix::sys::socket::{AddressFamily, SockaddrLike};
 use std::collections::HashMap;
 use std::net::{IpAddr, Ipv4Addr, Ipv6Addr};
+use std::process::Command;
 use std::str::FromStr;
 use sysinfo::Networks;
 
@@ -68,7 +70,7 @@ pub fn net_list() -> Vec<String> {
 
 /// Get the list of available network interfaces associated with their IP address
 pub fn net_list_and_ips() -> anyhow::Result<HashMap<String, Vec<IpAddr>>> {
-    let addrs = nix::ifaddrs::getifaddrs().unwrap();
+    let addrs = nix::ifaddrs::getifaddrs()?;
 
     let mut res = HashMap::new();
 
@@ -136,6 +138,31 @@ pub fn net_list_and_ips() -> anyhow::Result<HashMap<String, Vec<IpAddr>>> {
     Ok(res)
 }
 
+#[derive(serde::Deserialize)]
+struct IPBridgeInfo {
+    ifname: String,
+}
+
+/// Get the list of bridge interfaces
+pub fn bridges_list() -> anyhow::Result<Vec<String>> {
+    let mut cmd = Command::new(constants::IP_PROGRAM);
+    cmd.args(["-json", "link", "show", "type", "bridge"]);
+    let output = cmd.output()?;
+    if !output.status.success() {
+        anyhow::bail!(
+            "{} failed, status: {}, stderr: {}",
+            constants::IP_PROGRAM,
+            output.status,
+            String::from_utf8_lossy(&output.stderr)
+        );
+    }
+
+    // Parse JSON result
+    let res: Vec<IPBridgeInfo> = serde_json::from_str(&String::from_utf8_lossy(&output.stdout))?;
+
+    Ok(res.iter().map(|ip| ip.ifname.clone()).collect())
+}
+
 #[cfg(test)]
 mod tests {
     use crate::utils::net_utils::{

virtweb_docs/BRIDGE.md

@@ -38,6 +38,9 @@ sudo netplan apply
 
 ```bash
 sudo brctl show
+
+# Or
+ip link show type bridge
 ```
 
 ## Reference

virtweb_frontend/src/api/ServerApi.ts

@@ -217,4 +217,16 @@ export class ServerApi {
       })
     ).data;
   }
+
+  /**
+   * Get host networks bridges list
+   */
+  static async GetNetworksBridgesList(): Promise<string[]> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: "/server/bridges",
+      })
+    ).data;
+  }
 }

virtweb_frontend/src/api/VMApi.ts

@@ -50,7 +50,11 @@ export interface VMNetInterfaceFilter {
   parameters: VMNetInterfaceFilterParams[];
 }
 
-export type VMNetInterface = (VMNetUserspaceSLIRPStack | VMNetDefinedNetwork) &
+export type VMNetInterface = (
+  | VMNetUserspaceSLIRPStack
+  | VMNetDefinedNetwork
+  | VMNetBridge
+) &
   VMNetInterfaceBase;
 
 export interface VMNetInterfaceBase {
@@ -67,6 +71,11 @@ export interface VMNetDefinedNetwork {
   network: string;
 }
 
+export interface VMNetBridge {
+  type: "Bridge";
+  bridge: string;
+}
+
 interface VMInfoInterface {
   name: string;
   uuid?: string;

virtweb_frontend/src/widgets/forms/VMNetworksList.tsx

@@ -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}

virtweb_frontend/src/widgets/tokens/TokenRightsEditor.tsx

@@ -725,6 +725,11 @@ export function TokenRightsEditor(p: {
           right={{ verb: "GET", path: "/api/server/networks" }}
           label="Get list of network cards"
         />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/server/bridges" }}
+          label="Get list of network bridges"
+        />
       </RightsSection>
     </>
   );

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -38,6 +38,7 @@ interface DetailsProps {
 export function VMDetails(p: DetailsProps): React.ReactElement {
   const [groupsList, setGroupsList] = React.useState<string[] | undefined>();
   const [isoList, setIsoList] = React.useState<IsoFile[] | undefined>();
+  const [bridgesList, setBridgesList] = React.useState<string[] | undefined>();
   const [vcpuCombinations, setVCPUCombinations] = React.useState<
     number[] | undefined
   >();
@@ -51,6 +52,7 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
   const load = async () => {
     setGroupsList(await GroupApi.GetList());
     setIsoList(await IsoFilesApi.GetList());
+    setBridgesList(await ServerApi.GetNetworksBridgesList());
     setVCPUCombinations(await ServerApi.NumberVCPUs());
     setNetworksList(await NetworkApi.GetList());
     setNetworkFiltersList(await NWFilterApi.GetList());
@@ -65,6 +67,7 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
         <VMDetailsInner
           groupsList={groupsList!}
           isoList={isoList!}
+          bridgesList={bridgesList!}
           vcpuCombinations={vcpuCombinations!}
           networksList={networksList!}
           networkFiltersList={networkFiltersList!}
@@ -87,6 +90,7 @@ enum VMTab {
 type DetailsInnerProps = DetailsProps & {
   groupsList: string[];
   isoList: IsoFile[];
+  bridgesList: string[];
   vcpuCombinations: number[];
   networksList: NetworkInfo[];
   networkFiltersList: NWFilter[];