From e9cafc634a07892ff51ff23025700a713f03bc36 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Mon, 14 May 2018 16:39:58 +0200 Subject: [PATCH 1/2] Close xterm on exit. --- client/app/scripts/actions/app-actions.js | 6 ++--- client/app/scripts/components/terminal.js | 26 ++++++++------------ client/app/scripts/constants/action-types.js | 2 +- client/app/scripts/reducers/root.js | 2 +- client/package.json | 2 +- client/yarn.lock | 6 ++--- 6 files changed, 19 insertions(+), 25 deletions(-) diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js index 9c823b70fa..afa805db36 100644 --- a/client/app/scripts/actions/app-actions.js +++ b/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); diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index 92e1ad5179..a1976b4351 100644 --- a/client/app/scripts/components/terminal.js +++ b/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 immediatelly 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 ( -
-

Connection Closed

-
- The connection to this container has been closed. -
Close terminal
-
-
- ); - } - if (!this.state.connected) { return (

Connecting...

diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js index 395a501ed9..d13a1d0724 100644 --- a/client/app/scripts/constants/action-types.js +++ b/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', diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js index 1eaa204f54..184b10d280 100644 --- a/client/app/scripts/reducers/root.js +++ b/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()); } diff --git a/client/package.json b/client/package.json index 553f47427f..73f7c8b9aa 100644 --- a/client/package.json +++ b/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", diff --git a/client/yarn.lock b/client/yarn.lock index 50f0082bce..76d33df171 100644 --- a/client/yarn.lock +++ b/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" From 07c851178cd450a66f0c7a0e07279df3dd6f6ae5 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Mon, 14 May 2018 17:58:11 +0200 Subject: [PATCH 2/2] Fix spelling. --- client/app/scripts/components/terminal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index a1976b4351..0f7f902ed2 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -157,7 +157,7 @@ class Terminal extends React.Component { if (this.props.connect !== nextProps.connect && nextProps.connect) { this.mountTerminal(); } - // Close the terminal window immediatelly when the pipe is deleted. + // Close the terminal window immediately when the pipe is deleted. if (nextProps.pipe.get('status') === 'PIPE_DELETED') { this.props.dispatch(closeTerminal(this.getPipeId())); }