Detect VNC-in-use error state

noVNC provides no direct access the error code returned by
socket.on("close") callback. As a workaround the original callback is
replaced by a custom proxy.

The backend returns the message introduced in #15267 for HTTP requests.
For the websocket requests we receive error 1006 (abnormal disconnect).
As a workaround an additional dedicated HTTP request is triggered to
retrieve the error.

Reference-Url: kubevirt/kubevirt#15267
Reference-Url: https://github.com/kubevirt/kubevirt/blob/46aa1b24982cd6fcfd37c950825c8d3acd3dbaf3/pkg/virt-handler/rest/console.go#L163
Reference-Url: https://github.com/novnc/noVNC/blob/d44f7e04fc456844836c7c5ac911d0f4e8dd06e6/core/rfb.js#L662
Reference-Url: https://datatracker.ietf.org/doc/html/rfc6455#section-7.4
Signed-off-by: Radoslaw Szwajkowski <[email protected]>

Author: rszwajko

src/utils/components/Consoles/components/utils/ConsoleConsts.ts

@@ -16,6 +16,8 @@ export enum ConsoleState {
 
 export const WS = 'ws';
 export const WSS = 'wss';
+export const HTTP = 'http';
+export const HTTPS = 'https';
 export const SERIAL_CONSOLE_TYPE = 'Serial console';
 export const VNC_CONSOLE_TYPE = 'VNC console';
 export const DESKTOP_VIEWER_CONSOLE_TYPE = 'Desktop viewer';

src/utils/components/Consoles/components/vnc-console/VncConsole.tsx

@@ -2,10 +2,11 @@
 import React, { Dispatch, FC, memo, useCallback, useEffect, useRef } from 'react';
 
 import RFBCreate from '@novnc/novnc/lib/rfb';
+import { consoleFetchText } from '@openshift-console/dynamic-plugin-sdk';
 
 import { INSECURE, SECURE } from '../../utils/constants';
 import { isConnectionEncrypted } from '../../utils/utils';
-import { ConsoleState, VNC_CONSOLE_TYPE, WS, WSS } from '../utils/ConsoleConsts';
+import { ConsoleState, HTTP, HTTPS, VNC_CONSOLE_TYPE, WS, WSS } from '../utils/ConsoleConsts';
 import { ConsoleComponentState } from '../utils/types';
 
 import { isSessionAlreadyInUse } from './utils/util';
@@ -38,6 +39,21 @@ export type VncConsoleProps = {
   viewOnly?: boolean;
 };
 
+const buildUrl = ({
+  hostname,
+  path,
+  port,
+  preserveSession,
+  protocol,
+}: {
+  hostname: string;
+  path: string;
+  port: string;
+  preserveSession: string;
+  protocol: string;
+}): string =>
+  `${protocol}://${hostname}:${port}${path}?preserveSession=${Boolean(preserveSession).toString()}`;
+
 export const VncConsole: FC<VncConsoleProps> = ({
   basePath,
   scaleViewport = true,
@@ -76,26 +92,62 @@ export const VncConsole: FC<VncConsoleProps> = ({
 
   const connect = useCallback(
     (preserveSession = true) => {
+      let abnormalDisconnect = false;
       setVncState(() => ({ state: connecting }));
       const sessionID = ++sessionRef.current;
 
       const isEncrypted = isConnectionEncrypted();
       const path = `${basePath}/vnc`;
       const port = window.location.port || (isEncrypted ? SECURE : INSECURE);
-      const url = `${isEncrypted ? WSS : WS}://${
-        window.location.hostname
-      }:${port}${path}?preserveSession=${Boolean(preserveSession).toString()}`;
+      const url = buildUrl({
+        hostname: window.location.hostname,
+        path,
+        port,
+        preserveSession,
+        protocol: isEncrypted ? WSS : WS,
+      });
       const rfbInst = new RFBCreate(staticRenderLocationRef.current, url);
       rfbInst.addEventListener(
         'connect',
         () => sessionID === sessionRef.current && setVncState(() => ({ state: connected })),
       );
-      rfbInst.addEventListener('disconnect', (args) => {
+      rfbInst.addEventListener('disconnect', () => {
         // prevent disconnect for old session to interact with current connection attempt
-        if (sessionID === sessionRef.current) {
-          postDisconnectCleanup(isSessionAlreadyInUse(args));
+        if (sessionID === sessionRef.current && !abnormalDisconnect) {
+          postDisconnectCleanup(false);
+        }
+      });
+
+      // noVNC's public API (disconnect event) does not expose error codes.
+      // To detect specific WebSocket close codes we need to add our own callback.
+      // The original callback will be called inside the wrapper.
+      // Note that clean-up is not affected (will be performed by rfb as before).
+      const rfbSocketClose = rfbInst._socketClose.bind(rfbInst);
+      rfbInst._sock.on('close', (args) => {
+        // 1006 code === connection was closed abnormally
+        // triggered by 5xx HTTP server error
+        abnormalDisconnect = args.code === 1006;
+        rfbSocketClose(args);
+
+        if (!abnormalDisconnect) {
+          //continue standard disconnect flow
+          return;
         }
+        // try HTTP request to the same url as websockets
+        // if it fails with specific error message then VNC is in use
+        consoleFetchText(
+          buildUrl({
+            hostname: window.location.hostname,
+            path,
+            port,
+            preserveSession,
+            protocol: isEncrypted ? HTTPS : HTTP,
+          }),
+        )
+          .then(() => postDisconnectCleanup(false))
+          .catch((error) => postDisconnectCleanup(isSessionAlreadyInUse(error)));
       });
+
       rfbInst.viewOnly = viewOnly;
       rfbInst.scaleViewport = scaleViewport;
 

src/utils/components/Consoles/components/vnc-console/utils/util.ts

@@ -10,8 +10,11 @@ export const HORIZONTAL_TAB = 9;
 export const LATIN_1_FIRST_CHAR = 0x20;
 export const LATIN_1_LAST_CHAR = 0xff;
 
-// TODO implement based on the error returned from the backend
-export const isSessionAlreadyInUse = (_arg) => false;
+const VNC_IN_USE_ERROR_TEXT = 'Active VNC connection. Request denied.';
+
+export const isSessionAlreadyInUse = (error: Error): boolean => {
+  return error?.message?.includes?.(VNC_IN_USE_ERROR_TEXT) ?? false;
+};
 
 export const isConnectableState = (state: ConsoleState) =>
   [