Can update VM settings

virtweb_frontend/src/App.tsx

@@ -41,7 +41,7 @@ export function App() {
 
           <Route path="vms" element={<VirtualMachinesRoute />} />
           <Route path="vms/new" element={<CreateVMRoute />} />
-          <Route path="vms/:uuid/edit" element={<EditVMRoute />} />
+          <Route path="vm/:uuid/edit" element={<EditVMRoute />} />
 
           <Route path="sysinfo" element={<SysInfoRoute />} />
           <Route path="*" element={<NotFoundRoute />} />

virtweb_frontend/src/api/VMApi.ts

@@ -63,7 +63,11 @@ export class VMInfo implements VMInfoInterface {
   }
 
   get ViewURL(): string {
-    return `/api/vm/${this.uuid}`;
+    return `/vm/${this.uuid}`;
+  }
+
+  get EditURL(): string {
+    return `/vm/${this.uuid}/edit`;
   }
 }
 
@@ -93,6 +97,33 @@ export class VMApi {
     ).data.map((i: VMInfoInterface) => new VMInfo(i));
   }
 
+  /**
+   * Get the information about a single VM
+   */
+  static async GetSingle(uuid: string): Promise<VMInfo> {
+    const data = (
+      await APIClient.exec({
+        uri: `/vm/${uuid}`,
+        method: "GET",
+      })
+    ).data;
+    return new VMInfo(data);
+  }
+
+  /**
+   * Update the information about a single VM
+   */
+  static async UpdateSingle(vm: VMInfo): Promise<VMInfo> {
+    const data = (
+      await APIClient.exec({
+        uri: `/vm/${vm.uuid!}`,
+        method: "PUT",
+        jsonData: vm,
+      })
+    ).data;
+    return new VMInfo(data);
+  }
+
   /**
    * Get the state of a VM
    */

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { VMApi, VMInfo } from "../api/VMApi";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
@@ -9,6 +9,8 @@ import { ServerApi } from "../api/ServerApi";
 import { validate as validateUUID } from "uuid";
 import { SelectInput } from "../widgets/forms/SelectInput";
 import { CheckboxInput } from "../widgets/forms/CheckboxInput";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
 
 export function CreateVMRoute(): React.ReactElement {
   const snackbar = useSnackbar();
@@ -17,10 +19,15 @@ export function CreateVMRoute(): React.ReactElement {
   const [vm] = React.useState(VMInfo.NewEmpty);
 
   const create = async (v: VMInfo) => {
-    const res = await VMApi.Create(v);
-    snackbar("The virtual machine was successfully created!");
-    v.uuid = res.uuid;
-    navigate(v.ViewURL);
+    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!");
+    }
   };
 
   return (
@@ -34,7 +41,53 @@ export function CreateVMRoute(): React.ReactElement {
 }
 
 export function EditVMRoute(): React.ReactElement {
-  return <>todo</>;
+  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!}
+          isCreating={false}
+          onCancel={() => {
+            navigate(vm!.ViewURL);
+          }}
+          onSave={save}
+        />
+      )}
+    />
+  );
 }
 
 function EditVMInner(p: {