First successful VNC connection

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}