Open current console type when opening in new window

openshift · Jul 28, 2021 · 458a722 · 458a722
1 parent 2bed10f
commit 458a722
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 34 deletions.
diff --git a/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json b/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json
@@ -805,15 +805,15 @@
   "With Import wizard": "With Import wizard",
   "Template": "Template",
   "This Virtual Machine is migrating and cannot be started at the moment": "This Virtual Machine is migrating and cannot be started at the moment",
-  "Open Console in new Window": "Open Console in new Window",
+  "Open Console in New Window": "Open Console in New Window",
   "Guest login credentials": "Guest login credentials",
-  "The following credentials for this operating system were created via <2>Cloud-init</2>. If unsuccessful cloud-init could be improperly configured. Please contact the image provider for more information.": "The following credentials for this operating system were created via <2>Cloud-init</2>. If unsuccessful cloud-init could be improperly configured. Please contact the image provider for more information.",
+  "The following credentials for this operating system were created via <2>cloud-init</2>. If unsuccessful, cloud-init could be improperly configured. Please contact the image provider for more information.": "The following credentials for this operating system were created via <2>cloud-init</2>. If unsuccessful, cloud-init could be improperly configured. Please contact the image provider for more information.",
   "User name:": "User name:",
   "Password:": "Password:",
   "Hide password": "Hide password",
   "Show password": "Show password",
-  "Selected type {{typeName}} is unsupported, falling back to a supported type": "Selected type {{typeName}} is unsupported, falling back to a supported type",
-  "Console is open on another tab/window": "Console is open on another tab/window",
+  "Selected type {{typeName}} is unsupported. Falling back to a supported type": "Selected type {{typeName}} is unsupported. Falling back to a supported type",
+  "Console is open in another tab/window": "Console is open in another tab/window",
   "Virtual machine is paused. Console will be active after unpause": "Virtual machine is paused. Console will be active after unpause",
   "Overview": "Overview",
   "Console": "Console",

diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/vm-console/DesktopViewerSelector.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/vm-console/DesktopViewerSelector.tsx
@@ -6,6 +6,7 @@ import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watc
 import { ServiceModel } from '@console/internal/models';
 import { K8sResourceKind, PodKind } from '@console/internal/module/k8s';
 import { DEFAULT_RDP_PORT, NetworkType, TEMPLATE_VM_NAME_LABEL } from '../../../constants';
+import { ConsoleType } from '../../../constants/vm/console-type';
 import { getRdpAddressPort } from '../../../selectors/service';
 import { getNetworks } from '../../../selectors/vm';
 import { getVMIAvailableStatusInterfaces, isGuestAgentConnected } from '../../../selectors/vmi';
@@ -96,7 +97,11 @@ const RdpServiceNotConfigured: React.FC<RdpServiceNotConfiguredProps> = ({ vm })
 };
 
 const DesktopViewerSelector: React.FC<DesktopViewerSelectorProps> = (props) => {
-  const { vm, vmi, vmPod } = props;
+  const { setConsoleType, vm, vmi, vmPod } = props;
+
+  React.useEffect(() => {
+    setConsoleType(ConsoleType.DESKTOP_VIEWER);
+  });
 
   // We probably can not simply match on labels but on Service's spec.selector.[kubevirt/vm] to achieve robust pairing VM-Service.
   // So read all services and filter on frontend.
@@ -187,6 +192,7 @@ type DesktopViewerSelectorProps = {
   vm: VMKind;
   vmi: VMIKind;
   vmPod: PodKind;
+  setConsoleType: (consoleType: ConsoleType) => void;
 };
 
 type RdpServiceNotConfiguredProps = {

diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/vm-console/VMConsoles.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/vm-console/VMConsoles.tsx
@@ -49,6 +49,14 @@ const VMNotReady: React.FC = () => {
   );
 };
 
+const getAvailableType = (showVNCOption, showSerialOption) => {
+  if (showVNCOption) {
+    return ConsoleType.VNC;
+  }
+
+  return showSerialOption ? ConsoleType.SERIAL : null;
+};
+
 const VMConsoles: React.FC<VMConsolesProps> = ({
   vm,
   vmi,
@@ -60,8 +68,13 @@ const VMConsoles: React.FC<VMConsolesProps> = ({
   const { t } = useTranslation();
   const [showAlert, setShowAlert] = React.useState(true);
   const [showPassword, setShowPassword] = React.useState(false);
+
   const showVNCOption = getIsGraphicsConsoleAttached(vm) !== false && renderVNCConsole;
   const showSerialOption = getIsSerialConsoleAttached(vm) !== false;
+  const [consoleType, setConsoleType] = React.useState(
+    type || getAvailableType(showVNCOption, showSerialOption),
+  );
+
   const cloudInitVolume = getCloudInitVolume(vm);
   const data = new VolumeWrapper(cloudInitVolume).getCloudInitNoCloud();
   const cloudInitHelper = new CloudInitDataHelper(data);
@@ -88,17 +101,7 @@ const VMConsoles: React.FC<VMConsolesProps> = ({
     (!showVNCOption && type === ConsoleType.VNC) ||
     (!showSerialOption && type === ConsoleType.SERIAL);
 
-  const getAvailableType = () => {
-    if (showVNCOption) {
-      return ConsoleType.VNC;
-    }
-    if (showSerialOption) {
-      return ConsoleType.SERIAL;
-    }
-    return null;
-  };
-
-  const consoleType = typeNotSupported || type == null ? getAvailableType() : type;
+  // const consoleType = typeNotSupported || type == null ? getAvailableType() : type;
 
   const isPaused = isVMIPaused(((vm as any) as VMIKind) || vmi);
 
@@ -116,7 +119,7 @@ const VMConsoles: React.FC<VMConsolesProps> = ({
               )
             }
           >
-            {t('kubevirt-plugin~Open Console in new Window')}
+            {t('kubevirt-plugin~Open Console in New Window')}
           </Button>
         </StackItem>
       )}
@@ -125,7 +128,7 @@ const VMConsoles: React.FC<VMConsolesProps> = ({
           <Alert variant="info" isInline title={t('kubevirt-plugin~Guest login credentials')}>
             <Trans ns="kubevirt-plugin">
               The following credentials for this operating system were created via{' '}
-              <strong>Cloud-init</strong>. If unsuccessful cloud-init could be improperly
+              <strong>cloud-init</strong>. If unsuccessful, cloud-init could be improperly
               configured. Please contact the image provider for more information.
             </Trans>
             <p>
@@ -156,7 +159,7 @@ const VMConsoles: React.FC<VMConsolesProps> = ({
             variant="danger"
             actionClose={<AlertActionCloseButton onClose={() => setShowAlert(false)} />}
             title={t(
-              'kubevirt-plugin~Selected type {{typeName}} is unsupported, falling back to a supported type',
+              'kubevirt-plugin~Selected type {{typeName}} is unsupported. Falling back to a supported type',
               { typeName: type.toPatternflyLabel() },
             )}
           />
@@ -167,7 +170,7 @@ const VMConsoles: React.FC<VMConsolesProps> = ({
           <Alert
             isInline
             variant="danger"
-            title={t('kubevirt-plugin~Console is open on another tab/window')}
+            title={t('kubevirt-plugin~Console is open in another tab/window')}
           />
         </StackItem>
       )}
@@ -184,9 +187,16 @@ const VMConsoles: React.FC<VMConsolesProps> = ({
       )}
       <StackItem>
         <AccessConsoles preselectedType={consoleType?.toPatternflyLabel()}>
-          {showSerialOption && <SerialConsoleConnector vmi={vmi} />}
-          {showVNCOption && <VncConsoleConnector vmi={vmi} />}
-          {isWindows(vm) && <DesktopViewerSelector vmPod={vmStatusBundle.pod} vm={vm} vmi={vmi} />}
+          {showSerialOption && <SerialConsoleConnector vmi={vmi} setConsoleType={setConsoleType} />}
+          {showVNCOption && <VncConsoleConnector vmi={vmi} setConsoleType={setConsoleType} />}
+          {isWindows(vm) && (
+            <DesktopViewerSelector
+              vmPod={vmStatusBundle.pod}
+              vm={vm}
+              vmi={vmi}
+              setConsoleType={setConsoleType}
+            />
+          )}
         </AccessConsoles>
       </StackItem>
     </Stack>

diff --git a/...kages/kubevirt-plugin/src/components/vms/vm-console/connectors/SerialConsoleConnector.tsx b/...kages/kubevirt-plugin/src/components/vms/vm-console/connectors/SerialConsoleConnector.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { constants, SerialConsole } from '@patternfly/react-console';
 import { WSFactory } from '@console/internal/module/ws-factory';
+import { ConsoleType } from '../../../../constants/vm/console-type';
 import { getName } from '../../../../selectors';
 import { getSerialConsoleConnectionDetails } from '../../../../selectors/vmi';
 import { VMIKind } from '../../../../types';
@@ -27,12 +28,16 @@ interface WebSocket {
 
 // KubeVirt serial console is accessed via WebSocket proxy in k8s API.
 // Protocol used is "plain.kubevirt.io", means binary and single channel - forwarding of unix socket only (vmhandler sources).
-const SerialConsoleConnector: React.FC<SerialConsoleConnectorProps> = ({ vmi }) => {
+const SerialConsoleConnector: React.FC<SerialConsoleConnectorProps> = ({ vmi, setConsoleType }) => {
   const { host, path } = getSerialConsoleConnectionDetails(vmi);
   const [status, setStatus] = React.useState(LOADING);
   const terminalRef = React.useRef(null);
   const socket = React.useRef<WebSocket>(null);
 
+  React.useEffect(() => {
+    setConsoleType(ConsoleType.SERIAL);
+  }, [setConsoleType]);
+
   const onBackendDisconnected = React.useCallback((event?: any) => {
     debug('Backend has disconnected');
     if (terminalRef.current) {
@@ -120,6 +125,7 @@ SerialConsoleConnector.displayName = constants.SERIAL_CONSOLE_TYPE; // for child
 
 type SerialConsoleConnectorProps = {
   vmi: VMIKind;
+  setConsoleType: (consoleType: ConsoleType) => void;
 };
 
 export default SerialConsoleConnector;
diff --git a/...packages/kubevirt-plugin/src/components/vms/vm-console/connectors/VncConsoleConnector.tsx b/...packages/kubevirt-plugin/src/components/vms/vm-console/connectors/VncConsoleConnector.tsx
@@ -1,21 +1,29 @@
 import * as React from 'react';
 import { constants, VncConsole } from '@patternfly/react-console';
+import { ConsoleType } from '../../../../constants/vm/console-type';
 import { getVMIApiPath, getVMISubresourcePath } from '../../../../selectors/vmi';
 import { VMIKind } from '../../../../types';
 import { isConnectionEncrypted } from '../../../../utils/url';
 
-const VncConsoleConnector: React.FC<VncConsoleConnectorProps> = ({ vmi }) => (
-  // the novnc library requires protocol to be specified so the URL must be absolute - including host:port
-  <VncConsole
-    encrypt={isConnectionEncrypted()}
-    host={window.location.hostname}
-    port={window.location.port || (isConnectionEncrypted() ? '443' : '80')}
-    // Example: ws://localhost:9000/api/kubernetes/apis/subresources.kubevirt.io/v1/namespaces/kube-system/virtualmachineinstances/vm-cirros1/vnc
-    path={`${getVMISubresourcePath()}/${getVMIApiPath(vmi)}/vnc`}
-  />
-);
+const VncConsoleConnector: React.FC<VncConsoleConnectorProps> = ({ vmi, setConsoleType }) => {
+  React.useEffect(() => {
+    setConsoleType(ConsoleType.VNC);
+  }, [setConsoleType]);
+
+  return (
+    // the novnc library requires protocol to be specified so the URL must be absolute - including host:port
+    <VncConsole
+      encrypt={isConnectionEncrypted()}
+      host={window.location.hostname}
+      port={window.location.port || (isConnectionEncrypted() ? '443' : '80')}
+      // Example: ws://localhost:9000/api/kubernetes/apis/subresources.kubevirt.io/v1/namespaces/kube-system/virtualmachineinstances/vm-cirros1/vnc
+      path={`${getVMISubresourcePath()}/${getVMIApiPath(vmi)}/vnc`}
+    />
+  );
+};
 
 type VncConsoleConnectorProps = {
+  setConsoleType: (consoleType: ConsoleType) => void;
   vmi: VMIKind;
 };