Close #2262: Add noVNC scale setting

Add a setting to choose the scale mode of the noVNC pop-up as well as
the embedded console in the content panel to "My Settings". Having both
set to local scaling was the most important use-case for the users. One
setting for both places is the simplest solution making this possible.

The new section (fieldset) makes adding further options such as
"Local Cursor" easy.

Co-developed-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominic Jäger <d.jaeger@proxmox.com>

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 6838ef2fe67224c63b126821e0cff4c1b6e3e645..36732a37215787333ca51c990ad139629180ebdb 100644 (file)
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -960,13 +960,14 @@ Ext.define('PVE.Utils', { utilities: {
     },
 
     openVNCViewer: function(vmtype, vmid, nodename, vmname, cmd) {
+       var sp = Ext.state.Manager.getProvider();
        var url = Ext.Object.toQueryString({
            console: vmtype, // kvm, lxc, upgrade or shell
            novnc: 1,
            vmid: vmid,
            vmname: vmname,
            node: nodename,
-           resize: 'off',
+           resize: sp.get('novnc-scaling'),
            cmd: cmd
        });
        var nw = window.open("?" + url, '_blank', "innerWidth=745,innerheight=427");

diff --git a/www/manager6/VNCConsole.js b/www/manager6/VNCConsole.js
index cd8fa243ef4dfbd87c7cb5274720307dff9c43a6..22c82257f43d45dd4a88b5e70c1498845ccb4e4c 100644 (file)
--- a/www/manager6/VNCConsole.js
+++ b/www/manager6/VNCConsole.js
@@ -41,12 +41,13 @@ Ext.define('PVE.noVncConsole', {
            items: box,
            listeners: {
                activate: function() {
+                   var sp = Ext.state.Manager.getProvider();
                    var queryDict = {
                        console: me.consoleType, // kvm, lxc, upgrade or shell
                        vmid: me.vmid,
                        node: me.nodename,
                        cmd: me.cmd,
-                       resize: 'scale'
+                       resize: sp.get('novnc-scaling'),
                    };
                    queryDict[type] = 1;
                    PVE.Utils.cleanEmptyObjectKeys(queryDict);

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index 1a4d8599ce938933ca57f01f41b81d70206ef86d..91a07169f589014db01b6fb0b220179858725b69 100644 (file)
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -37,6 +37,10 @@ Ext.define('PVE.window.Settings', {
 
            var username = sp.get('login-username') || Proxmox.Utils.noneText;
            me.lookupReference('savedUserName').setValue(username);
+           var vncMode = sp.get('novnc-scaling');
+           if (vncMode !== undefined) {
+               me.lookupReference('noVNCScalingGroup').setValue(vncMode);
+           }
 
            var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
            settings.forEach(function(setting) {
@@ -164,162 +168,212 @@ Ext.define('PVE.window.Settings', {
     },
 
     items: [{
-           xtype: 'fieldset',
-           width: '50%',
-           title: gettext('Webinterface Settings'),
-           margin: '5',
-           layout: {
-               type: 'vbox',
-               align: 'left'
-           },
-           defaults: {
-               width: '100%',
-               margin: '0 0 10 0'
+       xtype: 'fieldset',
+       width: '50%',
+       title: gettext('Webinterface Settings'),
+       margin: '5',
+       layout: {
+           type: 'vbox',
+           align: 'left'
+       },
+       defaults: {
+           width: '100%',
+           margin: '0 0 10 0'
+       },
+       items: [
+           {
+               xtype: 'displayfield',
+               fieldLabel: gettext('Dashboard Storages'),
+               labelAlign: 'left',
+               labelWidth: '50%'
            },
-           items: [
-               {
-                   xtype: 'displayfield',
-                   fieldLabel: gettext('Dashboard Storages'),
-                   labelAlign: 'left',
-                   labelWidth: '50%'
+           {
+               xtype: 'grid',
+               maxHeight: 150,
+               reference: 'dashboard-storages',
+               selModel: {
+                   selType: 'checkboxmodel'
                },
-               {
-                   xtype: 'grid',
-                   maxHeight: 150,
-                   reference: 'dashboard-storages',
-                   selModel: {
-                       selType: 'checkboxmodel'
-                   },
-                   columns: [{
-                       header: gettext('Name'),
-                       dataIndex: 'storage',
-                       flex: 1
-                   },{
-                       header: gettext('Node'),
-                       dataIndex: 'node',
-                       flex: 1
+               columns: [{
+                   header: gettext('Name'),
+                   dataIndex: 'storage',
+                   flex: 1
+               },{
+                   header: gettext('Node'),
+                   dataIndex: 'node',
+                   flex: 1
+               }],
+               store: {
+                   type: 'diff',
+                   field: ['type', 'storage', 'id', 'node'],
+                   rstore: PVE.data.ResourceStore,
+                   filters: [{
+                       property: 'type',
+                       value: 'storage'
                    }],
-                   store: {
-                       type: 'diff',
-                       field: ['type', 'storage', 'id', 'node'],
-                       rstore: PVE.data.ResourceStore,
-                       filters: [{
-                           property: 'type',
-                           value: 'storage'
-                       }],
-                       sorters: [ 'node','storage']
-                   }
-               },
-               {
-                   xtype: 'box',
-                   autoEl: { tag: 'hr'}
-               },
-               {
-                   xtype: 'displayfield',
-                   fieldLabel: gettext('Saved User name'),
-                   labelAlign: 'left',
-                   labelWidth: '50%',
-                   stateId: 'login-username',
-                   reference: 'savedUserName',
-                   value: ''
-               },
-               {
-                   xtype: 'button',
-                   cls: 'x-btn-default-toolbar-small proxmox-inline-button',
-                   text: gettext('Clear User name'),
-                   width: 'auto',
-                   name: 'clear-username'
-               },
-               {
-                   xtype: 'box',
-                   autoEl: { tag: 'hr'}
-               },
-               {
-                   xtype: 'displayfield',
-                   fieldLabel: gettext('Layout'),
-                   labelAlign: 'left',
-                   labelWidth: '50%'
-               },
-               {
-                   xtype: 'button',
-                   cls: 'x-btn-default-toolbar-small proxmox-inline-button',
-                   text: gettext('Reset Layout'),
-                   width: 'auto',
-                   name: 'reset'
+                   sorters: [ 'node','storage']
                }
-           ]
+           },
+           {
+               xtype: 'box',
+               autoEl: { tag: 'hr'}
+           },
+           {
+               xtype: 'displayfield',
+               fieldLabel: gettext('Saved User name'),
+               labelAlign: 'left',
+               labelWidth: '50%',
+               stateId: 'login-username',
+               reference: 'savedUserName',
+               value: ''
+           },
+           {
+               xtype: 'button',
+               cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+               text: gettext('Clear User name'),
+               width: 'auto',
+               name: 'clear-username'
+           },
+           {
+               xtype: 'box',
+               autoEl: { tag: 'hr'}
+           },
+           {
+               xtype: 'displayfield',
+               fieldLabel: gettext('Layout'),
+               labelAlign: 'left',
+               labelWidth: '50%'
+           },
+           {
+               xtype: 'button',
+               cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+               text: gettext('Reset Layout'),
+               width: 'auto',
+               name: 'reset'
+           },
+       ]
     },{
-       xtype: 'fieldset',
-       itemId: 'xtermjs',
+       xtype: 'container',
+       layout: 'vbox',
        width: '50%',
        margin: '5',
-       title: gettext('xterm.js Settings'),
-       items: [{
-           xtype: 'form',
-           reference: 'xtermform',
-           border: false,
-           layout: {
-               type: 'vbox',
-               algin: 'left'
-           },
-           defaults: {
-               width: '100%',
-               margin: '0 0 10 0'
-           },
-           items: [
-               {
-                   xtype: 'textfield',
-                   name: 'fontFamily',
-                   reference: 'fontFamily',
-                   emptyText: Proxmox.Utils.defaultText,
-                   fieldLabel: gettext('Font-Family')
-               },
-               {
-                   xtype: 'proxmoxintegerfield',
-                   emptyText: Proxmox.Utils.defaultText,
-                   name: 'fontSize',
-                   reference: 'fontSize',
-                   minValue: 1,
-                   fieldLabel: gettext('Font-Size')
-               },
-               {
-                   xtype: 'numberfield',
-                   name: 'letterSpacing',
-                   reference: 'letterSpacing',
-                   emptyText: Proxmox.Utils.defaultText,
-                   fieldLabel: gettext('Letter Spacing')
-               },
-               {
-                   xtype: 'numberfield',
-                   name: 'lineHeight',
-                   minValue: 0.1,
-                   reference: 'lineHeight',
-                   emptyText: Proxmox.Utils.defaultText,
-                   fieldLabel: gettext('Line Height')
-               },
-               {
-                   xtype: 'container',
+       defaults: {
+           width: '100%',
+           // right margin ensures that the right border of the fieldsets
+           // is shown
+           margin: '0 2 10 0'
+       },
+       items:[
+           {
+               xtype: 'fieldset',
+               itemId: 'xtermjs',
+               title: gettext('xterm.js Settings'),
+               items: [{
+                   xtype: 'form',
+                   reference: 'xtermform',
+                   border: false,
                    layout: {
-                       type: 'hbox',
-                       pack: 'end'
+                       type: 'vbox',
+                       algin: 'left'
+                   },
+                   defaults: {
+                       width: '100%',
+                       margin: '0 0 10 0',
                    },
                    items: [
                        {
-                           xtype: 'button',
-                           reference: 'xtermreset',
-                           disabled: true,
-                           text: gettext('Reset')
+                           xtype: 'textfield',
+                           name: 'fontFamily',
+                           reference: 'fontFamily',
+                           emptyText: Proxmox.Utils.defaultText,
+                           fieldLabel: gettext('Font-Family')
+                       },
+                       {
+                           xtype: 'proxmoxintegerfield',
+                           emptyText: Proxmox.Utils.defaultText,
+                           name: 'fontSize',
+                           reference: 'fontSize',
+                           minValue: 1,
+                           fieldLabel: gettext('Font-Size')
+                       },
+                       {
+                           xtype: 'numberfield',
+                           name: 'letterSpacing',
+                           reference: 'letterSpacing',
+                           emptyText: Proxmox.Utils.defaultText,
+                           fieldLabel: gettext('Letter Spacing')
+                       },
+                       {
+                           xtype: 'numberfield',
+                           name: 'lineHeight',
+                           minValue: 0.1,
+                           reference: 'lineHeight',
+                           emptyText: Proxmox.Utils.defaultText,
+                           fieldLabel: gettext('Line Height')
                        },
                        {
-                           xtype: 'button',
-                           reference: 'xtermsave',
-                           disabled: true,
-                           text: gettext('Save')
+                           xtype: 'container',
+                           layout: {
+                               type: 'hbox',
+                               pack: 'end'
+                           },
+                           items: [
+                               {
+                                   xtype: 'button',
+                                   reference: 'xtermreset',
+                                   disabled: true,
+                                   text: gettext('Reset')
+                               },
+                               {
+                                   xtype: 'button',
+                                   reference: 'xtermsave',
+                                   disabled: true,
+                                   text: gettext('Save')
+                               }
+                           ]
                        }
                    ]
-               }
-           ]
-       }]
+               }]
+           },{
+               xtype: 'fieldset',
+               title: gettext('noVNC Settings'),
+               items: [
+                   {
+                       xtype: 'displayfield',
+                       fieldLabel: gettext('Scaling mode'),
+                   },
+                   {
+                       xtype: 'radiogroup',
+                       reference: 'noVNCScalingGroup',
+                       height: '15px', // renders faster with value assigned
+                       layout: {
+                           type: 'hbox',
+                       },
+                       items: [
+                           {
+                               xtype: 'radiofield',
+                               name: 'noVNCScalingField',
+                               inputValue: 'scale',
+                               boxLabel: 'Local Scaling',
+                               checked: true,
+                           },{
+                               xtype: 'radiofield',
+                               name: 'noVNCScalingField',
+                               inputValue: 'off',
+                               boxLabel: 'Off',
+                               margin: '0 0 0 10',
+                           }
+                       ],
+                       listeners: {
+                           change: function(el, newValue, undefined) {
+                               var sp = Ext.state.Manager.getProvider();
+                               sp.set('novnc-scaling', newValue);
+                           }
+                       },
+                   },
+               ]
+           },
+       ]
     }],
 
     onShow: function() {