From 9f1f4b44ca6e4a5fa09e0bfba77247286f7db154 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 16 Jun 2025 18:51:33 +0200
Subject: [PATCH] Make network configuration editable

---
 .../src/widgets/forms/CloudInitEditor.tsx     | 59 ++++++++++++++++++-
 .../src/widgets/forms/EditSection.tsx         |  7 +--
 2 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx b/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx
index 82f2f88..3f654bc 100644
--- a/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx
+++ b/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx
@@ -1,8 +1,10 @@
 import Editor from "@monaco-editor/react";
+import BookIcon from "@mui/icons-material/Book";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { Grid, IconButton, InputAdornment, Tooltip } from "@mui/material";
 import { v4 as uuidv4 } from "uuid";
 import { VMInfo } from "../../api/VMApi";
+import { RouterLink } from "../RouterLink";
 import { CheckboxInput } from "./CheckboxInput";
 import { EditSection } from "./EditSection";
 import { SelectInput } from "./SelectInput";
@@ -38,6 +40,10 @@ export function CloudInitEditor(p: CloudInitProps): React.ReactElement {
           {...p}
           editable={p.editable && p.vm.cloud_init.attach_config}
         />
+        <CloudInitNetworkConfig
+          {...p}
+          editable={p.editable && p.vm.cloud_init.attach_config}
+        />
       </Grid>
     </>
   );
@@ -108,7 +114,21 @@ function CloudInitMetadata(p: CloudInitProps): React.ReactElement {
 
 function CloudInitRawUserData(p: CloudInitProps): React.ReactElement {
   return (
-    <EditSection title="User data">
+    <EditSection
+      title="User data"
+      actions={
+        <RouterLink
+          target="_blank"
+          to="https://cloudinit.readthedocs.io/en/latest/reference/index.html"
+        >
+          <Tooltip title="Official reference">
+            <IconButton size="small">
+              <BookIcon />
+            </IconButton>
+          </Tooltip>
+        </RouterLink>
+      }
+    >
       <Editor
         theme="vs-dark"
         options={{
@@ -126,3 +146,40 @@ function CloudInitRawUserData(p: CloudInitProps): React.ReactElement {
     </EditSection>
   );
 }
+
+function CloudInitNetworkConfig(p: CloudInitProps): React.ReactElement {
+  if (!p.editable && !p.vm.cloud_init.network_configuration) return <></>;
+  return (
+    <EditSection
+      title="Network configuration"
+      actions={
+        <RouterLink
+          target="_blank"
+          to="https://cloudinit.readthedocs.io/en/latest/reference/network-config-format-v2.html"
+        >
+          <Tooltip title="Official network configuration reference">
+            <IconButton size="small">
+              <BookIcon />
+            </IconButton>
+          </Tooltip>
+        </RouterLink>
+      }
+    >
+      <Editor
+        theme="vs-dark"
+        options={{
+          readOnly: !p.editable,
+          quickSuggestions: { other: true, comments: true, strings: true },
+        }}
+        language="yaml"
+        height={"30vh"}
+        value={p.vm.cloud_init.network_configuration ?? ""}
+        onChange={(v) => {
+          if (v && v !== "") p.vm.cloud_init.network_configuration = v;
+          else p.vm.cloud_init.network_configuration = undefined;
+          p.onChange?.();
+        }}
+      />
+    </EditSection>
+  );
+}
diff --git a/virtweb_frontend/src/widgets/forms/EditSection.tsx b/virtweb_frontend/src/widgets/forms/EditSection.tsx
index 8974b3f..01a95a4 100644
--- a/virtweb_frontend/src/widgets/forms/EditSection.tsx
+++ b/virtweb_frontend/src/widgets/forms/EditSection.tsx
@@ -19,13 +19,10 @@ export function EditSection(
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center",
+              marginBottom: "15px",
             }}
           >
-            {p.title && (
-              <Typography variant="h5" style={{ marginBottom: "15px" }}>
-                {p.title}
-              </Typography>
-            )}
+            {p.title && <Typography variant="h5">{p.title}</Typography>}
             {p.actions}
           </span>
         )}