github
/
jumpserver
mirror of https://github.com/jumpserver/jumpserver
1
0
Fork 0
Code Issues Releases Wiki Activity

Support resize web terminal size 

Support resize web terminal size.

Change new windows to a new tab.
May be more hommization
pull/206/head
liuzheng 2016-04-07 15:45:48 +08:00 committed by ibuler
parent fe2081b407
commit cca15d4211
7 changed files with 126 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jlog/views.py
View File

@ -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):

5
run_server.py
View File

@ -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

11
static/js/record.js
View File

@ -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
});

70
static/js/webterminal.js
View File

@ -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();
})
});

9
templates/jasset/asset_list.html
View File

@ -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

10
templates/jlog/log_online.html
View File

@ -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];
} ,

82
templates/jlog/web_terminal.html
View File

@ -1,43 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jumpserver Web Terminal: {{ hostname }}</title>
<head>
<meta charset="utf-8">
<title>{{ hostname }}</title>
<style>
body {
padding-bottom: 40px;
}
<style>
body {
padding-bottom: 40px;
}
.terminal {
border: #000 solid 5px;
font-family: "Monaco", "Microsoft Yahei", "DejaVu Sans Mono", "Liberation Mono", monospace;
font-size: 11px;
color: #f0f0f0;
background: #000;
width: 600px;
box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
white-space: nowrap;
display: inline-block;
}
.terminal {
border: #000 solid 5px;
font-family: "Monaco", "Microsoft Yahei", "DejaVu Sans Mono", "Liberation Mono", monospace;
font-size: 11px;
color: #f0f0f0;
background: #000;
box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
white-space: nowrap;
display: inline-block;
}
.reverse-video {
color: #000;
background: #f0f0f0;
}
</style>
</head>
.reverse-video {
color: #000;
background: #f0f0f0;
}
<body>
<div class="container">
<div id="term">
</div>
</div>
.termChangBar {
line-height: 1;
margin: 0 auto;
border: 1px solid #ffffff;
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">
</script>
<script type="application/javascript" src="/static/js/term.js">
</script>
<script type="application/javascript" src="/static/js/webterminal.js"></script>
</body>
<body>
<div class="container">
<div id="term">
</div>
</div>
<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>