Update Rust crate reqwest to 0.12.20

Basic check of user data structure for errors
Fix ESLint issue
2025-06-11 00:26:10 +00:00 · 2025-06-10 21:57:58 +02:00 · 2025-06-10 21:49:05 +02:00 · 2025-06-10 21:46:50 +02:00 · 2025-06-10 20:30:51 +02:00
11 changed files with 414 additions and 18 deletions
--- a/virtweb_backend/Cargo.lock
+++ b/virtweb_backend/Cargo.lock
@ -1997,6 +1997,16 @@ dependencies = [
 "cc",
 ]

+[[package]]
+name = "libyml"
+version = "0.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3302702afa434ffa30847a83305f0a69d6abd74293b6554c18ec85c7ef30c980"
+dependencies = [
+ "anyhow",
+ "version_check",
+]
+
 [[package]]
 name = "light-openid"
 version = "1.0.4"
@ -2788,9 +2798,9 @@ checksum = "2b15c43186be67a4fd63bee50d0303afffcef381492ebe2c5d87f324e1b8815c"

 [[package]]
 name = "reqwest"
-version = "0.12.19"
+version = "0.12.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a2f8e5513d63f2e5b386eb5106dc67eaf3f84e95258e210489136b8b92ad6119"
+checksum = "eabf4c97d9130e2bf606614eb937e86edac8292eaa6f422f995d7e8de1eb1813"
 dependencies = [
 "base64 0.22.1",
 "bytes",
@ -2805,12 +2815,10 @@ dependencies = [
 "hyper-rustls",
 "hyper-tls",
 "hyper-util",
- "ipnet",
 "js-sys",
 "log",
 "mime",
 "native-tls",
- "once_cell",
 "percent-encoding",
 "pin-project-lite",
 "rustls-pki-types",
@ -3098,6 +3106,21 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "serde_yml"
+version = "0.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59e2dd588bf1597a252c3b920e0143eb99b0f76e4e082f4c92ce34fbc9e71ddd"
+dependencies = [
+ "indexmap",
+ "itoa",
+ "libyml",
+ "memchr",
+ "ryu",
+ "serde",
+ "version_check",
+]
+
 [[package]]
 name = "sha1"
 version = "0.10.6"
@ -3777,6 +3800,7 @@ dependencies = [
 "rust-embed",
 "serde",
 "serde_json",
+ "serde_yml",
 "sysinfo",
 "tempfile",
 "thiserror 2.0.12",
--- a/virtweb_backend/Cargo.toml
+++ b/virtweb_backend/Cargo.toml
@ -22,12 +22,13 @@ actix-ws = "0.3.0"
 actix-http = "3.10.0"
 serde = { version = "1.0.219", features = ["derive"] }
 serde_json = "1.0.140"
+serde_yml = "0.0.12"
 quick-xml = { version = "0.37.5", features = ["serialize", "overlapped-lists"] }
 futures-util = "0.3.31"
 anyhow = "1.0.98"
 actix-multipart = "0.7.2"
 tempfile = "3.20.0"
-reqwest = { version = "0.12.19", features = ["stream"] }
+reqwest = { version = "0.12.20", features = ["stream"] }
 url = "2.5.4"
 virt = "0.4.2"
 sysinfo = { version = "0.35.1", features = ["serde"] }
--- a/virtweb_backend/src/libvirt_rest_structures/mod.rs
+++ b/virtweb_backend/src/libvirt_rest_structures/mod.rs
@ -13,4 +13,6 @@ enum LibVirtStructError {
    ParseFilteringChain(String),
    #[error("NetworkFilterExtractionError: {0}")]
    NetworkFilterExtraction(String),
+    #[error("CloudInitConfigurationError: {0}")]
+    CloudInitConfiguration(String),
 }
--- a/virtweb_backend/src/libvirt_rest_structures/vm.rs
+++ b/virtweb_backend/src/libvirt_rest_structures/vm.rs
@ -3,7 +3,9 @@ use crate::constants;
 use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::domain::*;
 use crate::libvirt_rest_structures::LibVirtStructError;
-use crate::libvirt_rest_structures::LibVirtStructError::StructureExtraction;
+use crate::libvirt_rest_structures::LibVirtStructError::{
+    CloudInitConfiguration, StructureExtraction,
+};
 use crate::utils::cloud_init_utils::CloudInitConfig;
 use crate::utils::file_size_utils::FileSize;
 use crate::utils::files_utils;
@ -142,6 +144,10 @@ impl VMInfo {
            return Err(StructureExtraction("Invalid number of vCPU specified!").into());
        }

+        if let Some(e) = self.cloud_init.check_error() {
+            return Err(CloudInitConfiguration(e).into());
+        }
+
        let mut iso_absolute_files = vec![];

        // Process cloud init image
--- a/virtweb_backend/src/utils/cloud_init_utils.rs
+++ b/virtweb_backend/src/utils/cloud_init_utils.rs
@ -35,6 +35,27 @@ pub struct CloudInitConfig {
 }

 impl CloudInitConfig {
+    /// Check cloud init configuration
+    pub fn check_error(&self) -> Option<String> {
+        if !self.user_data.is_empty() {
+            // Check YAML content
+            if let Err(e) = serde_yml::from_str::<serde_json::Value>(&self.user_data) {
+                return Some(format!(
+                    "user data is an invalid YAML file! Deserialization error: {e}"
+                ));
+            }
+
+            // Check first line
+            if !self.user_data.starts_with("#cloud-config\n") {
+                return Some(
+                    "user data file MUST start with '#cloud-config' as first line!".to_string(),
+                );
+            }
+        }
+
+        None
+    }
+
    /// Generate disk image for nocloud usage
    pub fn generate_nocloud_disk(&self) -> anyhow::Result<Vec<u8>> {
        let temp_path = tempfile::tempdir_in(&AppConfig::get().temp_dir)?;
--- a/virtweb_frontend/package-lock.json
+++ b/virtweb_frontend/package-lock.json
@ -13,6 +13,7 @@
        "@fontsource/roboto": "^5.2.5",
        "@mdi/js": "^7.4.47",
        "@mdi/react": "^1.6.1",
+        "@monaco-editor/react": "^4.7.0",
        "@mui/icons-material": "^7.1.1",
        "@mui/material": "^7.1.1",
        "@mui/x-charts": "^8.3.1",
@ -20,6 +21,8 @@
        "date-and-time": "^3.6.0",
        "filesize": "^10.1.6",
        "humanize-duration": "^3.32.2",
+        "monaco-editor": "^0.52.2",
+        "monaco-yaml": "^5.4.0",
        "react": "^19.1.0",
        "react-dom": "^19.1.0",
        "react-router-dom": "^7.6.2",
@ -958,6 +961,29 @@
        "prop-types": "^15.7.2"
      }
    },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/@mui/core-downloads-tracker": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz",
@ -3481,6 +3507,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "license": "MIT"
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@ -3607,6 +3639,84 @@
        "node": "*"
      }
    },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "license": "MIT"
+    },
+    "node_modules/monaco-languageserver-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/monaco-languageserver-types/-/monaco-languageserver-types-0.4.0.tgz",
+      "integrity": "sha512-QQ3BZiU5LYkJElGncSNb5AKoJ/LCs6YBMCJMAz9EA7v+JaOdn3kx2cXpPTcZfKA5AEsR0vc97sAw+5mdNhVBmw==",
+      "license": "MIT",
+      "dependencies": {
+        "monaco-types": "^0.1.0",
+        "vscode-languageserver-protocol": "^3.0.0",
+        "vscode-uri": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-marker-data-provider": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.2.4.tgz",
+      "integrity": "sha512-4DsPgsAqpTyUDs3humXRBPUJoihTv+L6v9aupQWD80X2YXaCXUd11mWYeSCYHuPgdUmjFaNWCEOjQ6ewf/QA1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "monaco-types": "^0.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-types": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/monaco-types/-/monaco-types-0.1.0.tgz",
+      "integrity": "sha512-aWK7SN9hAqNYi0WosPoMjenMeXJjwCxDibOqWffyQ/qXdzB/86xshGQobRferfmNz7BSNQ8GB0MD0oby9/5fTQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/monaco-worker-manager": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz",
+      "integrity": "sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "monaco-editor": ">=0.30.0"
+      }
+    },
+    "node_modules/monaco-yaml": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-5.4.0.tgz",
+      "integrity": "sha512-tuBVDy1KAPrgO905GHTItu8AaA5bIzF5S4X0JVRAE/D66FpRhkDUk7tKi5bwKMVTTugtpMLsXN4ewh4CgE/FtQ==",
+      "license": "MIT",
+      "workspaces": [
+        "examples/*"
+      ],
+      "dependencies": {
+        "jsonc-parser": "^3.0.0",
+        "monaco-languageserver-types": "^0.4.0",
+        "monaco-marker-data-provider": "^1.0.0",
+        "monaco-types": "^0.1.0",
+        "monaco-worker-manager": "^2.0.0",
+        "path-browserify": "^1.0.0",
+        "prettier": "^3.0.0",
+        "vscode-languageserver-textdocument": "^1.0.0",
+        "vscode-languageserver-types": "^3.0.0",
+        "vscode-uri": "^3.0.0",
+        "yaml": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">=0.36"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -3753,6 +3863,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
    "node_modules/path-exists": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@ -3846,6 +3962,21 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
    "node_modules/pretty-format": {
      "version": "29.7.0",
      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
@ -4326,6 +4457,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
    "node_modules/string-ts": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/string-ts/-/string-ts-2.2.1.tgz",
@ -4714,6 +4851,43 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "license": "MIT"
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -4781,10 +4955,7 @@
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "dev": true,
      "license": "ISC",
-      "optional": true,
-      "peer": true,
      "bin": {
        "yaml": "bin.mjs"
      },
--- a/virtweb_frontend/package.json
+++ b/virtweb_frontend/package.json
@ -15,6 +15,7 @@
    "@fontsource/roboto": "^5.2.5",
    "@mdi/js": "^7.4.47",
    "@mdi/react": "^1.6.1",
+    "@monaco-editor/react": "^4.7.0",
    "@mui/icons-material": "^7.1.1",
    "@mui/material": "^7.1.1",
    "@mui/x-charts": "^8.3.1",
@ -22,6 +23,8 @@
    "date-and-time": "^3.6.0",
    "filesize": "^10.1.6",
    "humanize-duration": "^3.32.2",
+    "monaco-editor": "^0.52.2",
+    "monaco-yaml": "^5.4.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.6.2",
--- a/virtweb_frontend/src/index.tsx
+++ b/virtweb_frontend/src/index.tsx
@ -3,16 +3,44 @@ import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";

+import { ThemeProvider, createTheme } from "@mui/material";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
+import { AlertDialogProvider } from "./hooks/providers/AlertDialogProvider";
+import { ConfirmDialogProvider } from "./hooks/providers/ConfirmDialogProvider";
+import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
+import { SnackbarProvider } from "./hooks/providers/SnackbarProvider";
 import "./index.css";
 import { LoadServerConfig } from "./widgets/LoadServerConfig";
-import { ThemeProvider, createTheme } from "@mui/material";
-import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
-import { AlertDialogProvider } from "./hooks/providers/AlertDialogProvider";
-import { SnackbarProvider } from "./hooks/providers/SnackbarProvider";
-import { ConfirmDialogProvider } from "./hooks/providers/ConfirmDialogProvider";
+
+import { loader } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import { configureMonacoYaml } from "monaco-yaml";
+import YamlWorker from "monaco-yaml/yaml.worker?worker";
+
+// This allows to use a self hosted instance of Monaco editor
+loader.config({ monaco });
+
+// Add YAML support to Monaco
+configureMonacoYaml(monaco, {
+  enableSchemaRequest: false,
+});
+
+/// YAML worker
+window.MonacoEnvironment = {
+  getWorker(_moduleId, label) {
+    switch (label) {
+      case "editorWorkerService":
+        return new EditorWorker();
+      case "yaml":
+        return new YamlWorker();
+      default:
+        throw new Error(`Unknown label ${label}`);
+    }
+  },
+};

 const darkTheme = createTheme({
  palette: {
@ -20,9 +48,7 @@ const darkTheme = createTheme({
  },
 });

-const root = ReactDOM.createRoot(
-  document.getElementById("root")!
-);
+const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
--- a/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx
+++ b/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx
@ -0,0 +1,128 @@
+import Editor from "@monaco-editor/react";
+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 { CheckboxInput } from "./CheckboxInput";
+import { EditSection } from "./EditSection";
+import { SelectInput } from "./SelectInput";
+import { TextInput } from "./TextInput";
+
+interface CloudInitProps {
+  vm: VMInfo;
+  onChange?: () => void;
+  editable: boolean;
+}
+
+export function CloudInitEditor(p: CloudInitProps): React.ReactElement {
+  return (
+    <>
+      <EditSection>
+        {/* Attach cloud init disk */}
+        <CheckboxInput
+          {...p}
+          label="Attach Cloud Init disk"
+          checked={p.vm.cloud_init.attach_config}
+          onValueChange={(v) => {
+            p.vm.cloud_init.attach_config = v;
+            p.onChange?.();
+          }}
+        />
+      </EditSection>
+      <Grid container spacing={2}>
+        <CloudInitMetadata
+          {...p}
+          editable={p.editable && p.vm.cloud_init.attach_config}
+        />
+        <CloudInitRawUserData
+          {...p}
+          editable={p.editable && p.vm.cloud_init.attach_config}
+        />
+      </Grid>
+    </>
+  );
+}
+
+function CloudInitMetadata(p: CloudInitProps): React.ReactElement {
+  // Regenerate instance id
+  const reGenerateInstanceId = () => {
+    p.vm.cloud_init.instance_id = uuidv4();
+    p.onChange?.();
+  };
+
+  return (
+    <EditSection title="Metadata">
+      {/* Instance ID */}
+      <TextInput
+        {...p}
+        label="Instance ID"
+        value={p.vm.cloud_init.instance_id}
+        onValueChange={(v) => {
+          p.vm.cloud_init.instance_id = v;
+          p.onChange?.();
+        }}
+        endAdornment={
+          p.editable ? (
+            <InputAdornment position="end">
+              <Tooltip title="Generate a new instance ID">
+                <IconButton onClick={reGenerateInstanceId}>
+                  <RefreshIcon />
+                </IconButton>
+              </Tooltip>
+            </InputAdornment>
+          ) : (
+            <></>
+          )
+        }
+      />
+
+      {/* Instance hostname */}
+      <TextInput
+        {...p}
+        label="Local hostname"
+        value={p.vm.cloud_init.local_hostname}
+        onValueChange={(v) => {
+          p.vm.cloud_init.local_hostname = v;
+          p.onChange?.();
+        }}
+      />
+
+      {/* Data source mode */}
+      <SelectInput
+        {...p}
+        label="Data source mode"
+        value={p.vm.cloud_init.dsmode}
+        onValueChange={(v) => {
+          p.vm.cloud_init.dsmode = v as any;
+          p.onChange?.();
+        }}
+        options={[
+          { label: "None", value: undefined },
+          { value: "Net" },
+          { value: "Local" },
+        ]}
+      />
+    </EditSection>
+  );
+}
+
+function CloudInitRawUserData(p: CloudInitProps): React.ReactElement {
+  return (
+    <EditSection title="User data">
+      <Editor
+        theme="vs-dark"
+        options={{
+          readOnly: !p.editable,
+          quickSuggestions: { other: true, comments: true, strings: true },
+        }}
+        language="yaml"
+        height={"30vh"}
+        value={p.vm.cloud_init.user_data}
+        onChange={(v) => {
+          p.vm.cloud_init.user_data = v ?? "";
+          p.onChange?.();
+        }}
+      />
+    </EditSection>
+  );
+}
--- a/virtweb_frontend/src/widgets/forms/TextInput.tsx
+++ b/virtweb_frontend/src/widgets/forms/TextInput.tsx
@ -18,6 +18,7 @@ export function TextInput(p: {
  style?: React.CSSProperties;
  helperText?: string;
  disabled?: boolean;
+  endAdornment?: React.ReactNode;
 }): React.ReactElement {
  if (!p.editable && (p.value ?? "") === "") return <></>;

@ -51,6 +52,7 @@ export function TextInput(p: {
        input: {
          readOnly: !p.editable,
          type: p.type,
+          endAdornment: p.endAdornment,
        },
      }}
      variant={"standard"}
--- a/virtweb_frontend/src/widgets/vms/VMDetails.tsx
+++ b/virtweb_frontend/src/widgets/vms/VMDetails.tsx
@ -5,6 +5,7 @@ import Grid from "@mui/material/Grid";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { validate as validateUUID } from "uuid";
+import { DiskImage, DiskImageApi } from "../../api/DiskImageApi";
 import { GroupApi } from "../../api/GroupApi";
 import { IsoFile, IsoFilesApi } from "../../api/IsoFilesApi";
 import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";
@ -18,6 +19,7 @@ import { AsyncWidget } from "../AsyncWidget";
 import { TabsWidget } from "../TabsWidget";
 import { XMLAsyncWidget } from "../XMLWidget";
 import { CheckboxInput } from "../forms/CheckboxInput";
+import { CloudInitEditor } from "../forms/CloudInitEditor";
 import { EditSection } from "../forms/EditSection";
 import { OEMStringFormWidget } from "../forms/OEMStringFormWidget";
 import { ResAutostartInput } from "../forms/ResAutostartInput";
@ -27,7 +29,6 @@ import { VMDisksList } from "../forms/VMDisksList";
 import { VMNetworksList } from "../forms/VMNetworksList";
 import { VMSelectIsoInput } from "../forms/VMSelectIsoInput";
 import { VMScreenshot } from "./VMScreenshot";
-import { DiskImage, DiskImageApi } from "../../api/DiskImageApi";

 interface DetailsProps {
  vm: VMInfo;
@ -89,6 +90,7 @@ enum VMTab {
  General = 0,
  Storage,
  Network,
+  CloudInit,
  Advanced,
  XML,
  Danger,
@ -116,6 +118,11 @@ function VMDetailsInner(p: DetailsInnerProps): React.ReactElement {
          { label: "General", value: VMTab.General, visible: true },
          { label: "Storage", value: VMTab.Storage, visible: true },
          { label: "Network", value: VMTab.Network, visible: true },
+          {
+            label: "Cloud Init",
+            value: VMTab.CloudInit,
+            visible: p.editable || p.vm.cloud_init.attach_config,
+          },
          { label: "Avanced", value: VMTab.Advanced, visible: true },

          {
@ -135,6 +142,7 @@ function VMDetailsInner(p: DetailsInnerProps): React.ReactElement {
      {currTab === VMTab.General && <VMDetailsTabGeneral {...p} />}
      {currTab === VMTab.Storage && <VMDetailsTabStorage {...p} />}
      {currTab === VMTab.Network && <VMDetailsTabNetwork {...p} />}
+      {currTab === VMTab.CloudInit && <VMDetailsTabCloudInit {...p} />}
      {currTab === VMTab.Advanced && <VMDetailsTabAdvanced {...p} />}
      {currTab === VMTab.XML && <VMDetailsTabXML {...p} />}
      {currTab === VMTab.Danger && <VMDetailsTabDanger {...p} />}
@ -381,6 +389,10 @@ function VMDetailsTabNetwork(p: DetailsInnerProps): React.ReactElement {
  return <VMNetworksList {...p} />;
 }

+function VMDetailsTabCloudInit(p: DetailsInnerProps): React.ReactElement {
+  return <CloudInitEditor {...p} />;
+}
+
 function VMDetailsTabAdvanced(p: DetailsInnerProps): React.ReactElement {
  return (
    <Grid container spacing={2}>
Author	SHA1	Message	Date
Renovate Bot	4d45651422	Update Rust crate reqwest to 0.12.20 All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2025-06-11 00:26:10 +00:00
Pierre HUBERT	978a881372	Basic check of user data structure for errors All checks were successful continuous-integration/drone/push Build is passing Details	2025-06-10 21:57:58 +02:00
Pierre HUBERT	ee733b04f3	Fix ESLint issue All checks were successful continuous-integration/drone/push Build is passing Details	2025-06-10 21:49:05 +02:00
Pierre HUBERT	0d8ef226c1	Can edit Cloud init user data from UI Some checks failed continuous-integration/drone/push Build is failing Details	2025-06-10 21:46:50 +02:00
Pierre HUBERT	feca07558e	Can customize from UI Cloud init metadata Some checks failed continuous-integration/drone/push Build is failing Details	2025-06-10 20:30:51 +02:00