v0.2.1

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 0.2.1
+- Updated local xterm.js packages to version 5.1.0 and loading from local file
+- Modified CSS to hide terminal scrollbar in chrome based browsers
+- Added dynamic resize of terminal when sidebar is toggled
+
 # 0.2.0
 - Added cluster groups
 - Added evacuate and restore options for cluster members

lxconsole/static/css/styles.css

@@ -57,3 +57,8 @@ code {
   color: #ff0000 !important;
   word-break: break-word;
 }
+
+
+.terminal .xterm-viewport {
+  overflow-y: hidden;
+}

lxconsole/templates/container.html

@@ -612,10 +612,9 @@
 {% endblock modal %}
 
 {% block script %}
-  <!-- <script src="../static/js/xterm/xterm.js"></script> -->
-
+  
   <!-- xterm -->
-  <script src="https://unpkg.com/xterm@5.1.0/lib/xterm.js"></script>
+  <script src="../static/js/xterm/xterm.js"></script> 
 
   <script>
     
@@ -631,6 +630,7 @@
     var editedContainer
     var execControlSocket
     var execDataSocket
+    var resizeTimer
     populateSidebarLinks();
     populateNavbarLinks();
 
@@ -653,11 +653,10 @@
       cols: parseInt(($("#page-container").width() - 40) / 9),
       rows: 35
     });
-
-    // Resize console and exec terminals on page resize
-    $(window).resize(function(){
+    
+    // Resize the terminal and websocket connection on element resize
+    function terminalResize() {
       execTerminal.resize(parseInt(($("#page-container").width() - 40) / 9), 35);
-      console.log(`size: ${execTerminal.cols} columns, ${execTerminal.rows} rows`);
       consoleTerminal.resize(parseInt(($("#page-container").width() - 40) / 9), 35);
 
       resize_command = {
@@ -670,10 +669,28 @@
       
       if (typeof execControlSocket == 'object')
         execControlSocket.send(convertString2ArrayBuffer(JSON.stringify(resize_command)))
-      if(typeof consoleControlSocket == 'object')
+      if (typeof consoleControlSocket == 'object')
         consoleControlSocket.send(convertString2ArrayBuffer(JSON.stringify(resize_command)))
+    }
+    
+    // Listen for console and exec terminal size changes on page resize
+    $(window).resize(function(){
+      // Using a Timeout to prevent rapid resize calls and improve performance
+      clearTimeout(resizeTimer)
+      resizeTimer = setTimeout(() => { terminalResize(); }, 500);
     })
 
+    // Listen for console and exec terminal size changes on toggled sidebar
+    try {
+      ro = new ResizeObserver(() => {
+        // Using a Timeout to prevent rapid resize calls and improve performance
+        clearTimeout(resizeTimer)
+        resizeTimer = setTimeout(() => { terminalResize(); }, 500);
+      }).observe(document.getElementById("terminal-exec"))
+    } catch (error) {
+      console.log(error);
+    }
+
     applySidebarStyles();
     applySidebarLinks();
 

lxconsole/templates/main.html

@@ -40,7 +40,7 @@
 
       <footer class="main-footer">
         <div class="float-right d-none d-sm-block">
-          Version 0.2.0
+          Version 0.2.1
         </div>
         Copyright &copy; 2020-Present <a href="https://penninglabs.com">Penning Labs</a>. All rights reserved.
       </footer>

lxconsole/templates/modals/main.html

@@ -13,7 +13,7 @@
           <div class="col-12">
             <p>Lxconsole is an open source management console providing a web-based user interface capable of managing multiple LXD servers from a single location.</p>
             <p>
-              <strong>Version</strong>: <span id="versionNumber">v0.2.0</span> <br />
+              <strong>Version</strong>: <span id="versionNumber">v0.2.1</span> <br />
               <strong>License</strong>: AGPL-3.0 <br />
               <strong>URL</strong>: https://lxconsole.com <br />
             </p>          

lxconsole/templates/virtual-machine.html

@@ -521,10 +521,9 @@
 {% endblock modal %}
 
 {% block script %}
-  <!-- <script src="../static/js/xterm/xterm.js"></script> -->
 
   <!-- xterm -->
-  <script src="https://unpkg.com/xterm@5.1.0/lib/xterm.js"></script>
+  <script src="../static/js/xterm/xterm.js"></script> 
 
   <script>
     
@@ -540,6 +539,7 @@
     var editedContainer
     var execControlSocket
     var execDataSocket
+    var resizeTimer
     populateSidebarLinks();
     populateNavbarLinks();
 
@@ -563,10 +563,9 @@
       rows: 35
     });
 
-    // Resize console and exec terminals on page resize
-    $(window).resize(function(){
+    // Resize the terminal and websocket connection on element resize
+    function terminalResize() {
       execTerminal.resize(parseInt(($("#page-container").width() - 40) / 9), 35);
-      console.log(`size: ${execTerminal.cols} columns, ${execTerminal.rows} rows`);
       consoleTerminal.resize(parseInt(($("#page-container").width() - 40) / 9), 35);
 
       resize_command = {
@@ -579,10 +578,28 @@
       
       if (typeof execControlSocket == 'object')
         execControlSocket.send(convertString2ArrayBuffer(JSON.stringify(resize_command)))
-      if(typeof consoleControlSocket == 'object')
+      if (typeof consoleControlSocket == 'object')
         consoleControlSocket.send(convertString2ArrayBuffer(JSON.stringify(resize_command)))
+    }
+    
+    // Listen for console and exec terminal size changes on page resize
+    $(window).resize(function(){
+      // Using a Timeout to prevent rapid resize calls and improve performance
+      clearTimeout(resizeTimer)
+      resizeTimer = setTimeout(() => { terminalResize(); }, 500);
     })
 
+    // Listen for console and exec terminal size changes on toggled sidebar
+    try {
+      ro = new ResizeObserver(() => {
+        // Using a Timeout to prevent rapid resize calls and improve performance
+        clearTimeout(resizeTimer)
+        resizeTimer = setTimeout(() => { terminalResize(); }, 500);
+      }).observe(document.getElementById("terminal-exec"))
+    } catch (error) {
+      console.log(error);
+    }    
+
     applySidebarStyles();
     applySidebarLinks();