Can attach defined networks to domains

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>
+    </>
   );
 }