[pve-devel] [PATCH manager v2 1/3] ui: bulk actions: reorder fields

[pve-devel] [PATCH manager v2 1/3] ui: bulk actions: reorder fields

[Dominik Csapak]

to use less vertical space

also remove the local-storage warning since this is not that helpful

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
new in v2
 www/manager6/window/BulkAction.js | 75 +++++++++++++++++--------------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/www/manager6/window/BulkAction.js b/www/manager6/window/BulkAction.js
index 949e167e..950b454d 100644
--- a/www/manager6/window/BulkAction.js
+++ b/www/manager6/window/BulkAction.js
@@ -55,51 +55,52 @@ Ext.define('PVE.window.BulkAction', {
 	if (me.action === 'migrateall') {
 	    items.push(
 		{
-		    xtype: 'pveNodeSelector',
-		    name: 'target',
-		    disallowedNodes: [me.nodename],
-		    fieldLabel: gettext('Target node'),
-		    allowBlank: false,
-		    onlineValidator: true,
-		},
-		{
-		    xtype: 'proxmoxintegerfield',
-		    name: 'maxworkers',
-		    minValue: 1,
-		    maxValue: 100,
-		    value: 1,
-		    fieldLabel: gettext('Parallel jobs'),
-		    allowBlank: false,
+		    xtype: 'fieldcontainer',
+		    layout: 'hbox',
+		    items: [{
+			flex: 1,
+			xtype: 'pveNodeSelector',
+			name: 'target',
+			disallowedNodes: [me.nodename],
+			fieldLabel: gettext('Target node'),
+			labelWidth: 200,
+			allowBlank: false,
+			onlineValidator: true,
+			padding: '0 10 0 0',
+		    },
+		    {
+			xtype: 'proxmoxintegerfield',
+			name: 'maxworkers',
+			minValue: 1,
+			maxValue: 100,
+			value: 1,
+			fieldLabel: gettext('Parallel jobs'),
+			allowBlank: false,
+			flex: 1,
+		    }],
 		},
 		{
 		    xtype: 'fieldcontainer',
-		    fieldLabel: gettext('Allow local disk migration'),
 		    layout: 'hbox',
 		    items: [{
 			xtype: 'proxmoxcheckbox',
+			fieldLabel: gettext('Allow local disk migration'),
 			name: 'with-local-disks',
+			labelWidth: 200,
 			checked: true,
 			uncheckedValue: 0,
-			listeners: {
-			    change: (cb, val) => me.down('#localdiskwarning').setVisible(val),
-			},
+			flex: 1,
+			padding: '0 10 0 0',
 		    },
 		    {
-			itemId: 'localdiskwarning',
+			itemId: 'lxcwarning',
 			xtype: 'displayfield',
-			flex: 1,
-			padding: '0 0 0 10',
 			userCls: 'pmx-hint',
-			value: 'Note: Migration with local disks might take long.',
+			value: 'Warning: Running CTs will be migrated in Restart Mode.',
+			hidden: true, // only visible if running container chosen
+			flex: 1,
 		    }],
 		},
-		{
-		    itemId: 'lxcwarning',
-		    xtype: 'displayfield',
-		    userCls: 'pmx-hint',
-		    value: 'Warning: Running CTs will be migrated in Restart Mode.',
-		    hidden: true, // only visible if running container chosen
-		},
 	    );
 	} else if (me.action === 'startall') {
 	    items.push({
@@ -108,25 +109,31 @@ Ext.define('PVE.window.BulkAction', {
 		value: 1,
 	    });
 	} else if (me.action === 'stopall') {
-	    items.push(
-		{
+	    items.push({
+		xtype: 'fieldcontainer',
+		layout: 'hbox',
+		items: [{
 		    xtype: 'proxmoxcheckbox',
 		    name: 'force-stop',
+		    labelWidth: 120,
 		    fieldLabel: gettext('Force Stop'),
 		    boxLabel: gettext('Force stop guest if shutdown times out.'),
 		    checked: true,
 		    uncheckedValue: 0,
+		    flex: 1,
 		},
 		{
 		    xtype: 'proxmoxintegerfield',
 		    name: 'timeout',
 		    fieldLabel: gettext('Timeout (s)'),
+		    labelWidth: 120,
 		    emptyText: '180',
 		    minValue: 0,
 		    maxValue: 7200,
 		    allowBlank: true,
-		},
-	    );
+		    flex: 1,
+		}],
+	    });
 	}
 
 	items.push({
-- 
2.30.2

[pve-devel] [PATCH manager v2 2/3] ui: bulk actions: rework filters and include tags

[Dominik Csapak]

This moves the filters out of the grid header for the BulkActions and
puts them into their own fieldset above the grid. With that, we can
easily include a tags filter (one include and one exclude list).

The filter fieldset is collapsible and shows the active filters in
parenthesis. aside from that the filter should be the same as before.

To achieve the result, we regenerate the filterFn on every change of
every filter field, and set it with an 'id' so that only that filter is
overridden each time.

To make this work, we have to change three tiny details:
* change the counting in the 'getErrors' of the VMSelector, so that we
  actually get the count of selected VMs, not the one from the
  selectionModel
* override the plugins to '' in the BulkAction windows, so that e.g. in
  the backup window we still have the filters in the grid header
  (we could add a filter box there too, but that is already very crowded
  and would take up too much space for now)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* no changing of labelWidths, happens now in previous patch
* use circle tags instead of full
* correctly refresh the lxc warning in case the filter changed
* make type and status filter not mulitselect
* remove vmid filter

 www/manager6/form/VMSelector.js   |  10 +-
 www/manager6/window/BulkAction.js | 294 +++++++++++++++++++++++++++++-
 2 files changed, 297 insertions(+), 7 deletions(-)

diff --git a/www/manager6/form/VMSelector.js b/www/manager6/form/VMSelector.js
index d59847f2..43e91749 100644
--- a/www/manager6/form/VMSelector.js
+++ b/www/manager6/form/VMSelector.js
@@ -18,6 +18,8 @@ Ext.define('PVE.form.VMSelector', {
 	sorters: 'vmid',
     },
 
+    userCls: 'proxmox-tags-circle',
+
     columnsDeclaration: [
 	{
 	    header: 'ID',
@@ -80,6 +82,12 @@ Ext.define('PVE.form.VMSelector', {
 		},
 	    },
 	},
+	{
+	    header: gettext('Tags'),
+	    dataIndex: 'tags',
+	    renderer: tags => PVE.Utils.renderTags(tags, PVE.UIOptions.tagOverrides),
+	    flex: 1,
+	},
 	{
 	    header: 'HA ' + gettext('Status'),
 	    dataIndex: 'hastate',
@@ -186,7 +194,7 @@ Ext.define('PVE.form.VMSelector', {
     getErrors: function(value) {
 	let me = this;
 	if (!me.isDisabled() && me.allowBlank === false &&
-	    me.getSelectionModel().getCount() === 0) {
+	    me.getValue().length === 0) {
 	    me.addBodyCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']);
 	    return [gettext('No VM selected')];
 	}
diff --git a/www/manager6/window/BulkAction.js b/www/manager6/window/BulkAction.js
index 950b454d..cc561bd6 100644
--- a/www/manager6/window/BulkAction.js
+++ b/www/manager6/window/BulkAction.js
@@ -136,6 +136,289 @@ Ext.define('PVE.window.BulkAction', {
 	    });
 	}
 
+	let refreshLxcWarning = function(vmids, records) {
+	    let showWarning = records.some(
+		item => vmids.includes(item.data.vmid) && item.data.type === 'lxc' && item.data.status === 'running',
+	    );
+	    me.down('#lxcwarning').setVisible(showWarning);
+	};
+
+	let defaultStatus = me.action === 'migrateall' ? '' : me.action === 'startall' ? 'stopped' : 'running';
+
+	let statusMap = [];
+	let poolMap = [];
+	let haMap = [];
+	let tagMap = [];
+	PVE.data.ResourceStore.each((rec) => {
+	    if (['qemu', 'lxc'].indexOf(rec.data.type) !== -1) {
+		statusMap[rec.data.status] = true;
+	    }
+	    if (rec.data.type === 'pool') {
+		poolMap[rec.data.pool] = true;
+	    }
+	    if (rec.data.hastate !== "") {
+		haMap[rec.data.hastate] = true;
+	    }
+	    if (rec.data.tags !== "") {
+		rec.data.tags.split(/[,; ]/).forEach((tag) => {
+		    if (tag !== '') {
+			tagMap[tag] = true;
+		    }
+		});
+	    }
+	});
+
+	let statusList = Object.keys(statusMap).map(key => [key, key]);
+	statusList.unshift(['', gettext('All')]);
+	let poolList = Object.keys(poolMap).map(key => [key, key]);
+	let tagList = Object.keys(tagMap).map(key => ({ value: key }));
+	let haList = Object.keys(haMap).map(key => [key, key]);
+
+	let filterChange = function() {
+	    let nameValue = me.down('#namefilter').getValue();
+	    let filterCount = 0;
+
+	    if (nameValue !== '') {
+		filterCount++;
+	    }
+
+	    let arrayFiltersData = [];
+	    ['pool', 'hastate'].forEach((filter) => {
+		let selected = me.down(`#${filter}filter`).getValue() ?? [];
+		if (selected.length) {
+		    filterCount++;
+		    arrayFiltersData.push([filter, [...selected]]);
+		}
+	    });
+
+	    let singleFiltersData = [];
+	    ['status', 'type'].forEach((filter) => {
+		let selected = me.down(`#${filter}filter`).getValue() ?? '';
+		if (selected.length) {
+		    filterCount++;
+		    singleFiltersData.push([filter, selected]);
+		}
+	    });
+
+	    let includeTags = me.down('#includetagfilter').getValue() ?? [];
+	    if (includeTags.length) {
+		filterCount++;
+	    }
+	    let excludeTags = me.down('#excludetagfilter').getValue() ?? [];
+	    if (excludeTags.length) {
+		filterCount++;
+	    }
+
+	    let fieldSet = me.down('#filters');
+	    if (filterCount) {
+		fieldSet.setTitle(Ext.String.format(gettext('Filters ({0})'), filterCount));
+	    } else {
+		fieldSet.setTitle(gettext('Filters'));
+	    }
+
+	    let filterFn = function(value) {
+		let name = value.data.name.toLowerCase().indexOf(nameValue.toLowerCase()) !== -1;
+		let arrayFilters = arrayFiltersData.every(([filter, selected]) =>
+		    !selected.length || selected.indexOf(value.data[filter]) !== -1);
+		let singleFilters = singleFiltersData.every(([filter, selected]) =>
+		    !selected.length || value.data[filter].indexOf(selected) !== -1);
+		let tags = value.data.tags.split(/[;, ]/).filter(t => !!t);
+		let includeFilter = !includeTags.length || tags.some(tag => includeTags.indexOf(tag) !== -1);
+		let excludeFilter = !excludeTags.length || tags.every(tag => excludeTags.indexOf(tag) === -1);
+
+		return name && arrayFilters && singleFilters && includeFilter && excludeFilter;
+	    };
+	    let vmselector = me.down('#vms');
+	    vmselector.getStore().setFilters({
+		id: 'customFilter',
+		filterFn,
+	    });
+	    vmselector.checkChange();
+	    if (me.action === 'migrateall') {
+		let records = vmselector.getSelection();
+		refreshLxcWarning(vmselector.getValue(), records);
+	    }
+	};
+
+	items.push({
+	    xtype: 'fieldset',
+	    itemId: 'filters',
+	    collapsible: true,
+	    title: gettext('Filters'),
+	    layout: 'hbox',
+	    items: [
+		{
+		    xtype: 'container',
+		    flex: 1,
+		    padding: 5,
+		    layout: {
+			type: 'vbox',
+			align: 'stretch',
+		    },
+		    defaults: {
+			listeners: {
+			    change: filterChange,
+			},
+			isFormField: false,
+		    },
+		    items: [
+			{
+			    fieldLabel: gettext("Name"),
+			    itemId: 'namefilter',
+			    xtype: 'textfield',
+			},
+			{
+			    xtype: 'combobox',
+			    itemId: 'statusfilter',
+			    fieldLabel: gettext("Status"),
+			    emptyText: gettext('All'),
+			    editable: false,
+			    value: defaultStatus,
+			    store: statusList,
+			},
+			{
+			    xtype: 'combobox',
+			    itemId: 'poolfilter',
+			    fieldLabel: gettext("Pool"),
+			    emptyText: gettext('All'),
+			    editable: false,
+			    multiSelect: true,
+			    store: poolList,
+			},
+		    ],
+		},
+		{
+		    xtype: 'container',
+		    layout: {
+			type: 'vbox',
+			align: 'stretch',
+		    },
+		    flex: 1,
+		    padding: 5,
+		    defaults: {
+			listeners: {
+			    change: filterChange,
+			},
+			isFormField: false,
+		    },
+		    items: [
+			{
+			    xtype: 'combobox',
+			    itemId: 'typefilter',
+			    fieldLabel: gettext("Type"),
+			    emptyText: gettext('All'),
+			    editable: false,
+			    value: '',
+			    store: [
+				['', gettext('All')],
+				['lxc', gettext('CT')],
+				['qemu', gettext('VM')],
+			    ],
+			},
+			{
+			    xtype: 'proxmoxComboGrid',
+			    itemId: 'includetagfilter',
+			    fieldLabel: gettext("Include Tags"),
+			    emptyText: gettext('All'),
+			    editable: false,
+			    multiSelect: true,
+			    valueField: 'value',
+			    displayField: 'value',
+			    listConfig: {
+				userCls: 'proxmox-tags-full',
+				columns: [
+				    {
+					dataIndex: 'value',
+					flex: 1,
+					renderer: value =>
+					    PVE.Utils.renderTags(value, PVE.UIOptions.tagOverrides),
+				    },
+				],
+			    },
+			    store: {
+				data: tagList,
+			    },
+			    listeners: {
+				change: filterChange,
+			    },
+			},
+			{
+			    xtype: 'proxmoxComboGrid',
+			    itemId: 'excludetagfilter',
+			    fieldLabel: gettext("Exclude Tags"),
+			    emptyText: gettext('None'),
+			    multiSelect: true,
+			    editable: false,
+			    valueField: 'value',
+			    displayField: 'value',
+			    listConfig: {
+				userCls: 'proxmox-tags-full',
+				columns: [
+				    {
+					dataIndex: 'value',
+					flex: 1,
+					renderer: value =>
+					    PVE.Utils.renderTags(value, PVE.UIOptions.tagOverrides),
+				    },
+				],
+			    },
+			    store: {
+				data: tagList,
+			    },
+			    listeners: {
+				change: filterChange,
+			    },
+			},
+		    ],
+		},
+		{
+		    xtype: 'container',
+		    layout: {
+			type: 'vbox',
+			align: 'stretch',
+		    },
+		    flex: 1,
+		    padding: 5,
+		    defaults: {
+			listeners: {
+			    change: filterChange,
+			},
+			isFormField: false,
+		    },
+		    items: [
+			{
+			    xtype: 'combobox',
+			    itemId: 'hastatefilter',
+			    fieldLabel: gettext("HA status"),
+			    emptyText: gettext('All'),
+			    multiSelect: true,
+			    editable: false,
+			    store: haList,
+			    listeners: {
+				change: filterChange,
+			    },
+			},
+			{
+			    xtype: 'container',
+			    layout: {
+				type: 'vbox',
+				align: 'end',
+			    },
+			    items: [
+				{
+				    xtype: 'button',
+				    itemId: 'clearBtn',
+				    text: gettext('Clear Filters'),
+				    disabled: true,
+				    handler: clearFilters,
+				},
+			    ],
+			},
+		    ],
+		},
+	    ],
+	});
+
 	items.push({
 	    xtype: 'vmselector',
 	    itemId: 'vms',
@@ -144,15 +427,13 @@ Ext.define('PVE.window.BulkAction', {
 	    height: 300,
 	    selectAll: true,
 	    allowBlank: false,
+	    plugins: '',
 	    nodename: me.nodename,
-	    action: me.action,
 	    listeners: {
 		selectionchange: function(vmselector, records) {
 		    if (me.action === 'migrateall') {
-			let showWarning = records.some(
-			    item => item.data.type === 'lxc' && item.data.status === 'running',
-			);
-			me.down('#lxcwarning').setVisible(showWarning);
+			let vmids = me.down('#vms').getValue();
+			refreshLxcWarning(vmids, records);
 		    }
 		},
 	    },
@@ -166,7 +447,6 @@ Ext.define('PVE.window.BulkAction', {
 		align: 'stretch',
 	    },
 	    fieldDefaults: {
-		labelWidth: me.action === 'migrateall' ? 300 : 120,
 		anchor: '100%',
 	    },
 	    items: items,
@@ -194,5 +474,7 @@ Ext.define('PVE.window.BulkAction', {
 	    submitBtn.setDisabled(!valid);
 	});
 	form.isValid();
+
+	filterChange();
     },
 });
-- 
2.30.2

[pve-devel] [PATCH manager v2 3/3] ui: bulk actions: add clear filters button

[Dominik Csapak]

to be able to clear all of them at once

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
no changes
 www/manager6/window/BulkAction.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/www/manager6/window/BulkAction.js b/www/manager6/window/BulkAction.js
index cc561bd6..d3650f83 100644
--- a/www/manager6/window/BulkAction.js
+++ b/www/manager6/window/BulkAction.js
@@ -174,6 +174,13 @@ Ext.define('PVE.window.BulkAction', {
 	let tagList = Object.keys(tagMap).map(key => ({ value: key }));
 	let haList = Object.keys(haMap).map(key => [key, key]);
 
+	let clearFilters = function() {
+	    me.down('#namefilter').setValue('');
+	    ['name', 'status', 'pool', 'type', 'hastate', 'includetag', 'excludetag', 'vmid'].forEach((filter) => {
+		me.down(`#${filter}filter`).setValue('');
+	    });
+	};
+
 	let filterChange = function() {
 	    let nameValue = me.down('#namefilter').getValue();
 	    let filterCount = 0;
@@ -210,10 +217,13 @@ Ext.define('PVE.window.BulkAction', {
 	    }
 
 	    let fieldSet = me.down('#filters');
+	    let clearBtn = me.down('#clearBtn');
 	    if (filterCount) {
 		fieldSet.setTitle(Ext.String.format(gettext('Filters ({0})'), filterCount));
+		clearBtn.setDisabled(false);
 	    } else {
 		fieldSet.setTitle(gettext('Filters'));
+		clearBtn.setDisabled(true);
 	    }
 
 	    let filterFn = function(value) {
@@ -414,6 +424,22 @@ Ext.define('PVE.window.BulkAction', {
 				},
 			    ],
 			},
+			{
+			    xtype: 'container',
+			    layout: {
+				type: 'vbox',
+				align: 'end',
+			    },
+			    items: [
+				{
+				    xtype: 'button',
+				    itemId: 'clearBtn',
+				    text: gettext('Clear Filters'),
+				    disabled: true,
+				    handler: clearFilters,
+				},
+			    ],
+			},
 		    ],
 		},
 	    ],
-- 
2.30.2

Re: [pve-devel] [PATCH manager v2 1/3] ui: bulk actions: reorder fields

[Thomas Lamprecht]

Am 08/11/2023 um 16:45 schrieb Dominik Csapak:
> to use less vertical space
> 
> also remove the local-storage warning since this is not that helpful
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> new in v2
>  www/manager6/window/BulkAction.js | 75 +++++++++++++++++--------------
>  1 file changed, 41 insertions(+), 34 deletions(-)
> 

for the record, this series got obsoleted by v3:

https://lists.proxmox.com/pipermail/pve-devel/2023-November/059930.html