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