From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256) (No client certificate requested) by lists.proxmox.com (Postfix) with UTF8SMTPS id 805A17B3BF for ; Wed, 12 May 2021 08:22:22 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with UTF8SMTP id 758DA8E08 for ; Wed, 12 May 2021 08:22:22 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with UTF8SMTPS id EFA478DF6 for ; Wed, 12 May 2021 08:22:20 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with UTF8SMTP id C9A3E4651B; Wed, 12 May 2021 08:22:20 +0200 (CEST) Message-ID: <832918dd-13b3-cd87-e0f5-50b8e97ae97d@proxmox.com> Date: Wed, 12 May 2021 08:22:19 +0200 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Thunderbird/89.0 Content-Language: en-US To: Thomas Lamprecht , Proxmox Backup Server development discussion References: <20210511124256.15324-1-d.csapak@proxmox.com> From: Dominik Csapak In-Reply-To: Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.019 Adjusted score from AWL reputation of From: address KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment NICE_REPLY_A -0.001 Looks like a legit reply (A) SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: Re: [pbs-devel] [PATCH proxmox-backup] ui: tape/BackupOverview: add 'restore partial' button X-BeenThere: pbs-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Backup Server development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Wed, 12 May 2021 06:22:22 -0000 On 5/11/21 18:17, Thomas Lamprecht wrote: > On 11.05.21 14:42, Dominik Csapak wrote: >> this opens the restore window, but with a snapshot selector, so that >> the user can select the snapshots to restore >> >> includes a textfield for basic filtering > > > why isn't that handled directly in the restore window, without extra buttons? > Could possibly be a radio group there. yes you're right, that'll much better, though i would not do a radio button, but maybe only a checkbox '[] Select snapshots' which enables the selection grid? we could then open that window with a preselected(and filtered?) list when the user clicks on the 'restore single snapshot' button? does that make sense? > > I really want to avoid many buttons in places like top-bars, makes it crowded > and confusing.. > > Also, why doesn't this uses action buttons for those things like the content > tree? IMO we should try to be consistent with UX, cross-product this may be > hard and lots of work, but I do not see any excuse for intra-product consistency > (especially on rather simple UIs like PBS, compared to PVE). mhmm sounds good, i'd do an action column where each media set and snapshot gets a restore button, and for single snapshots i preselect like i mentioned above.. does that make sense? (we could probably do a restore button on every level in the tree, and preselect accordingly, though i am unsure if that does not get too confusing and if its even helpful...) > >> >> Signed-off-by: Dominik Csapak >> --- >> www/tape/BackupOverview.js | 31 ++++++++ >> www/tape/window/TapeRestore.js | 125 +++++++++++++++++++++++++++++++++ >> 2 files changed, 156 insertions(+) >> >> diff --git a/www/tape/BackupOverview.js b/www/tape/BackupOverview.js >> index c028d58d..e039595d 100644 >> --- a/www/tape/BackupOverview.js >> +++ b/www/tape/BackupOverview.js >> @@ -48,6 +48,29 @@ Ext.define('PBS.TapeManagement.BackupOverview', { >> }).show(); >> }, >> >> + restoreList: function(button, record) { >> + let me = this; >> + let view = me.getView(); >> + let selection = view.getSelection(); >> + if (!selection || selection.length < 1) { >> + return; >> + } >> + >> + let node = selection[0]; >> + let mediaset = node.data.text; >> + let uuid = node.data['media-set-uuid']; >> + Ext.create('PBS.TapeManagement.TapeRestoreWindow', { >> + mediaset, >> + uuid, >> + list_snapshots: true, >> + listeners: { >> + destroy: function() { >> + me.reload(); >> + }, >> + }, >> + }).show(); >> + }, >> + >> restore: function(button, record) { >> let me = this; >> let view = me.getView(); >> @@ -295,6 +318,14 @@ Ext.define('PBS.TapeManagement.BackupOverview', { >> parentXType: 'treepanel', >> enableFn: (rec) => !!rec.data['media-set-uuid'], >> }, >> + { >> + xtype: 'proxmoxButton', >> + disabled: true, >> + text: gettext('Restore partial Media Set'), > > really long button text's should be avoided... > >> + handler: 'restoreList', >> + parentXType: 'treepanel', >> + enableFn: (rec) => !!rec.data['media-set-uuid'], >> + }, >> { >> xtype: 'proxmoxButton', >> disabled: true, >> diff --git a/www/tape/window/TapeRestore.js b/www/tape/window/TapeRestore.js >> index 7e4f5cae..560d4812 100644 >> --- a/www/tape/window/TapeRestore.js >> +++ b/www/tape/window/TapeRestore.js >> @@ -49,6 +49,10 @@ Ext.define('PBS.TapeManagement.TapeRestoreWindow', { >> values.snapshots = me.up('window').list; >> } >> >> + if (Ext.isString(values.snapshots)) { >> + values.snapshots = values.snapshots.split(','); >> + } >> + >> values.store = datastores.join(','); >> >> return values; >> @@ -138,6 +142,23 @@ Ext.define('PBS.TapeManagement.TapeRestoreWindow', { >> defaultBindProperty: 'value', >> hidden: true, >> }, >> + { >> + fieldLabel: gettext('Snapshot Selection'), >> + labelWidth: 200, >> + cbind: { >> + hidden: '{!list_snapshots}', >> + }, >> + reference: 'snapshotLabel', >> + xtype: 'displayfield', >> + }, >> + { >> + xtype: 'pbsTapeSnapshotGrid', >> + reference: 'snapshotGrid', >> + name: 'snapshots', >> + cbind: { >> + hidden: '{!list_snapshots}', >> + }, >> + }, >> ], >> }, >> ], >> @@ -186,6 +207,9 @@ Ext.define('PBS.TapeManagement.TapeRestoreWindow', { >> datastores[content.store] = true; >> } >> me.setDataStores(Object.keys(datastores)); >> + let store = me.lookup('snapshotGrid').getStore(); >> + store.setData(response.result.data); >> + store.sort('snapshot'); >> }, >> failure: function() { >> // ignore failing api call, maybe catalog is missing >> @@ -308,3 +332,104 @@ Ext.define('PBS.TapeManagement.DataStoreMappingGrid', { >> }, >> ], >> }); >> + >> +Ext.define('PBS.TapeManagement.SnapshotGrid', { >> + extend: 'Ext.grid.Panel', >> + alias: 'widget.pbsTapeSnapshotGrid', >> + mixins: ['Ext.form.field.Field'], >> + >> + getValue: function() { >> + let me = this; >> + let snapshots = []; >> + >> + me.getStore().each((rec) => { >> + if (rec.data.include) { >> + let store = rec.data.store; >> + let snap = rec.data.snapshot; >> + snapshots.push(`${store}:${snap}`); >> + } >> + }); >> + >> + return snapshots; >> + }, >> + >> + setValue: function(value) { >> + let me = this; >> + // not implemented >> + return me; >> + }, >> + >> + getErrors: function(value) { >> + let me = this; >> + let firstSelected = me.getStore().findBy((rec) => !!rec.data.include); >> + >> + if (firstSelected === -1) { >> + me.addCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']); >> + let errorMsg = gettext("Need at least one snapshot"); >> + me.getActionEl().dom.setAttribute('data-errorqtip', errorMsg); >> + >> + return [errorMsg]; >> + } >> + me.removeCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']); >> + me.getActionEl().dom.setAttribute('data-errorqtip', ""); >> + return []; >> + }, >> + >> + scrollable: true, >> + height: 200, >> + >> + viewConfig: { >> + emptyText: gettext('No Snapshots'), >> + markDirty: false, >> + }, >> + >> + tbar: [ >> + { >> + fieldLabel: gettext('Filter'), >> + xtype: 'textfield', >> + isFormField: false, >> + listeners: { >> + change: function(field, value) { >> + let me = this; >> + let grid = me.up('grid'); >> + let store = grid.getStore(); >> + store.clearFilter(); >> + store.filter({ >> + property: 'snapshot', >> + anyMatch: true, >> + caseSensitive: true, >> + exactMatch: false, >> + value, >> + }); >> + grid.checkChange(); >> + }, >> + }, >> + }, >> + ], >> + >> + store: { data: [] }, >> + >> + columns: [ >> + { >> + xtype: 'checkcolumn', >> + text: gettext('Include'), >> + dataIndex: 'include', >> + listeners: { >> + checkchange: function(cb, value) { >> + let grid = this.up('grid'); >> + grid.checkChange(); >> + }, >> + }, >> + }, >> + { >> + text: gettext('Source Datastore'), >> + dataIndex: 'store', >> + flex: 1, >> + }, >> + { >> + text: gettext('Snapshot'), >> + dataIndex: 'snapshot', >> + flex: 4, >> + }, >> + ], >> +}); >> >