[pve-devel] [PATCH novnc] don't automatically connect to not running vms/cts

[pve-devel] [PATCH novnc] don't automatically connect to not running vms/cts

[Dominik Csapak]

this patch adds a check for the guests status, and show a start button
instead of connecting to a non-started guest

this should reduce confusion when a guest is not running, and also
reduce the number of false-positive failed console tasks

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ...ow-start-button-on-not-running-vm-ct.patch | 197 ++++++++++++++++++
 debian/patches/series                         |   1 +
 2 files changed, 198 insertions(+)
 create mode 100644 debian/patches/0018-show-start-button-on-not-running-vm-ct.patch

diff --git a/debian/patches/0018-show-start-button-on-not-running-vm-ct.patch b/debian/patches/0018-show-start-button-on-not-running-vm-ct.patch
new file mode 100644
index 0000000..3b6fc8d
--- /dev/null
+++ b/debian/patches/0018-show-start-button-on-not-running-vm-ct.patch
@@ -0,0 +1,197 @@
+From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
+From: Dominik Csapak <d.csapak@proxmox.com>
+Date: Wed, 9 Feb 2022 14:50:35 +0100
+Subject: [PATCH] show start button on not running vm/ct
+
+by querying the 'status' api first and showing a simple startbutton
+if the status is not 'running'
+
+adds a play icon from fontawesome, since novnc had none itself
+
+css style is mostly copied from novnc "connect dialog", only the
+colors were adapted
+
+Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
+---
+ LICENSE.txt         | 13 ++++++++++
+ app/images/play.svg |  1 +
+ app/pve.js          | 34 ++++++++++++++++++++++++--
+ app/styles/pve.css  | 59 +++++++++++++++++++++++++++++++++++++++++++++
+ vnc.html            |  9 +++++++
+ 5 files changed, 114 insertions(+), 2 deletions(-)
+ create mode 100644 app/images/play.svg
+
+diff --git a/LICENSE.txt b/LICENSE.txt
+index ee81d20..de1bec2 100644
+--- a/LICENSE.txt
++++ b/LICENSE.txt
+@@ -60,3 +60,16 @@ Or alternatively the license texts may be found here:
+     http://scripts.sil.org/OFL
+     http://en.wikipedia.org/wiki/BSD_licenses
+     https://opensource.org/licenses/MIT
++
++Fontawesome Icon:
++
++app/images/play.svg
++(added fill color)
++
++Fonticons, Inc. (https://fontawesome.com)
++
++CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
++
++The Font Awesome Free download is licensed under a Creative Commons
++Attribution 4.0 International License and applies to all icons packaged
++as SVG and JS file types.
+diff --git a/app/images/play.svg b/app/images/play.svg
+new file mode 100644
+index 0000000..3cda723
+--- /dev/null
++++ b/app/images/play.svg
+@@ -0,0 +1 @@
++<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#FFFFFF"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/></svg>
+diff --git a/app/pve.js b/app/pve.js
+index 042eb7c..9da23ed 100644
+--- a/app/pve.js
++++ b/app/pve.js
+@@ -311,6 +311,11 @@ PVEUI.prototype = {
+ 		.classList.add('pve_hidden');
+ 	}
+ 
++        document.getElementById("pve_start_button")
++            .addEventListener('click', function() {
++		me.pve_vm_command('start');
++	    });
++
+ 	// add command logic
+ 	var commandArray = [
+ 	    { cmd: 'start', kvm: 1, lxc: 1},
+@@ -359,8 +364,8 @@ PVEUI.prototype = {
+ 	return { width: ow, height: oh };
+     },
+ 
+-    pveStart: function(callback) {
+-	var me = this;
++    initConnection: function(callback) {
++	let me = this;
+ 	me.API2Request({
+ 	    url: me.url,
+ 	    method: 'POST',
+@@ -382,6 +387,31 @@ PVEUI.prototype = {
+ 	});
+     },
+ 
++    pveStart: function(callback) {
++	var me = this;
++	if (me.consoletype === 'kvm' || me.consoletype === 'lxc') {
++	    // check status for vms first
++	    me.API2Request({
++		url: `${me.baseUrl}/status/current`,
++		method: 'GET',
++		success: function(result) {
++		    let status = result.data.status;
++		    if (status === 'running') {
++			me.initConnection(callback);
++		    } else {
++			document.getElementById('pve_start_dlg')
++			    .classList.add("noVNC_open");
++		    }
++		},
++		failure: function(msg) {
++		    me.UI.showStatus(msg, 'error');
++		}
++	    });
++	} else {
++	    me.initConnection(callback);
++	}
++    },
++
+     updateFBSize: function(rfb, width, height) {
+ 	var me = this;
+ 	try {
+diff --git a/app/styles/pve.css b/app/styles/pve.css
+index 18126b0..f2e7484 100644
+--- a/app/styles/pve.css
++++ b/app/styles/pve.css
+@@ -44,3 +44,62 @@
+ .noVNC_button.pve_hidden {
+   display: none;
+ }
++
++/* start button */
++#pve_start_dlg {
++  transition: 0.5s ease-in-out;
++  transform: scale(0, 0);
++  visibility: hidden;
++  opacity: 0;
++}
++
++#pve_start_dlg.noVNC_open {
++  transform: scale(1, 1);
++  visibility: visible;
++  opacity: 1;
++}
++
++#pve_start_info {
++  color: white;
++  text-align: center;
++  font-size: 20px;
++  padding: 6px;
++}
++
++#pve_start_button {
++  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);
++}
++
++#pve_start_button 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;
++}
++
++#pve_start_button div:active {
++  border-bottom-width: 1px;
++  margin-top: 3px;
++}
++
++:root:not(.noVNC_touch) #pve_start_button div:hover {
++  background: rgba(255, 255, 255, 0.2);
++}
++
++#pve_start_button img {
++  vertical-align: bottom;
++  height: 1.3em;
++  padding: 0 10px 0 0;
++}
+diff --git a/vnc.html b/vnc.html
+index d94fd99..72efa89 100644
+--- a/vnc.html
++++ b/vnc.html
+@@ -283,6 +283,15 @@
+         </div>
+     </div>
+ 
++    <div class="noVNC_center">
++        <div id="pve_start_dlg">
++            <div id="pve_start_info">VM/CT not running</div>
++            <div id="pve_start_button"><div>
++                <img alt="" src="/novnc/app/images/play.svg"> Start VM/CT
++            </div></div>
++        </div>
++    </div>
++
+     <!-- Password Dialog -->
+     <div class="noVNC_center noVNC_connect_layer">
+     <div id="noVNC_credentials_dlg" class="noVNC_panel"><form>
diff --git a/debian/patches/series b/debian/patches/series
index a520e27..085e2b4 100644
--- a/debian/patches/series
+++ b/debian/patches/series
@@ -15,3 +15,4 @@
 0015-create-own-class-for-hidden-buttons.patch
 0016-hide-fullscreen-button-on-isFullscreen-get-variable.patch
 0017-make-error-hideable.patch
+0018-show-start-button-on-not-running-vm-ct.patch
-- 
2.30.2

[pve-devel] applied: [PATCH novnc] don't automatically connect to not running vms/cts

[Thomas Lamprecht]

On 10.02.22 10:33, Dominik Csapak wrote:
> this patch adds a check for the guests status, and show a start button
> instead of connecting to a non-started guest
> 
> this should reduce confusion when a guest is not running, and also
> reduce the number of false-positive failed console tasks
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  ...ow-start-button-on-not-running-vm-ct.patch | 197 ++++++++++++++++++
>  debian/patches/series                         |   1 +
>  2 files changed, 198 insertions(+)
>  create mode 100644 debian/patches/0018-show-start-button-on-not-running-vm-ct.patch
> 
>

good idea, really nice UX addition IMO!

applied, with switching the copied FA play button with the existing power one
(squashed into your patch to avoid having the play button forever in git history
without getting used) - thanks!