gui: let users choose the number of columns

introduce a new browser setting, with which the users can choose between
the automatic mode of choosing columns, or always using 1/2/3 columns

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 2782660627c494ef720301c41b0433326818b423..e61e26930d92db3ab22e3844cc9d031b21cc4e42 100644 (file)
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1283,7 +1283,16 @@ Ext.define('PVE.Utils', { utilities: {
     },
 
     updateColumns: function(container) {
-       let factor = container.getSize().width < 1400 ? 1 : 2;
+       let mode = Ext.state.Manager.get('summarycolumns') || 'auto';
+       let factor;
+       if (mode !== 'auto') {
+           factor = parseInt(mode, 10);
+           if (Number.isNaN(factor)) {
+               factor = 1;
+           }
+       } else {
+           factor = container.getSize().width < 1400 ? 1 : 2;
+       }
 
        if (container.oldFactor === factor) {
            return;

diff --git a/www/manager6/dc/Summary.js b/www/manager6/dc/Summary.js
index aa460cfa6b50081a2776284ae84bbdcae865e9e7..5e613eb11743f04bb11aceff420c199f0e630364 100644 (file)
--- a/www/manager6/dc/Summary.js
+++ b/www/manager6/dc/Summary.js
@@ -288,6 +288,13 @@ Ext.define('PVE.dc.Summary', {
            rstore.stopUpdate();
        });
 
+       me.mon(sp, 'statechange', function(provider, key, value) {
+           if (key !== 'summarycolumns') {
+               return;
+           }
+           PVE.Utils.updateColumns(me);
+       });
+
        rstore.startUpdate();
     }
 

diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index dc66fe2b670d3dfe7ef0525cb1cb24b82d52ce60..f106d3129ab2fc879305942f95c3fdfc1319c8d2 100644 (file)
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -153,5 +153,13 @@ Ext.define('PVE.node.Summary', {
        });
 
        me.callParent();
+
+       let sp = Ext.state.Manager.getProvider();
+       me.mon(sp, 'statechange', function(provider, key, value) {
+           if (key !== 'summarycolumns') {
+               return;
+           }
+           PVE.Utils.updateColumns(me.getComponent('itemcontainer'));
+       });
     }
 });

diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index 9706734a9f32981318cc868890124b98c903e25d..c888b3d30d752246f7d6d3e42d675ede5104f2c7 100644 (file)
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -131,5 +131,12 @@ Ext.define('PVE.qemu.Summary', {
            rrdstore.startUpdate();
            me.on('destroy', rrdstore.stopUpdate);
        }
+       let sp = Ext.state.Manager.getProvider();
+       me.mon(sp, 'statechange', function(provider, key, value) {
+           if (key !== 'summarycolumns') {
+               return;
+           }
+           PVE.Utils.updateColumns(me.getComponent('itemcontainer'));
+       });
     }
 });

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index fd754dfd2a14ab96bf17573f1dba7e7cbc8be80e..cb3f54467075b8ae94793e01005a14ac019511c5 100644 (file)
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -42,6 +42,9 @@ Ext.define('PVE.window.Settings', {
                me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode });
            }
 
+           let summarycolumns = sp.get('summarycolumns');
+           me.lookup('summarycolumns').setValue(summarycolumns || 'auto');
+
            var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
            settings.forEach(function(setting) {
                var val = localStorage.getItem('pve-xterm-' + setting);
@@ -163,6 +166,12 @@ Ext.define('PVE.window.Settings', {
                    me.getSelectionModel().select(items);
                    me.resumeEvent('selectionchange');
                }
+           },
+           'field[reference=summarycolumns]': {
+               change: function(el, newValue) {
+                   var sp = Ext.state.Manager.getProvider();
+                   sp.set('summarycolumns', newValue);
+               }
            }
        }
     },
@@ -261,6 +270,23 @@ Ext.define('PVE.window.Settings', {
                    },
                ]
            },
+           {
+               xtype: 'box',
+               autoEl: { tag: 'hr'}
+           },
+           {
+               xtype: 'proxmoxKVComboBox',
+               fieldLabel: gettext('Summary columns') + ':',
+               labelWidth: 150,
+               stateId: 'summarycolumns',
+               reference: 'summarycolumns',
+               comboItems: [
+                   ['auto', 'auto'],
+                   ['1', '1'],
+                   ['2', '2'],
+                   ['3', '3'],
+               ],
+           },
        ]
     },
     {