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

3 files changed, 38 insertions, 1 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