Can customize from UI Cloud init metadata

2025-06-10 20:30:51 +02:00
parent 0de15af10e
commit feca07558e
3 changed files with 117 additions and 1 deletions
--- a/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx
+++ b/virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx
@ -0,0 +1,102 @@
+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";
+
+type 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}
+        />
+      </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>
+  );
+}