Update KVM layout and add open in new window functionality

-Adds heading with new layout consistency class name
-Adds open in new window functionality

Resolves: openbmc/phosphor-webui#81

Tested on a Witherspoon with power on and with build
that allows up to 4 kvm sessions connected
at a time https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/25231.

KVM console loads in firefox, chrome, safari, edge and IE11.
Opening new window and returning to parent window is
functional across all browsers.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I32cda025bdd459740ca2b42d573b431fac687860

7 files changed, 69 insertions, 6 deletions

diff --git a/app/server-control/controllers/kvm-controller.html b/app/server-control/controllers/kvm-controller.html
index 2b30c99..8160bb4 100644
--- a/app/server-control/controllers/kvm-controller.html
+++ b/app/server-control/controllers/kvm-controller.html
@@ -1 +1,4 @@
-<kvm-console></kvm-console>
\ No newline at end of file
+<div class="kvm-page page">
+  <h1 class="page-title">IP KVM</h1>
+  <kvm-console new-window-btn="true"></kvm-console>
+</div>
diff --git a/app/server-control/controllers/kvm-window-controller.html b/app/server-control/controllers/kvm-window-controller.html
new file mode 100644
index 0000000..222d737
--- /dev/null
+++ b/app/server-control/controllers/kvm-window-controller.html
@@ -0,0 +1,8 @@
+<div class="kvm-window">
+  <div class="kvm__actions">
+    <button class="btn  btn-tertiary" ng-click="close()">
+      <icon file="icon-return.svg" aria-hidden="true"></icon>Return to OpenBmc
+    </button>
+  </div>
+  <kvm-console new-window-btn="false"></kvm-console>
+</div>
diff --git a/app/server-control/controllers/kvm-window-controller.js b/app/server-control/controllers/kvm-window-controller.js
new file mode 100644
index 0000000..e790f29
--- /dev/null
+++ b/app/server-control/controllers/kvm-window-controller.js
@@ -0,0 +1,26 @@
+/**
+ * Controller for kvm window
+ *
+ * @module app/serverControl
+ * @exports kvmWindowController
+ * @name kvmWindowController
+ */
+
+window.angular && (function(angular) {
+  'use strict';
+  angular.module('app.serverControl').controller('kvmWindowController', [
+    '$scope', '$window', 'dataService',
+    function($scope, $window, dataService) {
+      $scope.dataService = dataService;
+      dataService.showNavigation = false;
+      dataService.bodyStyle = {background: 'white'};
+
+      $scope.close = function() {
+        $window.close();
+        if (rfb) {
+          rfb.disconnect();
+        }
+      };
+    }
+  ]);
+})(angular);
\ No newline at end of file
diff --git a/app/server-control/directives/kvm-console.html b/app/server-control/directives/kvm-console.html
index 40e4d97..0b5f5d9 100644
--- a/app/server-control/directives/kvm-console.html
+++ b/app/server-control/directives/kvm-console.html
@@ -1,5 +1,13 @@
 <div id="noVNC_container">
-    <div id="noVNC_status_bar">
-        <div id="noVNC_left_dummy_elem"></div>
-    </div>
+  <div id="noVNC_status_bar">
+    <div id="noVNC_left_dummy_elem"></div>
+  </div>
+</div>
+<div class="kvm__actions float-right">
+  <button
+    class="btn  btn-tertiary"
+    ng-click="openWindow()"
+    ng-show="newWindowBtn === true">
+    <icon file="icon-launch.svg" aria-hidden="true"></icon>Open in new window
+  </button>
 </div>
diff --git a/app/server-control/directives/kvm-console.js b/app/server-control/directives/kvm-console.js
index 224e5d2..913990d 100644
--- a/app/server-control/directives/kvm-console.js
+++ b/app/server-control/directives/kvm-console.js
@@ -16,7 +16,7 @@ window.angular && (function(angular) {
     function($log, $location) {
       return {
         restrict: 'E', template: require('./kvm-console.html'),
-            link: function(scope, element) {
+            scope: {newWindowBtn: '=?'}, link: function(scope, element) {
               var rfb;
 
               element.on('$destroy', function() {
@@ -33,6 +33,7 @@ window.angular && (function(angular) {
               function connected(e) {
                 $log.debug('RFB Connected');
               }
+
               function disconnected(e) {
                 $log.debug('RFB disconnected');
               }
@@ -53,6 +54,12 @@ window.angular && (function(angular) {
                     'Unable to create RFB client -- ' + exc);
                 return;  // don't continue trying to connect
               };
+
+              scope.openWindow = function() {
+                window.open(
+                    '#/server-control/kvm-window', 'Kvm Window',
+                    'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=1125,height=900');
+              };
             }
       }
     }
diff --git a/app/server-control/index.js b/app/server-control/index.js
index 8b8b215..98f9c48 100644
--- a/app/server-control/index.js
+++ b/app/server-control/index.js
@@ -52,6 +52,11 @@ window.angular && (function(angular) {
                 'template': require('./controllers/kvm-controller.html'),
                 authenticated: true
               })
+              .when('/server-control/kvm-window', {
+                'template': require('./controllers/kvm-window-controller.html'),
+                'controller': 'kvmWindowController',
+                authenticated: true
+              })
               .when('/server-control/virtual-media', {
                 'template':
                     require('./controllers/virtual-media-controller.html'),
diff --git a/app/server-control/styles/kvm.scss b/app/server-control/styles/kvm.scss
index 2f9e2c0..69fa62c 100644
--- a/app/server-control/styles/kvm.scss
+++ b/app/server-control/styles/kvm.scss
@@ -1,4 +1,3 @@
-
 .noNVC_shown {
   display: inline;
 }
@@ -9,3 +8,10 @@
 #noVNC_left_dummy_elem {
   flex: 1;
 }
+
+.kvm-window {
+  padding: 0 2rem;
+  .kvm__actions {
+    padding-bottom: 1.2rem;
+  }
+}