From bf4b16952567a6bccad9893991bfb2a1ec98b33d Mon Sep 17 00:00:00 2001 From: Ian Wienand Date: Tue, 8 Jun 2021 11:09:22 +1000 Subject: [PATCH] web: update to latest xterm; disabled selection overrides Currently when I try to select any text on the streaming console it goes a white-on-white color and you can't see the selected text. Using the sample console on the xterm.js page it correctly uses a light-grey selection that you can see through. This doesn't appear to set any theme or css settings to achieve this. Upgrade to the latest release. This requires a few changes to the way things are imported and as far as I can tell, just calling the fit addon fit() function on resize seems to make things work as expected. This removes any overrides for selection related things; the console now highlights in a light grey correctly. Change-Id: I9699e6d9abe82a20791770a1a8f169d65be27bc9 --- web/package.json | 5 +++- web/src/index.css | 5 ---- web/src/pages/Stream.jsx | 50 +++++++++++++++++----------------------- web/yarn.lock | 23 ++++++++++++++---- 4 files changed, 44 insertions(+), 39 deletions(-) diff --git a/web/package.json b/web/package.json index 87828cb6a3..7698d6a6f5 100644 --- a/web/package.json +++ b/web/package.json @@ -32,7 +32,10 @@ "redux-thunk": "^2.3.0", "sockette": "^2.0.0", "swagger-ui": "^3.20.1", - "xterm": "^3.14.5" + "xterm": "^4.12.0", + "xterm-addon-fit": "^0.5.0", + "xterm-addon-search": "^0.8.0", + "xterm-addon-web-links": "^0.4.0" }, "resolutions": { "formdata-node": "2.1.1", diff --git a/web/src/index.css b/web/src/index.css index 2f6602c1cb..fb90a0941b 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -249,11 +249,6 @@ a.refresh { animation: progress-bar-stripes 1s linear infinite; } -/* Stream page */ -.xterm-selection-layer { - mix-blend-mode: exclusion; -} - /* Job Tree View group gap */ div.tree-view-container ul.list-group { margin: 0px 0px; diff --git a/web/src/pages/Stream.jsx b/web/src/pages/Stream.jsx index b8c9966aac..df2a2ad964 100644 --- a/web/src/pages/Stream.jsx +++ b/web/src/pages/Stream.jsx @@ -19,18 +19,14 @@ import Sockette from 'sockette' import {Checkbox, Form, FormGroup, FormControl} from 'patternfly-react' import { PageSection, PageSectionVariants } from '@patternfly/react-core' -import 'xterm/dist/xterm.css' +import 'xterm/css/xterm.css' import { Terminal } from 'xterm' -import * as fit from 'xterm/lib/addons/fit/fit' -import * as weblinks from 'xterm/lib/addons/webLinks/webLinks' -import * as search from 'xterm/lib/addons/search/search' +import { FitAddon} from 'xterm-addon-fit' +import { WebLinksAddon } from 'xterm-addon-web-links' +import { SearchAddon } from 'xterm-addon-search' import { getStreamUrl } from '../api' -Terminal.applyAddon(fit) -Terminal.applyAddon(weblinks) -Terminal.applyAddon(search) - class StreamPage extends React.Component { static propTypes = { match: PropTypes.object.isRequired, @@ -63,21 +59,7 @@ class StreamPage extends React.Component { } onResize = () => { - // Note: We call proposeGeometry to get the number of cols and rows that - // fit into the parent element. However the number of rows is not detected - // correctly so we derive this directly from the window height. - const geometry = this.term.proposeGeometry() - if (geometry) { - const cellHeight = this.term._core._renderCoordinator.dimensions.actualCellHeight - const height = window.innerHeight - this.term.element.offsetTop - 10 - - const rows = Math.max(Math.floor(height / cellHeight), 10) - const cols = Math.max(geometry.cols, 10) - - if (this.term.rows !== rows || this.term.cols !== cols) { - this.term.resize(cols, rows) - } - } + this.fitAddon.fit() } componentDidMount() { @@ -92,13 +74,18 @@ class StreamPage extends React.Component { document.title = 'Zuul Stream | ' + params.uuid.slice(0, 7) const term = new Terminal() + const fitAddon = new FitAddon() + const webLinksAddon = new WebLinksAddon() + const searchAddon = new SearchAddon() + + term.loadAddon(fitAddon) + term.loadAddon(webLinksAddon) + term.loadAddon(searchAddon) - term.webLinksInit() term.setOption('fontSize', 12) term.setOption('scrollback', 1000000) term.setOption('disableStdin', true) term.setOption('convertEol', true) - term.setOption('theme', {selection: 'rgba(252, 252, 252)'}) // Block all keys but page up/down. This needs to be done so ctrl+c can // be used to copy text from the terminal. @@ -107,6 +94,7 @@ class StreamPage extends React.Component { }) term.open(this.terminal) + fitAddon.fit() term.focus() this.ws = new Sockette(getStreamUrl(this.props.tenant.apiPrefix), { @@ -135,6 +123,8 @@ class StreamPage extends React.Component { }) this.term = term + this.searchAddon = searchAddon + this.fitAddon = fitAddon term.element.style.padding = '5px' this.onResize() @@ -169,15 +159,15 @@ class StreamPage extends React.Component { e.preventDefault() } if (e.key === 'Enter' && e.shiftKey) { - this.term.findPrevious(e.target.value, searchOptions) + this.searchAddon.findPrevious(e.target.value, searchOptions) } else { - this.term.findNext(e.target.value, searchOptions) + this.searchAddon.findNext(e.target.value, searchOptions) } } render () { return ( - +
-
this.terminal = ref}/> +
this.terminal = ref} /> ) } diff --git a/web/yarn.lock b/web/yarn.lock index d96c817d4d..94107a43d0 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -15252,10 +15252,25 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== -xterm@^3.14.5: - version "3.14.5" - resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.14.5.tgz#c9d14e48be6873aa46fb429f22f2165557fd2dea" - integrity sha512-DVmQ8jlEtL+WbBKUZuMxHMBgK/yeIZwkXB81bH+MGaKKnJGYwA+770hzhXPfwEIokK9On9YIFPRleVp/5G7z9g== +xterm-addon-fit@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596" + integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ== + +xterm-addon-search@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.8.0.tgz#e33eab918df7eac7e7baf95dd2b3d14133754881" + integrity sha512-MPJGPVPpHRUw9cLIuqQbrVepmENMOybVUSxIALz5h1ryyQBrVqVujq2hL5aroX5/dZJoHx9lGHQTVLQ07SKgKA== + +xterm-addon-web-links@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.4.0.tgz#265cbf8221b9b315d0a748e1323bee331cd5da03" + integrity sha512-xv8GeiINmx0zENO9hf5k+5bnkaE8mRzF+OBAr9WeFq2eLaQSudioQSiT34M1ofKbzcdjSsKiZm19Rw3i4eXamg== + +xterm@^4.12.0: + version "4.12.0" + resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.12.0.tgz#db09b425b4dcae5b96f8cbbaaa93b3bc60997ca9" + integrity sha512-K5mF/p3txUV18mjiZFlElagoHFpqXrm5OYHeoymeXSu8GG/nMaOO/+NRcNCwfdjzAbdQ5VLF32hEHiWWKKm0bw== y18n@^3.2.1: version "3.2.1"