track1

openshift · May 18, 2020 · 64afd8d · 64afd8d
1 parent 1ab4cc1
commit 64afd8d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 82 deletions.
diff --git a/frontend/packages/console-app/src/components/cloud-shell/AutoResizeTerminal.tsx b/frontend/packages/console-app/src/components/cloud-shell/AutoResizeTerminal.tsx
@@ -12,40 +12,26 @@ type TerminalProps = {
   className?: string;
 };
 
-type TerminalState = {
-  width: number;
-  height: number;
-};
-
-export class Terminal extends React.Component<TerminalProps, TerminalState> {
-  private innerRef;
-
-  private outerRef;
+export class Terminal extends React.Component<TerminalProps> {
+  private terminalRef;
 
   private onDataReceived;
 
   private terminal;
 
-  private padding;
-
   constructor(props) {
     super(props);
-    this.innerRef = React.createRef();
-    this.outerRef = React.createRef();
-    this.state = {
-      width: 0,
-      height: 0,
-    };
+    this.terminalRef = React.createRef();
     this.onDataReceived = (data) => {
       this.terminal && this.terminal.write(data);
     };
-    this.padding = 20;
     const options = {
       fontFamily: 'monospace',
       fontSize: 16,
       cursorBlink: false,
       cols: 80,
       rows: 25,
+      padding: 30,
     };
     this.terminal = new XTerminal(Object.assign({}, options));
     this.terminal.on('data', this.props.onData);
@@ -55,35 +41,13 @@ export class Terminal extends React.Component<TerminalProps, TerminalState> {
     this.terminal && this.terminal.focus();
   };
 
-  onResize = () => {
-    const node = this.outerRef.current;
-
-    if (!node) {
-      return;
-    }
-
-    const bodyRect = document.body.getBoundingClientRect();
-    const nodeRect = node.getBoundingClientRect();
-
-    // This assumes we want to fill everything below and to the right.  In full-screen, fill entire viewport
-    // Use body height when node top is too close to pageRect height
-    const { bottom } = bodyRect;
-    const height = Math.floor(bottom - nodeRect.top);
-    const width = Math.floor(bodyRect.width - nodeRect.left);
-
-    if (height === this.state.height && width === this.state.width) {
-      return;
+  onResize() {
+    try {
+      this.terminal && this.terminal.fit();
+    } catch (e) {
+      console.log(e);
     }
-    // rerender with correct dimensions
-    this.setState({ height, width }, () => {
-      const { terminal } = this;
-      if (!terminal) {
-        return;
-      }
-      // tell the terminal to resize itself
-      terminal.fit();
-    });
-  };
+  }
 
   onConnectionClosed = (reason) => {
     const { terminal } = this;
@@ -97,7 +61,7 @@ export class Terminal extends React.Component<TerminalProps, TerminalState> {
   };
 
   componentDidMount() {
-    this.terminal.open(this.innerRef.current);
+    this.terminal.open(this.terminalRef.current);
     this.focus();
     this.onResize();
     this.onDataReceived();
@@ -120,17 +84,10 @@ export class Terminal extends React.Component<TerminalProps, TerminalState> {
             style={{
               width: '100%',
               height: '100%',
-              padding: this.padding / 2,
             }}
             ref={measureRef}
           >
-            <div ref={this.outerRef} className={this.props.className}>
-              <div
-                ref={this.innerRef}
-                style={{ width: this.state.width, height: this.state.height }}
-                className="console"
-              />
-            </div>
+            <div ref={this.terminalRef} style={{ width: '100%', height: '100%' }} />
           </div>
         )}
       </Measure>

diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellExec.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellExec.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { Base64 } from 'js-base64';
 import store from '@console/internal/redux';
-import { LoadingBox } from '@console/internal/components/utils';
+import { LoadingBox, StatusBox } from '@console/internal/components/utils';
 import { connectToFlags, WithFlagsProps, FlagsObject } from '@console/internal/reducers/features';
 import { FLAGS } from '@console/shared';
 import { WSFactory } from '@console/internal/module/ws-factory';
@@ -48,8 +48,8 @@ class CloudShellExec extends React.PureComponent<CloudShellExecProps, CloudShell
   }
 
   connect = () => {
-    const { container, podname, namespace, shcommand } = this.props;
-    const usedClient = this.props.flags[FLAGS.OPENSHIFT] ? 'oc' : 'kubectl';
+    const { container, podname, namespace, shcommand, flags } = this.props;
+    const usedClient = flags[FLAGS.OPENSHIFT] ? 'oc' : 'kubectl';
     const cmd = shcommand || ['sh', '-i', '-c', 'TERM=xterm sh'];
 
     const params = {
@@ -128,33 +128,19 @@ class CloudShellExec extends React.PureComponent<CloudShellExecProps, CloudShell
     delete this.ws;
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const containers = _.get(nextProps.obj, 'spec.containers', []).map((n) => n.name);
-    if (_.isEqual(containers, prevState.containers)) {
-      return null;
-    }
-    return { containers };
-  }
-
   onData = (data) => {
     this.ws && this.ws.send(`0${Base64.encode(data)}`);
   };
 
   render() {
     const { open, error } = this.state;
-    const { message } = this.props;
     if (error) {
-      return <div className="text-center cos-error-title">{error}</div>;
+      return <StatusBox loadError={error} label="OpenShift command line terminal" />;
     }
     if (open) {
-      return (
-        <div style={{ width: '100%', height: '100%' }}>
-          {message}
-          <Terminal onData={this.onData} ref={this.terminal} />
-        </div>
-      );
+      return <Terminal onData={this.onData} ref={this.terminal} />;
     }
-    return <LoadingBox message="Connecting to OpenShift Terminal" />;
+    return <LoadingBox message="Connecting to your OpenShift command line terminal" />;
   }
 }
 

diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx
@@ -28,7 +28,7 @@ type CloudShellTerminalProps = StateProps & Props;
 type InitResponseObject = {
   pod: string;
   container: string;
-  command: string;
+  command: string[];
 };
 
 const resource = {
@@ -69,7 +69,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps> = ({ username, onCan
               initializing && setInitializing(false);
             })
             .catch(() => {
-              setApiError("Couldn't reach API");
+              setApiError('Failed to connect to your OpenShift command line terminal');
               initializing && setInitializing(false);
             });
         }
@@ -84,18 +84,25 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps> = ({ username, onCan
   }
 
   if (!loaded) {
-    return <LoadingBox />;
+    return (
+      <div className="odc-cloudshell-terminal__container">
+        <LoadingBox message="Loading" />
+      </div>
+    );
   }
 
   if (!workSpacePod && initializing) {
     return (
       <div className="odc-cloudshell-terminal__container">
-        <LoadingBox message="Connecting you to OpenShift command line terminal" />;
+        <LoadingBox message="Connecting to your OpenShift command line terminal" />;
       </div>
     );
   }
 
-  if (apiError) return <h1>{apiError}</h1>;
+  if (apiError)
+    return (
+      <StatusBox loaded={loaded} loadError={apiError} label="OpenShift command line terminal" />
+    );
 
   if (workSpacePod) {
     return (

diff --git a/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts b/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts
@@ -88,8 +88,12 @@ export const newCloudShellWorkSpace = (
   },
 });
 
-export const makeTerminalInitCalls = (username, wname, wnamespace) => {
-  const consumeUrl = `api/terminal/${wnamespace}/${wname}/exec/init`;
+export const makeTerminalInitCalls = (
+  username: string,
+  wname: string,
+  wnamespace: string,
+): Promise<{ pod: string; container: string; cmd: string[] }> => {
+  const consumeUrl = `/api/terminal/${wnamespace}/${wname}/exec/init`;
   return coFetchJSON.post(consumeUrl, {
     kubeconfig: {
       username,