[pve-devel] [PATCH manager] ui: add checkbox for vmid filter for backupview

[Dominik Csapak]

instead of hardcoding the text 'type-id-' into the searchbar
to accomodate for the additional size, add an overflowHandler
to the toolbar (for very small display sizes)

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/grid/BackupView.js | 49 ++++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/www/manager6/grid/BackupView.js b/www/manager6/grid/BackupView.js
index a74c6ccb..5d80bdaf 100644
--- a/www/manager6/grid/BackupView.js
+++ b/www/manager6/grid/BackupView.js
@@ -41,13 +41,16 @@ Ext.define('PVE.grid.BackupView', {
 
 	var searchFilter = {
 	    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
 	};
 
+	var vmidFilter = {
+	    property: 'vmid',
+	    value: vmid,
+	};
+
 	me.store = Ext.create('Ext.data.Store', {
 	    model: 'pve-storage-content',
 	    sorters: { 
@@ -56,10 +59,19 @@ Ext.define('PVE.grid.BackupView', {
 	    },
 	    filters: [
 	        vmtypeFilter,
-		searchFilter
+		searchFilter,
+		vmidFilter,
 		]
 	});
 
+	let updateFilter = function() {
+	    me.store.filter([
+		vmtypeFilter,
+		searchFilter,
+		vmidFilter,
+	    ]);
+	};
+
 	var reload = Ext.Function.createBuffered(function() {
 	    if (me.store) {
 		me.store.load();
@@ -102,14 +114,23 @@ Ext.define('PVE.grid.BackupView', {
 		keyup: function(field) {
 		    me.store.clearFilter(true);
 		    searchFilter.value = field.getValue();
-		    me.store.filter([
-			vmtypeFilter,
-			searchFilter
-		    ]);
+		    updateFilter();
 		}
 	    }
 	});
 
+	var vmidfilterCB = Ext.create('Ext.form.field.Checkbox', {
+	    fieldLabel: gettext('Filter ID'),
+	    labelAlign: 'right',
+	    value: '1',
+	    listeners: {
+		change: function(cb, value) {
+		    vmidFilter.value = !!value ? vmid : '';
+		    updateFilter();
+		},
+	    },
+	});
+
 	var sm = Ext.create('Ext.selection.RowModel', {});
 
 	var backup_btn = Ext.create('Ext.button.Button', {
@@ -196,7 +217,10 @@ Ext.define('PVE.grid.BackupView', {
 
 	Ext.apply(me, {
 	    selModel: sm,
-	    tbar: [ backup_btn, restore_btn, delete_btn,config_btn, '->', storagesel, storagefilter ],
+	    tbar: {
+		overflowHandler: 'scroller',
+		items: [ backup_btn, restore_btn, delete_btn,config_btn, '->', storagesel, vmidfilterCB, storagefilter ],
+	    },
 	    columns: [
 		{
 		    header: gettext('Name'),
@@ -220,7 +244,12 @@ Ext.define('PVE.grid.BackupView', {
 		    width: 100,
 		    renderer: Proxmox.Utils.format_size,
 		    dataIndex: 'size'
-		}
+		},
+		{
+		    header: gettext('VMID'),
+		    dataIndex: 'vmid',
+		    hidden: true,
+		},
 	    ]
 	});
 
-- 
2.20.1