From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager 5/7] fix #4490: ui: add column filters in Backup Job edit window
Date: Mon, 6 Mar 2023 15:23:33 +0100 [thread overview]
Message-ID: <20230306142335.3858041-6-d.csapak@proxmox.com> (raw)
In-Reply-To: <20230306142335.3858041-1-d.csapak@proxmox.com>
by replacing the manual vm grid implementation and reusing the
VMSelector we already have. Since this is a full-fledged form field, we
can drop the complicated selection tracking / reselecting that we did
by saving into a hidden field.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/dc/Backup.js | 130 ++++----------------------------------
1 file changed, 14 insertions(+), 116 deletions(-)
diff --git a/www/manager6/dc/Backup.js b/www/manager6/dc/Backup.js
index 9d3059841..d5e8bf20c 100644
--- a/www/manager6/dc/Backup.js
+++ b/www/manager6/dc/Backup.js
@@ -18,10 +18,6 @@ Ext.define('PVE.dc.BackupEdit', {
method = 'PUT';
}
- let vmidField = Ext.create('Ext.form.field.Hidden', {
- name: 'vmid',
- });
-
// 'value' can be assigned a string or an array
let selModeField = Ext.create('Proxmox.form.KVComboBox', {
xtype: 'proxmoxKVComboBox',
@@ -36,19 +32,6 @@ Ext.define('PVE.dc.BackupEdit', {
value: '',
});
- let sm = Ext.create('Ext.selection.CheckboxModel', {
- mode: 'SIMPLE',
- listeners: {
- selectionchange: function(model, selected) {
- let sel = selected.map(record => record.data.vmid);
- // to avoid endless recursion suspend the vmidField change
- // event temporary as it calls us again
- vmidField.suspendEvent('change');
- vmidField.setValue(sel);
- vmidField.resumeEvent('change');
- },
- },
- });
let storagesel = Ext.create('PVE.form.StorageSelector', {
fieldLabel: gettext('Storage'),
@@ -72,66 +55,27 @@ Ext.define('PVE.dc.BackupEdit', {
},
});
- let store = new Ext.data.Store({
- model: 'PVEResources',
- sorters: {
- property: 'vmid',
- direction: 'ASC',
- },
- });
-
- let vmgrid = Ext.createWidget('grid', {
- store: store,
- border: true,
+ let vmgrid = Ext.createWidget('vmselector', {
height: 300,
- selModel: sm,
+ name: 'vmid',
disabled: true,
- columns: [
- {
- header: 'ID',
- dataIndex: 'vmid',
- width: 60,
- },
- {
- header: gettext('Node'),
- dataIndex: 'node',
- },
- {
- header: gettext('Status'),
- dataIndex: 'uptime',
- renderer: function(value) {
- if (value) {
- return Proxmox.Utils.runningText;
- } else {
- return Proxmox.Utils.stoppedText;
- }
- },
- },
- {
- header: gettext('Name'),
- dataIndex: 'name',
- flex: 1,
- },
- {
- header: gettext('Type'),
- dataIndex: 'type',
- },
- ],
+ allowBlank: false,
+ columnSelection: ['vmid', 'node', 'status', 'name', 'type'],
});
let selectPoolMembers = function(poolid) {
if (!poolid) {
return;
}
- sm.deselectAll(true);
- store.filter([
+ vmgrid.selModel.deselectAll(true);
+ vmgrid.getStore().filter([
{
id: 'poolFilter',
property: 'pool',
value: poolid,
},
]);
- sm.selectAll(true);
+ vmgrid.selModel.selectAll(true);
};
let selPool = Ext.create('PVE.form.PoolSelector', {
@@ -157,12 +101,13 @@ Ext.define('PVE.dc.BackupEdit', {
change: function(f, value) {
storagesel.setNodename(value);
let mode = selModeField.getValue();
+ let store = vmgrid.getStore();
store.clearFilter();
store.filterBy(function(rec) {
return !value || rec.get('node') === value;
});
if (mode === 'all') {
- sm.selectAll(true);
+ vmgrid.selModel.selectAll(true);
}
if (mode === 'pool') {
selectPoolMembers(selPool.value);
@@ -218,7 +163,6 @@ Ext.define('PVE.dc.BackupEdit', {
defaultValue: 1,
checked: true,
},
- vmidField,
];
let ipanel = Ext.create('Proxmox.panel.InputPanel', {
@@ -282,37 +226,17 @@ Ext.define('PVE.dc.BackupEdit', {
},
});
- let update_vmid_selection = function(list, mode) {
- if (mode !== 'all' && mode !== 'pool') {
- sm.deselectAll(true);
- if (list) {
- Ext.Array.each(list.split(','), function(vmid) {
- var rec = store.findRecord('vmid', vmid, 0, false, true, true);
- if (rec) {
- sm.select(rec, true);
- }
- });
- }
- }
- };
-
- vmidField.on('change', function(f, value) {
- let mode = selModeField.getValue();
- update_vmid_selection(value, mode);
- });
-
selModeField.on('change', function(f, value, oldValue) {
if (oldValue === 'pool') {
- store.removeFilter('poolFilter');
+ vmgrid.getStore().removeFilter('poolFilter');
}
- if (oldValue === 'all') {
- sm.deselectAll(true);
- vmidField.setValue('');
+ if (oldValue === 'all' || oldValue === 'pool') {
+ vmgrid.selModel.deselectAll(true);
}
if (value === 'all') {
- sm.selectAll(true);
+ vmgrid.selModel.selectAll(true);
vmgrid.setDisabled(true);
} else {
vmgrid.setDisabled(false);
@@ -320,7 +244,7 @@ Ext.define('PVE.dc.BackupEdit', {
if (value === 'pool') {
vmgrid.setDisabled(true);
- vmidField.setValue('');
+ vmgrid.selModel.deselectAll(true);
selPool.setVisible(true);
selPool.setDisabled(false);
selPool.allowBlank = false;
@@ -330,32 +254,8 @@ Ext.define('PVE.dc.BackupEdit', {
selPool.setDisabled(true);
selPool.allowBlank = true;
}
- let list = vmidField.getValue();
- update_vmid_selection(list, value);
});
- let reload = function() {
- store.load({
- params: {
- type: 'vm',
- },
- callback: function() {
- let node = nodesel.getValue();
- store.clearFilter();
- store.filterBy(rec => !node || node.length === 0 || rec.get('node') === node);
- let list = vmidField.getValue();
- let mode = selModeField.getValue();
- if (mode === 'all') {
- sm.selectAll(true);
- } else if (mode === 'pool') {
- selectPoolMembers(selPool.value);
- } else {
- update_vmid_selection(list, mode);
- }
- },
- });
- };
-
Ext.applyIf(me, {
subject: gettext("Backup Job"),
url: url,
@@ -481,8 +381,6 @@ Ext.define('PVE.dc.BackupEdit', {
},
});
}
-
- reload();
},
});
--
2.30.2
next prev parent reply other threads:[~2023-03-06 14:24 UTC|newest]
Thread overview: 10+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-03-06 14:23 [pve-devel] [PATCH manager 0/7] backup edit window improvements Dominik Csapak
2023-03-06 14:23 ` [pve-devel] [PATCH manager 1/7] ui: VMSelector: columns customizable Dominik Csapak
2023-03-06 14:23 ` [pve-devel] [PATCH manager 2/7] ui: VMSelector: improve {set, get}Value handling with a loading store Dominik Csapak
2023-03-06 14:23 ` [pve-devel] [PATCH manager 3/7] ui: VMSelector: change from filter to load parameters Dominik Csapak
2023-03-06 14:23 ` [pve-devel] [PATCH manager 4/7] ui: VMSelector: correctly change invalid class on en/disable Dominik Csapak
2023-03-11 17:34 ` Thomas Lamprecht
2023-03-06 14:23 ` Dominik Csapak [this message]
2023-03-06 14:23 ` [pve-devel] [PATCH manager 6/7] fix #4239: ui: show selected but non-existing vmids in backup edit Dominik Csapak
2023-03-06 14:23 ` [pve-devel] [PATCH manager 7/7] ui: BackupEdit: refactor edit window into declarative style Dominik Csapak
2023-03-14 10:37 ` [pve-devel] applied: [PATCH manager 0/7] backup edit window improvements Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230306142335.3858041-6-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox