Proxmox/pve-xtermjs
5
0
Fork 0
mirror of git://git.proxmox.com/git/pve-xtermjs.git synced 2025-03-11 20:58:41 +03:00
Code Releases Activity

detect not running guests and add start button

Browse Source 
akin to what we now have in novnc
css classes copied from novnc, so that we have the same look

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak 2022-02-25 15:10:18 +01:00 committed by Thomas Lamprecht
parent 81a288b933
commit 9871a3b81e
4 changed files with 138 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/www/index.html.hbs.in
View File

@ -11,6 +11,12 @@
<body>
<div id="status_bar"></div>
<div id="wrap">
<div class="center">
<div id="connect_dlg">
<div id="pve_start_info">Guest not running</div>
<div id="connect_btn"><div> Start Now </div></div>
</div>
</div>
<div id="terminal-container"></div>
</div>
<script type="text/javascript">

6
src/www/index.html.tpl.in
View File

@ -11,6 +11,12 @@
<body>
<div id="status_bar"></div>
<div id="wrap">
<div class="center">
<div id="connect_dlg">
<div id="pve_start_info">Guest not running</div>
<div id="connect_btn"><div> Start Now </div></div>
</div>
</div>
<div id="terminal-container"></div>
</div>
<script type="text/javascript">

89
src/www/main.js
View File

@ -97,10 +97,59 @@ function updateState(newState, msg, code) {
var terminalContainer = document.getElementById('terminal-container');
document.getElementById('status_bar').addEventListener('click', hideMsg);
document.getElementById('connect_btn').addEventListener('click', startGuest);
const fitAddon = new FitAddon.FitAddon();
createTerminal();
function startConnection(url, params, term) {
API2Request({
method: 'POST',
params: params,
url: url + '/termproxy',
success: function(result) {
var port = encodeURIComponent(result.data.port);
ticket = result.data.ticket;
socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/api2/json' + url + '/vncwebsocket?port=' + port + '&vncticket=' + encodeURIComponent(ticket);
term.open(terminalContainer, true);
socket = new WebSocket(socketURL, 'binary');
socket.binaryType = 'arraybuffer';
socket.onopen = runTerminal;
socket.onclose = tryReconnect;
socket.onerror = tryReconnect;
updateState(states.connecting);
},
failure: function(msg) {
updateState(states.disconnected,msg);
}
});
}
function startGuest() {
let api_type = type === 'kvm' ? 'qemu' : 'lxc';
API2Request({
method: 'POST',
url: `/nodes/${nodename}/${api_type}/${vmid}/status/start`,
success: function(result) {
showMsg('Guest started successfully', 0);
setTimeout(function() {
location.reload();
}, 1000);
},
failure: function(msg) {
if (msg.match(/already running/)) {
showMsg('Guest started successfully', 0);
setTimeout(function() {
location.reload();
}, 1000);
} else {
updateState(states.disconnected,msg);
}
}
});
}
function createTerminal() {
term = new Terminal(getTerminalSettings());
term.loadAddon(fitAddon);
@ -132,28 +181,24 @@ function createTerminal() {
}
break;
}
API2Request({
method: 'POST',
params: params,
url: url + '/termproxy',
success: function(result) {
var port = encodeURIComponent(result.data.port);
ticket = result.data.ticket;
socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/api2/json' + url + '/vncwebsocket?port=' + port + '&vncticket=' + encodeURIComponent(ticket);
term.open(terminalContainer, true);
socket = new WebSocket(socketURL, 'binary');
socket.binaryType = 'arraybuffer';
socket.onopen = runTerminal;
socket.onclose = tryReconnect;
socket.onerror = tryReconnect;
updateState(states.connecting);
},
failure: function(msg) {
updateState(states.disconnected,msg);
}
});
if (type === 'kvm' || type === 'lxc') {
API2Request({
method: 'GET',
url: `${url}/status/current`,
success: function(result) {
if (result.data.status === 'running') {
startConnection(url, params, term);
} else {
document.getElementById('connect_dlg').classList.add('pve_open');
}
},
failure: function(msg) {
updateState(states.disconnected, msg);
},
});
} else {
startConnection(url, params, term);
}
}
function runTerminal() {

59
src/www/style.css
View File

@ -83,3 +83,62 @@ html,body {
#status_bar.warning {
background: rgba(180,180,30,0.9);
}
#pve_start_info {
color: white;
text-align: center;
font-size: 20px;
padding: 6px;
}
#connect_dlg {
transition: 0.2s ease-in-out;
transform: scale(0, 0);
visibility: hidden;
opacity: 0;
font-family: Helvetica;
}
#connect_dlg.pve_open {
transform: scale(1, 1);
visibility: visible;
opacity: 1;
}
#connect_btn {
cursor: pointer;
padding: 6px;
color: white;
background:#4c4c4c;;
border-radius: 8px;
text-align: center;
font-size: 20px;
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}
#connect_btn div {
margin: 2px;
padding: 5px 30px;
border: 1px solid #2f2f2f;
border-bottom-width: 2px;
border-radius: 5px;
background:#4c4c4c;;
/* This avoids it jumping around when :active */
vertical-align: middle;
}
#connect_btn div:active {
border-bottom-width: 1px;
margin-top: 3px;
}
div.center {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}