tyler
/
proxmox-backup
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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 <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht 2022-05-30 11:11:56 +02:00 committed by Wolfgang Bumiller
parent 6802a68356
commit 9ce2f903fb
2 changed files with 121 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
www/config/PruneView.js
View File

@ -34,15 +34,23 @@ Ext.define('PBS.config.PruneJobView', {
controller: { controller: {
xclass: 'Ext.app.ViewController', 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() { addPruneJob: function() {
let me = this; let me = this;
let view = me.getView(); let view = me.getView();
Ext.create('PBS.window.PruneJobEdit', { Ext.create('PBS.window.PruneJobEdit', {
datastore: view.datastore, datastore: view.datastore,
listeners: { listeners: {
destroy: function() { destroy: () => me.reload(),
me.reload();
},
}, },
}).show(); }).show();
}, },
@ -57,9 +65,7 @@ Ext.define('PBS.config.PruneJobView', {
datastore: view.datastore, datastore: view.datastore,
id: selection[0].data.id, id: selection[0].data.id,
listeners: { listeners: {
destroy: function() { destroy: () => me.reload(),
me.reload();
},
}, },
}).show(); }).show();
}, },
@ -74,8 +80,9 @@ Ext.define('PBS.config.PruneJobView', {
if (!upid) return; if (!upid) return;
Ext.create('Proxmox.window.TaskViewer', { Ext.create('Proxmox.window.TaskViewer', {
autoShow: true,
upid, upid,
}).show(); });
}, },
runPruneJob: function() { runPruneJob: function() {
@ -90,35 +97,19 @@ Ext.define('PBS.config.PruneJobView', {
url: `/admin/prune/${id}/run`, url: `/admin/prune/${id}/run`,
success: function(response, opt) { success: function(response, opt) {
Ext.create('Proxmox.window.TaskViewer', { Ext.create('Proxmox.window.TaskViewer', {
autoShow: true,
upid: response.result.data, upid: response.result.data,
taskDone: function(success) { taskDone: success => me.reload(),
me.reload(); });
},
}).show();
},
failure: function(response, opt) {
Ext.Msg.alert(gettext('Error'), response.htmlStatus);
}, },
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(); }, startStore: function() { this.getView().getStore().rstore.startUpdate(); },
stopStore: function() { this.getView().getStore().rstore.stopUpdate(); }, stopStore: function() { this.getView().getStore().rstore.stopUpdate(); },
reload: function() {
reload: function() { this.getView().getStore().rstore.load(); }, 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);
}, },
}, },
@ -186,7 +177,7 @@ Ext.define('PBS.config.PruneJobView', {
dataIndex: 'id', dataIndex: 'id',
renderer: Ext.String.htmlEncode, renderer: Ext.String.htmlEncode,
maxWidth: 220, maxWidth: 220,
minWidth: 75, minWidth: 50,
flex: 1, flex: 1,
sortable: true, sortable: true,
}, },
@ -199,14 +190,15 @@ Ext.define('PBS.config.PruneJobView', {
{ {
header: gettext('Namespace'), header: gettext('Namespace'),
dataIndex: 'ns', dataIndex: 'ns',
width: 120, minWidth: 75,
flex: 2,
sortable: true, sortable: true,
renderer: PBS.Utils.render_optional_namespace, renderer: PBS.Utils.render_optional_namespace,
}, },
{ {
header: gettext('Max. Recursion'), header: gettext('Max. Depth'),
dataIndex: 'max-depth', dataIndex: 'max-depth',
width: 40, width: 90,
sortable: true, sortable: true,
}, },
{ {
@ -220,7 +212,8 @@ Ext.define('PBS.config.PruneJobView', {
{ {
text: gettext('Keep'), text: gettext('Keep'),
defaults: { defaults: {
width: 60, minWidth: 60,
flex: 1,
}, },
columns: [ columns: [
['last', gettext('Last')], ['last', gettext('Last')],

234
www/window/PruneJobEdit.js
View File

@ -11,9 +11,6 @@ Ext.define('PBS.window.PruneJobEdit', {
subject: gettext('Prune Job'), subject: gettext('Prune Job'),
bodyPadding: 0,
fieldDefaults: { labelWidth: 120 },
defaultFocus: 'proxmoxtextfield[name=comment]', defaultFocus: 'proxmoxtextfield[name=comment]',
cbindData: function(initialConfig) { cbindData: function(initialConfig) {
@ -27,7 +24,6 @@ Ext.define('PBS.window.PruneJobEdit', {
me.method = id ? 'PUT' : 'POST'; me.method = id ? 'PUT' : 'POST';
me.autoLoad = !!id; me.autoLoad = !!id;
me.scheduleValue = id ? null : 'hourly'; me.scheduleValue = id ? null : 'hourly';
me.authid = id ? null : Proxmox.UserName;
me.editDatastore = me.datastore === undefined && me.isCreate; me.editDatastore = me.datastore === undefined && me.isCreate;
return { }; return { };
}, },
@ -47,149 +43,107 @@ Ext.define('PBS.window.PruneJobEdit', {
}, },
}, },
items: { items: {
xtype: 'tabpanel', xtype: 'inputpanel',
bodyPadding: 10, onGetValues: function(values) {
border: 0, let me = this;
items: [
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: 'pmxDisplayEditField',
xtype: 'inputpanel', fieldLabel: gettext('Datastore'),
onGetValues: function(values) { name: 'store',
let me = this; submitValue: true,
cbind: {
if (!values.id && me.up('pbsPruneJobEdit').isCreate) { editable: '{editDatastore}',
values.id = 's-' + Ext.data.identifier.Uuid.Global.generate().slice(0, 13); value: '{datastore}',
}
if (!me.isCreate) {
if (typeof values.delete === 'string') {
values.delete = values.delete.split(',');
}
}
return values;
}, },
column1: [ editConfig: {
{ xtype: 'pbsDataStoreSelector',
xtype: 'pmxDisplayEditField', allowBlank: false,
fieldLabel: gettext('Datastore'), },
name: 'store', },
submitValue: true, {
cbind: { xtype: 'pbsNamespaceSelector',
editable: '{editDatastore}', fieldLabel: gettext('Namespace'),
value: '{datastore}', name: 'ns',
}, cbind: {
editConfig: { datastore: '{datastore}',
xtype: 'pbsDataStoreSelector', },
allowBlank: false, listeners: {
}, change: function(field, localNs) {
}, let me = this;
{ let view = me.up('pbsPruneJobEdit');
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]'); let maxDepthField = view.down('field[name=max-depth]');
maxDepthField.setLimit(localNs); maxDepthField.setLimit(localNs);
maxDepthField.validate(); maxDepthField.validate();
},
},
}, },
{ },
fieldLabel: gettext('Prune Schedule'), },
xtype: 'pbsCalendarEvent', {
name: 'schedule', xtype: 'pbsNamespaceMaxDepthReduced',
emptyText: gettext('none (disabled)'), name: 'max-depth',
cbind: { fieldLabel: gettext('Max. Depth'),
deleteEmpty: '{!isCreate}', deleteEmpty: true,
value: '{scheduleValue}', },
}, ],
},
{
xtype: 'proxmoxcheckbox',
fieldLabel: gettext('Enabled'),
name: 'enable',
uncheckedValue: 0,
defaultValue: 1,
checked: true,
},
],
column2: [ column2: [
{ {
xtype: 'pbsNamespaceMaxDepthReduced', fieldLabel: gettext('Prune Schedule'),
name: 'max-depth', xtype: 'pbsCalendarEvent',
fieldLabel: gettext('Max. Depth'), name: 'schedule',
deleteEmpty: true, emptyText: gettext('none (disabled)'),
}, cbind: {
{ deleteEmpty: '{!isCreate}',
xtype: 'pbsPruneKeepInput', value: '{scheduleValue}',
name: 'keep-last', },
fieldLabel: gettext('Keep Last'), },
deleteEmpty: true, {
}, xtype: 'proxmoxcheckbox',
{ fieldLabel: gettext('Enabled'),
xtype: 'pbsPruneKeepInput', name: 'enable',
name: 'keep-hourly', uncheckedValue: 0,
fieldLabel: gettext('Keep Hourly'), defaultValue: 1,
deleteEmpty: true, checked: 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,
},
],
columnB: [ columnB: [
{ {
fieldLabel: gettext('Comment'), xtype: 'pbsPruneInputPanel',
xtype: 'proxmoxtextfield', },
name: 'comment', {
cbind: { fieldLabel: gettext('Comment'),
deleteEmpty: '{!isCreate}', xtype: 'proxmoxtextfield',
}, name: 'comment',
}, cbind: {
], deleteEmpty: '{!isCreate}',
advancedColumn1: [ },
{ },
xtype: 'pmxDisplayEditField', ],
fieldLabel: gettext('Job ID'), advancedColumn1: [
emptyText: gettext('Autogenerate'), {
name: 'id', xtype: 'pmxDisplayEditField',
allowBlank: true, fieldLabel: gettext('Job ID'),
regex: PBS.Utils.SAFE_ID_RE, emptyText: gettext('Autogenerate'),
cbind: { name: 'id',
editable: '{isCreate}', allowBlank: true,
}, regex: PBS.Utils.SAFE_ID_RE,
}, cbind: {
], editable: '{isCreate}',
},
}, },
], ],
}, },