From cca15d4211d2c69cb7c45eb49f3159d62eb3dca9 Mon Sep 17 00:00:00 2001 From: liuzheng Date: Thu, 7 Apr 2016 15:45:48 +0800 Subject: [PATCH] Support resize web terminal size Support resize web terminal size. Change new windows to a new tab. May be more hommization --- jlog/views.py | 2 +- run_server.py | 5 +- static/js/record.js | 11 +++-- static/js/webterminal.js | 70 +++++++++++++++++++++------ templates/jasset/asset_list.html | 9 ++-- templates/jlog/log_online.html | 10 +++- templates/jlog/web_terminal.html | 82 ++++++++++++++++++-------------- 7 files changed, 126 insertions(+), 63 deletions(-) diff --git a/jlog/views.py b/jlog/views.py index 09c79a9d8..ff1239e8e 100644 --- a/jlog/views.py +++ b/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): diff --git a/run_server.py b/run_server.py index a59a131c0..416c86f70 100755 --- a/run_server.py +++ b/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), - jsondata.get('data').get('resize').get('rows', 24) + width=int(jsondata.get('data').get('resize').get('cols', 100)), + height=int(jsondata.get('data').get('resize').get('rows', 35)) ) elif jsondata.get('data'): self.termlog.recoder = True diff --git a/static/js/record.js b/static/js/record.js index 910ebbc22..ba334e0c2 100644 --- a/static/js/record.js +++ b/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, - cols: 80, + rows: 35, + cols: 100, useStyle: true, screenKeys: true }); diff --git a/static/js/webterminal.js b/static/js/webterminal.js index 50e21276f..c4e441216 100644 --- a/static/js/webterminal.js +++ b/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; - colWidth = 0.0 + 1.00 * $('.terminal').width() / 80; + //rowHeight = 0.0 + 1.00 * $('.terminal').height() / 24; + //colWidth = 0.0 + 1.00 * $('.terminal').width() / 80; return {'term': term, 'client': client}; } -function resize() { - $('.terminal').css('width', window.innerWidth - 25); - console.log(window.innerWidth); - console.log(window.innerWidth - 10); - var rows = Math.floor(window.innerHeight / rowHeight) - 2; - var cols = Math.floor(window.innerWidth / colWidth) - 1; - - return {rows: rows, cols: cols}; -} +//function resize() { +// $('.terminal').css('width', window.innerWidth - 25); +// console.log(window.innerWidth); +// console.log(window.innerWidth - 10); +// var rows = Math.floor(window.innerHeight / rowHeight) - 2; +// var cols = Math.floor(window.innerWidth / colWidth) - 1; +// +// 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(); + }) }); \ No newline at end of file diff --git a/templates/jasset/asset_list.html b/templates/jasset/asset_list.html index 1c063d8d9..898703237 100644 --- a/templates/jasset/asset_list.html +++ b/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 diff --git a/templates/jlog/log_online.html b/templates/jlog/log_online.html index 4f2e60213..290612c43 100644 --- a/templates/jlog/log_online.html +++ b/templates/jlog/log_online.html @@ -173,8 +173,14 @@ $('.terminal').detach().appendTo('#term'); $('.terminal').show(); socket.onmessage = function(evt){ - term.write(evt.data); - }}, 1000); + try { + 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]; } , diff --git a/templates/jlog/web_terminal.html b/templates/jlog/web_terminal.html index b5aae590d..9b088d57c 100644 --- a/templates/jlog/web_terminal.html +++ b/templates/jlog/web_terminal.html @@ -1,43 +1,55 @@ - - - Jumpserver Web Terminal: {{ hostname }} + + + {{ hostname }} - - + .reverse-video { + color: #000; + background: #f0f0f0; + } - -
-
-
-
+ .termChangBar { + line-height: 1; + margin: 0 auto; + border: 1px solid #ffffff; + color: #fff; + background-color: #ffffff; + position: fixed; + right: 0; + top: 0; + } + + - - - - + +
+
+
+
+
+ + + +
+ + + +