mirror of
https://git.proxmox.com/git/proxmox-backup
synced 2025-06-15 02:17:22 +00:00
ui: Show if Filter includes or excludes
To make the UI compatible, the Group Filter dialogue has been extended by a second list, so it now features a list for all include filter and one for all exclude filters. Internally, all include as well as exclude filter are managed into one list. The 2 list view is just for a cleaner representation in the UI. Signed-off-by: Philipp Hufnagl <p.hufnagl@proxmox.com>
This commit is contained in:
Philipp Hufnagl
Wolfgang Bumiller
parent
59c9273698
commit
4e45d84fb3
@ -35,13 +35,36 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
// break cyclic reference
|
||||
me.removeReferences(record);
|
||||
|
||||
me.lookup('grid').getStore().remove(record);
|
||||
me.lookup('grid-include').getStore().remove(record);
|
||||
me.lookup('grid-exclude').getStore().remove(record);
|
||||
me.updateRealField();
|
||||
},
|
||||
|
||||
addFilter: function() {
|
||||
addIncludeFilter: function() {
|
||||
let me = this;
|
||||
me.lookup('grid').getStore().add({});
|
||||
me.lookup('grid-include').getStore().add({ behavior: 'include' });
|
||||
me.updateRealField();
|
||||
},
|
||||
|
||||
addExcludeFilter: function() {
|
||||
let me = this;
|
||||
me.lookup('grid-exclude').getStore().add({ behavior: 'exclude' });
|
||||
me.updateRealField();
|
||||
},
|
||||
|
||||
|
||||
onBehaviorChange: function(field, value) {
|
||||
let me = this;
|
||||
let record = field.getWidgetRecord();
|
||||
if (record === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
record.set('behavior', value);
|
||||
record.commit();
|
||||
if (record.widgets) {
|
||||
me.setInputValue(record.widgets, record);
|
||||
}
|
||||
me.updateRealField();
|
||||
},
|
||||
|
||||
@ -77,8 +100,12 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
},
|
||||
|
||||
parseGroupFilter: function(filter) {
|
||||
let [, type, input] = filter.match(/^(type|group|regex):(.*)$/);
|
||||
let [, behavior, type, input] = filter.match(/^(?:(exclude|include):)?(type|group|regex):(.*)$/);
|
||||
if (behavior === undefined) {
|
||||
behavior = "include";
|
||||
}
|
||||
return {
|
||||
behavior,
|
||||
type,
|
||||
input,
|
||||
};
|
||||
@ -86,13 +113,16 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
|
||||
onValueChange: function(field, values) {
|
||||
let me = this;
|
||||
let grid = me.lookup('grid');
|
||||
let grid_include = me.lookup('grid-include');
|
||||
let grid_exclude = me.lookup('grid-exclude');
|
||||
if (!values || values.length === 0) {
|
||||
grid.getStore().removeAll();
|
||||
grid_include.getStore().removeAll();
|
||||
grid_exclude.getStore().removeAll();
|
||||
return;
|
||||
}
|
||||
let records = values.map((filter) => me.parseGroupFilter(filter));
|
||||
grid.getStore().setData(records);
|
||||
grid_include.getStore().setData(records);
|
||||
grid_exclude.getStore().setData(records);
|
||||
},
|
||||
|
||||
setInputValue: function(widgets, rec) {
|
||||
@ -162,11 +192,20 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
let me = this;
|
||||
|
||||
let filter = [];
|
||||
me.lookup('grid').getStore().each((rec) => {
|
||||
me.lookup('grid-include').getStore().each((rec) => {
|
||||
if (rec.data.type && rec.data.input) {
|
||||
filter.push(`${rec.data.type}:${rec.data.input}`);
|
||||
}
|
||||
});
|
||||
me.lookup('grid-exclude').getStore().each((rec) => {
|
||||
if (rec.data.type && rec.data.input && rec.data.behavior) {
|
||||
let behavior_string = '';
|
||||
if (rec.data.behavior === 'exclude') {
|
||||
behavior_string = 'exclude:';
|
||||
}
|
||||
filter.push(`${behavior_string}${rec.data.type}:${rec.data.input}`);
|
||||
}
|
||||
});
|
||||
|
||||
let field = me.lookup('realfield');
|
||||
field.suspendEvent('change');
|
||||
@ -175,6 +214,9 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
},
|
||||
|
||||
control: {
|
||||
'grid pbsGroupBehaviorSelector': {
|
||||
change: 'onBehaviorChange',
|
||||
},
|
||||
'grid pbsGroupFilterTypeSelector': {
|
||||
change: 'onTypeChange',
|
||||
},
|
||||
@ -264,18 +306,133 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
|
||||
items: [
|
||||
{
|
||||
xtype: 'grid',
|
||||
reference: 'grid',
|
||||
xtype: 'pbsGroupFilterGrid',
|
||||
title: 'Include filters',
|
||||
margin: '0 0 5 0',
|
||||
scrollable: true,
|
||||
height: 300,
|
||||
reference: 'grid-include',
|
||||
store: {
|
||||
fields: ['type', 'input'],
|
||||
filters: [
|
||||
function(item) {
|
||||
return item.data.behavior === "include";
|
||||
},
|
||||
],
|
||||
},
|
||||
emptyText: gettext('Include all groups'),
|
||||
viewConfig: {
|
||||
deferEmptyText: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
xtype: 'container',
|
||||
layout: {
|
||||
type: 'hbox',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
xtype: 'button',
|
||||
text: gettext('Add include'),
|
||||
iconCls: 'fa fa-plus-circle',
|
||||
handler: 'addIncludeFilter',
|
||||
},
|
||||
{
|
||||
xtype: 'box',
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
xtype: 'box',
|
||||
style: 'margin: 3px 0px;',
|
||||
html: `<span class="pmx-hint">${gettext('Note')}</span>: `
|
||||
+ gettext('Filters are additive'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
xtype: 'pbsGroupFilterGrid',
|
||||
title: 'Exclude filters',
|
||||
margin: '10 0 5 0',
|
||||
reference: 'grid-exclude',
|
||||
store: {
|
||||
filters: [
|
||||
function(item) {
|
||||
return item.data.behavior === "exclude";
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
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: 'container',
|
||||
layout: {
|
||||
type: 'hbox',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
xtype: 'button',
|
||||
text: gettext('Add exclude'),
|
||||
iconCls: 'fa fa-plus-circle',
|
||||
handler: 'addExcludeFilter',
|
||||
},
|
||||
{
|
||||
xtype: 'box',
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
xtype: 'box',
|
||||
style: 'margin: 3px 0px;',
|
||||
html: `<span class="pmx-hint">${gettext('Note')}</span>: `
|
||||
+ gettext('Exclude filters will be applied after include filters'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
initComponent: function() {
|
||||
let me = this;
|
||||
me.callParent();
|
||||
me.dsStore = Ext.create('Ext.data.Store', {
|
||||
sorters: 'group',
|
||||
model: 'pbs-groups',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
Ext.define('PBS.form.pbsGroupBehaviorSelector', {
|
||||
extend: 'Proxmox.form.KVComboBox',
|
||||
alias: 'widget.pbsGroupBehaviorSelector',
|
||||
|
||||
allowBlank: false,
|
||||
|
||||
comboItems: [
|
||||
['include', gettext('Include')],
|
||||
['exclude', gettext('Exclude')],
|
||||
],
|
||||
});
|
||||
Ext.define('PBS.form.GroupFilterGrid', {
|
||||
extend: 'Ext.grid.Panel',
|
||||
alias: 'widget.pbsGroupFilterGrid',
|
||||
|
||||
scrollable: true,
|
||||
height: 200,
|
||||
store: {
|
||||
fields: ['type', 'input'],
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
text: gettext('Filter Type'),
|
||||
@ -297,7 +454,8 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
bodyPadding: 0,
|
||||
xtype: 'fieldcontainer',
|
||||
layout: 'fit',
|
||||
defaults: {
|
||||
defaults:
|
||||
{
|
||||
margin: 0,
|
||||
},
|
||||
items: [
|
||||
@ -329,59 +487,6 @@ Ext.define('PBS.form.GroupFilter', {
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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: 'container',
|
||||
layout: {
|
||||
type: 'hbox',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
xtype: 'button',
|
||||
text: gettext('Add'),
|
||||
iconCls: 'fa fa-plus-circle',
|
||||
handler: 'addFilter',
|
||||
},
|
||||
{
|
||||
xtype: 'box',
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
xtype: 'box',
|
||||
style: 'margin: 3px 0px;',
|
||||
html: `<span class="pmx-hint">${gettext('Note')}</span>: `
|
||||
+ gettext('Filters are additive (OR-like)'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
initComponent: function() {
|
||||
let me = this;
|
||||
me.callParent();
|
||||
me.dsStore = Ext.create('Ext.data.Store', {
|
||||
sorters: 'group',
|
||||
model: 'pbs-groups',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
Ext.define('PBS.form.GroupFilterTypeSelector', {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user