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
diff --git a/app/index.js b/app/index.js
index 6e24319..715ed31 100644
--- a/app/index.js
+++ b/app/index.js
@@ -87,6 +87,7 @@
import server_led_controller from './server-control/controllers/server-led-controller.js';
import vm_controller from './server-control/controllers/virtual-media-controller.js';
import kvm_console from './server-control/directives/kvm-console.js';
+import kvm_window_controller from './server-control/controllers/kvm-window-controller.js';
import server_health_index from './server-health/index.js';
import inventory_overview_controller from './server-health/controllers/inventory-overview-controller.js';
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 @@
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 @@
function connected(e) {
$log.debug('RFB Connected');
}
+
function disconnected(e) {
$log.debug('RFB disconnected');
}
@@ -53,6 +54,12 @@
'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 @@
'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;
+ }
+}