Merge pull request #1948 from weaveworks/1940-use-xterm

Change term.js library to xterm.js

client/app/scripts/components/app.js

@@ -72,14 +72,13 @@ class App extends React.Component {
   }
 
   onKeyPress(ev) {
-    const { dispatch, searchFocused } = this.props;
+    const { dispatch, searchFocused, showingTerminal } = this.props;
     //
     // keyup gives 'key'
     // keypress gives 'char'
     // Distinction is important for international keyboard layouts where there
     // is often a different {key: char} mapping.
-    //
-    if (!searchFocused) {
+    if (!searchFocused && !showingTerminal) {
       keyPressLog('onKeyPress', 'keyCode', ev.keyCode, ev);
       const char = String.fromCharCode(ev.charCode);
       if (char === '<') {

client/app/scripts/components/debug-toolbar.js

@@ -261,6 +261,7 @@ class DebugToolbar extends React.Component {
           <button onClick={() => enableLog('*')}>scope:*</button>
           <button onClick={() => enableLog('dispatcher')}>scope:dispatcher</button>
           <button onClick={() => enableLog('app-key-press')}>scope:app-key-press</button>
+          <button onClick={() => enableLog('terminal')}>scope:terminal</button>
           <button onClick={() => disableLog()}>Disable log</button>
         </div>
 

client/app/scripts/components/terminal.js

@@ -9,7 +9,7 @@ import { clickCloseTerminal } from '../actions/app-actions';
 import { getNeutralColor } from '../utils/color-utils';
 import { setDocumentTitle } from '../utils/title-utils';
 import { getPipeStatus, basePath } from '../utils/web-api-utils';
-import Term from '../vendor/term.js';
+import Term from 'xterm';
 
 const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
 const wsUrl = `${wsProto}://${location.host}${basePath(location.pathname)}`;
@@ -24,6 +24,7 @@ const MDASH = '\u2014';
 
 const reconnectTimerInterval = 2000;
 
+
 function ab2str(buf) {
   // http://stackoverflow.com/questions/17191945/conversion-between-utf-8-arraybuffer-and-string
   const encodedString = String.fromCharCode.apply(null, new Uint8Array(buf));
@@ -54,6 +55,7 @@ function terminalCellSize(wrapperNode, rows, cols) {
   return {pixelPerCol, pixelPerRow};
 }
 
+
 function openNewWindow(url, bcr, minWidth = 200) {
   const screenLeft = window.screenX || window.screenLeft;
   const screenTop = window.screenY || window.screenTop;
@@ -74,6 +76,7 @@ function openNewWindow(url, bcr, minWidth = 200) {
   window.open(url, '', windowOptionsString);
 }
 
+
 class Terminal extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -117,7 +120,11 @@ class Terminal extends React.Component {
       }
       this.socket = null;
       const wereConnected = this.state.connected;
-      this.setState({connected: false});
+      if (this._isMounted) {
+        // Calling setState on an unmounted component will throw a warning.
+        // `connected` will get set to false by `componentWillUnmount`.
+        this.setState({connected: false});
+      }
       if (this.term && this.props.pipe.get('status') !== 'PIPE_DELETED') {
         if (wereConnected) {
           this.createWebsocket(term);
@@ -148,19 +155,22 @@ class Terminal extends React.Component {
   }
 
   componentDidMount() {
+    this._isMounted = true;
     if (this.props.connect) {
       this.mountTerminal();
     }
   }
 
   mountTerminal() {
+    const component = this;
     this.term = new Term({
       cols: this.state.cols,
       rows: this.state.rows,
-      convertEol: !this.props.raw
+      convertEol: !this.props.raw,
+      cursorBlink: true
     });
 
-    const innerNode = ReactDOM.findDOMNode(this.inner);
+    const innerNode = ReactDOM.findDOMNode(component.innerFlex);
     this.term.open(innerNode);
     this.term.on('data', (data) => {
       if (this.socket) {
@@ -171,7 +181,7 @@ class Terminal extends React.Component {
     this.createWebsocket(this.term);
 
     const {pixelPerCol, pixelPerRow} = terminalCellSize(
-      innerNode, this.state.rows, this.state.cols);
+      this.term.element, this.state.rows, this.state.cols);
 
     window.addEventListener('resize', this.handleResize);
 
@@ -185,6 +195,8 @@ class Terminal extends React.Component {
   }
 
   componentWillUnmount() {
+    this._isMounted = false;
+    this.setState({connected: false});
     log('cwu terminal');
 
     clearTimeout(this.reconnectTimeout);

client/app/styles/main.less

@@ -1,3 +1,4 @@
+@import (inline) '../../node_modules/xterm/dist/xterm.css';
 @font-face {
   font-family: "Roboto";
   src: url("../../node_modules/materialize-css/font/roboto/Roboto-Regular.woff2"),

client/package.json

@@ -31,7 +31,8 @@
     "reqwest": "~2.0.5",
     "reselect": "^2.5.3",
     "timely": "0.1.0",
-    "whatwg-fetch": "0.11.0"
+    "whatwg-fetch": "0.11.0",
+    "xterm": "^2.0.1"
   },
   "devDependencies": {
     "autoprefixer": "6.3.3",

client/webpack.local.config.js

@@ -87,6 +87,9 @@ module.exports = {
 
   // Transform source code using Babel and React Hot Loader
   module: {
+    // Webpack is opionated about how pkgs should be laid out:
+    // https://github.com/webpack/webpack/issues/1617
+    noParse: /xterm/,
     include: [
       path.resolve(__dirname, 'app/scripts')
     ],