First successful VNC connection

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -0,0 +1,67 @@
+import { CircularProgress } from "@mui/material";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { VncScreen } from "react-vnc";
+import { VMApi, VMInfo } from "../api/VMApi";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+
+export function VNCRoute(): React.ReactElement {
+  const { uuid } = useParams();
+
+  const [vm, setVM] = React.useState<VMInfo | undefined>();
+
+  const load = async () => {
+    setVM(await VMApi.GetSingle(uuid!));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={uuid}
+      load={load}
+      errMsg="Failed to load VM information!"
+      build={() => <VNCInner vm={vm!} />}
+    />
+  );
+}
+
+function VNCInner(p: { vm: VMInfo }): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [url, setURL] = React.useState<string | undefined>();
+
+  const load = async () => {
+    try {
+      const u = await VMApi.OneShotVNCURL(p.vm);
+      console.info(u);
+      setURL(u);
+    } catch (e) {
+      console.error(e);
+      snackbar("Failed to initialize VNC connection!");
+    }
+  };
+
+  React.useEffect(() => {
+    if (url !== undefined) {
+      return;
+    }
+
+    load();
+  });
+
+  if (url === undefined)
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <CircularProgress />
+      </div>
+    );
+
+  return <VncScreen url={url} />;
+}