Bug 1838658: Use new proxy to connect to cloudshell in terminal

frontend/packages/console-app/src/components/cloud-shell/CloudShellExec.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Base64 } from 'js-base64';
+import { StatusBox } from '@console/internal/components/utils';
+import { connectToFlags, WithFlagsProps } from '@console/internal/reducers/features';
+import { impersonateStateToProps } from '@console/internal/reducers/ui';
+import { FLAGS } from '@console/shared';
+import { WSFactory } from '@console/internal/module/ws-factory';
+import { resourceURL } from '@console/internal/module/k8s';
+import { PodModel } from '@console/internal/models';
+import Terminal from './Terminal';
+import TerminalLoadingBox from './TerminalLoadingBox';
+
+// pod exec WS protocol is FD prefixed, base64 encoded data (sometimes json stringified)
+
+// Channel 0 is STDIN, 1 is STDOUT, 2 is STDERR (if TTY is not requested), and 3 is a special error channel - 4 is C&C
+// The server only reads from STDIN, writes to the other three.
+// see also: https://github.com/kubernetes/kubernetes/pull/13885
+
+type Props = {
+  container: string;
+  podname: string;
+  namespace: string;
+  shcommand?: string[];
+};
+
+type StateProps = {
+  impersonate?: {
+    subprotocols: string[];
+  };
+};
+
+type CloudShellExecProps = Props & StateProps & WithFlagsProps;
+
+type CloudShellExecState = {
+  open: boolean;
+  error: string;
+};
+
+const NO_SH =
+  'starting container process caused "exec: \\"sh\\": executable file not found in $PATH"';
+
+class CloudShellExec extends React.PureComponent<CloudShellExecProps, CloudShellExecState> {
+  private terminal;
+
+  private ws;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      error: null,
+    };
+    this.terminal = React.createRef();
+  }
+
+  componentDidMount() {
+    this.connect();
+  }
+
+  componentWillUnmount() {
+    this.ws && this.ws.destroy();
+    delete this.ws;
+  }
+
+  onData = (data: string): void => {
+    this.ws && this.ws.send(`0${Base64.encode(data)}`);
+  };
+
+  connect() {
+    const { container, podname, namespace, shcommand, flags, impersonate } = this.props;
+    const usedClient = flags[FLAGS.OPENSHIFT] ? 'oc' : 'kubectl';
+    const cmd = shcommand || ['sh', '-i', '-c', 'TERM=xterm sh'];
+
+    const params = {
+      ns: namespace,
+      name: podname,
+      path: 'exec',
+      queryParams: {
+        stdout: '1',
+        stdin: '1',
+        stderr: '1',
+        tty: '1',
+        container,
+        command: cmd.map((c) => encodeURIComponent(c)).join('&command='),
+      },
+    };
+
+    if (this.ws) {
+      this.ws.destroy();
+      const currentTerminal = this.terminal.current;
+      currentTerminal && currentTerminal.onConnectionClosed(`connecting to ${container}`);
+    }
+
+    const subprotocols = (impersonate?.subprotocols || []).concat('base64.channel.k8s.io');
+
+    let previous;
+    this.ws = new WSFactory(`${podname}-terminal`, {
+      host: 'auto',
+      reconnect: true,
+      path: resourceURL(PodModel, params),
+      jsonParse: false,
+      subprotocols,
+    })
+      .onmessage((raw) => {
+        const currentTerminal = this.terminal.current;
+        // error channel
+        if (raw[0] === '3') {
+          if (previous.includes(NO_SH)) {
+            currentTerminal.reset();
+            currentTerminal.onConnectionClosed(
+              `This container doesn't have a /bin/sh shell. Try specifying your command in a terminal with:\r\n\r\n ${usedClient} -n ${this.props.namespace} exec ${this.props.podname} -ti <command>`,
+            );
+            this.ws.destroy();
+            previous = '';
+            return;
+          }
+        }
+        const data = Base64.decode(raw.slice(1));
+        currentTerminal && currentTerminal.onDataReceived(data);
+        previous = data;
+      })
+      .onopen(() => {
+        const currentTerminal = this.terminal.current;
+        currentTerminal && currentTerminal.reset();
+        previous = '';
+        this.setState({ open: true, error: null });
+      })
+      .onclose((evt) => {
+        if (!evt || evt.wasClean === true) {
+          return;
+        }
+        const error = evt.reason || 'The terminal connection has closed.';
+        this.setState({ error });
+        this.terminal.current && this.terminal.current.onConnectionClosed(error);
+        this.ws.destroy();
+      }) // eslint-disable-next-line no-console
+      .onerror((evt) => console.error(`WS error?! ${evt}`));
+  }
+
+  render() {
+    const { open, error } = this.state;
+    if (error) {
+      return <StatusBox loadError={error} label="OpenShift command line terminal" />;
+    }
+    if (open) {
+      return <Terminal onData={this.onData} ref={this.terminal} />;
+    }
+    return <TerminalLoadingBox />;
+  }
+}
+
+export default connect<StateProps>(impersonateStateToProps)(
+  connectToFlags<CloudShellExecProps & WithFlagsProps>(FLAGS.OPENSHIFT)(CloudShellExec),
+);

frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.scss

@@ -0,0 +1,8 @@
+.odc-cloudshell-terminal {
+  &__container {
+    background-color: var(--pf-global--BackgroundColor--dark-100);
+    color: var(--pf-global--Color--light-100);
+    width: 100%;
+    height: 100%;
+  }
+}

frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx

@@ -3,15 +3,19 @@ import { connect } from 'react-redux';
 import { RootState } from '@console/internal/redux';
 import { referenceForModel } from '@console/internal/module/k8s/k8s';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
-import { LoadingBox, StatusBox } from '@console/internal/components/utils/status-box';
+import { StatusBox } from '@console/internal/components/utils/status-box';
 import { WorkspaceModel } from '../../models';
-import CloudShellTerminalFrame from './CloudShellTerminalFrame';
+import CloudshellExec from './CloudShellExec';
+import TerminalLoadingBox from './TerminalLoadingBox';
 import {
   CLOUD_SHELL_LABEL,
   CLOUD_SHELL_USER_ANNOTATION,
   CloudShellResource,
+  TerminalInitData,
+  initTerminal,
 } from './cloud-shell-utils';
 import CloudShellSetup from './setup/CloudShellSetup';
+import './CloudShellTerminal.scss';
 
 type StateProps = {
   username: string;
@@ -32,37 +36,81 @@ const resource = {
 };
 
 const CloudShellTerminal: React.FC<CloudShellTerminalProps> = ({ username, onCancel }) => {
-  const [data, loaded, loadError] = useK8sWatchResource<CloudShellResource>(resource);
+  const [data, loaded, loadError] = useK8sWatchResource<CloudShellResource[]>(resource);
+  const [initData, setInitData] = React.useState<TerminalInitData>();
+  const [initDataLoading, setInitDataLoading] = React.useState<boolean>(false);
+  const [initError, setInitError] = React.useState<string>();
+  const [workspaceNamespace, setWorkspaceNamespace] = React.useState<string>();
 
-  if (loadError) {
+  React.useEffect(() => {
+    let destroy = false;
+    if (Array.isArray(data)) {
+      const workspace = data.find(
+        (ws) => ws?.metadata?.annotations?.[CLOUD_SHELL_USER_ANNOTATION] === username,
+      );
+      const running = workspace?.status?.phase === 'Running';
+
+      if (running) {
+        setInitDataLoading(true);
+        const { name, namespace } = workspace.metadata;
+        initTerminal(username, name, namespace)
+          .then((res: TerminalInitData) => {
+            if (destroy) return;
+            setInitData(res);
+            setInitDataLoading(false);
+            setWorkspaceNamespace(namespace);
+          })
+          .catch(() => {
+            if (destroy) return;
+            setInitDataLoading(false);
+            setInitError('Failed to connect to your OpenShift command line terminal');
+          });
+      }
+    }
+
+    return () => {
+      destroy = true;
+    };
+  }, [data, username]);
+
+  if (loadError || initError) {
     return (
-      <StatusBox loaded={loaded} loadError={loadError} label="OpenShift command line terminal" />
+      <StatusBox
+        loaded={loaded}
+        loadError={loadError || initError}
+        label="OpenShift command line terminal"
+      />
     );
   }
 
-  if (!loaded) {
-    return <LoadingBox />;
+  if (!loaded || initDataLoading) {
+    return (
+      <div className="odc-cloudshell-terminal__container">
+        <TerminalLoadingBox />
+      </div>
+    );
   }
 
-  if (Array.isArray(data)) {
-    const workspace = data.find(
-      (d) => d?.metadata?.annotations?.[CLOUD_SHELL_USER_ANNOTATION] === username,
+  if (initData && workspaceNamespace) {
+    return (
+      <div className="odc-cloudshell-terminal__container">
+        <CloudshellExec
+          namespace={workspaceNamespace}
+          container={initData.container}
+          podname={initData.pod}
+          shcommand={initData.cmd || []}
+        />
+      </div>
     );
-    if (workspace) {
-      const running = workspace.status?.phase === 'Running';
-      const url = workspace.status?.ideUrl;
-      return <CloudShellTerminalFrame loading={!running} url={url} />;
-    }
   }
-
   return <CloudShellSetup onCancel={onCancel} />;
 };
 
+// For testing
+export const InternalCloudShellTerminal = CloudShellTerminal;
+
 const stateToProps = (state: RootState): StateProps => ({
   username: state.UI.get('user')?.metadata?.name || '',
 });
 
-// exposed for testing
-export const InternalCloudShellTerminal = CloudShellTerminal;
-
 export default connect(stateToProps)(CloudShellTerminal);

frontend/packages/console-app/src/components/cloud-shell/Terminal.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Terminal as XTerminal } from 'xterm';
+import * as fit from 'xterm/lib/addons/fit/fit';
+
+XTerminal.applyAddon(fit);
+
+const terminalOptions = {
+  fontFamily: 'monospace',
+  fontSize: 16,
+  cursorBlink: false,
+  cols: 80,
+  rows: 25,
+  padding: 4,
+};
+
+type TerminalProps = {
+  onData: (data: string) => void;
+};
+
+class Terminal extends React.Component<TerminalProps> {
+  private terminalRef;
+
+  private terminal;
+
+  private resizeObserver;
+
+  constructor(props) {
+    super(props);
+    this.terminalRef = React.createRef<HTMLDivElement>();
+    this.terminal = new XTerminal(terminalOptions);
+    this.terminal.on('data', this.props.onData);
+  }
+
+  componentDidMount() {
+    this.terminal.open(this.terminalRef.current);
+    this.resizeObserver = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => this.terminal.fit());
+    });
+    this.resizeObserver.observe(this.terminalRef.current);
+    this.focus();
+  }
+
+  componentWillUnmount() {
+    this.terminal.destroy();
+    this.resizeObserver.disconnect();
+  }
+
+  focus() {
+    this.terminal && this.terminal.focus();
+  }
+
+  reset() {
+    this.terminal.reset();
+    this.terminal.clear();
+    this.terminal.setOption('disableStdin', false);
+  }
+
+  onDataReceived(data) {
+    this.terminal && this.terminal.write(data);
+  }
+
+  onConnectionClosed = (reason) => {
+    this.terminal.write(`\x1b[31m${reason || 'disconnected'}\x1b[m\r\n`);
+    this.terminal.cursorHidden = true;
+    this.terminal.setOption('disableStdin', true);
+    this.terminal.refresh(this.terminal.y, this.terminal.y);
+  };
+
+  render() {
+    return <div ref={this.terminalRef} style={{ width: '100%', height: '100%' }} />;
+  }
+}
+
+export default Terminal;