141 lines
3.7 KiB
TypeScript
141 lines
3.7 KiB
TypeScript
import { Button } from "@mui/material";
|
|
import React from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { VMApi, VMInfo } from "../api/VMApi";
|
|
import { useAlert } from "../hooks/providers/AlertDialogProvider";
|
|
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
|
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
|
import { VMDetails } from "../widgets/vms/VMDetails";
|
|
|
|
export function CreateVMRoute(): React.ReactElement {
|
|
const snackbar = useSnackbar();
|
|
const alert = useAlert();
|
|
const navigate = useNavigate();
|
|
|
|
const [vm, setVM] = React.useState(VMInfo.NewEmpty);
|
|
|
|
const create = async (v: VMInfo) => {
|
|
try {
|
|
const res = await VMApi.Create(v);
|
|
snackbar("The virtual machine was successfully created!");
|
|
v.uuid = res.uuid;
|
|
navigate(v.ViewURL);
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert(`Failed to create VM!\n${e}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<EditVMInner
|
|
vm={vm}
|
|
onReplace={setVM}
|
|
isCreating={true}
|
|
onSave={create}
|
|
onCancel={() => navigate("/vms")}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function EditVMRoute(): React.ReactElement {
|
|
const navigate = useNavigate();
|
|
const alert = useAlert();
|
|
const snackbar = useSnackbar();
|
|
|
|
const { uuid } = useParams();
|
|
|
|
const [vm, setVM] = React.useState<VMInfo | undefined>(undefined);
|
|
|
|
const load = async () => {
|
|
const vm = await VMApi.GetSingle(uuid!);
|
|
setVM(vm);
|
|
|
|
const state = await VMApi.GetState(vm);
|
|
if (state !== "Shutdown" && state !== "Shutoff") {
|
|
await alert("The Virtual machine is running, you cannot edit it!");
|
|
navigate(vm.ViewURL);
|
|
}
|
|
};
|
|
|
|
const save = async (v: VMInfo) => {
|
|
try {
|
|
await VMApi.UpdateSingle(v);
|
|
snackbar("The virtual machine was successfully updated!");
|
|
navigate(v.ViewURL);
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert("Failed to update VM info!");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AsyncWidget
|
|
loadKey={uuid}
|
|
load={load}
|
|
errMsg="Failed to get VM information!"
|
|
build={() => (
|
|
<EditVMInner
|
|
vm={vm!}
|
|
onReplace={setVM}
|
|
isCreating={false}
|
|
onCancel={() => {
|
|
navigate(vm!.ViewURL);
|
|
}}
|
|
onSave={save}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function EditVMInner(p: {
|
|
vm: VMInfo;
|
|
isCreating: boolean;
|
|
onCancel: () => void;
|
|
onSave: (vm: VMInfo) => Promise<void>;
|
|
onReplace: (vm: VMInfo) => void;
|
|
}): React.ReactElement {
|
|
const [changed, setChanged] = React.useState(false);
|
|
|
|
const [, updateState] = React.useState<any>();
|
|
const forceUpdate = React.useCallback(() => updateState({}), []);
|
|
|
|
const valueChanged = () => {
|
|
setChanged(true);
|
|
forceUpdate();
|
|
};
|
|
return (
|
|
<VirtWebRouteContainer
|
|
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
|
|
actions={
|
|
<span>
|
|
<ConfigImportExportButtons
|
|
filename={`vm-${p.vm.name}.json`}
|
|
currentConf={p.vm}
|
|
importConf={(conf) => {
|
|
p.onReplace(new VMInfo(conf));
|
|
valueChanged();
|
|
}}
|
|
/>
|
|
{changed && (
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => p.onSave(p.vm)}
|
|
style={{ marginRight: "10px" }}
|
|
>
|
|
{p.isCreating ? "Create" : "Save"}
|
|
</Button>
|
|
)}
|
|
<Button onClick={p.onCancel} variant="outlined">
|
|
Cancel
|
|
</Button>
|
|
</span>
|
|
}
|
|
>
|
|
<VMDetails vm={p.vm} editable={true} onChange={valueChanged} />
|
|
</VirtWebRouteContainer>
|
|
);
|
|
}
|