[pve-devel] [PATCH manager v3 0/7] multi disk/mp in wizard

[pve-devel] [PATCH manager v3 0/7] multi disk/mp in wizard

[Dominik Csapak]

this series is a continuation of my previous multi tab / disk series[0]

Introduces multi disk panels for vm and containers in the wizard.

The UX is modeled after Dominics first attempt, but a very different
approach code-wise. instead of having a seperate 'data' panel that
contains the vm config, let the multi disk panel handle that
and pass it through to the panels below. this way the HDEdit does
not need a big code-change to get/set the config.

changes from v2:
* rebase on master (multi tab disk panel already applied)
* refactor multi disk panel so that we can reuse it for containers
* implement multi mp panel for container

changes from v1:
* fixed a bug which prevented the wizard from finishing
* made the wizard a little wider so that the form field labes are
  readable
* added logic to use the ostype to determine the first disk if one
  deleted all before

0: https://lists.proxmox.com/pipermail/pve-devel/2021-October/050215.html

Dominik Csapak (7):
  ui: lxc/MPEdit: add updateVMConfig
  ui: lxc/MPEdit: fire diskidchange event
  ui: lxc/MPEdit: add selectFree toggle
  ui: add MultiDiskPanel
  ui: add lxc/MultiMPEdit and use in lxc/CreateWizard
  ui: add qemu/MultiHDEdit and use it in the wizard
  ui: window/Wizard: make it a little wider

 www/manager6/Makefile               |   3 +
 www/manager6/lxc/CreateWizard.js    |   8 +-
 www/manager6/lxc/MPEdit.js          |  16 +-
 www/manager6/lxc/MultiMPEdit.js     |  79 ++++++++
 www/manager6/panel/MultiDiskEdit.js | 272 ++++++++++++++++++++++++++++
 www/manager6/qemu/CreateWizard.js   |   7 +-
 www/manager6/qemu/HDEdit.js         |   9 +-
 www/manager6/qemu/MultiHDEdit.js    |  62 +++++++
 www/manager6/window/Wizard.js       |   2 +-
 9 files changed, 444 insertions(+), 14 deletions(-)
 create mode 100644 www/manager6/lxc/MultiMPEdit.js
 create mode 100644 www/manager6/panel/MultiDiskEdit.js
 create mode 100644 www/manager6/qemu/MultiHDEdit.js

-- 
2.30.2

[pve-devel] [PATCH manager v3 1/7] ui: lxc/MPEdit: add updateVMConfig

[Dominik Csapak]

helper for the upcoming MultiMPEdit

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/lxc/MPEdit.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/www/manager6/lxc/MPEdit.js b/www/manager6/lxc/MPEdit.js
index 0e772017..64e57229 100644
--- a/www/manager6/lxc/MPEdit.js
+++ b/www/manager6/lxc/MPEdit.js
@@ -75,12 +75,18 @@ Ext.define('PVE.lxc.MountPointInputPanel', {
 	}
     },
 
-    setVMConfig: function(vmconfig) {
+    updateVMConfig: function(vmconfig) {
 	let me = this;
 	let vm = me.getViewModel();
 	me.vmconfig = vmconfig;
 	vm.set('unpriv', vmconfig.unprivileged);
+	me.down('field[name=mpid]').validate();
+    },
+
+    setVMConfig: function(vmconfig) {
+	let me = this;
 
+	me.updateVMConfig(vmconfig);
 	PVE.Utils.forEachMP((bus, i) => {
 	    let name = "mp" + i.toString();
 	    if (!Ext.isDefined(vmconfig[name])) {
-- 
2.30.2

[pve-devel] [PATCH manager v3 2/7] ui: lxc/MPEdit: fire diskidchange event

[Dominik Csapak]

when the diskid changes

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/lxc/MPEdit.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/www/manager6/lxc/MPEdit.js b/www/manager6/lxc/MPEdit.js
index 64e57229..2b4f8ebe 100644
--- a/www/manager6/lxc/MPEdit.js
+++ b/www/manager6/lxc/MPEdit.js
@@ -110,6 +110,11 @@ Ext.define('PVE.lxc.MountPointInputPanel', {
 	control: {
 	    'field[name=mpid]': {
 		change: function(field, value) {
+		    let me = this;
+		    let view = this.getView();
+		    if (view.confid !== 'rootfs') {
+			view.fireEvent('diskidchange', view, `mp${value}`);
+		    }
 		    field.validate();
 		},
 	    },
-- 
2.30.2

[pve-devel] [PATCH manager v3 3/7] ui: lxc/MPEdit: add selectFree toggle

[Dominik Csapak]

that sets the given vmconfig at the start and selects the first
free mpid

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/lxc/MPEdit.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/www/manager6/lxc/MPEdit.js b/www/manager6/lxc/MPEdit.js
index 2b4f8ebe..dba69cb4 100644
--- a/www/manager6/lxc/MPEdit.js
+++ b/www/manager6/lxc/MPEdit.js
@@ -149,6 +149,9 @@ Ext.define('PVE.lxc.MountPointInputPanel', {
 		    view.filterMountOptions();
 		}
 	    }
+	    if (view.selectFree) {
+		view.setVMConfig(view.vmconfig);
+	    }
 	},
     },
 
-- 
2.30.2

[pve-devel] [PATCH manager v3 4/7] ui: add MultiDiskPanel

[Dominik Csapak]

this adds a new panel where a user can add multiple disks, intended
for use in the wizard.

Has a simple grid for displaying the already added disks and displays
a warning triangle if the disk is not valid.

this is a base panel for adding multiple disks/mps for vms/ct
respectively.

this combines the shared behavior and layout and defines the functions
that subclasses must define

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile               |   1 +
 www/manager6/panel/MultiDiskEdit.js | 272 ++++++++++++++++++++++++++++
 2 files changed, 273 insertions(+)
 create mode 100644 www/manager6/panel/MultiDiskEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 7d491f57..dc045e73 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -88,6 +88,7 @@ JSSRC= 							\
 	panel/GuestStatusView.js			\
 	panel/GuestSummary.js				\
 	panel/TemplateStatusView.js			\
+	panel/MultiDiskEdit.js				\
 	tree/ResourceTree.js				\
 	tree/SnapshotTree.js				\
 	window/Backup.js				\
diff --git a/www/manager6/panel/MultiDiskEdit.js b/www/manager6/panel/MultiDiskEdit.js
new file mode 100644
index 00000000..ea1f974d
--- /dev/null
+++ b/www/manager6/panel/MultiDiskEdit.js
@@ -0,0 +1,272 @@
+Ext.define('PVE.panel.MultiDiskPanel', {
+    extend: 'Ext.panel.Panel',
+
+    setNodename: function(nodename) {
+	this.items.each((panel) => panel.setNodename(nodename));
+    },
+
+    border: false,
+    bodyBorder: false,
+
+    layout: 'card',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	vmconfig: {},
+
+	onAdd: function() {
+	    let me = this;
+	    me.lookup('addButton').setDisabled(true);
+	    me.addDisk();
+	    let count = me.lookup('grid').getStore().getCount() + 1; // +1 is from ide2
+	    me.lookup('addButton').setDisabled(count >= me.maxCount);
+	},
+
+	getNextFreeDisk: function(vmconfig) {
+	    throw "implement in subclass";
+	},
+
+	addPanel: function(itemId, vmconfig, nextFreeDisk) {
+	    throw "implement in subclass";
+	},
+
+	// define in subclass
+	diskSorter: undefined,
+
+	addDisk: function() {
+	    let me = this;
+	    let grid = me.lookup('grid');
+	    let store = grid.getStore();
+
+	    // get free disk id
+	    let vmconfig = me.getVMConfig(true);
+	    let nextFreeDisk = me.getNextFreeDisk(vmconfig);
+	    if (!nextFreeDisk) {
+		return;
+	    }
+
+	    // add store entry + panel
+	    let itemId = 'disk-card-' + ++Ext.idSeed;
+	    let rec = store.add({
+		name: nextFreeDisk.confid,
+		itemId,
+	    })[0];
+
+	    let panel = me.addPanel(itemId, vmconfig, nextFreeDisk);
+	    panel.updateVMConfig(vmconfig);
+
+	    // we need to setup a validitychange handler, so that we can show
+	    // that a disk has invalid fields
+	    let fields = panel.query('field');
+	    fields.forEach((el) => el.on('validitychange', () => {
+		let valid = fields.every((field) => field.isValid());
+		rec.set('valid', valid);
+		me.checkValidity();
+	    }));
+
+	    store.sort(me.diskSorter);
+
+	    // select if the panel added is the only one
+	    if (store.getCount() === 1) {
+		grid.getSelectionModel().select(0, false);
+	    }
+	},
+
+	getBaseVMConfig: function() {
+	    throw "implement in subclass";
+	},
+
+	getVMConfig: function(all) {
+	    let me = this;
+
+	    let vmconfig = me.getBaseVMConfig();
+
+	    me.lookup('grid').getStore().each((rec) => {
+		if (all || rec.get('valid')) {
+		    vmconfig[rec.get('name')] = rec.get('itemId');
+		}
+	    });
+
+	    return vmconfig;
+	},
+
+	checkValidity: function() {
+	    let me = this;
+	    let valid = me.lookup('grid').getStore().findExact('valid', false) === -1;
+	    me.lookup('validationfield').setValue(valid);
+	},
+
+	updateVMConfig: function() {
+	    let me = this;
+	    let view = me.getView();
+	    let grid = me.lookup('grid');
+	    let store = grid.getStore();
+
+	    let vmconfig = me.getVMConfig();
+
+	    let valid = true;
+
+	    store.each((rec) => {
+		let itemId = rec.get('itemId');
+		let name = rec.get('name');
+		let panel = view.getComponent(itemId);
+		if (!panel) {
+		    throw "unexpected missing panel";
+		}
+
+		// copy config for each panel and remote its own id
+		let panel_vmconfig = Ext.apply({}, vmconfig);
+		if (panel_vmconfig[name] === itemId) {
+		    delete panel_vmconfig[name];
+		}
+
+		if (!rec.get('valid')) {
+		    valid = false;
+		}
+
+		panel.updateVMConfig(panel_vmconfig);
+	    });
+
+	    me.lookup('validationfield').setValue(valid);
+
+	    return vmconfig;
+	},
+
+	onChange: function(panel, newVal) {
+	    let me = this;
+	    let store = me.lookup('grid').getStore();
+
+	    let el = store.findRecord('itemId', panel.itemId, 0, false, true, true);
+	    if (el.get('name') === newVal) {
+		// do not update if there was no change
+		return;
+	    }
+
+	    el.set('name', newVal);
+	    el.commit();
+
+	    store.sort(me.diskSorter);
+
+	    // so that it happens after the layouting
+	    setTimeout(function() {
+		me.updateVMConfig();
+	    }, 10);
+	},
+
+	onRemove: function(tableview, rowIndex, colIndex, item, event, record) {
+	    let me = this;
+	    let grid = me.lookup('grid');
+	    let store = grid.getStore();
+	    let removed_idx = store.indexOf(record);
+
+	    let selection = grid.getSelection()[0];
+	    let selected_idx = store.indexOf(selection);
+
+	    if (selected_idx === removed_idx) {
+		let newidx = store.getCount() > removed_idx + 1 ? removed_idx + 1: removed_idx - 1;
+		grid.getSelectionModel().select(newidx, false);
+	    }
+
+	    store.remove(record);
+	    me.getView().remove(record.get('itemId'));
+	    me.lookup('addButton').setDisabled(false);
+	    me.updateVMConfig();
+	    me.checkValidity();
+	},
+
+	onSelectionChange: function(grid, selection) {
+	    let me = this;
+	    if (!selection || selection.length < 1) {
+		return;
+	    }
+
+	    me.getView().setActiveItem(selection[0].data.itemId);
+	},
+
+	control: {
+	    'inputpanel': {
+		diskidchange: 'onChange',
+	    },
+	    'grid[reference=grid]': {
+		selectionchange: 'onSelectionChange',
+	    },
+	},
+
+	init: function(view) {
+	    let me = this;
+	    me.onAdd();
+	    me.lookup('grid').getSelectionModel().select(0, false);
+	},
+    },
+
+    dockedItems: [
+	{
+	    xtype: 'container',
+	    layout: {
+		type: 'vbox',
+		align: 'stretch',
+	    },
+	    dock: 'left',
+	    border: false,
+	    width: 130,
+	    items: [
+		{
+		    xtype: 'grid',
+		    hideHeaders: true,
+		    reference: 'grid',
+		    flex: 1,
+		    emptyText: gettext('No Disks'),
+		    margin: '0 0 5 0',
+		    store: {
+			fields: ['name', 'itemId', 'valid'],
+			data: [],
+		    },
+		    columns: [
+			{
+			    dataIndex: 'name',
+			    renderer: function(val, md, rec) {
+				let warn = '';
+				if (!rec.get('valid')) {
+				    warn = ' <i class="fa warning fa-warning"></i>';
+				}
+				return val + warn;
+			    },
+			    flex: 1,
+			},
+			{
+			    xtype: 'actioncolumn',
+			    width: 30,
+			    align: 'center',
+			    menuDisabled: true,
+			    items: [
+				{
+				    iconCls: 'x-fa fa-trash critical',
+				    tooltip: 'Delete',
+				    handler: 'onRemove',
+				    isActionDisabled: 'deleteDisabled',
+				},
+			    ],
+			},
+		    ],
+		},
+		{
+		    xtype: 'button',
+		    reference: 'addButton',
+		    text: gettext('Add'),
+		    iconCls: 'fa fa-plus-circle',
+		    handler: 'onAdd',
+		},
+		{
+		    // dummy field to control wizard validation
+		    xtype: 'textfield',
+		    hidden: true,
+		    reference: 'validationfield',
+		    submitValue: false,
+		    value: true,
+		    validator: (val) => !!val,
+		},
+	    ],
+	},
+    ],
+});
-- 
2.30.2

[pve-devel] [PATCH manager v3 5/7] ui: add lxc/MultiMPEdit and use in lxc/CreateWizard

[Dominik Csapak]

uses the MultiDiskPanel as a base and implements the necessary
functions/values

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile            |  1 +
 www/manager6/lxc/CreateWizard.js |  8 +---
 www/manager6/lxc/MultiMPEdit.js  | 79 ++++++++++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 www/manager6/lxc/MultiMPEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index dc045e73..3b9b057a 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -166,6 +166,7 @@ JSSRC= 							\
 	lxc/Options.js					\
 	lxc/ResourceEdit.js				\
 	lxc/Resources.js				\
+	lxc/MultiMPEdit.js				\
 	menu/MenuItem.js				\
 	menu/TemplateMenu.js				\
 	ceph/CephInstallWizard.js			\
diff --git a/www/manager6/lxc/CreateWizard.js b/www/manager6/lxc/CreateWizard.js
index aead515f..1f902c2c 100644
--- a/www/manager6/lxc/CreateWizard.js
+++ b/www/manager6/lxc/CreateWizard.js
@@ -197,15 +197,11 @@ Ext.define('PVE.lxc.CreateWizard', {
 	    ],
 	},
 	{
-	    xtype: 'pveLxcMountPointInputPanel',
-	    title: gettext('Root Disk'),
+	    xtype: 'pveMultiMPPanel',
+	    title: gettext('Disks'),
 	    insideWizard: true,
 	    isCreate: true,
 	    unused: false,
-	    bind: {
-		nodename: '{nodename}',
-		unprivileged: '{unprivileged}',
-	    },
 	    confid: 'rootfs',
 	},
 	{
diff --git a/www/manager6/lxc/MultiMPEdit.js b/www/manager6/lxc/MultiMPEdit.js
new file mode 100644
index 00000000..709dacb1
--- /dev/null
+++ b/www/manager6/lxc/MultiMPEdit.js
@@ -0,0 +1,79 @@
+Ext.define('PVE.lxc.MultiMPPanel', {
+    extend: 'PVE.panel.MultiDiskPanel',
+    alias: 'widget.pveMultiMPPanel',
+
+    onlineHelp: 'pct_container_storage',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	// count of mps + rootfs
+	maxCount: PVE.Utils.mp_counts.mps + 1,
+
+	getNextFreeDisk: function(vmconfig) {
+	    let nextFreeDisk;
+	    if (!vmconfig.rootfs) {
+		return {
+		    confid: 'rootfs',
+		};
+	    } else {
+		for (let i = 0; i < PVE.Utils.mp_counts.mps; i++) {
+		    let confid = `mp${i}`;
+		    if (!vmconfig[confid]) {
+			nextFreeDisk = {
+			    confid,
+			};
+			break;
+		    }
+		}
+	    }
+	    return nextFreeDisk;
+	},
+
+	addPanel: function(itemId, vmconfig, nextFreeDisk) {
+	    let me = this;
+	    return me.getView().add({
+		vmconfig,
+		border: false,
+		showAdvanced: Ext.state.Manager.getProvider().get('proxmox-advanced-cb'),
+		xtype: 'pveLxcMountPointInputPanel',
+		confid: nextFreeDisk.confid === 'rootfs' ? 'rootfs' : null,
+		bind: {
+		    nodename: '{nodename}',
+		    unprivileged: '{unprivileged}',
+		},
+		padding: '0 5 0 10',
+		itemId,
+		selectFree: true,
+		isCreate: true,
+		insideWizard: true,
+	    });
+	},
+
+	getBaseVMConfig: function() {
+	    let me = this;
+
+	    return {
+		unprivileged: me.getViewModel().get('unprivileged'),
+	    };
+	},
+
+	diskSorter: {
+	    sorterFn: function(rec1, rec2) {
+		if (rec1.data.name === 'rootfs') {
+		    return -1;
+		} else if (rec2.data.name === 'rootfs') {
+		    return 1;
+		}
+
+		let mp_match = /^mp(\d+)$/;
+		let [, id1] = mp_match.exec(rec1.data.name);
+		let [, id2] = mp_match.exec(rec2.data.name);
+
+		return parseInt(id1, 10) - parseInt(id2, 10);
+	    },
+	},
+
+	deleteDisabled: (view, rI, cI, item, rec) => rec.data.name === 'rootfs',
+    },
+});
-- 
2.30.2

[pve-devel] [PATCH manager v3 6/7] ui: add qemu/MultiHDEdit and use it in the wizard

[Dominik Csapak]

uses the MultiDiskPanel as base and implements the necessary
functions/variables

this allows now to create a vm also without any disk

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile             |  1 +
 www/manager6/qemu/CreateWizard.js |  7 +---
 www/manager6/qemu/HDEdit.js       |  9 ++++-
 www/manager6/qemu/MultiHDEdit.js  | 62 +++++++++++++++++++++++++++++++
 4 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 www/manager6/qemu/MultiHDEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 3b9b057a..04c634f0 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -215,6 +215,7 @@ JSSRC= 							\
 	qemu/MachineEdit.js				\
 	qemu/MemoryEdit.js				\
 	qemu/Monitor.js					\
+	qemu/MultiHDEdit.js				\
 	qemu/NetworkEdit.js				\
 	qemu/OSDefaults.js				\
 	qemu/OSTypeEdit.js				\
diff --git a/www/manager6/qemu/CreateWizard.js b/www/manager6/qemu/CreateWizard.js
index 015a099d..a785a882 100644
--- a/www/manager6/qemu/CreateWizard.js
+++ b/www/manager6/qemu/CreateWizard.js
@@ -154,14 +154,11 @@ Ext.define('PVE.qemu.CreateWizard', {
 	    insideWizard: true,
 	},
 	{
-	    xtype: 'pveQemuHDInputPanel',
-	    padding: 0,
+	    xtype: 'pveMultiHDPanel',
 	    bind: {
 		nodename: '{nodename}',
 	    },
-	    title: gettext('Hard Disk'),
-	    isCreate: true,
-	    insideWizard: true,
+	    title: gettext('Disks'),
 	},
 	{
 	    xtype: 'pveQemuProcessorPanel',
diff --git a/www/manager6/qemu/HDEdit.js b/www/manager6/qemu/HDEdit.js
index 2142c746..9c453b2a 100644
--- a/www/manager6/qemu/HDEdit.js
+++ b/www/manager6/qemu/HDEdit.js
@@ -107,6 +107,12 @@ Ext.define('PVE.qemu.HDInputPanel', {
 	return params;
     },
 
+    updateVMConfig: function(vmconfig) {
+	var me = this;
+	me.vmconfig = vmconfig;
+	me.bussel?.updateVMConfig(vmconfig);
+    },
+
     setVMConfig: function(vmconfig) {
 	var me = this;
 
@@ -183,7 +189,8 @@ Ext.define('PVE.qemu.HDInputPanel', {
 
 	if (!me.confid || me.unused) {
 	    me.bussel = Ext.create('PVE.form.ControllerSelector', {
-		vmconfig: me.insideWizard ? { ide2: 'cdrom' } : {},
+		vmconfig: me.vmconfig,
+		selectFree: true,
 	    });
 	    column1.push(me.bussel);
 
diff --git a/www/manager6/qemu/MultiHDEdit.js b/www/manager6/qemu/MultiHDEdit.js
new file mode 100644
index 00000000..caf74fad
--- /dev/null
+++ b/www/manager6/qemu/MultiHDEdit.js
@@ -0,0 +1,62 @@
+Ext.define('PVE.qemu.MultiHDPanel', {
+    extend: 'PVE.panel.MultiDiskPanel',
+    alias: 'widget.pveMultiHDPanel',
+
+    onlineHelp: 'qm_hard_disk',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	// maxCount is the sum of all controller ids - 1 (ide2 is fixed in the wizard)
+	maxCount: Object.values(PVE.Utils.diskControllerMaxIDs)
+		.reduce((previous, current) => previous+current, 0) - 1,
+
+	getNextFreeDisk: function(vmconfig) {
+	    let clist = PVE.Utils.sortByPreviousUsage(vmconfig);
+	    return PVE.Utils.nextFreeDisk(clist, vmconfig);
+	},
+
+	addPanel: function(itemId, vmconfig, nextFreeDisk) {
+	    let me = this;
+	    return me.getView().add({
+		vmconfig,
+		border: false,
+		showAdvanced: Ext.state.Manager.getProvider().get('proxmox-advanced-cb'),
+		xtype: 'pveQemuHDInputPanel',
+		bind: {
+		    nodename: '{nodename}',
+		},
+		padding: '0 0 0 5',
+		itemId,
+		isCreate: true,
+		insideWizard: true,
+	    });
+	},
+
+	getBaseVMConfig: function() {
+	    let me = this;
+	    let vm = me.getViewModel();
+
+	    return {
+		ide2: 'media=cdrom',
+		scsihw: vm.get('current.scsihw'),
+		ostype: vm.get('current.ostype'),
+	    };
+	},
+
+	diskSorter: {
+	    sorterFn: function(rec1, rec2) {
+		let [, name1, id1] = PVE.Utils.bus_match.exec(rec1.data.name);
+		let [, name2, id2] = PVE.Utils.bus_match.exec(rec2.data.name);
+
+		if (name1 === name2) {
+		    return parseInt(id1, 10) - parseInt(id2, 10);
+		}
+
+		return name1 < name2 ? -1 : 1;
+	    },
+	},
+
+	deleteDisabled: () => false,
+    },
+});
-- 
2.30.2

[pve-devel] [PATCH manager v3 7/7] ui: window/Wizard: make it a little wider

[Dominik Csapak]

for the multi disk panel, we want it to be just a little wider, so
that all form fields are still readable

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/window/Wizard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/manager6/window/Wizard.js b/www/manager6/window/Wizard.js
index d12f4d90..98e46d44 100644
--- a/www/manager6/window/Wizard.js
+++ b/www/manager6/window/Wizard.js
@@ -3,7 +3,7 @@ Ext.define('PVE.window.Wizard', {
 
     activeTitle: '', // used for automated testing
 
-    width: 700,
+    width: 720,
     height: 510,
 
     modal: true,
-- 
2.30.2

Re: [pve-devel] [PATCH manager v3 0/7] multi disk/mp in wizard

[Lorenz Stechauner]

Hi,

everything looks and works as expected. No disk/mount point window looks 
broken.

Tested VM/CT creation wizard and adding of disks/mount points afterwards.

Tested-By: Lorenz Stechauner <l.stechauner@proxmox.com>

On 05.10.21 13:28, Dominik Csapak wrote:
> this series is a continuation of my previous multi tab / disk series[0]
>
> Introduces multi disk panels for vm and containers in the wizard.
>
> The UX is modeled after Dominics first attempt, but a very different
> approach code-wise. instead of having a seperate 'data' panel that
> contains the vm config, let the multi disk panel handle that
> and pass it through to the panels below. this way the HDEdit does
> not need a big code-change to get/set the config.
>
> changes from v2:
> * rebase on master (multi tab disk panel already applied)
> * refactor multi disk panel so that we can reuse it for containers
> * implement multi mp panel for container
>
> changes from v1:
> * fixed a bug which prevented the wizard from finishing
> * made the wizard a little wider so that the form field labes are
>    readable
> * added logic to use the ostype to determine the first disk if one
>    deleted all before
>
> 0: https://lists.proxmox.com/pipermail/pve-devel/2021-October/050215.html
>
> Dominik Csapak (7):
>    ui: lxc/MPEdit: add updateVMConfig
>    ui: lxc/MPEdit: fire diskidchange event
>    ui: lxc/MPEdit: add selectFree toggle
>    ui: add MultiDiskPanel
>    ui: add lxc/MultiMPEdit and use in lxc/CreateWizard
>    ui: add qemu/MultiHDEdit and use it in the wizard
>    ui: window/Wizard: make it a little wider
>
>   www/manager6/Makefile               |   3 +
>   www/manager6/lxc/CreateWizard.js    |   8 +-
>   www/manager6/lxc/MPEdit.js          |  16 +-
>   www/manager6/lxc/MultiMPEdit.js     |  79 ++++++++
>   www/manager6/panel/MultiDiskEdit.js | 272 ++++++++++++++++++++++++++++
>   www/manager6/qemu/CreateWizard.js   |   7 +-
>   www/manager6/qemu/HDEdit.js         |   9 +-
>   www/manager6/qemu/MultiHDEdit.js    |  62 +++++++
>   www/manager6/window/Wizard.js       |   2 +-
>   9 files changed, 444 insertions(+), 14 deletions(-)
>   create mode 100644 www/manager6/lxc/MultiMPEdit.js
>   create mode 100644 www/manager6/panel/MultiDiskEdit.js
>   create mode 100644 www/manager6/qemu/MultiHDEdit.js
>

Re: [pve-devel] [PATCH manager v3 0/7] multi disk/mp in wizard

[Aaron Lauterer]

Works quite well :)

Tested it on Chromium also in different zoom levels. I encountered a few minor glitches. When I added the max amount of disks / mount points and removed them in rapid succession, the scrolling would get messed up sometimes:
- horizontally a bit too wide with the delete button halfway hidden behind the scrollbar
- vertically a lot of empty space above the actual list

could be caused by the different zoom factor and extjs getting a bit confused. Usually those glitches were resolved by either removing a few more disks or by scrolling all the down/up.

When adding all possible mount points for a container, the GUI gets quite sluggish.
Also, the max mount points is 256 but I was only able to create mp0 to mp254. Unless the rootfs is also counted against that number, I would expect to be able to create mp0 to mp255. But did not investigate further and my assumption could be just wrong.

Besides that it works as expected and will definitely make life easier in certain situations.

Tested-By: Aaron Lauterer <a.lauterer@proxmox.com>

On 10/5/21 13:28, Dominik Csapak wrote:
> this series is a continuation of my previous multi tab / disk series[0]
> 
> Introduces multi disk panels for vm and containers in the wizard.
> 
> The UX is modeled after Dominics first attempt, but a very different
> approach code-wise. instead of having a seperate 'data' panel that
> contains the vm config, let the multi disk panel handle that
> and pass it through to the panels below. this way the HDEdit does
> not need a big code-change to get/set the config.
> 
> changes from v2:
> * rebase on master (multi tab disk panel already applied)
> * refactor multi disk panel so that we can reuse it for containers
> * implement multi mp panel for container
> 
> changes from v1:
> * fixed a bug which prevented the wizard from finishing
> * made the wizard a little wider so that the form field labes are
>    readable
> * added logic to use the ostype to determine the first disk if one
>    deleted all before
> 
> 0: https://lists.proxmox.com/pipermail/pve-devel/2021-October/050215.html
> 
> Dominik Csapak (7):
>    ui: lxc/MPEdit: add updateVMConfig
>    ui: lxc/MPEdit: fire diskidchange event
>    ui: lxc/MPEdit: add selectFree toggle
>    ui: add MultiDiskPanel
>    ui: add lxc/MultiMPEdit and use in lxc/CreateWizard
>    ui: add qemu/MultiHDEdit and use it in the wizard
>    ui: window/Wizard: make it a little wider
> 
>   www/manager6/Makefile               |   3 +
>   www/manager6/lxc/CreateWizard.js    |   8 +-
>   www/manager6/lxc/MPEdit.js          |  16 +-
>   www/manager6/lxc/MultiMPEdit.js     |  79 ++++++++
>   www/manager6/panel/MultiDiskEdit.js | 272 ++++++++++++++++++++++++++++
>   www/manager6/qemu/CreateWizard.js   |   7 +-
>   www/manager6/qemu/HDEdit.js         |   9 +-
>   www/manager6/qemu/MultiHDEdit.js    |  62 +++++++
>   www/manager6/window/Wizard.js       |   2 +-
>   9 files changed, 444 insertions(+), 14 deletions(-)
>   create mode 100644 www/manager6/lxc/MultiMPEdit.js
>   create mode 100644 www/manager6/panel/MultiDiskEdit.js
>   create mode 100644 www/manager6/qemu/MultiHDEdit.js
> 

[pve-devel] applied-series: [PATCH manager v3 0/7] multi disk/mp in wizard

[Thomas Lamprecht]

On 05.10.21 13:28, Dominik Csapak wrote:
> Dominik Csapak (7):
>   ui: lxc/MPEdit: add updateVMConfig
>   ui: lxc/MPEdit: fire diskidchange event
>   ui: lxc/MPEdit: add selectFree toggle
>   ui: add MultiDiskPanel
>   ui: add lxc/MultiMPEdit and use in lxc/CreateWizard
>   ui: add qemu/MultiHDEdit and use it in the wizard
>   ui: window/Wizard: make it a little wider
> 
>  www/manager6/Makefile               |   3 +
>  www/manager6/lxc/CreateWizard.js    |   8 +-
>  www/manager6/lxc/MPEdit.js          |  16 +-
>  www/manager6/lxc/MultiMPEdit.js     |  79 ++++++++
>  www/manager6/panel/MultiDiskEdit.js | 272 ++++++++++++++++++++++++++++
>  www/manager6/qemu/CreateWizard.js   |   7 +-
>  www/manager6/qemu/HDEdit.js         |   9 +-
>  www/manager6/qemu/MultiHDEdit.js    |  62 +++++++
>  www/manager6/window/Wizard.js       |   2 +-
>  9 files changed, 444 insertions(+), 14 deletions(-)
>  create mode 100644 www/manager6/lxc/MultiMPEdit.js
>  create mode 100644 www/manager6/panel/MultiDiskEdit.js
>  create mode 100644 www/manager6/qemu/MultiHDEdit.js
> 

applied series with Aaron's and Lorenz's T-b, thanks!