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
This commit is contained in:
Ian Wienand
parent
74f10e5924
commit
bf4b169525
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<PageSection variant={PageSectionVariants.light}>
|
||||
<PageSection variant={PageSectionVariants.light} >
|
||||
<Form inline>
|
||||
<FormGroup controlId='stream'>
|
||||
<FormControl
|
||||
|
|
@ -202,7 +192,9 @@ class StreamPage extends React.Component {
|
|||
</Checkbox>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
<div ref={ref => this.terminal = ref}/>
|
||||
<div id="terminal"
|
||||
style={{ height: '85vh'}}
|
||||
ref={ref => this.terminal = ref} />
|
||||
</PageSection>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue