[pve-devel] [PATCH manager 4/5] gui: let users choose the number of columns

[Dominik Csapak]

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 at proxmox.com>
---
 www/manager6/Utils.js              | 11 ++++++++++-
 www/manager6/dc/Summary.js         |  7 +++++++
 www/manager6/node/Summary.js       |  8 ++++++++
 www/manager6/panel/GuestSummary.js |  7 +++++++
 www/manager6/window/Settings.js    | 26 ++++++++++++++++++++++++++
 5 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 27826606..e61e2693 100644
--- 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 aa460cfa..5e613eb1 100644
--- 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 dc66fe2b..f106d312 100644
--- 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 9706734a..c888b3d3 100644
--- 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 fd754dfd..cb3f5446 100644
--- 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'],
+		],
+	    },
 	]
     },
     {
-- 
2.20.1