Can edit more network settings

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -3,19 +3,44 @@ import { NetworkInfo } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
 import { EditSection } from "../forms/EditSection";
 import { TextInput } from "../forms/TextInput";
+import { SelectInput } from "../forms/SelectInput";
+import React from "react";
+import { AsyncWidget } from "../AsyncWidget";
+import { IPv4Input } from "../forms/IPv4Input";
 
-export function NetworkDetails(p: {
+interface DetailsProps {
   net: NetworkInfo;
   editable: boolean;
   onChange?: () => void;
-}): React.ReactElement {
+}
+
+export function NetworkDetails(p: DetailsProps): React.ReactElement {
+  const [cardsList, setCardsList] = React.useState<string[] | any>();
+
+  const load = async () => {
+    setCardsList(await ServerApi.GetNetworksList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={"1"}
+      load={load}
+      errMsg="Failed to load the list of host network cards!"
+      build={() => <NetworkDetailsInner cardsList={cardsList} {...p} />}
+    />
+  );
+}
+
+function NetworkDetailsInner(
+  p: DetailsProps & { cardsList: string[] }
+): React.ReactElement {
   return (
     <Grid container spacing={2}>
       {/* Metadata section */}
       <EditSection title="Metadata">
         <TextInput
           label="Name"
-          editable={p.editable}
+          editable={p.editable && !p.net.uuid}
           value={p.net.name}
           onValueChange={(v) => {
             p.net.name = v ?? "";
@@ -49,7 +74,58 @@ export function NetworkDetails(p: {
           multiline={true}
         />
       </EditSection>
-      TODO:continue
+      {/* TODO :  autostart */}
+
+      <EditSection title="General settings">
+        <SelectInput
+          editable={p.editable}
+          label="Forward mode"
+          onValueChange={(v) => {
+            p.net.forward_mode = v as any;
+            p.onChange?.();
+          }}
+          value={p.net.forward_mode}
+          options={[
+            {
+              label: "NAT",
+              value: "NAT",
+            },
+
+            {
+              label: "Isolated network",
+              value: "Isolated",
+            },
+          ]}
+        />
+
+        {p.net.forward_mode === "NAT" && (
+          <SelectInput
+            editable={p.editable}
+            label="Network output device"
+            onValueChange={(v) => {
+              p.net.device = v;
+              p.onChange?.();
+            }}
+            value={p.net.device}
+            options={[
+              { label: "Default interface", value: undefined },
+              ...p.cardsList.map((d) => {
+                return { label: d, value: d };
+              }),
+            ]}
+          />
+        )}
+
+        <IPv4Input
+          editable={p.editable}
+          label="DNS server to use"
+          value={p.net.dns_server}
+          onValueChange={(v) => {
+            p.net.dns_server = v;
+            p.onChange?.();
+          }}
+        />
+      </EditSection>
     </Grid>
   );
 }