Create SOL console directive

Created serial-console directive in order to avoid
duplicate code between remote-console-controller
and remote-console-window-controller.

Tested: Verified that SOL console functions as
expected after refactor

Change-Id: I8cfc8e78cc2325c813e5bef608886859df6b3ab8
Signed-off-by: beccabroek <beccabroek@gmail.com>

8 files changed, 74 insertions, 116 deletions

diff --git a/app/common/directives/serial-console.html b/app/common/directives/serial-console.html
new file mode 100644
index 0000000..0927f0a
--- /dev/null
+++ b/app/common/directives/serial-console.html
@@ -0,0 +1,3 @@
+<div class="serial-lan__wrapper">
+    	<div id="terminal" class="serial-lan__terminal"></div>
+</div>
\ No newline at end of file
diff --git a/app/common/directives/serial-console.js b/app/common/directives/serial-console.js
new file mode 100644
index 0000000..7ce2e62
--- /dev/null
+++ b/app/common/directives/serial-console.js
@@ -0,0 +1,63 @@
+import {hterm, lib} from 'hterm-umdjs';
+
+window.angular && (function(angular) {
+  'use strict';
+
+  angular.module('app.common.directives').directive('serialConsole', [
+    function() {
+      return {
+        'restrict': 'E',
+        'template': require('./serial-console.html'),
+        'scope': {'path': '='},
+        'controller': [
+          '$scope', '$window', 'dataService',
+          function($scope, $window, dataService) {
+            $scope.dataService = dataService;
+
+            // See https://github.com/macton/hterm for available hterm 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();
+
+            // The BMC exposes a websocket at /console0. This can be read
+            // or written to access the host serial console.
+            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);
+              };
+            };
+
+            ws.onopen = function() {
+              console.log('websocket opened');
+            };
+            ws.onclose = function(event) {
+              console.log(
+                  'websocket closed. code: ' + event.code +
+                  ' reason: ' + event.reason);
+            };
+          }
+        ]
+      };
+    }
+  ]);
+})(window.angular);
diff --git a/app/index.js b/app/index.js
index 92877cd..7eff968 100644
--- a/app/index.js
+++ b/app/index.js
@@ -50,6 +50,7 @@ import firmware_list from './common/directives/firmware-list.js';
 import file from './common/directives/file.js';
 import loader from './common/directives/loader.js';
 import paginate from './common/directives/paginate.js';
+import serial_console from './common/directives/serial-console.js';
 
 import login_index from './login/index.js';
 import login_controller from './login/controllers/login-controller.js';
@@ -61,7 +62,6 @@ import server_control_index from './server-control/index.js';
 import bmc_reboot_controller from './server-control/controllers/bmc-reboot-controller.js';
 import power_operations_controller from './server-control/controllers/power-operations-controller.js';
 import power_usage_controller from './server-control/controllers/power-usage-controller.js';
-import remote_console_controller from './server-control/controllers/remote-console-controller.js';
 import remote_console_window_controller from './server-control/controllers/remote-console-window-controller.js';
 import server_led_controller from './server-control/controllers/server-led-controller.js';
 
diff --git a/app/server-control/controllers/remote-console-controller.html b/app/server-control/controllers/remote-console-controller.html
index 79a68fd..c82af06 100644
--- a/app/server-control/controllers/remote-console-controller.html
+++ b/app/server-control/controllers/remote-console-controller.html
@@ -9,9 +9,7 @@
 	</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>
-		<div class="serial-lan__wrapper" ng-class="{'disabled': dataService.remote_window_active}">
-			<div id="terminal" class="serial-lan__terminal"></div>
-		</div>
+		<serial-console></serial-console>
 	</section>
 </div>
 
diff --git a/app/server-control/controllers/remote-console-controller.js b/app/server-control/controllers/remote-console-controller.js
deleted file mode 100644
index 847fd9a..0000000
--- a/app/server-control/controllers/remote-console-controller.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Controller for server
- *
- * @module app/serverControl
- * @exports remoteConsoleController
- * @name remoteConsoleController
- */
-
-import {hterm, lib} from 'hterm-umdjs';
-
-window.angular && (function(angular) {
-  'use strict';
-
-  angular.module('app.serverControl').controller('remoteConsoleController', [
-    '$scope', '$window', 'APIUtils', 'dataService',
-    function($scope, $window, APIUtils, dataService) {
-      $scope.dataService = dataService;
-
-      // See https://github.com/macton/hterm for available hterm 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();
-
-      // The BMC exposes a websocket at /console0. This can be read
-      // or written to access the host serial console.
-      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);
-        };
-      };
-
-      ws.onopen = function() {
-        console.log('websocket opened');
-      };
-      ws.onclose = function() {
-        console.log('websocket closed');
-      };
-      $scope.$on('$destroy', function() {
-        if (ws) {
-          ws.close();
-        }
-      });
-
-      $scope.openTerminalWindow = function() {
-        dataService.setRemoteWindowActive();
-        $window.open(
-            '#/server-control/remote-console-window', 'Remote Console Window',
-            'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=600,height=400');
-      };
-    }
-  ]);
-})(angular);
diff --git a/app/server-control/controllers/remote-console-window-controller.html b/app/server-control/controllers/remote-console-window-controller.html
index e7410b7..932fb0a 100644
--- a/app/server-control/controllers/remote-console-window-controller.html
+++ b/app/server-control/controllers/remote-console-window-controller.html
@@ -1,6 +1,5 @@
 <div class="serial-lan__header">
-	<a class="bold" ng-click="close()"><i class="icon icon__return"></i> Return to openBmc</a>
+	<a class="bold" ng-click="close()"><i class="icon icon__return"></i> Return to OpenBmc</a>
 </div>
-<div class="serial-lan__wrapper">
-	<div id="terminal" class="serial-lan__terminal"></div>
-</div>
\ No newline at end of file
+<serial-console></serial-console>
+
diff --git a/app/server-control/controllers/remote-console-window-controller.js b/app/server-control/controllers/remote-console-window-controller.js
index 8081972..01874d6 100644
--- a/app/server-control/controllers/remote-console-window-controller.js
+++ b/app/server-control/controllers/remote-console-window-controller.js
@@ -11,45 +11,13 @@ window.angular && (function(angular) {
 
   angular.module('app.serverControl')
       .controller('remoteConsoleWindowController', [
-        '$scope', '$window', 'APIUtils', 'dataService',
-        function($scope, $window, APIUtils, dataService) {
+        '$scope', '$window', 'dataService',
+        function($scope, $window, dataService) {
           $scope.dataService = dataService;
           dataService.showNavigation = false;
-
-          // See https://github.com/macton/hterm for available hterm options
-
-          // Storage
-          hterm.defaultStorage = new lib.Storage.Local();
-
-          var term = new hterm.Terminal('foo');
-          term.onTerminalReady = function() {
-            var io = term.io.push();
-            io.onVTKeystroke = function(str) {
-              console.log(str);
-              term.io.print(str);
-            };
-            io.sendString = function(str) {
-              console.log(str);
-            };
-          };
-          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');
-
-          // Print to console window
-          term.io.println('OpenBMC ver.00');
-          term.io.println('This is not an actual live connection.');
-          term.io.print('root@IBM:');
-
-          // Allows keyboard input
-          term.installKeyboard();
+          dataService.bodyStyle = {'background': 'white'};
 
           $scope.close = function() {
-            dataService.setRemoteWindowInactive();
             $window.close();
           };
         }
diff --git a/app/server-control/index.js b/app/server-control/index.js
index 06c15b6..739bd1e 100644
--- a/app/server-control/index.js
+++ b/app/server-control/index.js
@@ -40,7 +40,6 @@ window.angular && (function(angular) {
               .when('/server-control/remote-console', {
                 'template':
                     require('./controllers/remote-console-controller.html'),
-                'controller': 'remoteConsoleController',
                 authenticated: true
               })
               .when('/server-control/remote-console-window', {