From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
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 30FE6A08FF
for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:48:34 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 09F7B1363C
for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:48:04 +0100 (CET)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
[94.136.29.106])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256)
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS
for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:48:02 +0100 (CET)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 2F54547711
for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:48:02 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Thu, 9 Nov 2023 11:47:59 +0100
Message-Id: <20231109104800.2263189-2-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20231109104800.2263189-1-d.csapak@proxmox.com>
References: <20231109104800.2263189-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.017 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
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
T_SCC_BODY_TEXT_LINE -0.01 -
URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more
information. [value.data]
Subject: [pve-devel] [PATCH manager v3 2/3] ui: bulk actions: 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 <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Thu, 09 Nov 2023 10:48:34 -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 <d.csapak@proxmox.com>
---
changes since v2:
* removed accidentally commited clear button, was a rebase mistake. it
is added in the next patch
www/manager6/form/VMSelector.js | 10 +-
www/manager6/window/BulkAction.js | 278 +++++++++++++++++++++++++++++-
2 files changed, 281 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..1ffc7538 100644
--- a/www/manager6/window/BulkAction.js
+++ b/www/manager6/window/BulkAction.js
@@ -136,6 +136,273 @@ 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,
+ },
+ },
+ ],
+ },
+ ],
+ });
+
items.push({
xtype: 'vmselector',
itemId: 'vms',
@@ -144,15 +411,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 +431,6 @@ Ext.define('PVE.window.BulkAction', {
align: 'stretch',
},
fieldDefaults: {
- labelWidth: me.action === 'migrateall' ? 300 : 120,
anchor: '100%',
},
items: items,
@@ -194,5 +458,7 @@ Ext.define('PVE.window.BulkAction', {
submitBtn.setDisabled(!valid);
});
form.isValid();
+
+ filterChange();
},
});
--
2.30.2