Can attach defined networks to domains

virtweb_frontend/src/api/VMApi.ts

@@ -30,12 +30,17 @@ export interface VMDisk {
   deleteType?: "keepfile" | "deletefile";
 }
 
-export type VMNetInterface = VMNetUserspaceSLIRPStack;
+export type VMNetInterface = VMNetUserspaceSLIRPStack | VMNetDefinedNetwork;
 
 export interface VMNetUserspaceSLIRPStack {
   type: "UserspaceSLIRPStack";
 }
 
+export interface VMNetDefinedNetwork {
+  type: "DefinedNetwork";
+  network: string;
+}
+
 interface VMInfoInterface {
   name: string;
   uuid?: string;
@@ -65,7 +70,7 @@ export class VMInfo implements VMInfoInterface {
   vnc_access: boolean;
   iso_file?: string;
   disks: VMDisk[];
-  networks: VMNetUserspaceSLIRPStack[];
+  networks: VMNetInterface[];
 
   constructor(int: VMInfoInterface) {
     this.name = int.name;

virtweb_frontend/src/widgets/forms/VMNetworksList.tsx

@@ -13,11 +13,13 @@ import {
 import { VMInfo, VMNetInterface } from "../../api/VMApi";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { SelectInput } from "./SelectInput";
+import { NetworkInfo } from "../../api/NetworksApi";
 
 export function VMNetworksList(p: {
   vm: VMInfo;
   onChange?: () => void;
   editable: boolean;
+  networksList: NetworkInfo[];
 }): React.ReactElement {
   const addNew = () => {
     p.vm.networks.push({ type: "UserspaceSLIRPStack" });
@@ -28,15 +30,14 @@ export function VMNetworksList(p: {
     <>
       {/* networks list */}
       {p.vm.networks.map((n, num) => (
-        <NetworkInfo
+        <NetworkInfoWidget
           key={num}
-          editable={p.editable}
           network={n}
-          onChange={p.onChange}
           removeFromList={() => {
             p.vm.networks.splice(num, 1);
             p.onChange?.();
           }}
+          {...p}
         />
       ))}
 
@@ -47,11 +48,12 @@ export function VMNetworksList(p: {
   );
 }
 
-function NetworkInfo(p: {
+function NetworkInfoWidget(p: {
   editable: boolean;
   network: VMNetInterface;
   onChange?: () => void;
   removeFromList: () => void;
+  networksList: NetworkInfo[];
 }): React.ReactElement {
   const confirm = useConfirm();
   const deleteNetwork = async () => {
@@ -65,7 +67,7 @@ function NetworkInfo(p: {
   };
 
   return (
-    <div>
+    <>
       <ListItem
         secondaryAction={
           p.editable && (
@@ -95,6 +97,7 @@ function NetworkInfo(p: {
                 value={p.network.type}
                 onValueChange={(v) => {
                   p.network.type = v as any;
+                  p.onChange?.();
                 }}
                 options={[
                   {
@@ -103,6 +106,11 @@ function NetworkInfo(p: {
                     description:
                       "Provides a virtual LAN with NAT to the outside world. The virtual network has DHCP & DNS services",
                   },
+                  {
+                    label: "Defined network",
+                    value: "DefinedNetwork",
+                    description: "Attach to a defined network",
+                  },
                 ]}
               />
             ) : (
@@ -111,6 +119,32 @@ function NetworkInfo(p: {
           }
         />
       </ListItem>
-    </div>
+      <div style={{ marginLeft: "70px" }}>
+        {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?.();
+            }}
+          />
+        )}
+      </div>
+    </>
   );
 }

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -14,6 +14,7 @@ import { VMSelectIsoInput } from "../forms/VMSelectIsoInput";
 import { VMScreenshot } from "./VMScreenshot";
 import { ResAutostartInput } from "../forms/ResAutostartInput";
 import { VMNetworksList } from "../forms/VMNetworksList";
+import { NetworkApi, NetworkInfo } from "../../api/NetworksApi";
 
 interface DetailsProps {
   vm: VMInfo;
@@ -27,10 +28,12 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
   const [vcpuCombinations, setVCPUCombinations] = React.useState<
     number[] | any
   >();
+  const [networksList, setNetworksList] = React.useState<NetworkInfo[] | any>();
 
   const load = async () => {
     setIsoList(await IsoFilesApi.GetList());
     setVCPUCombinations(await ServerApi.NumberVCPUs());
+    setNetworksList(await NetworkApi.GetList());
   };
 
   return (
@@ -42,6 +45,7 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
         <VMDetailsInner
           isoList={isoList}
           vcpuCombinations={vcpuCombinations}
+          networksList={networksList}
           {...p}
         />
       )}
@@ -50,7 +54,11 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
 }
 
 function VMDetailsInner(
-  p: DetailsProps & { isoList: IsoFile[]; vcpuCombinations: number[] }
+  p: DetailsProps & {
+    isoList: IsoFile[];
+    vcpuCombinations: number[];
+    networksList: NetworkInfo[];
+  }
 ): React.ReactElement {
   return (
     <Grid container spacing={2}>
@@ -201,12 +209,12 @@ function VMDetailsInner(
             p.onChange?.();
           }}
         />
-        <VMDisksList vm={p.vm} editable={p.editable} onChange={p.onChange} />
+        <VMDisksList {...p} />
       </EditSection>
 
       {/* Networks section */}
       <EditSection title="Networks">
-        <VMNetworksList vm={p.vm} editable={p.editable} onChange={p.onChange} />
+        <VMNetworksList {...p} />
       </EditSection>
     </Grid>
   );