Can export VM config from UI
This commit is contained in:
parent
af1e406945
commit
66dcf668f0
@ -5,6 +5,7 @@ import { VMApi, VMInfo } from "../api/VMApi";
|
|||||||
import { useAlert } from "../hooks/providers/AlertDialogProvider";
|
import { useAlert } from "../hooks/providers/AlertDialogProvider";
|
||||||
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
|
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
|
||||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||||
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
||||||
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
||||||
import { VMDetails } from "../widgets/vms/VMDetails";
|
import { VMDetails } from "../widgets/vms/VMDetails";
|
||||||
|
|
||||||
@ -13,7 +14,7 @@ export function CreateVMRoute(): React.ReactElement {
|
|||||||
const alert = useAlert();
|
const alert = useAlert();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [vm] = React.useState(VMInfo.NewEmpty);
|
const [vm, setVM] = React.useState(VMInfo.NewEmpty);
|
||||||
|
|
||||||
const create = async (v: VMInfo) => {
|
const create = async (v: VMInfo) => {
|
||||||
try {
|
try {
|
||||||
@ -30,6 +31,7 @@ export function CreateVMRoute(): React.ReactElement {
|
|||||||
return (
|
return (
|
||||||
<EditVMInner
|
<EditVMInner
|
||||||
vm={vm}
|
vm={vm}
|
||||||
|
onReplace={setVM}
|
||||||
isCreating={true}
|
isCreating={true}
|
||||||
onSave={create}
|
onSave={create}
|
||||||
onCancel={() => navigate("/vms")}
|
onCancel={() => navigate("/vms")}
|
||||||
@ -76,6 +78,7 @@ export function EditVMRoute(): React.ReactElement {
|
|||||||
build={() => (
|
build={() => (
|
||||||
<EditVMInner
|
<EditVMInner
|
||||||
vm={vm!}
|
vm={vm!}
|
||||||
|
onReplace={setVM}
|
||||||
isCreating={false}
|
isCreating={false}
|
||||||
onCancel={() => {
|
onCancel={() => {
|
||||||
navigate(vm!.ViewURL);
|
navigate(vm!.ViewURL);
|
||||||
@ -92,6 +95,7 @@ function EditVMInner(p: {
|
|||||||
isCreating: boolean;
|
isCreating: boolean;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
onSave: (vm: VMInfo) => Promise<void>;
|
onSave: (vm: VMInfo) => Promise<void>;
|
||||||
|
onReplace: (vm: VMInfo) => void;
|
||||||
}): React.ReactElement {
|
}): React.ReactElement {
|
||||||
const [changed, setChanged] = React.useState(false);
|
const [changed, setChanged] = React.useState(false);
|
||||||
|
|
||||||
@ -107,6 +111,14 @@ function EditVMInner(p: {
|
|||||||
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
|
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
|
||||||
actions={
|
actions={
|
||||||
<span>
|
<span>
|
||||||
|
<ConfigImportExportButtons
|
||||||
|
filename={`vm-${p.vm.name}.json`}
|
||||||
|
currentConf={p.vm}
|
||||||
|
importConf={(conf) => {
|
||||||
|
p.onReplace(new VMInfo(conf));
|
||||||
|
valueChanged();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
{changed && (
|
{changed && (
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
|
@ -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 { useNavigate, useParams } from "react-router-dom";
|
||||||
import { VMApi, VMInfo, VMState } from "../api/VMApi";
|
import { VMApi, VMInfo, VMState } from "../api/VMApi";
|
||||||
import React from "react";
|
|
||||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||||
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
||||||
|
import { RouterLink } from "../widgets/RouterLink";
|
||||||
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
||||||
import { VMDetails } from "../widgets/vms/VMDetails";
|
import { VMDetails } from "../widgets/vms/VMDetails";
|
||||||
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
|
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 {
|
export function VMRoute(): React.ReactElement {
|
||||||
const { uuid } = useParams();
|
const { uuid } = useParams();
|
||||||
@ -42,11 +43,18 @@ function VMRouteBody(p: { vm: VMInfo }): React.ReactElement {
|
|||||||
<VMStatusWidget vm={p.vm} onChange={setState} />
|
<VMStatusWidget vm={p.vm} onChange={setState} />
|
||||||
|
|
||||||
<RouterLink to={p.vm.XMLURL}>
|
<RouterLink to={p.vm.XMLURL}>
|
||||||
|
<Tooltip title="View domain definition">
|
||||||
<IconButton size="small">
|
<IconButton size="small">
|
||||||
<Icon path={mdiXml} style={{ width: "1em" }} />
|
<Icon path={mdiXml} style={{ width: "1em" }} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|
||||||
|
<ConfigImportExportButtons
|
||||||
|
filename={`vm-${p.vm.name}.json`}
|
||||||
|
currentConf={p.vm}
|
||||||
|
/>
|
||||||
|
|
||||||
{(state === "Shutdown" || state === "Shutoff") && (
|
{(state === "Shutdown" || state === "Shutoff") && (
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
|
74
virtweb_frontend/src/widgets/ConfigImportExportButtons.tsx
Normal file
74
virtweb_frontend/src/widgets/ConfigImportExportButtons.tsx
Normal 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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user