From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 34C5F9E13E for ; Mon, 30 Oct 2023 13:58:13 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 1D6A7F199 for ; Mon, 30 Oct 2023 13:58:13 +0100 (CET) Received: from bookworm-dev.localdomain (unknown [94.136.29.99]) by firstgate.proxmox.com (Proxmox) with ESMTP for ; Mon, 30 Oct 2023 13:58:11 +0100 (CET) Received: by bookworm-dev.localdomain (Postfix, from userid 1000) id 8BB0F6035B; Mon, 30 Oct 2023 13:58:11 +0100 (CET) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Mon, 30 Oct 2023 13:58:10 +0100 Message-Id: <20231030125811.11759-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.39.2 MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.385 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment RDNS_NONE 0.793 Delivered to internal network by a host with no rDNS SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH manager 1/2] ui: BulkActions: rework filters and include tags X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Mon, 30 Oct 2023 12:58:13 -0000 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 --- 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