* [pve-devel] [PATCH xtermjs] detect not running guests and add start button
@ 2022-02-25 14:10 Dominik Csapak
2022-04-25 14:28 ` Dominik Csapak
2022-04-25 16:53 ` [pve-devel] applied: " Thomas Lamprecht
0 siblings, 2 replies; 3+ messages in thread
From: Dominik Csapak @ 2022-02-25 14:10 UTC (permalink / raw)
To: pve-devel
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>
---
src/www/index.html.hbs.in | 6 +++
src/www/index.html.tpl.in | 6 +++
src/www/main.js | 89 +++++++++++++++++++++++++++++----------
src/www/style.css | 59 ++++++++++++++++++++++++++
4 files changed, 138 insertions(+), 22 deletions(-)
diff --git a/src/www/index.html.hbs.in b/src/www/index.html.hbs.in
index 0dba066..0520340 100644
--- a/src/www/index.html.hbs.in
+++ b/src/www/index.html.hbs.in
@@ -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">
diff --git a/src/www/index.html.tpl.in b/src/www/index.html.tpl.in
index 5002035..f38e0b2 100644
--- a/src/www/index.html.tpl.in
+++ b/src/www/index.html.tpl.in
@@ -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">
diff --git a/src/www/main.js b/src/www/main.js
index c2811f6..2c81e7f 100644
--- a/src/www/main.js
+++ b/src/www/main.js
@@ -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() {
diff --git a/src/www/style.css b/src/www/style.css
index 20959c0..04db7d5 100644
--- a/src/www/style.css
+++ b/src/www/style.css
@@ -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%;
+}
--
2.30.2
^ permalink raw reply [flat|nested] 3+ messages in thread
* Re: [pve-devel] [PATCH xtermjs] detect not running guests and add start button
2022-02-25 14:10 [pve-devel] [PATCH xtermjs] detect not running guests and add start button Dominik Csapak
@ 2022-04-25 14:28 ` Dominik Csapak
2022-04-25 16:53 ` [pve-devel] applied: " Thomas Lamprecht
1 sibling, 0 replies; 3+ messages in thread
From: Dominik Csapak @ 2022-04-25 14:28 UTC (permalink / raw)
To: pve-devel
ping
^ permalink raw reply [flat|nested] 3+ messages in thread
* [pve-devel] applied: [PATCH xtermjs] detect not running guests and add start button
2022-02-25 14:10 [pve-devel] [PATCH xtermjs] detect not running guests and add start button Dominik Csapak
2022-04-25 14:28 ` Dominik Csapak
@ 2022-04-25 16:53 ` Thomas Lamprecht
1 sibling, 0 replies; 3+ messages in thread
From: Thomas Lamprecht @ 2022-04-25 16:53 UTC (permalink / raw)
To: Proxmox VE development discussion, Dominik Csapak
On 25.02.22 15:10, Dominik Csapak wrote:
> 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>
> ---
> src/www/index.html.hbs.in | 6 +++
> src/www/index.html.tpl.in | 6 +++
> src/www/main.js | 89 +++++++++++++++++++++++++++++----------
> src/www/style.css | 59 ++++++++++++++++++++++++++
> 4 files changed, 138 insertions(+), 22 deletions(-)
>
>
applied, thanks!
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2022-04-25 16:54 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2022-02-25 14:10 [pve-devel] [PATCH xtermjs] detect not running guests and add start button Dominik Csapak
2022-04-25 14:28 ` Dominik Csapak
2022-04-25 16:53 ` [pve-devel] applied: " Thomas Lamprecht
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox