Merge pull request #3172 from weaveworks/3160-close-terminal-on-exit

Close xterm on exit

client/app/scripts/actions/app-actions.js

@@ -234,10 +234,10 @@ export function clickCloseDetails(nodeId) {
   };
 }
 
-export function clickCloseTerminal(pipeId) {
+export function closeTerminal(pipeId) {
   return (dispatch, getState) => {
     dispatch({
-      type: ActionTypes.CLICK_CLOSE_TERMINAL,
+      type: ActionTypes.CLOSE_TERMINAL,
       pipeId
     });
     updateRoute(getState);
@@ -491,7 +491,7 @@ export function hitEsc() {
     const controlPipe = state.get('controlPipes').last();
     if (controlPipe && controlPipe.get('status') === 'PIPE_DELETED') {
       dispatch({
-        type: ActionTypes.CLICK_CLOSE_TERMINAL,
+        type: ActionTypes.CLOSE_TERMINAL,
         pipeId: controlPipe.get('id')
       });
       updateRoute(getState);

client/app/scripts/components/terminal.js

@@ -4,9 +4,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
-import Term from 'xterm';
+import { Terminal as Term } from 'xterm';
 
-import { clickCloseTerminal } from '../actions/app-actions';
+import { closeTerminal } from '../actions/app-actions';
 import { getNeutralColor } from '../utils/color-utils';
 import { setDocumentTitle } from '../utils/title-utils';
 import { getPipeStatus, deletePipe, doResizeTty, getWebsocketUrl, basePath } from '../utils/web-api-utils';
@@ -157,6 +157,10 @@ class Terminal extends React.Component {
     if (this.props.connect !== nextProps.connect && nextProps.connect) {
       this.mountTerminal();
     }
+    // Close the terminal window immediately when the pipe is deleted.
+    if (nextProps.pipe.get('status') === 'PIPE_DELETED') {
+      this.props.dispatch(closeTerminal(this.getPipeId()));
+    }
   }
 
   componentDidMount() {
@@ -176,6 +180,8 @@ class Terminal extends React.Component {
     });
 
     this.term.open(this.innerFlex);
+    this.term.focus();
+
     this.term.on('data', (data) => {
       if (this.socket) {
         this.socket.send(data);
@@ -240,13 +246,13 @@ class Terminal extends React.Component {
 
   handleCloseClick(ev) {
     ev.preventDefault();
-    this.props.dispatch(clickCloseTerminal(this.getPipeId()));
+    this.props.dispatch(closeTerminal(this.getPipeId()));
   }
 
   handlePopoutTerminal(ev) {
     ev.preventDefault();
     const paramString = JSON.stringify(this.props);
-    this.props.dispatch(clickCloseTerminal(this.getPipeId()));
+    this.props.dispatch(closeTerminal(this.getPipeId()));
     this.setState({detached: true});
 
     const bcr = this.node.getBoundingClientRect();
@@ -310,18 +316,6 @@ class Terminal extends React.Component {
   }
 
   getStatus() {
-    if (this.props.pipe.get('status') === 'PIPE_DELETED') {
-      return (
-        <div>
-          <h3>Connection Closed</h3>
-          <div className="termina-status-bar-message">
-            The connection to this container has been closed.
-            <div className="link" onClick={this.handleCloseClick}>Close terminal</div>
-          </div>
-        </div>
-      );
-    }
-
     if (!this.state.connected) {
       return (
         <h3>Connecting...</h3>

client/app/scripts/constants/action-types.js

@@ -9,13 +9,13 @@ const ACTION_TYPES = [
   'CLEAR_CONTROL_ERROR',
   'CLICK_BACKGROUND',
   'CLICK_CLOSE_DETAILS',
-  'CLICK_CLOSE_TERMINAL',
   'CLICK_FORCE_RELAYOUT',
   'CLICK_NODE',
   'CLICK_RELATIVE',
   'CLICK_SHOW_TOPOLOGY_FOR_NODE',
   'CLICK_TERMINAL',
   'CLICK_TOPOLOGY',
+  'CLOSE_TERMINAL',
   'CLOSE_WEBSOCKET',
   'DEBUG_TOOLBAR_INTERFERING',
   'DESELECT_NODE',

client/app/scripts/reducers/root.js

@@ -281,7 +281,7 @@ export function rootReducer(state = initialState, action) {
       return closeNodeDetails(state, action.nodeId);
     }
 
-    case ActionTypes.CLICK_CLOSE_TERMINAL: {
+    case ActionTypes.CLOSE_TERMINAL: {
       return state.update('controlPipes', controlPipes => controlPipes.clear());
     }
 

client/package.json

@@ -46,7 +46,7 @@
     "styled-components": "2.2.4",
     "weaveworks-ui-components": "0.4.67",
     "whatwg-fetch": "2.0.3",
-    "xterm": "2.9.2"
+    "xterm": "3.3.0"
   },
   "devDependencies": {
     "autoprefixer": "7.1.5",

client/yarn.lock

@@ -8529,9 +8529,9 @@ xtend@^4.0.0, xtend@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
-xterm@2.9.2:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-2.9.2.tgz#ec3e7c636ba67af4a7026be2cff7bdf08e56400a"
+xterm@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.3.0.tgz#b09a19fc2cd5decd21112e5c9dab0b61991f6cf3"
 
 y18n@^3.2.1:
   version "3.2.1"