diff options
author | Phil Hughes <me@iamphill.com> | 2018-08-06 10:24:18 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-08-06 10:24:18 +0300 |
commit | 313b79d87bd65864307e6864080e12bdbab7c4ab (patch) | |
tree | 268c166ede844b836141f9d273e43679b00348e2 /app | |
parent | 30c960d4eee9a4814e593abef8e13cd52914bd88 (diff) | |
parent | 26b8209ecdef4bb8c94b7fa3aa2fca7281de5e2b (diff) |
Merge branch '25990-improve-web-terminal' into 'master'
Move xterm to a node dependency and remove it from vendor's folder
Closes #49741
See merge request gitlab-org/gitlab-ce!20588
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/terminal/index.js | 10 | ||||
-rw-r--r-- | app/assets/javascripts/terminal/terminal.js | 103 | ||||
-rw-r--r-- | app/views/projects/jobs/terminal.html.haml | 2 |
3 files changed, 55 insertions, 60 deletions
diff --git a/app/assets/javascripts/terminal/index.js b/app/assets/javascripts/terminal/index.js index 1a75e072c4e..49aeb377c74 100644 --- a/app/assets/javascripts/terminal/index.js +++ b/app/assets/javascripts/terminal/index.js @@ -1,9 +1,3 @@ -import 'vendor/xterm/encoding-indexes'; -import 'vendor/xterm/encoding'; -import Terminal from 'vendor/xterm/xterm'; -import 'vendor/xterm/fit'; -import './terminal'; +import Terminal from './terminal'; -window.Terminal = Terminal; - -export default () => new gl.Terminal({ selector: '#terminal' }); +export default () => new Terminal({ selector: '#terminal' }); diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js index caffcddf3b0..74c5bbe45a4 100644 --- a/app/assets/javascripts/terminal/terminal.js +++ b/app/assets/javascripts/terminal/terminal.js @@ -1,70 +1,71 @@ -/* global Terminal */ - import $ from 'jquery'; +import { Terminal } from 'xterm'; +import * as fit from 'xterm/lib/addons/fit/fit'; -(() => { - class GLTerminal { - - constructor(options) { - this.options = options || {}; - - if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) { - this.options.cursorBlink = true; - } +export default class GLTerminal { + constructor(options = {}) { + this.options = Object.assign({}, { + cursorBlink: true, + screenKeys: true, + }, options); - if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) { - this.options.screenKeys = true; - } + this.container = document.querySelector(options.selector); - this.container = document.querySelector(options.selector); + this.setSocketUrl(); + this.createTerminal(); - this.setSocketUrl(); - this.createTerminal(); - $(window).off('resize.terminal').on('resize.terminal', () => { + $(window) + .off('resize.terminal') + .on('resize.terminal', () => { this.terminal.fit(); }); - } + } + + setSocketUrl() { + const { protocol, hostname, port } = window.location; + const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://'; + const path = this.container.dataset.projectPath; - setSocketUrl() { - const { protocol, hostname, port } = window.location; - const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://'; - const path = this.container.dataset.projectPath; + this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`; + } - this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`; - } + createTerminal() { + Terminal.applyAddon(fit); - createTerminal() { - this.terminal = new Terminal(this.options); - this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']); - this.socket.binaryType = 'arraybuffer'; + this.terminal = new Terminal(this.options); - this.terminal.open(this.container); - this.socket.onopen = () => { this.runTerminal(); }; - this.socket.onerror = () => { this.handleSocketFailure(); }; - } + this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']); + this.socket.binaryType = 'arraybuffer'; - runTerminal() { - const decoder = new TextDecoder('utf-8'); - const encoder = new TextEncoder('utf-8'); + this.terminal.open(this.container); + this.terminal.fit(); + this.terminal.focus(); - this.terminal.on('data', (data) => { - this.socket.send(encoder.encode(data)); - }); + this.socket.onopen = () => { + this.runTerminal(); + }; + this.socket.onerror = () => { + this.handleSocketFailure(); + }; + } - this.socket.addEventListener('message', (ev) => { - this.terminal.write(decoder.decode(ev.data)); - }); + runTerminal() { + const decoder = new TextDecoder('utf-8'); + const encoder = new TextEncoder('utf-8'); - this.isTerminalInitialized = true; - this.terminal.fit(); - } + this.terminal.on('data', data => { + this.socket.send(encoder.encode(data)); + }); - handleSocketFailure() { - this.terminal.write('\r\nConnection failure'); - } + this.socket.addEventListener('message', ev => { + this.terminal.write(decoder.decode(ev.data)); + }); + this.isTerminalInitialized = true; + this.terminal.fit(); } - window.gl = window.gl || {}; - gl.Terminal = GLTerminal; -})(); + handleSocketFailure() { + this.terminal.write('\r\nConnection failure'); + } +} diff --git a/app/views/projects/jobs/terminal.html.haml b/app/views/projects/jobs/terminal.html.haml index efea666a4d9..f7e7535ee92 100644 --- a/app/views/projects/jobs/terminal.html.haml +++ b/app/views/projects/jobs/terminal.html.haml @@ -5,7 +5,7 @@ - page_title 'Terminal', "#{@build.name} (##{@build.id})", 'Jobs' - content_for :page_specific_javascripts do - = stylesheet_link_tag "xterm/xterm" + = stylesheet_link_tag "xterm.css" .terminal-container{ class: container_class } #terminal{ data: { project_path: terminal_project_job_path(@project, @build, format: :ws) } } |