Switch to xterm
Switch to xterm from hterm in the GUI, as
it supports more encoding styles. Was seeing
errors in console thrown by hterm during boot.
Also resolves the issue of text wrapping
observed in the below issue.
Resolves openbmc/openbmc#3262
Tested: Errors are no longer thrown during boot
related to encoding. xterm displaying console
messages and delivering messages.
Change-Id: I9f39c3616d7ff2c1045ff1ad29f603c65784ab30
Signed-off-by: beccabroek <beccabroek@gmail.com>
diff --git a/app/common/directives/serial-console.html b/app/common/directives/serial-console.html
index 30ba673..7238f54 100644
--- a/app/common/directives/serial-console.html
+++ b/app/common/directives/serial-console.html
@@ -1,5 +1,5 @@
<div class="serial-lan__wrapper">
- <div id="terminal" class="serial-lan__terminal"></div>
+ <div id="terminal"></div>
<div class="serial-lan__actions">
<button class="inline btn-pop-out" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">Open in new tab</button>
</div>
diff --git a/app/common/directives/serial-console.js b/app/common/directives/serial-console.js
index b320bdc..71340df 100644
--- a/app/common/directives/serial-console.js
+++ b/app/common/directives/serial-console.js
@@ -1,4 +1,8 @@
-import {hterm, lib} from 'hterm-umdjs';
+import {Terminal} from 'xterm';
+import style from 'xterm/dist/xterm.css';
+import * as attach from 'xterm/lib/addons/attach/attach';
+import * as fit from 'xterm/lib/addons/fit/fit';
+
window.angular && (function(angular) {
'use strict';
@@ -14,39 +18,25 @@
function($scope, $window, dataService) {
$scope.dataService = dataService;
- // See https://github.com/macton/hterm for available hterm options
+ // See https://github.com/xtermjs/xterm.js/ for available xterm
+ // options
- hterm.defaultStorage = new lib.Storage.Local();
- var term = new hterm.Terminal('host-console');
- term.decorate(document.querySelector('#terminal'));
- // Set cursor color
- term.prefs_.set('cursor-color', 'rgba(83, 146, 255, .5)');
- // Set background color
- term.prefs_.set('background-color', '#19273c');
- // Allows keyboard input
- term.installKeyboard();
+ Terminal.applyAddon(attach); // Apply the `attach` addon
+ Terminal.applyAddon(fit); // Apply the `fit` addon
- // The BMC exposes a websocket at /console0. This can be read
- // or written to access the host serial console.
+ var term = new Terminal();
+ term.open(document.getElementById('terminal'));
+ term.fit();
+ var SOL_THEME = {
+ background: '#19273c',
+ cursor: 'rgba(83, 146, 255, .5)',
+ scrollbar: 'rgba(83, 146, 255, .5)'
+ };
+ term.setOption('theme', SOL_THEME);
var hostname = dataService.getHost().replace('https://', '');
var host = 'wss://' + hostname + '/console0';
var ws = new WebSocket(host);
- ws.onmessage = function(evt) {
- // websocket -> terminal
- term.io.print(evt.data);
- };
-
- // terminal -> websocket
- term.onTerminalReady = function() {
- var io = term.io.push();
- io.onVTKeystroke = function(str) {
- ws.send(str);
- };
- io.sendString = function(str) {
- ws.send(str);
- };
- };
-
+ term.attach(ws);
ws.onopen = function() {
console.log('websocket opened');
};
diff --git a/app/server-control/controllers/remote-console-controller.html b/app/server-control/controllers/remote-console-controller.html
index d26ebbe..3011eb0 100644
--- a/app/server-control/controllers/remote-console-controller.html
+++ b/app/server-control/controllers/remote-console-controller.html
@@ -9,7 +9,11 @@
</section>
<section class="row column">
<p class="serial-lan__copy">The Serial over LAN (SoL) console redirects the output of the server’s serial port to a browser window on your workstation.</p>
- <serial-console show-tab-btn="true"></serial-console>
+ </section>
+ <section class="row column">
+ <div class="terminal-container">
+ <serial-console show-tab-btn="true"></serial-console>
+ </div>
</section>
</div>
diff --git a/app/server-control/controllers/remote-console-window-controller.html b/app/server-control/controllers/remote-console-window-controller.html
index eca7bec..bde520d 100644
--- a/app/server-control/controllers/remote-console-window-controller.html
+++ b/app/server-control/controllers/remote-console-window-controller.html
@@ -1,5 +1,7 @@
<div class="serial-lan__header">
<a class="bold" ng-click="close()"><i class="icon icon__return"></i> Return to OpenBmc</a>
</div>
-<serial-console show-tab-btn="false"></serial-console>
+<div class="window-terminal-container">
+ <serial-console show-tab-btn="false"></serial-console>
+</div>
diff --git a/app/server-control/styles/remote-console.scss b/app/server-control/styles/remote-console.scss
index c4dd9ac..41b144d 100644
--- a/app/server-control/styles/remote-console.scss
+++ b/app/server-control/styles/remote-console.scss
@@ -8,16 +8,6 @@
.serial-lan__copy {
padding: 1em 0;
}
-.serial-lan__terminal {
- position: relative;
- width: 101%; //extra 1% to fix redraw issue with terminal window
- height: 400px;
- border: 1em solid #19273c;
- //TODO: Need to move from hterm to xterm as iframe used is adding the extra
- //scroll bar. Also need to rework on the height setting along with $window
- //directive.
- overflow-x: hidden;
-}
.serial-lan__actions {
float: right;
@@ -40,3 +30,15 @@
line-height: 0;
a {color: $black;}
}
+
+.terminal-container {
+ position: relative;
+ height: 25em;
+ width: 100%;
+}
+
+.window-terminal-container {
+ position: relative;
+ height: 25em;
+ max-width: 70em;
+}
diff --git a/package-lock.json b/package-lock.json
index d71da1e..76522a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9894,6 +9894,11 @@
"integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
"dev": true
},
+ "xterm": {
+ "version": "3.7.0",
+ "resolved": "https://registry.npmjs.org/xterm/-/xterm-3.7.0.tgz",
+ "integrity": "sha512-EnWWiVjyN2JMeFYqBAEM3Xe2z61otmArAzKxZMH33IctNGgKL/pbnjZBBWShCroH9KkXAWsHAePzrAURmNu8OQ=="
+ },
"y18n": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
diff --git a/package.json b/package.json
index aaff56c..51ccef6 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
"angular-websocket": "^2.0.1",
"angularUtils": "git+https://github.com/michaelbromley/angularUtils.git#75dd112ff7b71b32f08743c2d0f29434f12dfa5c",
"bootstrap": "^3.3.7",
- "hterm-umdjs": "^1.4.1"
+ "hterm-umdjs": "^1.4.1",
+ "xterm": "^3.7.0"
},
"peerDependencies": {},
"devDependencies": {