Set SOL Screen dynamically

To make EWS SOL Screen size match the real BIOS console, need to
set the screen dynamically. Web page get terminal resolution from
config.json and calculate frame width and height base on the
resolution and fontsize. Web page use this width and height to
change the screen size. If no related configuration in config.json
the SOL Screen will keep the original size before this code change.

Tested By:
Add "customConsoleDisplaySize": {"width": 100, "height": 32} to
config.json, and open EWS Server Serial over LAN console page, the
size of console client can match 100*32 characters. Set console
redirection to 100*32 in BIOS setup page, the page show correctly
in this SOL client in EWS. After enter OS, the linux console can
show correctly in SOL client.
After remove "customConsoleDisplaySize" in config.json, the size
of console client in EWS show the same as the code change in this
patch.

Change-Id: I09bfe4e67db1387abcd57ee3a13b912957cf95b0
Signed-off-by: Yang Cheng <cheng.c.yang@linux.intel.com>

3 files changed, 46 insertions, 3 deletions

diff --git a/app/common/directives/serial-console.js b/app/common/directives/serial-console.js
index 8227e18..4324708 100644
--- a/app/common/directives/serial-console.js
+++ b/app/common/directives/serial-console.js
@@ -14,6 +14,27 @@ var customKeyHandlers = function(ev) {
   return true;
 };
 
+function measureChar(term) {
+  var span = document.createElement('span');
+  var fontFamily = 'courier-new';
+  var fontSize = 15;
+  var rect;
+
+  span.textContent = 'W';
+  try {
+    fontFamily = term.getOption('fontFamily');
+    fontSize = term.getOption('fontSize');
+  } catch (err) {
+    console.log('get option failure');
+  }
+  span.style.fontFamily = fontFamily;
+  span.style.fontSize = fontSize + 'px';
+  document.body.appendChild(span);
+  rect = span.getBoundingClientRect();
+  document.body.removeChild(span);
+  return rect;
+}
+
 window.angular && (function(angular) {
   'use strict';
 
@@ -34,8 +55,30 @@ window.angular && (function(angular) {
             Terminal.applyAddon(attach);  // Apply the `attach` addon
             Terminal.applyAddon(fit);     // Apply the `fit` addon
 
+            var border = 10;
             var term = new Terminal();
-            term.open(document.getElementById('terminal'));
+            var terminal = document.getElementById('terminal');
+            var customConsole;
+            var charSize;
+            var termContainer;
+
+            term.open(terminal);
+            customConsole = configJSON.customConsoleDisplaySize;
+
+            if (customConsole != null) {
+              charSize = measureChar(term);
+              termContainer = document.getElementById('term-container');
+              if (termContainer != null) {
+                if (customConsole.width) {
+                  termContainer.style.width =
+                      (charSize.width * customConsole.width + border) + 'px';
+                }
+                if (customConsole.height) {
+                  terminal.style.height =
+                      (charSize.height * customConsole.height + border) + 'px';
+                }
+              }
+            }
             term.fit();
             if (configJSON.customKeyEnable == true) {
               term.attachCustomKeyEventHandler(customKeyHandlers);
diff --git a/app/server-control/controllers/remote-console-controller.html b/app/server-control/controllers/remote-console-controller.html
index d03bb70..3571a17 100644
--- a/app/server-control/controllers/remote-console-controller.html
+++ b/app/server-control/controllers/remote-console-controller.html
@@ -11,7 +11,7 @@
     <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>
   </section>
   <section class="row column">
-    <div class="terminal-container">
+    <div id="term-container" class="terminal-container">
       <serial-console show-tab-btn="true"></serial-console>
     </div>
   </section>
diff --git a/app/server-control/controllers/remote-console-window-controller.html b/app/server-control/controllers/remote-console-window-controller.html
index 7c39e22..6644682 100644
--- a/app/server-control/controllers/remote-console-window-controller.html
+++ b/app/server-control/controllers/remote-console-window-controller.html
@@ -1,7 +1,7 @@
 <div class="serial-lan__header">
   <a class="bold" ng-click="close()"><i class="icon icon__return"></i> Return to OpenBmc</a>
 </div>
-<div class="window-terminal-container">
+<div id="term-container" class="window-terminal-container">
   <serial-console show-tab-btn="false"></serial-console>
 </div>