1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
|
From a129c4e92eebd03772e5f68a2fcf855e00874f19 Mon Sep 17 00:00:00 2001
From: Ed tanous <ed@tanous.net>
Date: Sun, 22 Apr 2018 10:53:28 -0700
Subject: [PATCH] Implement KVM in webui
This patchset adds the infrastructure to allow KVM sessions
through the webui. A websocket capable VNC/RFB connection
on the BMC is needed for KVM sessions.
To access, navigate to Server control -> KVM.
Tested: Ran obmc-ikvm on the BMC, added a KVM Handler to
Phosphor Rest Server, and was able to establish a
KVM session in the webui on a Witherspoon.
Change-Id: I7dda5bec41d270ae8d0913697714d4df4ec3a257
Signed-off-by: Ed Tanous <ed.tanous@intel.com>
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
---
app/common/directives/app-navigation.html | 12 +++--
app/index.js | 1 +
app/server-control/controllers/kvm-controller.html | 5 ++
app/server-control/controllers/kvm-controller.js | 55 ++++++++++++++++++++++
app/server-control/index.js | 5 ++
app/server-control/styles/index.scss | 1 +
app/server-control/styles/kvm.scss | 11 +++++
package-lock.json | 5 ++
package.json | 5 +-
webpack.config.js | 6 ++-
10 files changed, 98 insertions(+), 8 deletions(-)
create mode 100644 app/server-control/controllers/kvm-controller.html
create mode 100644 app/server-control/controllers/kvm-controller.js
create mode 100644 app/server-control/styles/kvm.scss
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 2f3ded76cad2..f8b5db742acc 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -85,19 +85,21 @@
<a href="#/server-control/bmc-reboot" tabindex="12" ng-click="closeSubnav()">Reboot BMC</a></li>
<li ng-class="{'active': (path == '/server-control/remote-console')}">
<a href="#/server-control/remote-console" tabindex="13" ng-click="closeSubnav()">Serial over LAN console</a></li>
+ <li ng-class="{'active': (path == '/server-control/kvm')}">
+ <a href="#/server-control/kvm" tabindex="14" ng-click="closeSubnav()">KVM</a></li>
</ul>
<ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}">
- <a href="#/configuration/network" tabindex="14" ng-click="closeSubnav()">Network settings</a></li>
+ <a href="#/configuration/network" tabindex="15" ng-click="closeSubnav()">Network settings</a></li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
- <a href="#/configuration/snmp" tabindex="15" ng-click="closeSubnav()">SNMP settings</a></li>
+ <a href="#/configuration/snmp" tabindex="16" ng-click="closeSubnav()">SNMP settings</a></li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
- <a href="#/configuration/firmware" tabindex="16" ng-click="closeSubnav()">Firmware</a></li>
+ <a href="#/configuration/firmware" tabindex="17" ng-click="closeSubnav()">Firmware</a></li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/date-time')}">
- <a href="#/configuration/date-time" tabindex="17" ng-click="closeSubnav()">Date and time settings</a></li>
+ <a href="#/configuration/date-time" tabindex="18" ng-click="closeSubnav()">Date and time settings</a></li>
</ul>
<ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'users')}">
<li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}">
- <a href="#/users/manage-accounts" tabindex="18" ng-click="closeSubnav()">Manage user accounts</a></li>
+ <a href="#/users/manage-accounts" tabindex="19" ng-click="closeSubnav()">Manage user account</a></li>
</ul>
</nav>
diff --git a/app/index.js b/app/index.js
index c9fed83fe4a9..d6b4a08fa5c6 100644
--- a/app/index.js
+++ b/app/index.js
@@ -69,6 +69,7 @@ import power_operations_controller from './server-control/controllers/power-oper
import power_usage_controller from './server-control/controllers/power-usage-controller.js';
import remote_console_window_controller from './server-control/controllers/remote-console-window-controller.js';
import server_led_controller from './server-control/controllers/server-led-controller.js';
+import kvm_controller from './server-control/controllers/kvm-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
new file mode 100644
index 000000000000..40e4d97454bc
--- /dev/null
+++ b/app/server-control/controllers/kvm-controller.html
@@ -0,0 +1,5 @@
+<div id="noVNC_container">
+ <div id="noVNC_status_bar">
+ <div id="noVNC_left_dummy_elem"></div>
+ </div>
+</div>
diff --git a/app/server-control/controllers/kvm-controller.js b/app/server-control/controllers/kvm-controller.js
new file mode 100644
index 000000000000..a43f169ddf19
--- /dev/null
+++ b/app/server-control/controllers/kvm-controller.js
@@ -0,0 +1,55 @@
+/**
+ * Controller for KVM (Kernel-based Virtual Machine)
+ *
+ * @module app/serverControl
+ * @exports kvmController
+ * @name kvmController
+ */
+
+import RFB from '@novnc/novnc/core/rfb.js';
+
+window.angular && (function(angular) {
+ 'use strict';
+
+ angular.module('app.serverControl').controller('kvmController', [
+ '$scope', '$location', '$log',
+ function($scope, $location, $log) {
+ var rfb;
+
+ $scope.$on('$destroy', function() {
+ if (rfb) {
+ rfb.disconnect();
+ }
+ });
+
+ function sendCtrlAltDel() {
+ rfb.sendCtrlAltDel();
+ return false;
+ };
+
+ function connected(e) {
+ $log.debug('RFB Connected');
+ }
+ function disconnected(e) {
+ $log.debug('RFB disconnected');
+ }
+
+ var host = $location.host();
+ var port = $location.port();
+ var target =
+ angular.element(document.querySelector('#noVNC_container'))[0];
+
+ try {
+ rfb = new RFB(target, 'wss://' + host + ':' + port + '/kvm/0', {});
+
+ rfb.addEventListener('connect', connected);
+ rfb.addEventListener('disconnect', disconnected);
+ } catch (exc) {
+ $log.error(exc);
+ updateState(
+ null, 'fatal', null, 'Unable to create RFB client -- ' + exc);
+ return; // don't continue trying to connect
+ };
+ }
+ ]);
+})(angular);
diff --git a/app/server-control/index.js b/app/server-control/index.js
index 739bd1eb8ad9..1b8aad50b702 100644
--- a/app/server-control/index.js
+++ b/app/server-control/index.js
@@ -48,6 +48,11 @@ window.angular && (function(angular) {
'controller': 'remoteConsoleWindowController',
authenticated: true
})
+ .when('/server-control/kvm', {
+ 'template': require('./controllers/kvm-controller.html'),
+ 'controller': 'kvmController',
+ authenticated: true
+ })
.when('/server-control', {
'template':
require('./controllers/power-operations-controller.html'),
diff --git a/app/server-control/styles/index.scss b/app/server-control/styles/index.scss
index f6b15ab6afc9..5e8a99580894 100644
--- a/app/server-control/styles/index.scss
+++ b/app/server-control/styles/index.scss
@@ -3,3 +3,4 @@
@import "./remote-console.scss";
@import "./server-led.scss";
@import "./power-usage.scss";
+@import "./kvm.scss";
diff --git a/app/server-control/styles/kvm.scss b/app/server-control/styles/kvm.scss
new file mode 100644
index 000000000000..2f9e2c0c9f37
--- /dev/null
+++ b/app/server-control/styles/kvm.scss
@@ -0,0 +1,11 @@
+
+.noNVC_shown {
+ display: inline;
+}
+.noVNC_hidden {
+ display: none;
+}
+
+#noVNC_left_dummy_elem {
+ flex: 1;
+}
diff --git a/package-lock.json b/package-lock.json
index 2d9d31b21968..103c9b84b933 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -807,6 +807,11 @@
"to-fast-properties": "2.0.0"
}
},
+ "@novnc/novnc": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@novnc/novnc/-/novnc-1.0.0.tgz",
+ "integrity": "sha1-drDonm+HOMqBVBlbr1uOaoC8kQU="
+ },
"@types/node": {
"version": "10.12.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz",
diff --git a/package.json b/package.json
index 35c6b78e320c..c0125a0b72fd 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,9 @@
"node"
],
"dependencies": {
- "angular": "^1.7.5",
- "angular-animate": "^1.7.5",
+ "@novnc/novnc": "^1.0.0",
+ "angular": "^1.7.3",
+ "angular-animate": "^1.7.3",
"angular-clipboard": "^1.6.2",
"angular-cookies": "^1.7.5",
"angular-messages": "^1.7.6",
diff --git a/webpack.config.js b/webpack.config.js
index 91cbea8f2952..6c8667cbbc98 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -113,7 +113,11 @@ module.exports = (env, options) => {
'base-uri': '\'self\'',
'object-src': '\'none\'',
'script-src': ['\'self\''],
- 'style-src': ['\'self\'']
+ 'style-src': ['\'self\''],
+ // KVM requires image buffers from data: payloads, so allow that in
+ // img-src
+ // https://stackoverflow.com/questions/18447970/content-security-policy-data-not-working-for-base64-images-in-chrome-28
+ 'img-src': ['\'self\'', 'data:'],
}),
new MiniCssExtractPlugin(),
--
2.7.4
|
