129 lines
3.3 KiB
TypeScript
129 lines
3.3 KiB
TypeScript
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";
|
|
|
|
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}
|
|
/>
|
|
<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>
|
|
);
|
|
}
|