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>

2 files changed, 20 insertions, 30 deletions

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 @@ window.angular && (function(angular) {
           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');
             };