openstack/horizon
Code Issues Proposed changes

Make serial console resizable

Browse Source 
This patch makes serial console resizable according to
parent element size like window or div container.

Change-Id: Ie4bc4d7302ce80ed9925db4156ff52f928460aca
Closes-Bug: #1728533
Needed-By: Ia26be196758e5f3617b31750702a6c54436efb93
This commit is contained in:
Shu Muto 2017-10-19 20:25:57 +09:00
parent a054bb121e
commit 75e4e750df
1 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
openstack_dashboard/static/js/angular/directives/serialConsole.js vendored
View File

@ -40,12 +40,14 @@ limitations under the License.
*/
.directive('serialConsole', serialConsole);
serialConsole.$inject = ['states'];
serialConsole.$inject = ['states', '$timeout'];
function serialConsole(states) {
function serialConsole(states, $timeout) {
return {
scope: true,
template: '<div id="terminalNode"></div><br>{{statusMessage()}}',
template: '<div id="terminalNode"' +
'termCols="{{termCols()}}" termRows="{{termRows()}}"></div>' +
'<br>{{statusMessage()}}',
restrict: 'E',
link: function postLink(scope, element, attrs) {
@ -71,6 +73,43 @@ limitations under the License.
var termElement = angular.element(element)[0];
term.open(termElement.ownerDocument.getElementById('terminalNode'));
// default size of term.js
scope.cols = 80;
scope.rows = 24;
// event handler to resize console according to window resize.
angular.element(window).bind('resize', resizeTerminal);
function resizeTerminal() {
var terminal = angular.element('.terminal')[0];
// take margin for scroll-bars on window.
var winWidth = angular.element(window).width() - 30;
var winHeight = angular.element(window).height() - 50;
// calculate cols and rows.
var newCols = Math.floor(winWidth / (terminal.clientWidth / scope.cols));
var newRows = Math.floor(winHeight / (terminal.clientHeight / scope.rows));
if ((newCols !== scope.cols || newRows !== scope.rows) && newCols > 0 && newRows > 0) {
term.resize(newCols, newRows);
scope.cols = newCols;
scope.rows = newRows;
// To set size into directive attributes for watched by outside,
// termCols() and termRows() are needed to be execute for refreshing template.
// NOTE(shu-mutou): But scope.$apply is not useful here.
// "scope.$apply already in progress" error occurs at here.
// So we need to use $timeout.
$timeout(scope.termCols);
$timeout(scope.termRows);
}
}
// termCols and termRows provide console size into attribute of this directive.
// NOTE(shu-mutou): setting scope variables directly on template definition seems
// not to be effective for refreshing template.
scope.termCols = function () {
return scope.cols;
};
scope.termRows = function () {
return scope.rows;
};
resizeTerminal();
term.on('data', function(data) {
socket.send(data);
});