Support resize web terminal size

Support resize web terminal size.

Change new windows to a new tab.
May be more hommization

jlog/views.py

@@ -224,7 +224,7 @@ class TermLogRecorder(object):
         Initializing the virtual screen and the character stream
         """
         self._stream = pyte.ByteStream()
-        self._screen = pyte.Screen(80, 24)
+        self._screen = pyte.Screen(100, 35)
         self._stream.attach(self._screen)
 
     def _command(self):

run_server.py

@@ -364,9 +364,10 @@ class WebTerminalHandler(tornado.websocket.WebSocketHandler):
             return
 
         if 'resize' in jsondata.get('data'):
+            self.termlog.write(message)
             self.channel.resize_pty(
-                jsondata.get('data').get('resize').get('cols', 80),
+                width=int(jsondata.get('data').get('resize').get('cols', 100)),
-                jsondata.get('data').get('resize').get('rows', 24)
+                height=int(jsondata.get('data').get('resize').get('rows', 35))
             )
         elif jsondata.get('data'):
             self.termlog.recoder = True

static/js/record.js

@@ -56,7 +56,12 @@ NgApp.controller('TerminalRecordCtrl', function ($scope, $http) {
             document.getElementById("beforeScrubberText").innerHTML = buildTimeString(time);
             for (; pos < timelist.length; pos++) {
                 if (timelist[pos] * 1000 <= time) {
-                    term.write(data[timelist[pos]]);
+                    try{
+                        var findResize = JSON.parse(data[timelist[pos]])['data'];
+                        term.resize(findResize['resize']['cols'], findResize['resize']['rows'])
+                    } catch (err) {
+                        term.write(data[timelist[pos]]);
+                    }
                 } else {
                     break;
                 }
@@ -103,8 +108,8 @@ NgApp.controller('TerminalRecordCtrl', function ($scope, $http) {
         };
 
         var term = new Terminal({
-            rows: 24,
+            rows: 35,
-            cols: 80,
+            cols: 100,
             useStyle: true,
             screenKeys: true
         });

static/js/webterminal.js

@@ -1,4 +1,3 @@
-
 /**
  * Created by liuzheng on 3/3/16.
  */
@@ -36,7 +35,7 @@ WSSHClient.prototype.connect = function (options) {
     };
 
     this._connection.onmessage = function (evt) {
-        try{
+        try {
             options.onData(evt.data);
         } catch (e) {
             var data = JSON.parse(evt.data.toString());
@@ -55,6 +54,25 @@ WSSHClient.prototype.send = function (data) {
 
 function openTerminal(options) {
     var client = new WSSHClient();
+    var rowHeight, colWidth;
+    try {
+        rowHeight = localStorage.getItem('term-row');
+        colWidth = localStorage.getItem('term-col');
+    } catch (err) {
+        rowHeight = 35;
+        colWidth = 100
+    }
+    if (rowHeight) {
+    } else {
+        rowHeight = 35
+    }
+    ;
+    if (colWidth) {
+    } else {
+        colWidth = 100
+    }
+    ;
+
     var term = new Terminal({
         rows: rowHeight,
         cols: colWidth,
@@ -66,7 +84,7 @@ function openTerminal(options) {
         client.send(data)
     });
     $('.terminal').detach().appendTo('#term');
-    term.resize(80, 24);
+    //term.resize(colWidth, rowHeight);
     term.write('Connecting...');
     client.connect($.extend(options, {
         onError: function (error) {
@@ -74,6 +92,7 @@ function openTerminal(options) {
         },
         onConnect: function () {
             // Erase our connecting message
+            client.send({'resize': {'rows': rowHeight, 'cols': colWidth}});
             term.write('\r');
         },
         onClose: function () {
@@ -83,20 +102,20 @@ function openTerminal(options) {
             term.write(data);
         }
     }));
-    rowHeight = 0.0 + 1.00 * $('.terminal').height() / 24;
+    //rowHeight = 0.0 + 1.00 * $('.terminal').height() / 24;
-    colWidth = 0.0 + 1.00 * $('.terminal').width() / 80;
+    //colWidth = 0.0 + 1.00 * $('.terminal').width() / 80;
     return {'term': term, 'client': client};
 }
 
-function resize() {
+//function resize() {
-    $('.terminal').css('width', window.innerWidth - 25);
+//    $('.terminal').css('width', window.innerWidth - 25);
-    console.log(window.innerWidth);
+//    console.log(window.innerWidth);
-    console.log(window.innerWidth - 10);
+//    console.log(window.innerWidth - 10);
-    var rows = Math.floor(window.innerHeight / rowHeight) - 2;
+//    var rows = Math.floor(window.innerHeight / rowHeight) - 2;
-    var cols = Math.floor(window.innerWidth / colWidth) - 1;
+//    var cols = Math.floor(window.innerWidth / colWidth) - 1;
-
+//
-    return {rows: rows, cols: cols};
+//    return {rows: rows, cols: cols};
-}
+//}
 
 $(document).ready(function () {
     var options = {};
@@ -112,5 +131,26 @@ $(document).ready(function () {
     //    term_client.client.send({'resize': {'rows': geom.rows, 'cols': geom.cols}});
     //    $('#ssh').show();
     //}
-
+    try {
+        $('#term-row')[0].value = localStorage.getItem('term-row');
+        $('#term-col')[0].value = localStorage.getItem('term-col');
+    } catch (err) {
+        $('#term-row')[0].value = 35;
+        $('#term-col')[0].value = 100;
+    }
+    $('#col-row').click(function () {
+        var col = $('#term-col').val();
+        var row = $('#term-row').val();
+        localStorage.setItem('term-col', col);
+        localStorage.setItem('term-row', row);
+        term_client.term.resize(col, row);
+        term_client.client.send({'resize': {'rows': row, 'cols': col}});
+        $('#ssh').show();
+    });
+    $(".terminal").mouseleave(function () {
+        $(".termChangBar").slideDown();
+    });
+    $(".terminal").mouseenter(function () {
+        $(".termChangBar").slideUp();
+    })
 });

templates/jasset/asset_list.html

@@ -245,7 +245,7 @@
                         });
                         window.open(new_url+data, '_blank', 'toolbar=yes, location=yes, scrollbars=yes, resizable=yes, copyhistory=yes, width=628, height=400')
                         */
-                        window.open(new_url+data, '', 'width=628px, height=380px');
+                         window.open(new_url+data, "_blank");
                     }  else if (dataArray.length == 1 && data != 'error'){
                        /*layer.open({
                             type: 2,
@@ -256,8 +256,7 @@
                             content: new_url+data
                         });
                         */
-                        window.open(new_url+data, '_blank', 'toolbar=yes, location=yes, copyhistory=yes, scrollbars=yes, width=628, height=410');
+                        window.open(new_url+data, '_blank');
-
                     }
                     else {
                         aUrl = '';
@@ -293,7 +292,7 @@
             content: new_url
             });
             */
-            window.open(new_url, '_blank', 'toolbar=yes, location=yes, copyhistory=yes, scrollbars=yes, width=628, height=380')
+            window.open(new_url, '_blank')
 
         } else {
             /*
@@ -306,7 +305,7 @@
             content: new_url
             });
             */
-            window.open(new_url, '_blank', 'toolbar=yes, location=yes, copyhistory=yes, scrollbars=yes, width=628, height=410');
+            window.open(new_url, '_blank');
         }
 
         return false

templates/jlog/log_online.html

@@ -173,8 +173,14 @@
                 $('.terminal').detach().appendTo('#term');
                 $('.terminal').show();
                 socket.onmessage = function(evt){
-                    term.write(evt.data);
+                    try {
-            }}, 1000);
+                        var findResize = JSON.parse(evt.data)['data'];
+                        term.resize(findResize['resize']['cols'], findResize['resize']['rows'])
+                    } catch (err) {
+                        term.write(evt.data);
+                    }
+                }
+            }, 1000);
 
             return tag[0];
         } ,

templates/jlog/web_terminal.html

@@ -1,43 +1,55 @@
 <!DOCTYPE html>
 <html>
-    <head>
+<head>
-        <meta charset="utf-8">
+    <meta charset="utf-8">
-        <title>Jumpserver Web Terminal: {{ hostname }}</title>
+    <title>{{ hostname }}</title>
 
-        <style>
+    <style>
-            body {
+        body {
-                padding-bottom: 40px;
+            padding-bottom: 40px;
-            }
+        }
 
-            .terminal {
+        .terminal {
-                border: #000 solid 5px;
+            border: #000 solid 5px;
-                font-family: "Monaco", "Microsoft Yahei", "DejaVu Sans Mono", "Liberation Mono", monospace;
+            font-family: "Monaco", "Microsoft Yahei", "DejaVu Sans Mono", "Liberation Mono", monospace;
-                font-size: 11px;
+            font-size: 11px;
-                color: #f0f0f0;
+            color: #f0f0f0;
-                background: #000;
+            background: #000;
-                width: 600px;
+            box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
-                box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
+            white-space: nowrap;
-                white-space: nowrap;
+            display: inline-block;
-                display: inline-block;
+        }
-            }
 
-            .reverse-video {
+        .reverse-video {
-                color: #000;
+            color: #000;
-                background: #f0f0f0;
+            background: #f0f0f0;
-            }
+        }
-        </style>
-    </head>
 
-    <body>
+        .termChangBar {
-        <div class="container">
+            line-height: 1;
-            <div id="term">
+            margin: 0 auto;
-            </div>
+            border: 1px solid #ffffff;
-        </div>
+            color: #fff;
+            background-color: #ffffff;
+            position: fixed;
+            right: 0;
+            top: 0;
+        }
+    </style>
+</head>
 
-        <script type="application/javascript" src="/static/js/jquery-2.1.1.js">
+<body>
-        </script>
+<div class="container">
-        <script type="application/javascript" src="/static/js/term.js">
+    <div id="term">
-        </script>
+    </div>
-    <script type="application/javascript" src="/static/js/webterminal.js"></script>
+</div>
-    </body>
+<div class="termChangBar">
+    <input type="number" min="100" value="100" placeholder="col" id="term-col"/>
+    <input type="number" min="35" value="35" placeholder="row" id="term-row"/>
+    <button id="col-row">修改窗口大小</button>
+</div>
+<script type="application/javascript" src="/static/js/jquery-2.1.1.js"></script>
+<script type="application/javascript" src="/static/js/term.js"></script>
+<script type="application/javascript" src="/static/js/webterminal.js"></script>
+</body>
 </html>