Make SOL layout responsive to the window changes

The current version of a SOL window layout have several
downsides:
-terminal content doesn't resize with the window changes
-when opened in a separate window terminal content doesn't
use full viewport space
-when opened in a separate window terminal viewport takes
only a small part of the window

Screenshots with the problems descriptions are documented in
the github issue:
#125

This commit adds responsiveness to the SOL layout.
The main SOL tab:
-terminal content automatically resizes with the viewport changes

The separate SOL window:
-XTERM always use full terminal viewport space
-terminal viewport width always equals window space width
-terminal viewport automatically resizes on window size changes
-terminal content automatically resizes with the viewport changes

As SOL UI is resposive now, this commit also removes fixed size
configurations for the SOL terminal via JSON 'customConsoleDisplaySize'
variable. It is worth noting that in reality it wasn't really
used anyway.

Signed-off-by: Konstantin Aladyshev <[email protected]>
Change-Id: Ia5d929e9a309281366a9d3119ac326ebd73c73f0

app/common/directives/serial-console.html

@@ -1,8 +1,8 @@
 <div class="serial-lan__wrapper">
   <div id="terminal"></div>
-  <div class="serial-lan__actions float-right">
-    <button class="btn  btn-tertiary" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">
-      <icon file="icon-launch.svg"></icon>Open in new tab
-    </button>
-  </div>
-</div>
+</div>
+<div class="serial-lan__actions float-right">
+  <button class="btn  btn-tertiary" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">
+    <icon file="icon-launch.svg"></icon>Open in new tab
+  </button>
+</div>

app/common/directives/serial-console.js

@@ -148,22 +148,6 @@ window.angular && (function(angular) {
             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);
@@ -191,11 +175,26 @@ window.angular && (function(angular) {
             } catch (error) {
               console.log(JSON.stringify(error));
             }
+
+            $window.onresize = function() {
+              termContainer = document.getElementById('term-container');
+              termContainer.style.width = window.innerWidth;
+              termContainer.style.height = window.innerHeight;
+              term.fit();
+            };
+
             $scope.openTerminalWindow = function() {
-              $window.open(
+              var sol_window = $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=yes,width=600,height=550');
+
+              sol_window.onresize = function() {
+                termContainer = document.getElementById('term-container');
+                termContainer.style.width = sol_window.innerWidth;
+                termContainer.style.height = sol_window.innerHeight;
+                term.fit();
+              };
             };
           }
         ]

app/server-control/styles/remote-console.scss

@@ -3,6 +3,7 @@
   .btn-export {
     margin: 1.8em 0 1.8em 2em;
   }
+  height: 100%;
 }
 
 .serial-lan__copy {
@@ -18,13 +19,15 @@
 .terminal-container {
   position: relative;
   width: 100%;
+  height: 25em;
 }
 
 .window-terminal-container {
   position: relative;
-  max-width: 70em;
+  max-width: 100%;
+  height: 80vh;
 }
 
 #terminal{
-  height:25em;
+  height: 100%;
 }