Start to build VM page

virtweb_frontend/src/routes/VMRoute.tsx

@@ -0,0 +1,56 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { VMApi, VMInfo, VMState } from "../api/VMApi";
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { VMDetails } from "../widgets/vms/VMDetails";
+import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
+import { Button } from "@mui/material";
+
+export function VMRoute(): React.ReactElement {
+  const { uuid } = useParams();
+
+  const [vm, setVM] = React.useState<VMInfo>();
+
+  const load = async () => {
+    setVM(await VMApi.GetSingle(uuid!));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={uuid}
+      load={load}
+      errMsg="Failed to load VM information!"
+      build={() => <VMRouteBody vm={vm!} />}
+    />
+  );
+}
+
+function VMRouteBody(p: { vm: VMInfo }): React.ReactElement {
+  const navigate = useNavigate();
+
+  const [state, setState] = React.useState<VMState | undefined>();
+
+  return (
+    <VirtWebRouteContainer
+      label={`VM ${p.vm.name}`}
+      actions={
+        <span>
+          <VMStatusWidget vm={p.vm} onChange={setState} />
+
+          {(state === "Shutdown" || state === "Shutoff") && (
+            <Button
+              variant="contained"
+              style={{ marginLeft: "15px" }}
+              onClick={() => navigate(p.vm.EditURL)}
+            >
+              Edit
+            </Button>
+          )}
+        </span>
+      }
+    >
+      <VMDetails vm={p.vm} editable={false} />
+    </VirtWebRouteContainer>
+  );
+}