]> git.proxmox.com Git - pve-xtermjs.git/commitdiff
projects / pve-xtermjs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 81a288b)
detect not running guests and add start button
authorDominik Csapak <d.csapak@proxmox.com>
Fri, 25 Feb 2022 14:10:18 +0000 (15:10 +0100)
committerThomas Lamprecht <t.lamprecht@proxmox.com>
Mon, 25 Apr 2022 16:23:14 +0000 (18:23 +0200)
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 patch | blob | blame | history
src/www/index.html.tpl.in patch | blob | blame | history
src/www/main.js patch | blob | blame | history
src/www/style.css patch | blob | blame | history

diff --git a/src/www/index.html.hbs.in b/src/www/index.html.hbs.in
index 0dba066bb840782851e355212071206611c9c544..0520340e474898285592de7ab12297174617b479 100644 (file)
--- 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 5002035c3d51d36860cb8b779533169e1b5004dc..f38e0b21a08a373178a84c5393102a9ac2a7affd 100644 (file)
--- 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 c2811f695b216e4a387a96ba8edd00993ff1d3e4..2c81e7fcd778c025cc5d8a9e1794bf9d3625c12e 100644 (file)
--- 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 20959c03bde45a5af45b8d98a9d748f7eae29276..04db7d5da777e09263dea0cbc5b52bf6d76251d1 100644 (file)
--- 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%;
+}
xterm.js webclient