[pve-devel] [PATCH manager 2/2] gui: BackupView: improve filtering of backups

[Thomas Lamprecht]

Am 2/21/20 um 11:02 AM schrieb Dominik Csapak:
> use 'gridfilter' plugin to filter by vmid (returned from the api),
> but leave the 'search' textbox (so that the user can still search
> for e.g. a year)
> 

what's the improvement the subject talks about? It's way more hidden now
how to also show other VM/CT, one needs to guess right that the slightly-bold
and italics rendering of "VMID" means filter applied, click on that, click on
filters and then edit that, not sure how much of an improvements this is..

Also this only works if VMID storage patch is not available, which you just
cannot guarantee. If we, why ever, really want to do this I need a fallback
here.

> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>  www/manager6/grid/BackupView.js | 54 +++++++++++++++++++--------------
>  1 file changed, 32 insertions(+), 22 deletions(-)
> 
> diff --git a/www/manager6/grid/BackupView.js b/www/manager6/grid/BackupView.js
> index 2f814d3f..8ad7a367 100644
> --- a/www/manager6/grid/BackupView.js
> +++ b/www/manager6/grid/BackupView.js
> @@ -8,6 +8,8 @@ Ext.define('PVE.grid.BackupView', {
>      stateful: true,
>      stateId: 'grid-guest-backup',
>  
> +    plugins: 'gridfilters',
> +
>      initComponent : function() {
>  	var me = this;
>  
> @@ -26,38 +28,45 @@ Ext.define('PVE.grid.BackupView', {
>  	    throw "no VM type specified";
>  	}
>  
> -	var vmtypeFilter;
> +	var vmtypeFilterFn;
>  	if (vmtype === 'lxc' || vmtype === 'openvz') {
> -	    vmtypeFilter = function(item) {
> +	    vmtypeFilterFn = function(item) {
>  		return PVE.Utils.volume_is_lxc_backup(item.data.volid, item.data.format);
>  	    };
>  	} else if (vmtype === 'qemu') {
> -	    vmtypeFilter = function(item) {
> +	    vmtypeFilterFn = function(item) {
>  		return PVE.Utils.volume_is_qemu_backup(item.data.volid, item.data.format);
>  	    };
>  	} else {
>  	    throw "unsupported VM type '" + vmtype + "'";
>  	}
>  
> -	var searchFilter = {
> +	let searchfilter = new Ext.util.Filter({
>  	    property: 'volid',
> -	// on initial store display only our vmid backups
> -	// surround with minus sign to prevent the 2016 VMID bug
> -	    value: vmtype + '-' + vmid + '-',
> +	    value: '',
>  	    anyMatch: true,
> -	    caseSensitive: false
> -	};
> +	    caseSensitive: false,
> +	});
>  
>  	me.store = Ext.create('Ext.data.Store', {
> +	    statefulFilters: false,
>  	    model: 'pve-storage-content',
> -	    sorters: { 
> -		property: 'volid', 
> -		order: 'DESC' 
> +	    sorters: {
> +		property: 'volid',
> +		order: 'DESC'
>  	    },
>  	    filters: [
> -	        vmtypeFilter,
> -		searchFilter
> -		]
> +		{
> +		    id: 'vmtype',
> +		    filterFn: vmtypeFilterFn
> +		},
> +		searchfilter,
> +	    ]
> +	});
> +
> +	me.store.getFilters().on('endupdate', () => {
> +	    // gridfilter plugin sets this to true but we do not want it
> +	    me.store.setStatefulFilters(false);
>  	});
>  
>  	var reload = Ext.Function.createBuffered(function() {
> @@ -96,16 +105,11 @@ Ext.define('PVE.grid.BackupView', {
>  	    labelWidth: 50,
>  	    labelAlign: 'right',
>  	    enableKeyEvents: true,
> -	    value: searchFilter.value,
>  	    listeners: {
>  		buffer: 500,
>  		keyup: function(field) {
> -		    me.store.clearFilter(true);
> -		    searchFilter.value = field.getValue();
> -		    me.store.filter([
> -			vmtypeFilter,
> -			searchFilter
> -		    ]);
> +		    searchfilter.setValue(field.getValue());
> +		    me.store.addFilter(searchfilter);
>  		}
>  	    }
>  	});
> @@ -208,6 +212,12 @@ Ext.define('PVE.grid.BackupView', {
>  		{
>  		    header: 'VMID',
>  		    width: 100,
> +		    filter: {
> +			type: 'number',
> +			value: {
> +			    eq: vmid
> +			},
> +		    },
>  		    dataIndex: 'vmid'
>  		},
>  		{
>