ui: add checkbox for vmid filter for backupview

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@proxmox.com>

diff --git a/www/manager6/grid/BackupView.js b/www/manager6/grid/BackupView.js
index a74c6ccb6cc4ac713fa1e059d8f79b2214c90ba9..5d80bdaf4b9fd90ca545b25f4a511192431503be 100644 (file)
--- 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,
+               },
            ]
        });