ui: SyncJobEdit: add second tab with group filters
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>
This commit is contained in:
Dominik Csapak
Dietmar Maurer
parent
705f4b0d95
commit
ad72fda1d6
|
|
@ -98,6 +98,8 @@ Ext.define('PBS.window.SyncJobEdit', {
|
||||||
|
|
||||||
subject: gettext('SyncJob'),
|
subject: gettext('SyncJob'),
|
||||||
|
|
||||||
|
bodyPadding: 0,
|
||||||
|
|
||||||
fieldDefaults: { labelWidth: 120 },
|
fieldDefaults: { labelWidth: 120 },
|
||||||
defaultFocus: 'proxmoxtextfield[name=comment]',
|
defaultFocus: 'proxmoxtextfield[name=comment]',
|
||||||
|
|
||||||
|
|
@ -118,117 +120,142 @@ Ext.define('PBS.window.SyncJobEdit', {
|
||||||
},
|
},
|
||||||
|
|
||||||
items: {
|
items: {
|
||||||
xtype: 'inputpanel',
|
xtype: 'tabpanel',
|
||||||
onGetValues: function(values) {
|
bodyPadding: 10,
|
||||||
let me = this;
|
border: 0,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'Options',
|
||||||
|
xtype: 'inputpanel',
|
||||||
|
onGetValues: function(values) {
|
||||||
|
let me = this;
|
||||||
|
|
||||||
if (!values.id && me.up('pbsSyncJobEdit').isCreate) {
|
if (!values.id && me.up('pbsSyncJobEdit').isCreate) {
|
||||||
values.id = 's-' + Ext.data.identifier.Uuid.Global.generate().slice(0, 13);
|
values.id = 's-' + Ext.data.identifier.Uuid.Global.generate().slice(0, 13);
|
||||||
}
|
}
|
||||||
if (!me.isCreate) {
|
if (!me.isCreate) {
|
||||||
PBS.Utils.delete_if_default(values, 'rate-in');
|
PBS.Utils.delete_if_default(values, 'rate-in');
|
||||||
if (typeof values.delete === 'string') {
|
if (typeof values.delete === 'string') {
|
||||||
values.delete = values.delete.split(',');
|
values.delete = values.delete.split(',');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return values;
|
return values;
|
||||||
},
|
|
||||||
column1: [
|
|
||||||
{
|
|
||||||
xtype: 'pmxDisplayEditField',
|
|
||||||
fieldLabel: gettext('Local Datastore'),
|
|
||||||
name: 'store',
|
|
||||||
submitValue: true,
|
|
||||||
cbind: {
|
|
||||||
editable: '{editDatastore}',
|
|
||||||
value: '{datastore}',
|
|
||||||
},
|
},
|
||||||
editConfig: {
|
column1: [
|
||||||
xtype: 'pbsDataStoreSelector',
|
{
|
||||||
allowBlank: false,
|
xtype: 'pmxDisplayEditField',
|
||||||
},
|
fieldLabel: gettext('Local Datastore'),
|
||||||
},
|
name: 'store',
|
||||||
{
|
submitValue: true,
|
||||||
fieldLabel: gettext('Local Owner'),
|
cbind: {
|
||||||
xtype: 'pbsAuthidSelector',
|
editable: '{editDatastore}',
|
||||||
name: 'owner',
|
value: '{datastore}',
|
||||||
cbind: {
|
},
|
||||||
value: '{authid}',
|
editConfig: {
|
||||||
deleteEmpty: '{!isCreate}',
|
xtype: 'pbsDataStoreSelector',
|
||||||
},
|
allowBlank: false,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
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);
|
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
},
|
fieldLabel: gettext('Local Owner'),
|
||||||
{
|
xtype: 'pbsAuthidSelector',
|
||||||
fieldLabel: gettext('Source Datastore'),
|
name: 'owner',
|
||||||
xtype: 'pbsRemoteStoreSelector',
|
cbind: {
|
||||||
allowBlank: false,
|
value: '{authid}',
|
||||||
autoSelect: false,
|
deleteEmpty: '{!isCreate}',
|
||||||
name: 'remote-store',
|
},
|
||||||
disabled: true,
|
},
|
||||||
},
|
{
|
||||||
{
|
fieldLabel: gettext('Remove vanished'),
|
||||||
fieldLabel: gettext('Sync Schedule'),
|
xtype: 'proxmoxcheckbox',
|
||||||
xtype: 'pbsCalendarEvent',
|
name: 'remove-vanished',
|
||||||
name: 'schedule',
|
autoEl: {
|
||||||
emptyText: gettext('none (disabled)'),
|
tag: 'div',
|
||||||
cbind: {
|
'data-qtip': gettext('Remove snapshots from local datastore if they vanished from source datastore?'),
|
||||||
deleteEmpty: '{!isCreate}',
|
},
|
||||||
value: '{scheduleValue}',
|
uncheckedValue: false,
|
||||||
},
|
value: false,
|
||||||
},
|
},
|
||||||
{
|
],
|
||||||
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: [
|
column2: [
|
||||||
{
|
{
|
||||||
fieldLabel: gettext('Backup Groups'),
|
fieldLabel: gettext('Source Remote'),
|
||||||
xtype: 'displayfield',
|
xtype: 'pbsRemoteSelector',
|
||||||
name: 'group-filter',
|
allowBlank: false,
|
||||||
renderer: v => v ? Ext.String.htmlEncode(v) : gettext('All'),
|
name: 'remote',
|
||||||
cbind: {
|
listeners: {
|
||||||
hidden: '{isCreate}',
|
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,
|
||||||
|
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('Comment'),
|
||||||
|
xtype: 'proxmoxtextfield',
|
||||||
|
name: 'comment',
|
||||||
|
cbind: {
|
||||||
|
deleteEmpty: '{!isCreate}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
fieldLabel: gettext('Comment'),
|
xtype: 'inputpanel',
|
||||||
xtype: 'proxmoxtextfield',
|
onGetValues: function(values) {
|
||||||
name: 'comment',
|
PBS.Utils.delete_if_default(values, 'group-filter');
|
||||||
cbind: {
|
if (Ext.isArray(values['group-filter']) && values['group-filter'].length === 0) {
|
||||||
deleteEmpty: '{!isCreate}',
|
delete values['group-filter'];
|
||||||
|
values.delete = 'group-filter';
|
||||||
|
}
|
||||||
|
return values;
|
||||||
},
|
},
|
||||||
|
title: gettext('Group Filter'),
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
xtype: 'pbsGroupFilter',
|
||||||
|
name: 'group-filter',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue