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

virtweb_frontend/src/widgets/net/NetworkStatusWidget.tsx

@@ -0,0 +1,74 @@
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import StopIcon from "@mui/icons-material/Stop";
+import { CircularProgress, Typography } from "@mui/material";
+import React from "react";
+import {
+  NetworkApi,
+  NetworkInfo,
+  NetworkStatus as NetworkState,
+} from "../../api/NetworksApi";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { StateActionButton } from "../StateActionButton";
+
+export function NetworkStatusWidget(p: {
+  net: NetworkInfo;
+  onChange?: (s: NetworkState) => void;
+}): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [state, setState] = React.useState<undefined | NetworkState>();
+
+  const refresh = async () => {
+    try {
+      const s = await NetworkApi.GetState(p.net);
+      if (s !== state) p.onChange?.(s);
+      setState(s);
+    } catch (e) {
+      console.error(e);
+      snackbar("Failed to refresh network status!");
+    }
+  };
+
+  const changedAction = () => setState(undefined);
+
+  React.useEffect(() => {
+    refresh();
+    const i = setInterval(() => refresh(), 3000);
+
+    return () => clearInterval(i);
+  });
+
+  if (state === undefined)
+    return (
+      <>
+        <CircularProgress size={"1rem"} />
+      </>
+    );
+
+  return (
+    <div style={{ display: "inline-flex" }}>
+      <Typography>{state}</Typography>
+
+      {/* Start Network */}
+      <StateActionButton
+        currState={state}
+        cond={["Stopped"]}
+        icon={<PlayArrowIcon />}
+        tooltip="Start the Network"
+        performAction={() => NetworkApi.Start(p.net)}
+        onExecuted={changedAction}
+      />
+
+      {/* Stop network */}
+      <StateActionButton
+        currState={state}
+        cond={["Started"]}
+        icon={<StopIcon />}
+        tooltip="Stop the network"
+        confirmMessage="Do you really want to kill stop this network?"
+        performAction={() => NetworkApi.Stop(p.net)}
+        onExecuted={changedAction}
+      />
+    </div>
+  );
+}