Can export VM config from UI

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -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"

virtweb_frontend/src/routes/VMRoute.tsx

@@ -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}>
-            <IconButton size="small">
-              <Icon path={mdiXml} style={{ width: "1em" }} />
-            </IconButton>
+            <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"