Can export VM config from UI

This commit is contained in:
Pierre HUBERT 2023-12-23 17:33:06 +01:00
parent af1e406945
commit 66dcf668f0
3 changed files with 103 additions and 9 deletions

View File

@ -5,6 +5,7 @@ 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";
@ -13,7 +14,7 @@ export function CreateVMRoute(): React.ReactElement {
const alert = useAlert();
const navigate = useNavigate();
const [vm] = React.useState(VMInfo.NewEmpty);
const [vm, setVM] = React.useState(VMInfo.NewEmpty);
const create = async (v: VMInfo) => {
try {
@ -30,6 +31,7 @@ export function CreateVMRoute(): React.ReactElement {
return (
<EditVMInner
vm={vm}
onReplace={setVM}
isCreating={true}
onSave={create}
onCancel={() => navigate("/vms")}
@ -76,6 +78,7 @@ export function EditVMRoute(): React.ReactElement {
build={() => (
<EditVMInner
vm={vm!}
onReplace={setVM}
isCreating={false}
onCancel={() => {
navigate(vm!.ViewURL);
@ -92,6 +95,7 @@ function EditVMInner(p: {
isCreating: boolean;
onCancel: () => void;
onSave: (vm: VMInfo) => Promise<void>;
onReplace: (vm: VMInfo) => void;
}): React.ReactElement {
const [changed, setChanged] = React.useState(false);
@ -107,6 +111,14 @@ function EditVMInner(p: {
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"

View File

@ -1,14 +1,15 @@
import { mdiXml } from "@mdi/js";
import Icon from "@mdi/react";
import { Button, IconButton, Tooltip } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { VMApi, VMInfo, VMState } from "../api/VMApi";
import React from "react";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
import { RouterLink } from "../widgets/RouterLink";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { VMDetails } from "../widgets/vms/VMDetails";
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
import { Button, IconButton } from "@mui/material";
import Icon from "@mdi/react";
import { mdiXml } from "@mdi/js";
import { RouterLink } from "../widgets/RouterLink";
export function VMRoute(): React.ReactElement {
const { uuid } = useParams();
@ -42,11 +43,18 @@ function VMRouteBody(p: { vm: VMInfo }): React.ReactElement {
<VMStatusWidget vm={p.vm} onChange={setState} />
<RouterLink to={p.vm.XMLURL}>
<Tooltip title="View domain definition">
<IconButton size="small">
<Icon path={mdiXml} style={{ width: "1em" }} />
</IconButton>
</Tooltip>
</RouterLink>
<ConfigImportExportButtons
filename={`vm-${p.vm.name}.json`}
currentConf={p.vm}
/>
{(state === "Shutdown" || state === "Shutoff") && (
<Button
variant="contained"

View File

@ -0,0 +1,74 @@
import FolderOpenIcon from "@mui/icons-material/FolderOpen";
import IosShareIcon from "@mui/icons-material/IosShare";
import { IconButton, Tooltip } from "@mui/material";
import { useAlert } from "../hooks/providers/AlertDialogProvider";
export function ConfigImportExportButtons(p: {
filename: string;
currentConf: any;
importConf?: (content: any) => any;
}): React.ReactElement {
const alert = useAlert();
const exportConf = () => {
const conf = JSON.stringify(p.currentConf);
const blob = new Blob([conf], { type: "application/json" });
const a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = p.filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
const importConf = async () => {
try {
// Create file element
const fileEl = document.createElement("input");
fileEl.type = "file";
fileEl.accept = "application/json";
fileEl.click();
// Wait for a file to be chosen
await new Promise((res, _rej) =>
fileEl.addEventListener("change", () => res(null))
);
if ((fileEl.files?.length ?? 0) === 0) return null;
// Import conf
let file = fileEl.files![0];
const content = await file.text();
p.importConf?.(JSON.parse(content));
} catch (e) {
console.error(e);
alert(`Failed to load config from file!\n${e}`);
}
};
return (
<>
<Tooltip title={"Export current config"}>
<IconButton
onClick={exportConf}
size="small"
style={{ paddingBottom: "0px", paddingTop: "0px" }}
>
<IosShareIcon />
</IconButton>
</Tooltip>
{p.importConf && (
<Tooltip title={"Import config from file"}>
<IconButton
onClick={importConf}
size="small"
style={{ paddingBottom: "0px", paddingTop: "0px" }}
>
<FolderOpenIcon />
</IconButton>
</Tooltip>
)}
</>
);
}