From 9ce2f903fb02b0a2e5ab6c22e7e30486e4bd4256 Mon Sep 17 00:00:00 2001 From: Thomas Lamprecht Date: Mon, 30 May 2022 11:11:56 +0200 Subject: [PATCH] ui: rework prune job view/edit Fix missing load on initial view, re-use the prune input panel for editing and avoid using a tab panel for a single tab, rework also some columns widths and various other small parts- Signed-off-by: Thomas Lamprecht --- www/config/PruneView.js | 61 +++++----- www/window/PruneJobEdit.js | 234 +++++++++++++++---------------------- 2 files changed, 121 insertions(+), 174 deletions(-) diff --git a/www/config/PruneView.js b/www/config/PruneView.js index b3bcd7fb..100c037b 100644 --- a/www/config/PruneView.js +++ b/www/config/PruneView.js @@ -34,15 +34,23 @@ Ext.define('PBS.config.PruneJobView', { controller: { xclass: 'Ext.app.ViewController', + init: function(view) { + let params = {}; + if (view.datastore !== undefined) { + params.store = view.datastore; + } + view.getStore().rstore.getProxy().setExtraParams(params); + Proxmox.Utils.monStoreErrors(view, view.getStore().rstore); + this.reload(); + }, + addPruneJob: function() { let me = this; let view = me.getView(); Ext.create('PBS.window.PruneJobEdit', { datastore: view.datastore, listeners: { - destroy: function() { - me.reload(); - }, + destroy: () => me.reload(), }, }).show(); }, @@ -57,9 +65,7 @@ Ext.define('PBS.config.PruneJobView', { datastore: view.datastore, id: selection[0].data.id, listeners: { - destroy: function() { - me.reload(); - }, + destroy: () => me.reload(), }, }).show(); }, @@ -74,8 +80,9 @@ Ext.define('PBS.config.PruneJobView', { if (!upid) return; Ext.create('Proxmox.window.TaskViewer', { + autoShow: true, upid, - }).show(); + }); }, runPruneJob: function() { @@ -90,35 +97,19 @@ Ext.define('PBS.config.PruneJobView', { url: `/admin/prune/${id}/run`, success: function(response, opt) { Ext.create('Proxmox.window.TaskViewer', { + autoShow: true, upid: response.result.data, - taskDone: function(success) { - me.reload(); - }, - }).show(); - }, - failure: function(response, opt) { - Ext.Msg.alert(gettext('Error'), response.htmlStatus); + taskDone: success => me.reload(), + }); }, + failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus), }); }, - render_optional_owner: function(value, metadata, record) { - if (!value) return '-'; - return Ext.String.htmlEncode(value); - }, - startStore: function() { this.getView().getStore().rstore.startUpdate(); }, stopStore: function() { this.getView().getStore().rstore.stopUpdate(); }, - - reload: function() { this.getView().getStore().rstore.load(); }, - - init: function(view) { - let params = {}; - if (view.datastore !== undefined) { - params.store = view.datastore; - } - view.getStore().rstore.getProxy().setExtraParams(params); - Proxmox.Utils.monStoreErrors(view, view.getStore().rstore); + reload: function() { + this.getView().getStore().rstore.load(); }, }, @@ -186,7 +177,7 @@ Ext.define('PBS.config.PruneJobView', { dataIndex: 'id', renderer: Ext.String.htmlEncode, maxWidth: 220, - minWidth: 75, + minWidth: 50, flex: 1, sortable: true, }, @@ -199,14 +190,15 @@ Ext.define('PBS.config.PruneJobView', { { header: gettext('Namespace'), dataIndex: 'ns', - width: 120, + minWidth: 75, + flex: 2, sortable: true, renderer: PBS.Utils.render_optional_namespace, }, { - header: gettext('Max. Recursion'), + header: gettext('Max. Depth'), dataIndex: 'max-depth', - width: 40, + width: 90, sortable: true, }, { @@ -220,7 +212,8 @@ Ext.define('PBS.config.PruneJobView', { { text: gettext('Keep'), defaults: { - width: 60, + minWidth: 60, + flex: 1, }, columns: [ ['last', gettext('Last')], diff --git a/www/window/PruneJobEdit.js b/www/window/PruneJobEdit.js index 66847a93..ac6beda6 100644 --- a/www/window/PruneJobEdit.js +++ b/www/window/PruneJobEdit.js @@ -11,9 +11,6 @@ Ext.define('PBS.window.PruneJobEdit', { subject: gettext('Prune Job'), - bodyPadding: 0, - - fieldDefaults: { labelWidth: 120 }, defaultFocus: 'proxmoxtextfield[name=comment]', cbindData: function(initialConfig) { @@ -27,7 +24,6 @@ Ext.define('PBS.window.PruneJobEdit', { me.method = id ? 'PUT' : 'POST'; me.autoLoad = !!id; me.scheduleValue = id ? null : 'hourly'; - me.authid = id ? null : Proxmox.UserName; me.editDatastore = me.datastore === undefined && me.isCreate; return { }; }, @@ -47,149 +43,107 @@ Ext.define('PBS.window.PruneJobEdit', { }, }, - items: { - xtype: 'tabpanel', - bodyPadding: 10, - border: 0, - items: [ + xtype: 'inputpanel', + onGetValues: function(values) { + let me = this; + + if (!values.id && me.up('pbsPruneJobEdit').isCreate) { + values.id = 's-' + Ext.data.identifier.Uuid.Global.generate().slice(0, 13); + } + if (!me.isCreate) { + if (typeof values.delete === 'string') { + values.delete = values.delete.split(','); + } + } + return values; + }, + column1: [ { - title: 'Options', - xtype: 'inputpanel', - onGetValues: function(values) { - let me = this; - - if (!values.id && me.up('pbsPruneJobEdit').isCreate) { - values.id = 's-' + Ext.data.identifier.Uuid.Global.generate().slice(0, 13); - } - if (!me.isCreate) { - if (typeof values.delete === 'string') { - values.delete = values.delete.split(','); - } - } - return values; + xtype: 'pmxDisplayEditField', + fieldLabel: gettext('Datastore'), + name: 'store', + submitValue: true, + cbind: { + editable: '{editDatastore}', + value: '{datastore}', }, - column1: [ - { - xtype: 'pmxDisplayEditField', - fieldLabel: gettext('Datastore'), - name: 'store', - submitValue: true, - cbind: { - editable: '{editDatastore}', - value: '{datastore}', - }, - editConfig: { - xtype: 'pbsDataStoreSelector', - allowBlank: false, - }, - }, - { - xtype: 'pbsNamespaceSelector', - fieldLabel: gettext('Namespace'), - name: 'ns', - cbind: { - datastore: '{datastore}', - }, - listeners: { - change: function(field, localNs) { - let me = this; - let view = me.up('pbsPruneJobEdit'); + editConfig: { + xtype: 'pbsDataStoreSelector', + allowBlank: false, + }, + }, + { + xtype: 'pbsNamespaceSelector', + fieldLabel: gettext('Namespace'), + name: 'ns', + cbind: { + datastore: '{datastore}', + }, + listeners: { + change: function(field, localNs) { + let me = this; + let view = me.up('pbsPruneJobEdit'); - let maxDepthField = view.down('field[name=max-depth]'); - maxDepthField.setLimit(localNs); - maxDepthField.validate(); - }, - }, + let maxDepthField = view.down('field[name=max-depth]'); + maxDepthField.setLimit(localNs); + maxDepthField.validate(); }, - { - fieldLabel: gettext('Prune Schedule'), - xtype: 'pbsCalendarEvent', - name: 'schedule', - emptyText: gettext('none (disabled)'), - cbind: { - deleteEmpty: '{!isCreate}', - value: '{scheduleValue}', - }, - }, - { - xtype: 'proxmoxcheckbox', - fieldLabel: gettext('Enabled'), - name: 'enable', - uncheckedValue: 0, - defaultValue: 1, - checked: true, - }, - ], + }, + }, + { + xtype: 'pbsNamespaceMaxDepthReduced', + name: 'max-depth', + fieldLabel: gettext('Max. Depth'), + deleteEmpty: true, + }, + ], - column2: [ - { - xtype: 'pbsNamespaceMaxDepthReduced', - name: 'max-depth', - fieldLabel: gettext('Max. Depth'), - deleteEmpty: true, - }, - { - xtype: 'pbsPruneKeepInput', - name: 'keep-last', - fieldLabel: gettext('Keep Last'), - deleteEmpty: true, - }, - { - xtype: 'pbsPruneKeepInput', - name: 'keep-hourly', - fieldLabel: gettext('Keep Hourly'), - deleteEmpty: true, - }, - { - xtype: 'pbsPruneKeepInput', - name: 'keep-daily', - fieldLabel: gettext('Keep Daily'), - deleteEmpty: true, - }, - { - xtype: 'pbsPruneKeepInput', - name: 'keep-weekly', - fieldLabel: gettext('Keep Weekly'), - deleteEmpty: true, - }, - { - xtype: 'pbsPruneKeepInput', - name: 'keep-monthly', - fieldLabel: gettext('Keep Monthly'), - deleteEmpty: true, - }, - { - xtype: 'pbsPruneKeepInput', - name: 'keep-yearly', - fieldLabel: gettext('Keep Yearly'), - deleteEmpty: true, - }, - ], + column2: [ + { + fieldLabel: gettext('Prune Schedule'), + xtype: 'pbsCalendarEvent', + name: 'schedule', + emptyText: gettext('none (disabled)'), + cbind: { + deleteEmpty: '{!isCreate}', + value: '{scheduleValue}', + }, + }, + { + xtype: 'proxmoxcheckbox', + fieldLabel: gettext('Enabled'), + name: 'enable', + uncheckedValue: 0, + defaultValue: 1, + checked: true, + }, + ], - columnB: [ - { - fieldLabel: gettext('Comment'), - xtype: 'proxmoxtextfield', - name: 'comment', - cbind: { - deleteEmpty: '{!isCreate}', - }, - }, - ], - advancedColumn1: [ - { - xtype: 'pmxDisplayEditField', - fieldLabel: gettext('Job ID'), - emptyText: gettext('Autogenerate'), - name: 'id', - allowBlank: true, - regex: PBS.Utils.SAFE_ID_RE, - cbind: { - editable: '{isCreate}', - }, - }, - ], + columnB: [ + { + xtype: 'pbsPruneInputPanel', + }, + { + fieldLabel: gettext('Comment'), + xtype: 'proxmoxtextfield', + name: 'comment', + cbind: { + deleteEmpty: '{!isCreate}', + }, + }, + ], + advancedColumn1: [ + { + xtype: 'pmxDisplayEditField', + fieldLabel: gettext('Job ID'), + emptyText: gettext('Autogenerate'), + name: 'id', + allowBlank: true, + regex: PBS.Utils.SAFE_ID_RE, + cbind: { + editable: '{isCreate}', + }, }, ], },