public inbox for pve-devel@lists.proxmox.com
 help / color / mirror / Atom feed
* [pve-devel] [PATCH manager 1/2] ui: BulkActions: rework filters and include tags
@ 2023-10-30 12:58 Dominik Csapak
  2023-10-30 12:58 ` [pve-devel] [PATCH manager 2/2] ui: BulkAction: add clear filters button Dominik Csapak
  2023-11-06 16:01 ` [pve-devel] [PATCH manager 1/2] ui: BulkActions: rework filters and include tags Thomas Lamprecht
  0 siblings, 2 replies; 6+ messages in thread
From: Dominik Csapak @ 2023-10-30 12:58 UTC (permalink / raw)
  To: pve-devel

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:
* manually set the labelWidths for the fields, otherwise it breaks
  the ones in the fieldset.
* 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>
---
 www/manager6/form/VMSelector.js   |  10 +-
 www/manager6/window/BulkAction.js | 261 +++++++++++++++++++++++++++++-
 2 files changed, 269 insertions(+), 2 deletions(-)

diff --git a/www/manager6/form/VMSelector.js b/www/manager6/form/VMSelector.js
index d59847f2..8186ea99 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-full',
+
     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 949e167e..333d5d30 100644
--- a/www/manager6/window/BulkAction.js
+++ b/www/manager6/window/BulkAction.js
@@ -59,12 +59,14 @@ Ext.define('PVE.window.BulkAction', {
 		    name: 'target',
 		    disallowedNodes: [me.nodename],
 		    fieldLabel: gettext('Target node'),
+		    labelWidth: 300,
 		    allowBlank: false,
 		    onlineValidator: true,
 		},
 		{
 		    xtype: 'proxmoxintegerfield',
 		    name: 'maxworkers',
+		    labelWidth: 300,
 		    minValue: 1,
 		    maxValue: 100,
 		    value: 1,
@@ -75,6 +77,7 @@ Ext.define('PVE.window.BulkAction', {
 		    xtype: 'fieldcontainer',
 		    fieldLabel: gettext('Allow local disk migration'),
 		    layout: 'hbox',
+		    labelWidth: 300,
 		    items: [{
 			xtype: 'proxmoxcheckbox',
 			name: 'with-local-disks',
@@ -112,6 +115,7 @@ Ext.define('PVE.window.BulkAction', {
 		{
 		    xtype: 'proxmoxcheckbox',
 		    name: 'force-stop',
+		    labelWidth: 120,
 		    fieldLabel: gettext('Force Stop'),
 		    boxLabel: gettext('Force stop guest if shutdown times out.'),
 		    checked: true,
@@ -121,6 +125,7 @@ Ext.define('PVE.window.BulkAction', {
 		    xtype: 'proxmoxintegerfield',
 		    name: 'timeout',
 		    fieldLabel: gettext('Timeout (s)'),
+		    labelWidth: 120,
 		    emptyText: '180',
 		    minValue: 0,
 		    maxValue: 7200,
@@ -129,6 +134,260 @@ Ext.define('PVE.window.BulkAction', {
 	    );
 	}
 
+	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]);
+	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 = [];
+	    ['status', 'pool', 'type', 'hastate'].forEach((filter) => {
+		let selected = me.down(`#${filter}filter`).getValue() ?? [];
+		if (selected.length) {
+		    filterCount++;
+		    arrayFiltersData.push([filter, [...selected]]);
+		}
+	    });
+	    let includeTags = me.down('#includetagfilter').getValue() ?? [];
+	    if (includeTags.length) {
+		filterCount++;
+	    }
+	    let excludeTags = me.down('#excludetagfilter').getValue() ?? [];
+	    if (excludeTags.length) {
+		filterCount++;
+	    }
+	    let vmid = me.down('#vmidfilter').getValue();
+	    if (vmid) {
+		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 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);
+		let vmidFilter = !vmid || value.data.vmid === vmid;
+
+		return name && arrayFilters && includeFilter && excludeFilter && vmidFilter;
+	    };
+	    me.down('#vms').getStore().setFilters({
+		id: 'customFilter',
+		filterFn,
+	    });
+	    me.down('#vms').checkChange();
+	};
+
+	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'),
+			    multiSelect: true,
+			    editable: false,
+			    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,
+			    multiSelect: true,
+			    store: [
+				['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: 'pveGuestIDSelector',
+			    itemId: 'vmidfilter',
+			    fieldLabel: gettext('VMID'),
+			    allowBlank: true,
+			    name: 'vmid',
+			    listeners: {
+				change: filterChange,
+			    },
+			},
+		    ],
+		},
+	    ],
+	});
+
 	items.push({
 	    xtype: 'vmselector',
 	    itemId: 'vms',
@@ -137,6 +396,7 @@ Ext.define('PVE.window.BulkAction', {
 	    height: 300,
 	    selectAll: true,
 	    allowBlank: false,
+	    plugins: '',
 	    nodename: me.nodename,
 	    action: me.action,
 	    listeners: {
@@ -159,7 +419,6 @@ Ext.define('PVE.window.BulkAction', {
 		align: 'stretch',
 	    },
 	    fieldDefaults: {
-		labelWidth: me.action === 'migrateall' ? 300 : 120,
 		anchor: '100%',
 	    },
 	    items: items,
-- 
2.39.2




^ permalink raw reply	[flat|nested] 6+ messages in thread

end of thread, other threads:[~2023-11-08 13:26 UTC | newest]

Thread overview: 6+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-10-30 12:58 [pve-devel] [PATCH manager 1/2] ui: BulkActions: rework filters and include tags Dominik Csapak
2023-10-30 12:58 ` [pve-devel] [PATCH manager 2/2] ui: BulkAction: add clear filters button Dominik Csapak
2023-11-06 16:01 ` [pve-devel] [PATCH manager 1/2] ui: BulkActions: rework filters and include tags Thomas Lamprecht
2023-11-08 12:14   ` Dominik Csapak
2023-11-08 12:38     ` Thomas Lamprecht
2023-11-08 13:26       ` Dominik Csapak

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal