shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-21 14:50:08 +03:00
Code Releases Wiki Activity

B #5590: Fix VMRC console (#1578)

Browse Source 
(cherry picked from commit ee2314ae2b4872c1c7452d3ead2515b4696b7583)
(cherry picked from commit a4afb15f181100dffa17a9130541125698824e27)
This commit is contained in:
Frederick Borges 2021-11-16 17:44:56 +01:00 committed by Tino Vazquez
parent 6351af28d4
commit bc40ebbb86
5 changed files with 216 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/sunstone/public/app/console/vmrc.js
View File

@ -15,95 +15,14 @@
/* -------------------------------------------------------------------------- */
define(function(require) {
require("jquery");
require("jquery-ui");
var WMKS = require("wmks");
var UtilsConnection = require("utils/info-connection/utils");
var _wmks;
var _is_encrypted = "";
function setStatus(message="", status=""){
$(".VMRC_message").text(message);
$("#VMRC_status_msg").text(status);
}
function connected(){
setStatus(null, "VMRC " + _wmks.connectionState);
}
function disconnectedFromServer(e){
if (e.detail.clean) {
setStatus(null, "VMRC " + _wmks.connectionState);
} else {
setStatus("Something went wrong, connection is closed", "Failed");
}
}
function sendCtrlAltDel() {
if (_wmks) { _wmks.sendCAD(); }
}
function enterFullScreen() {
if (_wmks) { _wmks.enterFullScreen(); }
}
function selectLanguage() {
if(!_wmks) return;
var keyboardLayoutId = $("#selectLanguage").find(":selected").val();
_wmks.setOption("keyboardLayoutId",keyboardLayoutId);
}
function keyboardSelector() {
$("#selectLanguage").toggle();
}
function updateScreen() {
_wmks.updateScreen();
}
document.querySelector("#sendCtrlAltDelButton").style.display = "inline";
document.querySelector("#sendCtrlAltDelButton").onclick = sendCtrlAltDel;
document.querySelector("#fullScreenButton").onclick = enterFullScreen;
document.querySelector("#keyboardSelector").onclick = keyboardSelector;
document.querySelector("#selectLanguage").onchange = selectLanguage;
var endpoint = new URL(window.location.href);
var encoded_socket = endpoint.searchParams.get("socket");
var socket_string = atob(encoded_socket);
var socket_endpoint = new URL(socket_string);
var host = socket_endpoint.searchParams.get("host");
var port = socket_endpoint.searchParams.get("port");
var info = socket_endpoint.searchParams.get("info");
var ticket = socket_endpoint.searchParams.get("ticket");
var info_decode = UtilsConnection.decodeInfoConnection(info);
UtilsConnection.printInfoConnection($(".VMRC_info"), info_decode);
try{
_wmks = WMKS.createWMKS("wmksContainer", {
fixANSIEquivalentKeys: true,
})
.register(WMKS.CONST.Events.CONNECTION_STATE_CHANGE,
function (_, data) {
if (typeof cons !== "undefined" && data.state == cons.ConnectionState.CONNECTED) {
console.log("connection state change: connected");
}
}
);
_wmks.eventHandlers["connectionstatechange"].push(connected);
_wmks.eventHandlers["disconnect"] = disconnectedFromServer;
_wmks.vm_name = info_decode && info_decode.name;
_wmks.connect(socket_string);
}catch(err){
setStatus("Something went wrong, connection is closed", "Failed");
}
$(window).resize(updateScreen);
UtilsConnection.printInfoConnection($('.VMRC_info'), info_decode);
});

11
src/sunstone/public/app/main.js
View File

@ -25,8 +25,6 @@ require.config({
/* jQuery */
"jquery": "../bower_components/jquery/dist/jquery",
"jquery-ui": "../bower_components/jquery-ui/jquery-ui",
/* WMKS */
"wmks" : "../bower_components/wmks/wmks_AMD.min",
/** Wickedpicker */
"wickedpicker": "../bower_components/wickedpicker/dist/wickedpicker.min",
@ -114,7 +112,6 @@ require.config({
"jquery",
"foundation",
"jquery-ui",
"wmks",
"tabs/provision-tab",
"tabs/dashboard-tab",
"tabs/system-top-tab",
@ -173,14 +170,6 @@ require.config({
"foundation": {
deps: ["jquery"]
},
/* WMKS */
"wmks": {
deps: [
"jquery",
"jquery-ui"
],
exports: "WMKS"
},
/* Flot Graphs */
"flot": {

2
src/sunstone/public/app/utils/info-connection/utils.js
View File

@ -15,8 +15,6 @@
/* -------------------------------------------------------------------------- */
define(function(require) {
require("foundation");
var OpenNebulaVM = require("opennebula/vm");
var OpenNebulaService = require("opennebula/service");

4
src/sunstone/public/bower.json
View File

@ -21,9 +21,9 @@
"wickedpicker": "https://github.com/OpenNebula/sunstone-deps.git#9398b3f",
"guacamole-common-js": "https://github.com/OpenNebula/sunstone-deps.git#fe6e35b885",
"webauthn-json": "https://registry.npmjs.org/@github/webauthn-json/-/webauthn-json-0.4.1.tgz",
"wmks": "https://github.com/OpenNebula/sunstone-deps.git#cb0251c",
"wmks": "https://github.com/OpenNebula/sunstone-deps.git#e742205",
"socket.io-client": "4.1.2",
"ace-builds": "https://github.com/OpenNebula/sunstone-deps.git#01ae12a"
"ace-builds": "https://github.com/OpenNebula/sunstone-deps.git#01ae12a"
},
"authors": [
"Daniel Molina <dmolina@opennebula.org>",

322
src/sunstone/views/vmrc.erb
View File

@ -1,115 +1,219 @@
<!DOCTYPE html>
<html>
<head>
<title><%= params['vm_name']%></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-startup-image" href="images/screen_320x460.png" />
<link rel="apple-touch-icon" href="images/screen_57x57.png">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/app.css" title="plain">
<link rel="stylesheet" type="text/css" href="css/vmrc-custom.css" title="plain">
<% view = $views_config.view(session[:user], session[:user_gname], session[:default_view]) %>
<!-- JQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Scripts -->
<script type="text/javascript">
var csrftoken = '<%= session[:csrftoken] %>';
var view = JSON.parse('<%= view.to_json %>')
var available_views = JSON.parse('["<%=
$views_config.available_views(session[:user], session[:user_gname]).join('","')
%>"]')
var all_labels = JSON.parse('["<%=
$views_config.get_all_labels(session[:user_gname]).join('","')
%>"]')
var all_views = JSON.parse('["<%=
$views_config.get_all_views.join('","')
%>"]')
if ('<%= $conf[:addons] %>'){
var addons = JSON.parse('<%= $conf[:addons].to_json %>');
}
var config = {
'user_config' : {
'lang' : '<%= session[:lang] %>',
'vnc_wss' : '<%= session[:vnc_wss] %>',
'table_order' : '<%= session[:table_order] %>',
'default_view' : '<%= session[:default_view] %>',
'page_length' : '<%= session[:page_length] %>'
},
'system_config' : {
'marketplace_url' : '<%= $conf[:marketplace_url] %>',
'vnc_request_password' : <%= $conf[:vnc_request_password] || false %>,
'vnc_proxy_port' : '<%= $vnc.proxy_port %>',
'vnc_client_port' : '<%= $conf[:vnc_client_port] %>',
'max_upload_file_size' : <%= $conf[:max_upload_file_size] ? $conf[:max_upload_file_size] : "undefined" %>
},
'view' : view,
'available_views' : available_views,
'all_labels' : all_labels,
'all_views' : all_views,
'user_id' : '<%= session[:user_id] %>',
'user_gid' : '<%= session[:user_gid] %>',
'display_name' : '<%= session[:display_name] %>',
'zone_name' : '<%= session[:zone_name] %>',
'zone_id' : '<%= session[:zone_id] %>',
'federation_mode' : '<%= session[:federation_mode] %>',
'vm_logos' : <%= logos_conf.to_json %>,
'oned_conf' : <%= oned_conf.to_json %>,
'support' : <%= support.to_json %>,
'upgrade' : <%= upgrade.to_json %>,
'mode' : '<%= session[:mode] %>'
};
</script>
<script src="bower_components/wmks/wmks.min.js"></script>
<script src="dist/console/vmrc.js?v=<%= OpenNebula::VERSION %>"></script>
</head>
<body style="margin: 0px;">
<div id="VMRC_screen">
<div style="background: #f7f7f7; padding: 1.5em 1.5em 0.8em;">
<div style="max-width: 1250px; margin: 0 auto;">
<div id="VMRC_status_bar" class="noVNC_status_bar" style="display: flex; align-items: center;">
<img src="images/opennebula-5.0.png" style="height:40px;">
<h5 id="VMRC_status" style="position: relative;">
<div class="container">
<div class="remote_logo">
<img src="images/remote_console/vmrc.png">
</div>
<div id="VMRC_status_msg">
Loading
</div>
<html>
<head>
<title><%= params['vm_name']%></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-startup-image" href="images/screen_320x460.png" />
<link rel="apple-touch-icon" href="images/screen_57x57.png">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/app.css" title="plain">
<link rel="stylesheet" type="text/css" href="css/vmrc-custom.css" title="plain">
<% view = $views_config.view(session[:user], session[:user_gname], session[:default_view]) %>
<!-- JQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- WMKS -->
<script src="bower_components/wmks/wmks.js"></script>
<!-- Scripts -->
<script type="text/javascript">
var csrftoken = '<%= session[:csrftoken] %>';
var view = JSON.parse('<%= view.to_json %>')
var available_views = JSON.parse('["<%=
$views_config.available_views(session[:user], session[:user_gname]).join('","')
%>"]')
var all_labels = JSON.parse('["<%=
$views_config.get_all_labels(session[:user_gname]).join('","')
%>"]')
var all_views = JSON.parse('["<%=
$views_config.get_all_views.join('","')
%>"]')
if ('<%= $conf[:addons] %>'){
var addons = JSON.parse('<%= $conf[:addons].to_json %>');
}
var config = {
'user_config' : {
'lang' : '<%= session[:lang] %>',
'vnc_wss' : '<%= session[:vnc_wss] %>',
'table_order' : '<%= session[:table_order] %>',
'default_view' : '<%= session[:default_view] %>',
'page_length' : '<%= session[:page_length] %>'
},
'system_config' : {
'marketplace_url' : '<%= $conf[:marketplace_url] %>',
'vnc_request_password' : <%= $conf[:vnc_request_password] || false %>,
'vnc_proxy_port' : '<%= $vnc.proxy_port %>',
'vnc_client_port' : '<%= $conf[:vnc_client_port] %>',
'max_upload_file_size' : <%= $conf[:max_upload_file_size] ? $conf[:max_upload_file_size] : "undefined" %>
},
'view' : view,
'available_views' : available_views,
'all_labels' : all_labels,
'all_views' : all_views,
'user_id' : '<%= session[:user_id] %>',
'user_gid' : '<%= session[:user_gid] %>',
'display_name' : '<%= session[:display_name] %>',
'zone_name' : '<%= session[:zone_name] %>',
'zone_id' : '<%= session[:zone_id] %>',
'federation_mode' : '<%= session[:federation_mode] %>',
'vm_logos' : <%= logos_conf.to_json %>,
'oned_conf' : <%= oned_conf.to_json %>,
'support' : <%= support.to_json %>,
'upgrade' : <%= upgrade.to_json %>,
'mode' : '<%= session[:mode] %>'
};
</script>
</head>
<body style="margin: 0px;">
<div id="VMRC_screen">
<div style="background: #f7f7f7; padding: 1.5em 1.5em 0.8em;">
<div style="max-width: 1250px; margin: 0 auto;">
<div id="VMRC_status_bar" class="noVNC_status_bar" style="display: flex; align-items: center;">
<img src="images/opennebula-5.0.png" style="height:40px;">
<h5 id="VMRC_status" style="position: relative;">
<div class="container">
<div class="remote_logo">
<img src="images/remote_console/vmrc.png">
</div>
<div id="VMRC_status_msg">
Loading
</div>
</h5>
<div id="VMRC_buttons">
<button class="button alert" id="sendCtrlAltDelButton">Send CtrlAltDel</button>
<button class="button info" id="fullScreenButton"><i class="fas fa-expand"></i></button>
<button class="button info" id="keyboardSelector"><i class="fas fa-keyboard"></i></button>
<select style="width: auto;" id="selectLanguage" hidden>
<option value="en-US">English</option>
<option value="ja-JP_106/109">Japanese</option>
<option value="de-DE">German</option>
<option value="it-IT">Italian</option>
<option value="es-ES">Spanish</option>
<option value="pt-PT">Portuguese</option>
<option value="fr-FR">French</option>
<option value="fr-CH">Swiss-French</option>
<option value="de-CH">Swiss-German</option>
</select>
</div>
</div>
<div class="VMRC_info"></div>
</div>
</div>
</h5>
<div id="VMRC_canvas">
<div id="wmksContainer" class="wmksContainer"></div>
<div class="VMRC_message"></div>
<div id="VMRC_buttons">
<button class="button alert" id="sendCtrlAltDelButton">Send CtrlAltDel</button>
<button class="button info" id="fullScreenButton"><i class="fas fa-expand"></i></button>
<button class="button info" id="keyboardSelector"><i class="fas fa-keyboard"></i></button>
<select style="width: auto;" id="selectLanguage" hidden>
<option value="en-US">English</option>
<option value="fr-FR">French</option>
<option value="fr-CH">French (Switzerland)</option>
<option value="de-DE">German</option>
<option value="de-CH">German (Switzerland)</option>
<option value="it-IT">Italian</option>
<option value="ja-JP_106/109">Japanese</option>
<option value="pt-PT">Portuguese</option>
<option value="es-ES">Spanish</option>
<option value="sv_SE">Swedish</option>
</select>
</div>
</div>
<div class="VMRC_info"></div>
</div>
</div>
</body>
</html>
<div id="VMRC_canvas">
<div id="wmksContainer" class="wmksContainer"></div>
</div>
</div>
<script>
$(document).ready(function() {
var cad = $("#sendCtrlAltDelButton");
var container = $("#container");
var fullscreen = $("#fullScreenButton");
var languageSelector = $("#selectLanguage");
var keyboardSelector = $("#keyboardSelector");
/**
* Send the Ctrl + Alt + Del Action.
*/
cad.on("click", function() {
wmks.sendCAD();
});
/**
* When language is selected, update the console language to match with
* The expected behavior.
*/
languageSelector.on("change", function (evt) {
var keyboardLayoutId = languageSelector.find(":selected").val();
wmks.setOption('keyboardLayoutId',keyboardLayoutId);
});
/**
* Toggle the language selector.
*/
keyboardSelector.on("click", function(){
languageSelector.toggle();
});
function updateStatus(){
$("#VMRC_status_msg").text("VMRC " + wmks.connectionState);
}
/**
* This function adjusts the console size.
*/
function layout() {
var w = $(window).width();
var h = $(window).height();
container.width(w).height(h);
if(!wmks.isFullScreen()) {
wmks.updateScreen();
} else {
container.css({
top: 0,
left: 0
});
}
}
// Create the wmks variable to control the VMRC console
var wmks = WMKS.createWMKS("wmksContainer", {});
/**
* When the connection state change, update the status message.
*/
wmks.register(WMKS.CONST.Events.CONNECTION_STATE_CHANGE, function(evt, data) {
updateStatus();
});
/**
* When an error occurs write it in the console.
*/
wmks.register(WMKS.CONST.Events.ERROR, function(evt, data) {
console.log("VMRC Error: " + data.errorType);
});
/**
* When the screen size changes, resize the console.
*/
wmks.register(WMKS.CONST.Events.REMOTE_SCREEN_SIZE_CHANGE, function(evt, data) {
layout();
});
if (wmks.canFullScreen()) {
fullscreen.on("click", function (evt) {
wmks.enterFullScreen();
});
} else {
fullscreen.hide();
}
//listen for window events
$(window).on("resize", layout);
// if params are provided, no need to show chrome
if (location.search) {
var endpoint = new URL(window.location.href);
var encoded_socket = endpoint.searchParams.get("socket");
var socket_string = atob(encoded_socket);
var socket_endpoint = new URL(socket_string);
wmks.connect(socket_string);
layout();
// After the VMRC console is connected, import the info bar to have
// The VM information in this view
$.getScript("dist/console/vmrc.js?v=<%= OpenNebula::VERSION %>");
}
});
</script>
</body>
</html>