First successful VNC connection

virtweb_frontend/package-lock.json

@@ -33,6 +33,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.15.0",
         "react-scripts": "5.0.1",
+        "react-vnc": "^1.0.0",
         "typescript": "^4.9.5",
         "uuid": "^9.0.1",
         "web-vitals": "^2.1.4"
@@ -15283,6 +15284,16 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-vnc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-vnc/-/react-vnc-1.0.0.tgz",
+      "integrity": "sha512-LE9i2H6X/njuzbJTRIsopadgyka18k5avUMWDj6kuRsis5O192qm2EIqJ4l8xRRpwrKVFrOkAC5wIgw+PBNAyw==",
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0",
+        "react-scripts": ">=4.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -28921,6 +28932,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-vnc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-vnc/-/react-vnc-1.0.0.tgz",
+      "integrity": "sha512-LE9i2H6X/njuzbJTRIsopadgyka18k5avUMWDj6kuRsis5O192qm2EIqJ4l8xRRpwrKVFrOkAC5wIgw+PBNAyw==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

virtweb_frontend/package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
+    "react-vnc": "^1.0.0",
     "typescript": "^4.9.5",
     "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"

virtweb_frontend/src/App.tsx

@@ -18,6 +18,7 @@ import { SysInfoRoute } from "./routes/SysInfoRoute";
 import { VMListRoute } from "./routes/VMListRoute";
 import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
 import { VMRoute } from "./routes/VMRoute";
+import { VNCRoute } from "./routes/VNCRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -44,6 +45,7 @@ export function App() {
           <Route path="vms/new" element={<CreateVMRoute />} />
           <Route path="vm/:uuid" element={<VMRoute />} />
           <Route path="vm/:uuid/edit" element={<EditVMRoute />} />
+          <Route path="vm/:uuid/vnc" element={<VNCRoute />} />
 
           <Route path="sysinfo" element={<SysInfoRoute />} />
           <Route path="*" element={<NotFoundRoute />} />

virtweb_frontend/src/api/VMApi.ts

@@ -69,6 +69,10 @@ export class VMInfo implements VMInfoInterface {
   get EditURL(): string {
     return `/vm/${this.uuid}/edit`;
   }
+
+  get VNCURL(): string {
+    return `/vm/${this.uuid}/vnc`;
+  }
 }
 
 export class VMApi {
@@ -230,4 +234,27 @@ export class VMApi {
       jsonData: { keep_files },
     });
   }
+
+  /**
+   * Get a oneshot VNC connect URL
+   */
+  static async OneShotVNCURL(vm: VMInfo): Promise<string> {
+    const token = (
+      await APIClient.exec({
+        uri: `/vm/${vm.uuid}/vnc_token`,
+        method: "GET",
+      })
+    ).data.token;
+
+    let baseWSURL = APIClient.backendURL();
+    if (!baseWSURL.includes("://"))
+      baseWSURL =
+        window.location.protocol + "://" + window.location.hostname + baseWSURL;
+
+    return (
+      baseWSURL.replace("http", "ws") +
+      "/vnc?token=" +
+      encodeURIComponent(token)
+    );
+  }
 }

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} />;
+}

virtweb_frontend/src/widgets/forms/CheckboxInput.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, FormControlLabel, Typography } from "@mui/material";
+import { Checkbox, FormControlLabel } from "@mui/material";
 
 export function CheckboxInput(p: {
   editable: boolean;

virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx

@@ -1,4 +1,5 @@
 import PauseIcon from "@mui/icons-material/Pause";
+import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
 import ReplayIcon from "@mui/icons-material/Replay";
@@ -10,6 +11,7 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { VMApi, VMInfo, VMState } from "../../api/VMApi";
 import { useAlert } from "../../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
@@ -20,6 +22,7 @@ export function VMStatusWidget(p: {
   onChange?: (s: VMState) => void;
 }): React.ReactElement {
   const snackbar = useSnackbar();
+  const navigate = useNavigate();
 
   const [state, setState] = React.useState<undefined | VMState>(undefined);
 
@@ -54,6 +57,19 @@ export function VMStatusWidget(p: {
     <div style={{ display: "inline-flex" }}>
       <Typography>{state}</Typography>
 
+      {
+        /* VNC console */ p.vm.vnc_access && (
+          <ActionButton
+            currState={state}
+            cond={["Running"]}
+            icon={<PersonalVideoIcon />}
+            tooltip="Graphical remote control over the VM"
+            performAction={async () => navigate(p.vm.VNCURL)}
+            onExecuted={() => {}}
+          />
+        )
+      }
+
       {/* Start VM */}
       <ActionButton
         currState={state}