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>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
- 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',
// 'value' can be assigned a string or an array
let selModeField = Ext.create('Proxmox.form.KVComboBox', {
xtype: 'proxmoxKVComboBox',
- 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'),
let storagesel = Ext.create('PVE.form.StorageSelector', {
fieldLabel: gettext('Storage'),
- 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', {
- 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;
}
});
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,
},
]);
{
id: 'poolFilter',
property: 'pool',
value: poolid,
},
]);
+ vmgrid.selModel.selectAll(true);
};
let selPool = Ext.create('PVE.form.PoolSelector', {
};
let selPool = Ext.create('PVE.form.PoolSelector', {
change: function(f, value) {
storagesel.setNodename(value);
let mode = selModeField.getValue();
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') {
store.clearFilter();
store.filterBy(function(rec) {
return !value || rec.get('node') === value;
});
if (mode === 'all') {
+ vmgrid.selModel.selectAll(true);
}
if (mode === 'pool') {
selectPoolMembers(selPool.value);
}
if (mode === 'pool') {
selectPoolMembers(selPool.value);
defaultValue: 1,
checked: true,
},
defaultValue: 1,
checked: true,
},
];
let ipanel = Ext.create('Proxmox.panel.InputPanel', {
];
let ipanel = Ext.create('Proxmox.panel.InputPanel', {
- 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') {
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);
+ vmgrid.selModel.selectAll(true);
vmgrid.setDisabled(true);
} else {
vmgrid.setDisabled(false);
vmgrid.setDisabled(true);
} else {
vmgrid.setDisabled(false);
if (value === 'pool') {
vmgrid.setDisabled(true);
if (value === 'pool') {
vmgrid.setDisabled(true);
- vmidField.setValue('');
+ vmgrid.selModel.deselectAll(true);
selPool.setVisible(true);
selPool.setDisabled(false);
selPool.allowBlank = false;
selPool.setVisible(true);
selPool.setDisabled(false);
selPool.allowBlank = false;
selPool.setDisabled(true);
selPool.allowBlank = true;
}
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,
Ext.applyIf(me, {
subject: gettext("Backup Job"),
url: url,