* [pbs-devel] [PATCH proxmox-backup v2 1/4] ui: add GroupSelector
2021-11-29 14:39 [pbs-devel] [PATCH proxmox-backup v2 0/4] ui for group-filters Dominik Csapak
@ 2021-11-29 14:39 ` Dominik Csapak
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 2/4] ui: add GroupFilter form field(container) Dominik Csapak
` (3 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2021-11-29 14:39 UTC (permalink / raw)
To: pbs-devel
to select either a group from a datastore
for now it is expected to set the data in the store manually
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/Makefile | 1 +
www/form/GroupSelector.js | 54 +++++++++++++++++++++++++++++++++++++++
2 files changed, 55 insertions(+)
create mode 100644 www/form/GroupSelector.js
diff --git a/www/Makefile b/www/Makefile
index 616c3e12..c975387c 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -42,6 +42,7 @@ JSSRC= \
form/DataStoreSelector.js \
form/CalendarEvent.js \
form/PermissionPathSelector.js \
+ form/GroupSelector.js \
data/RunningTasksStore.js \
button/TaskButton.js \
config/UserView.js \
diff --git a/www/form/GroupSelector.js b/www/form/GroupSelector.js
new file mode 100644
index 00000000..4bf51104
--- /dev/null
+++ b/www/form/GroupSelector.js
@@ -0,0 +1,54 @@
+Ext.define('pbs-groups', {
+ extend: 'Ext.data.Model',
+ fields: [
+ 'backup-type',
+ 'backup-id',
+ {
+ name: 'group',
+ type: 'string',
+ convert: function(value, record) {
+ if (record.data['backup-type'] && record.data['backup-id']) {
+ return `${record.data['backup-type']}/${record.data['backup-id']}`;
+ }
+ return value;
+ },
+ },
+ ],
+ proxy: {
+ type: 'proxmox',
+ },
+});
+
+Ext.define('PBS.form.GroupSelector', {
+ extend: 'Proxmox.form.ComboGrid',
+ alias: 'widget.pbsGroupSelector',
+
+ allowBlank: false,
+ autoSelect: false,
+ notFoundIsValid: true,
+ editable: true,
+ valueField: 'group',
+ displayField: 'group',
+
+ store: {
+ sorters: 'group',
+ model: 'pbs-groups',
+ },
+
+ listConfig: {
+ minHeight: 80,
+ emptyText: gettext('No Groups'),
+ viewConfig: {
+ deferEmptyText: false,
+ },
+ columns: [
+ {
+ header: gettext('Group'),
+ sortable: true,
+ dataIndex: 'group',
+ renderer: Ext.String.htmlEncode,
+ flex: 1,
+ },
+ ],
+ },
+});
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread* [pbs-devel] [PATCH proxmox-backup v2 2/4] ui: add GroupFilter form field(container)
2021-11-29 14:39 [pbs-devel] [PATCH proxmox-backup v2 0/4] ui for group-filters Dominik Csapak
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 1/4] ui: add GroupSelector Dominik Csapak
@ 2021-11-29 14:39 ` Dominik Csapak
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 3/4] ui: tape/BackupJobEdit: add second tab with group filters Dominik Csapak
` (2 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2021-11-29 14:39 UTC (permalink / raw)
To: pbs-devel
this contains a grid + button + hidden field which lets the user
add group filters one by one. the first column is the type selector
(type, group, regex) and the second column shows the relevant
input field (groupselector, kvcombobox for type, and textfield for regex)
i had to hack a little to get access to the widgets of the
fieldcontainer, since we cannot simply access the widget of a column
from another column (which we need to show the correct one when changing
the type), also we cannot traverse the widget hirachy in the usual way,
since extjs seems to build it differently for widgetcolumns.
to solve this, i added references of the widgets to the record, and a
reference of the record to the widgets. since this is now a cyclic
reference, i solve that in 'removeFilter' and in 'beforedestroy' of the grid
by removing the references again
also contains a small css style to remove the padding in the rows
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/Makefile | 1 +
www/css/ext6-pbs.css | 5 +
www/form/GroupFilter.js | 371 ++++++++++++++++++++++++++++++++++++++++
3 files changed, 377 insertions(+)
create mode 100644 www/form/GroupFilter.js
diff --git a/www/Makefile b/www/Makefile
index c975387c..455fbeec 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -43,6 +43,7 @@ JSSRC= \
form/CalendarEvent.js \
form/PermissionPathSelector.js \
form/GroupSelector.js \
+ form/GroupFilter.js \
data/RunningTasksStore.js \
button/TaskButton.js \
config/UserView.js \
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index 88095dd8..f283bf0b 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -280,3 +280,8 @@ span.snapshot-comment-column {
.info-pointer div.right-aligned {
cursor: pointer;
}
+
+.x-fieldcontainer-default-cell > .x-grid-cell-inner {
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
diff --git a/www/form/GroupFilter.js b/www/form/GroupFilter.js
new file mode 100644
index 00000000..453152e2
--- /dev/null
+++ b/www/form/GroupFilter.js
@@ -0,0 +1,371 @@
+Ext.define('PBS.form.GroupFilter', {
+ extend: 'Ext.form.FieldContainer',
+ alias: 'widget.pbsGroupFilter',
+ mixins: ['Proxmox.Mixin.CBind'],
+
+ cindData: {},
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ removeReferences: function(record) {
+ for (const widget of Object.keys(record.widgets || {})) {
+ delete record[widget];
+ }
+
+ delete record.widgets;
+ },
+
+ cleanupReferences: function(grid) {
+ let me = this;
+
+ // break cyclic reference
+ grid.getStore()?.each(me.removeReferences);
+ },
+
+ removeFilter: function(field) {
+ let me = this;
+ let record = field.getWidgetRecord();
+ if (record === undefined) {
+ // this is sometimes called before a record/column is initialized
+ return;
+ }
+
+ // break cyclic reference
+ me.removeReferences(record);
+
+ me.lookup('grid').getStore().remove(record);
+ me.updateRealField();
+ },
+
+ addFilter: function() {
+ let me = this;
+ me.lookup('grid').getStore().add({});
+ me.updateRealField();
+ },
+
+ onTypeChange: function(field, value) {
+ let me = this;
+ let record = field.getWidgetRecord();
+ if (record === undefined) {
+ return;
+ }
+
+ record.set('type', value);
+ record.commit();
+ if (record.widgets) {
+ me.setInputValue(record.widgets, record);
+ }
+ me.updateRealField();
+ },
+
+ onInputChange: function(field, value) {
+ let me = this;
+ if (value === null) {
+ return;
+ }
+ let record = field.record;
+ if (record === undefined) {
+ // this is sometimes called before a record/column is initialized
+ return;
+ }
+ record.set('input', value);
+ record.commit();
+
+ me.updateRealField();
+ },
+
+ parseGroupFilter: function(filter) {
+ let [, type, input] = filter.match(/^(type|group|regex):(.*)$/);
+ return {
+ type,
+ input,
+ };
+ },
+
+ onValueChange: function(field, values) {
+ let me = this;
+ let grid = me.lookup('grid');
+ if (!values || values.length === 0) {
+ grid.getStore().removeAll();
+ return;
+ }
+ let records = values.map((filter) => me.parseGroupFilter(filter));
+ grid.getStore().setData(records);
+ },
+
+ setInputValue: function(widgets, rec) {
+ let { type, regex, group } = widgets;
+
+ type.setHidden(true);
+ type.setDisabled(true);
+ type.setValue(undefined);
+
+ regex.setHidden(true);
+ regex.setDisabled(true);
+ regex.setValue(undefined);
+
+ group.setHidden(true);
+ group.setDisabled(true);
+ group.setValue(undefined);
+
+ let field;
+ if (rec.data.type === 'type') {
+ field = type;
+ } else if (rec.data.type === 'regex') {
+ field = regex;
+ } else if (rec.data.type === 'group') {
+ field = group;
+ } else {
+ return;
+ }
+
+ field.setHidden(false);
+ field.setDisabled(false);
+ field.setValue(rec.data.input);
+ },
+
+ newInputColumn: function(col, widget, rec) {
+ let me = this;
+ let view = me.getView();
+
+ let type = widget.down('pbsGroupTypeSelector');
+ let regex = widget.down('textfield[type=regex]');
+ let group = widget.down('pbsGroupSelector');
+
+ group.getStore().setData(view.dsStore.getData());
+
+ // add a widget reference to the record so we can acces them
+ // from the other column
+ rec.widgets = {
+ type,
+ regex,
+ group,
+ };
+
+ // add a record reference so we can access the record from
+ // the change handler
+ type.record = rec;
+ regex.record = rec;
+ group.record = rec;
+
+ // CAUTION we just created a cyclic reference, we have to delete
+ // that on filter removal!
+
+ me.setInputValue(rec.widgets, rec);
+ },
+
+ updateRealField: function() {
+ let me = this;
+
+ let filter = [];
+ me.lookup('grid').getStore().each((rec) => {
+ if (rec.data.type && rec.data.input) {
+ filter.push(`${rec.data.type}:${rec.data.input}`);
+ }
+ });
+
+ let field = me.lookup('realfield');
+ field.suspendEvent('change');
+ field.setValue(filter);
+ field.resumeEvent('change');
+ },
+
+ control: {
+ 'grid pbsGroupFilterTypeSelector': {
+ change: 'onTypeChange',
+ },
+ 'grid fieldcontainer field': {
+ change: 'onInputChange',
+ },
+ 'grid button': {
+ click: 'removeFilter',
+ },
+ 'field[reference=realfield]': {
+ change: 'onValueChange',
+ },
+ 'grid': {
+ beforedestroy: 'cleanupReferences',
+ },
+ },
+ },
+
+ onDestroy: function() {
+ let me = this;
+
+ me.dsStore.destroy();
+ delete me.dsStore;
+ },
+
+ setDsStoreUrl: function(url) {
+ let me = this;
+ me.dsStore.getProxy().setUrl(url);
+ },
+
+ updateGroupSelectors: function() {
+ let me = this;
+ let url;
+ if (me.remote) {
+ url = `/api2/json/config/remote/${me.remote}/scan/${me.datastore}/groups`;
+ } else if (me.datastore) {
+ url = `/api2/json/admin/datastore/${me.datastore}/groups`;
+ }
+ me.setDsStoreUrl(url);
+ me.dsStore.load({
+ callback: (records) => {
+ me.query('pbsGroupSelector').forEach((selector) => {
+ selector.getStore().setData(records);
+ });
+ },
+ });
+ },
+
+ setLocalDatastore: function(datastore) {
+ let me = this;
+ if (me.remote === undefined && me.datastore === datastore) {
+ return;
+ }
+ me.remote = undefined;
+ me.datastore = datastore;
+ me.updateGroupSelectors();
+ },
+
+ setRemoteDatastore: function(remote, datastore) {
+ let me = this;
+ if (me.remote === remote && me.datastore === datastore) {
+ return;
+ }
+ me.remote = remote;
+ me.datastore = datastore;
+ me.updateGroupSelectors();
+ },
+
+ items: [
+ {
+ xtype: 'grid',
+ reference: 'grid',
+ margin: '0 0 5 0',
+ scrollable: true,
+ height: 300,
+ store: {
+ fields: ['type', 'input'],
+ },
+ emptyText: gettext('Include all groups'),
+ viewConfig: {
+ deferEmptyText: false,
+ },
+ columns: [
+ {
+ text: gettext('Filter Type'),
+ xtype: 'widgetcolumn',
+ dataIndex: 'type',
+ flex: 1,
+ widget: {
+ xtype: 'pbsGroupFilterTypeSelector',
+ isFormField: false,
+ },
+ },
+ {
+ text: gettext('Filter Value'),
+ xtype: 'widgetcolumn',
+ flex: 1,
+ onWidgetAttach: 'newInputColumn',
+ widget: {
+ padding: 0,
+ bodyPadding: 0,
+ xtype: 'fieldcontainer',
+ layout: 'fit',
+ defaults: {
+ margin: 0,
+ },
+ items: [
+ {
+ hidden: true,
+ xtype: 'pbsGroupTypeSelector',
+ isFormField: false,
+ },
+ {
+ hidden: true,
+ xtype: 'textfield',
+ type: 'regex',
+ isFormField: false,
+ },
+ {
+ hidden: true,
+ xtype: 'pbsGroupSelector',
+ isFormField: false,
+ },
+ ],
+ },
+ },
+ {
+ xtype: 'widgetcolumn',
+ width: 40,
+ widget: {
+ xtype: 'button',
+ iconCls: 'fa fa-trash-o',
+ },
+ },
+ ],
+ },
+ {
+ xtype: 'hiddenfield',
+ reference: 'realfield',
+ setValue: function(value) {
+ let me = this;
+ me.value = value;
+ me.checkChange();
+ },
+ getValue: function() {
+ return this.value;
+ },
+ getSubmitValue: function() {
+ return this.value;
+ },
+ cbind: {
+ name: '{name}',
+ },
+ },
+ {
+ xtype: 'button',
+ text: gettext('Add'),
+ iconCls: 'fa fa-plus-circle',
+ handler: 'addFilter',
+ },
+ ],
+
+ initComponent: function() {
+ let me = this;
+ me.callParent();
+ me.dsStore = Ext.create('Ext.data.Store', {
+ sorters: 'group',
+ model: 'pbs-groups',
+ });
+ },
+});
+
+Ext.define('PBS.form.GroupFilterTypeSelector', {
+ extend: 'Proxmox.form.KVComboBox',
+ alias: 'widget.pbsGroupFilterTypeSelector',
+
+ allowBlank: false,
+
+ comboItems: [
+ ['type', gettext('Type')],
+ ['group', gettext('Group')],
+ ['regex', gettext('Regex')],
+ ],
+});
+
+Ext.define('PBS.form.GroupTypeSelector', {
+ extend: 'Proxmox.form.KVComboBox',
+ alias: 'widget.pbsGroupTypeSelector',
+
+ allowBlank: false,
+
+ comboItems: [
+ ['vm', gettext('VM')],
+ ['ct', gettext('CT')],
+ ['host', gettext('Host')],
+ ],
+});
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread* [pbs-devel] [PATCH proxmox-backup v2 3/4] ui: tape/BackupJobEdit: add second tab with group filters
2021-11-29 14:39 [pbs-devel] [PATCH proxmox-backup v2 0/4] ui for group-filters Dominik Csapak
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 1/4] ui: add GroupSelector Dominik Csapak
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 2/4] ui: add GroupFilter form field(container) Dominik Csapak
@ 2021-11-29 14:39 ` Dominik Csapak
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 4/4] ui: SyncJobEdit: " Dominik Csapak
2021-12-01 5:49 ` [pbs-devel] applied: [PATCH proxmox-backup v2 0/4] ui for group-filters Dietmar Maurer
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2021-11-29 14:39 UTC (permalink / raw)
To: pbs-devel
adds a second tab and adapts the styling to our usual one (border/padding)
adds a change listener to the datastore selector to change it on the
group filters
remaining changes are mostly indentation changes
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/tape/window/TapeBackupJob.js | 231 +++++++++++++++++--------------
1 file changed, 128 insertions(+), 103 deletions(-)
diff --git a/www/tape/window/TapeBackupJob.js b/www/tape/window/TapeBackupJob.js
index 72821115..266360ce 100644
--- a/www/tape/window/TapeBackupJob.js
+++ b/www/tape/window/TapeBackupJob.js
@@ -11,6 +11,8 @@ Ext.define('PBS.TapeManagement.BackupJobEdit', {
fieldDefaults: { labelWidth: 120 },
+ bodyPadding: 0,
+
cbindData: function(initialConfig) {
let me = this;
@@ -28,117 +30,140 @@ Ext.define('PBS.TapeManagement.BackupJobEdit', {
},
items: {
- xtype: 'inputpanel',
- onGetValues: function(values) {
- let me = this;
-
- if (values['export-media-set'] && !me.up('pbsTapeBackupJobEdit').isCreate) {
- Proxmox.Utils.assemble_field_data(values, { "delete": 'eject-media' });
- }
- PBS.Utils.delete_if_default(values, 'notify-user');
- return values;
- },
- column1: [
- {
- xtype: 'pmxDisplayEditField',
- name: 'id',
- fieldLabel: gettext('Job ID'),
- renderer: Ext.htmlEncode,
- allowBlank: false,
- cbind: {
- editable: '{isCreate}',
- },
- },
- {
- xtype: 'pbsDataStoreSelector',
- fieldLabel: gettext('Local Datastore'),
- name: 'store',
- },
- {
- xtype: 'pbsMediaPoolSelector',
- fieldLabel: gettext('Media Pool'),
- name: 'pool',
- },
- {
- xtype: 'pbsDriveSelector',
- fieldLabel: gettext('Drive'),
- name: 'drive',
- },
+ xtype: 'tabpanel',
+ bodyPadding: 10,
+ border: 0,
+ items: [
{
- xtype: 'pmxUserSelector',
- name: 'notify-user',
- fieldLabel: gettext('Notify User'),
- emptyText: 'root@pam',
- allowBlank: true,
- value: null,
- renderer: Ext.String.htmlEncode,
- },
- ],
+ title: gettext('Options'),
+ xtype: 'inputpanel',
+ onGetValues: function(values) {
+ let me = this;
- column2: [
- {
- fieldLabel: gettext('Schedule'),
- xtype: 'pbsCalendarEvent',
- name: 'schedule',
- emptyText: gettext('none (disabled)'),
- cbind: {
- deleteEmpty: '{!isCreate}',
- value: '{scheduleValue}',
- },
- },
- {
- fieldLabel: gettext('Export Media-Set'),
- xtype: 'proxmoxcheckbox',
- name: 'export-media-set',
- cbind: {
- deleteEmpty: '{!isCreate}',
+ if (values['export-media-set'] && !me.up('pbsTapeBackupJobEdit').isCreate) {
+ Proxmox.Utils.assemble_field_data(values, { "delete": 'eject-media' });
+ }
+ PBS.Utils.delete_if_default(values, 'notify-user');
+ return values;
},
- listeners: {
- change: function(cb, value) {
- let me = this;
- let eject = me.up('window').down('proxmoxcheckbox[name=eject-media]');
- if (value) {
- eject.setValue(false);
- }
- eject.setDisabled(!!value);
+ column1: [
+ {
+ xtype: 'pmxDisplayEditField',
+ name: 'id',
+ fieldLabel: gettext('Job ID'),
+ renderer: Ext.htmlEncode,
+ allowBlank: false,
+ cbind: {
+ editable: '{isCreate}',
+ },
},
- },
- },
- {
- fieldLabel: gettext('Eject Media'),
- xtype: 'proxmoxcheckbox',
- name: 'eject-media',
- cbind: {
- deleteEmpty: '{!isCreate}',
- },
- },
- {
- fieldLabel: gettext('Latest Only'),
- xtype: 'proxmoxcheckbox',
- name: 'latest-only',
- cbind: {
- deleteEmpty: '{!isCreate}',
- },
- },
- ],
+ {
+ xtype: 'pbsDataStoreSelector',
+ fieldLabel: gettext('Local Datastore'),
+ name: 'store',
+ listeners: {
+ change: function(field, value) {
+ let me = this;
+ me.up('tabpanel').down('pbsGroupFilter').setLocalDatastore(value);
+ },
+ },
+ },
+ {
+ xtype: 'pbsMediaPoolSelector',
+ fieldLabel: gettext('Media Pool'),
+ name: 'pool',
+ },
+ {
+ xtype: 'pbsDriveSelector',
+ fieldLabel: gettext('Drive'),
+ name: 'drive',
+ },
+ {
+ xtype: 'pmxUserSelector',
+ name: 'notify-user',
+ fieldLabel: gettext('Notify User'),
+ emptyText: 'root@pam',
+ allowBlank: true,
+ value: null,
+ renderer: Ext.String.htmlEncode,
+ },
+ ],
- columnB: [
- {
- fieldLabel: gettext('Backup Groups'),
- xtype: 'displayfield',
- name: 'group-filter',
- renderer: v => v ? Ext.String.htmlEncode(v) : gettext('All'),
- cbind: {
- hidden: '{isCreate}',
- },
+ column2: [
+ {
+ fieldLabel: gettext('Schedule'),
+ xtype: 'pbsCalendarEvent',
+ name: 'schedule',
+ emptyText: gettext('none (disabled)'),
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ value: '{scheduleValue}',
+ },
+ },
+ {
+ fieldLabel: gettext('Export Media-Set'),
+ xtype: 'proxmoxcheckbox',
+ name: 'export-media-set',
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ },
+ listeners: {
+ change: function(cb, value) {
+ let me = this;
+ let eject = me.up('window').down('proxmoxcheckbox[name=eject-media]');
+ if (value) {
+ eject.setValue(false);
+ }
+ eject.setDisabled(!!value);
+ },
+ },
+ },
+ {
+ fieldLabel: gettext('Eject Media'),
+ xtype: 'proxmoxcheckbox',
+ name: 'eject-media',
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ },
+ },
+ {
+ fieldLabel: gettext('Latest Only'),
+ xtype: 'proxmoxcheckbox',
+ name: 'latest-only',
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ },
+ },
+ ],
+
+ columnB: [
+ {
+ fieldLabel: gettext('Comment'),
+ xtype: 'proxmoxtextfield',
+ name: 'comment',
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ },
+ },
+ ],
},
{
- fieldLabel: gettext('Comment'),
- xtype: 'proxmoxtextfield',
- name: 'comment',
- cbind: {
- deleteEmpty: '{!isCreate}',
+ xtype: 'inputpanel',
+ onGetValues: function(values) {
+ PBS.Utils.delete_if_default(values, 'group-filter');
+ if (Ext.isArray(values['group-filter']) && values['group-filter'].length === 0) {
+ delete values['group-filter'];
+ values.delete = 'group-filter';
+ }
+ return values;
},
+ title: gettext('Group Filter'),
+ items: [
+ {
+ xtype: 'pbsGroupFilter',
+ name: 'group-filter',
+ },
+ ],
},
],
},
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread* [pbs-devel] [PATCH proxmox-backup v2 4/4] ui: SyncJobEdit: add second tab with group filters
2021-11-29 14:39 [pbs-devel] [PATCH proxmox-backup v2 0/4] ui for group-filters Dominik Csapak
` (2 preceding siblings ...)
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 3/4] ui: tape/BackupJobEdit: add second tab with group filters Dominik Csapak
@ 2021-11-29 14:39 ` Dominik Csapak
2021-12-01 5:49 ` [pbs-devel] applied: [PATCH proxmox-backup v2 0/4] ui for group-filters Dietmar Maurer
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2021-11-29 14:39 UTC (permalink / raw)
To: pbs-devel
adds a second tab and adapts the styling to our usual one (border/padding)
adds a change listener to the remote datastore selector to change the
remote + datastore on the group filters
remaining changes are mostly indentation changes
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/window/SyncJobEdit.js | 233 +++++++++++++++++++++-----------------
1 file changed, 130 insertions(+), 103 deletions(-)
diff --git a/www/window/SyncJobEdit.js b/www/window/SyncJobEdit.js
index 3437ef23..8abfacf7 100644
--- a/www/window/SyncJobEdit.js
+++ b/www/window/SyncJobEdit.js
@@ -98,6 +98,8 @@ Ext.define('PBS.window.SyncJobEdit', {
subject: gettext('SyncJob'),
+ bodyPadding: 0,
+
fieldDefaults: { labelWidth: 120 },
defaultFocus: 'proxmoxtextfield[name=comment]',
@@ -118,117 +120,142 @@ Ext.define('PBS.window.SyncJobEdit', {
},
items: {
- xtype: 'inputpanel',
- onGetValues: function(values) {
- let me = this;
-
- if (!values.id && me.up('pbsSyncJobEdit').isCreate) {
- values.id = 's-' + Ext.data.identifier.Uuid.Global.generate().slice(0, 13);
- }
- if (!me.isCreate) {
- PBS.Utils.delete_if_default(values, 'rate-in');
- if (typeof values.delete === 'string') {
- values.delete = values.delete.split(',');
- }
- }
- return values;
- },
- column1: [
- {
- xtype: 'pmxDisplayEditField',
- fieldLabel: gettext('Local Datastore'),
- name: 'store',
- submitValue: true,
- cbind: {
- editable: '{editDatastore}',
- value: '{datastore}',
- },
- editConfig: {
- xtype: 'pbsDataStoreSelector',
- allowBlank: false,
- },
- },
- {
- fieldLabel: gettext('Local Owner'),
- xtype: 'pbsAuthidSelector',
- name: 'owner',
- cbind: {
- value: '{authid}',
- deleteEmpty: '{!isCreate}',
- },
- },
+ xtype: 'tabpanel',
+ bodyPadding: 10,
+ border: 0,
+ items: [
{
- fieldLabel: gettext('Remove vanished'),
- xtype: 'proxmoxcheckbox',
- name: 'remove-vanished',
- autoEl: {
- tag: 'div',
- 'data-qtip': gettext('Remove snapshots from local datastore if they vanished from source datastore?'),
+ title: 'Options',
+ xtype: 'inputpanel',
+ onGetValues: function(values) {
+ let me = this;
+
+ if (!values.id && me.up('pbsSyncJobEdit').isCreate) {
+ values.id = 's-' + Ext.data.identifier.Uuid.Global.generate().slice(0, 13);
+ }
+ if (!me.isCreate) {
+ PBS.Utils.delete_if_default(values, 'rate-in');
+ if (typeof values.delete === 'string') {
+ values.delete = values.delete.split(',');
+ }
+ }
+ return values;
},
- uncheckedValue: false,
- value: false,
- },
- ],
+ column1: [
+ {
+ xtype: 'pmxDisplayEditField',
+ fieldLabel: gettext('Local Datastore'),
+ name: 'store',
+ submitValue: true,
+ cbind: {
+ editable: '{editDatastore}',
+ value: '{datastore}',
+ },
+ editConfig: {
+ xtype: 'pbsDataStoreSelector',
+ allowBlank: false,
+ },
+ },
+ {
+ fieldLabel: gettext('Local Owner'),
+ xtype: 'pbsAuthidSelector',
+ name: 'owner',
+ cbind: {
+ value: '{authid}',
+ deleteEmpty: '{!isCreate}',
+ },
+ },
+ {
+ fieldLabel: gettext('Remove vanished'),
+ xtype: 'proxmoxcheckbox',
+ name: 'remove-vanished',
+ autoEl: {
+ tag: 'div',
+ 'data-qtip': gettext('Remove snapshots from local datastore if they vanished from source datastore?'),
+ },
+ uncheckedValue: false,
+ value: false,
+ },
+ ],
- column2: [
- {
- fieldLabel: gettext('Source Remote'),
- xtype: 'pbsRemoteSelector',
- allowBlank: false,
- name: 'remote',
- listeners: {
- change: function(f, value) {
- let me = this;
- let remoteStoreField = me.up('pbsSyncJobEdit').down('field[name=remote-store]');
- remoteStoreField.setRemote(value);
+ column2: [
+ {
+ fieldLabel: gettext('Source Remote'),
+ xtype: 'pbsRemoteSelector',
+ allowBlank: false,
+ name: 'remote',
+ listeners: {
+ change: function(f, value) {
+ let me = this;
+ let remoteStoreField = me.up('pbsSyncJobEdit').down('field[name=remote-store]');
+ remoteStoreField.setRemote(value);
+ },
+ },
},
- },
- },
- {
- fieldLabel: gettext('Source Datastore'),
- xtype: 'pbsRemoteStoreSelector',
- allowBlank: false,
- autoSelect: false,
- name: 'remote-store',
- disabled: true,
- },
- {
- fieldLabel: gettext('Sync Schedule'),
- xtype: 'pbsCalendarEvent',
- name: 'schedule',
- emptyText: gettext('none (disabled)'),
- cbind: {
- deleteEmpty: '{!isCreate}',
- value: '{scheduleValue}',
- },
- },
- {
- xtype: 'pmxBandwidthField',
- name: 'rate-in',
- fieldLabel: gettext('Rate Limit'),
- emptyText: gettext('Unlimited'),
- submitAutoScaledSizeUnit: true,
- // NOTE: handle deleteEmpty in onGetValues due to bandwidth field having a cbind too
- },
- ],
+ {
+ fieldLabel: gettext('Source Datastore'),
+ xtype: 'pbsRemoteStoreSelector',
+ allowBlank: false,
+ autoSelect: false,
+ name: 'remote-store',
+ disabled: true,
+ listeners: {
+ change: function(field, value) {
+ let me = this;
+ let remoteField = me.up('pbsSyncJobEdit').down('field[name=remote]');
+ let remote = remoteField.getValue();
+ me.up('tabpanel').down('pbsGroupFilter').setRemoteDatastore(remote, value);
+ },
+ },
+ },
+ {
+ fieldLabel: gettext('Sync Schedule'),
+ xtype: 'pbsCalendarEvent',
+ name: 'schedule',
+ emptyText: gettext('none (disabled)'),
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ value: '{scheduleValue}',
+ },
+ },
+ {
+ xtype: 'pmxBandwidthField',
+ name: 'rate-in',
+ fieldLabel: gettext('Rate Limit'),
+ emptyText: gettext('Unlimited'),
+ submitAutoScaledSizeUnit: true,
+ // NOTE: handle deleteEmpty in onGetValues due to bandwidth field having a cbind too
+ },
+ ],
- columnB: [
- {
- fieldLabel: gettext('Backup Groups'),
- xtype: 'displayfield',
- name: 'group-filter',
- renderer: v => v ? Ext.String.htmlEncode(v) : gettext('All'),
- cbind: {
- hidden: '{isCreate}',
- },
+ columnB: [
+ {
+ fieldLabel: gettext('Comment'),
+ xtype: 'proxmoxtextfield',
+ name: 'comment',
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ },
+ },
+ ],
},
{
- fieldLabel: gettext('Comment'),
- xtype: 'proxmoxtextfield',
- name: 'comment',
- cbind: {
- deleteEmpty: '{!isCreate}',
+ xtype: 'inputpanel',
+ onGetValues: function(values) {
+ PBS.Utils.delete_if_default(values, 'group-filter');
+ if (Ext.isArray(values['group-filter']) && values['group-filter'].length === 0) {
+ delete values['group-filter'];
+ values.delete = 'group-filter';
+ }
+ return values;
},
+ title: gettext('Group Filter'),
+ items: [
+ {
+ xtype: 'pbsGroupFilter',
+ name: 'group-filter',
+ },
+ ],
},
],
},
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread* [pbs-devel] applied: [PATCH proxmox-backup v2 0/4] ui for group-filters
2021-11-29 14:39 [pbs-devel] [PATCH proxmox-backup v2 0/4] ui for group-filters Dominik Csapak
` (3 preceding siblings ...)
2021-11-29 14:39 ` [pbs-devel] [PATCH proxmox-backup v2 4/4] ui: SyncJobEdit: " Dominik Csapak
@ 2021-12-01 5:49 ` Dietmar Maurer
4 siblings, 0 replies; 6+ messages in thread
From: Dietmar Maurer @ 2021-12-01 5:49 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Dominik Csapak
applied
^ permalink raw reply [flat|nested] 6+ messages in thread