[pve-devel] [PATCH v2 manager] gui: add revert button for lxc pending changes

Dominik Csapak d.csapak at proxmox.com
Tue Oct 29 15:16:57 CET 2019


looks mostly good to me, after a bit of search
i found that the reason for the delayed update
is that we/you queried the wrong store

the rstore in the context is the 'real store' which
triggered the update of the 'diffstore' that showed the
changes

the sequence was:

* api call
* update of rstore -> datachanged/refresh event
* update of the buttons with the 'diffstore' data (the old data)
* update of the diffstore -> changed view
* interval
* api call
* update of rstore -> event
* update of the buttons with the 'diffstore' data -> button update

for example code see comment inline

i would like for you to send a v3 with the correct stores, and i can 
send a fix for the qemu side

On 10/28/19 4:55 PM, Oguz Bektas wrote:
> adds the pending button for Resources, Options and DNS screens.
> 
> Signed-off-by: Oguz Bektas <o.bektas at proxmox.com>
> ---
> 
> v1 -> v2:
> * fix typo
> * use 'datachanged' to track the status of the buttons, however:
> for some reason it takes a while to refresh the status of the button,
> also same on the qemu side so this is likely a problem somewhere else.
> it also doesn't work correctly on the DNS.js file (doesn't refresh at
> all), but i can't figure out why, some feedback would be appreciated.
> 
> 
> 
>   www/manager6/lxc/DNS.js       | 43 ++++++++++++++++++++++--
>   www/manager6/lxc/Options.js   | 62 +++++++++++++++++++++++++++++++++--
>   www/manager6/lxc/Resources.js | 31 +++++++++++++++++-
>   3 files changed, 131 insertions(+), 5 deletions(-)
> 
> diff --git a/www/manager6/lxc/DNS.js b/www/manager6/lxc/DNS.js
> index 89e2c694..d7f29209 100644
> --- a/www/manager6/lxc/DNS.js
> +++ b/www/manager6/lxc/DNS.js
> @@ -213,6 +213,38 @@ Ext.define('PVE.lxc.DNS', {
>   	    handler: run_editor
>   	});
>   
> +	var revert_btn = new Proxmox.button.Button({
> +	    text: gettext('Revert'),
> +	    disabled: true,
> +	    handler: function() {
> +		var sm = me.getSelectionModel();
> +		var rec = sm.getSelection()[0];
> +		if (!rec) {
> +		    return;
> +		}
> +
> +		var rowdef = me.rows[rec.data.key] || {};
> +		var keys = rowdef.multiKey ||  [ rec.data.key ];
> +		var revert = keys.join(',');
> +
> +		Proxmox.Utils.API2Request({
> +		    url: '/api2/extjs/' + baseurl,
> +		    waitMsgTarget: me,
> +		    method: 'PUT',
> +		    params: {
> +			'revert': revert
> +		    },
> +		    callback: function() {
> +			me.reload();
> +		    },
> +		    failure: function (response, opts) {
> +			Ext.Msg.alert('Error',response.htmlStatus);
> +		    }
> +		});
> +	    }
> +	});
> +
> +
>   	var set_button_status = function() {
>   	    var sm = me.getSelectionModel();
>   	    var rec = sm.getSelection()[0];
> @@ -221,8 +253,11 @@ Ext.define('PVE.lxc.DNS', {
>   		edit_btn.disable();
>   		return;
>   	    }
> -	    var rowdef = rows[rec.data.key];
> +	    var key = rec.data.key;
> +	    var rowdef = rows[key];
> +	    var pending = rec.data['delete'] || me.hasPendingChanges(key);
>   	    edit_btn.setDisabled(!rowdef.editor);
> +	    revert_btn.setDisabled(!pending);
>   	};
>   
>   	Ext.apply(me, {
> @@ -230,7 +265,7 @@ Ext.define('PVE.lxc.DNS', {
>   	    selModel: sm,
>   	    cwidth1: 150,
>   	    run_editor: run_editor,
> -	    tbar: [ edit_btn ],
> +	    tbar: [ edit_btn, revert_btn ],
>   	    rows: rows,
>   	    editorConfig: {
>   		url: "/api2/extjs/" + baseurl
> @@ -243,5 +278,9 @@ Ext.define('PVE.lxc.DNS', {
>   	});
>   
>   	me.callParent();
> +
> +	me.mon(me.rstore, 'datachanged', function() {
> +	    set_button_status();
> +	});

here we have to do
me.mon(me.getStore(), 'datachanged',...);

>       }
>   });
> diff --git a/www/manager6/lxc/Options.js b/www/manager6/lxc/Options.js
> index 5e1e0222..f1a82902 100644
> --- a/www/manager6/lxc/Options.js
> +++ b/www/manager6/lxc/Options.js
> @@ -161,17 +161,67 @@ Ext.define('PVE.lxc.Options', {
>   	    handler: function() { me.run_editor(); }
>   	});
>   
> +	var revert_btn = new Proxmox.button.Button({
> +	    text: gettext('Revert'),
> +	    disabled: true,
> +	    handler: function() {
> +		var sm = me.getSelectionModel();
> +		var rec = sm.getSelection()[0];
> +		if (!rec) {
> +		    return;
> +		}
> +
> +		var rowdef = me.rows[rec.data.key] || {};
> +		var keys = rowdef.multiKey ||  [ rec.data.key ];
> +		var revert = keys.join(',');
> +
> +		Proxmox.Utils.API2Request({
> +		    url: '/api2/extjs/' + baseurl,
> +		    waitMsgTarget: me,
> +		    method: 'PUT',
> +		    params: {
> +			'revert': revert
> +		    },
> +		    callback: function() {
> +			me.reload();
> +		    },
> +		    failure: function (response, opts) {
> +			Ext.Msg.alert('Error',response.htmlStatus);
> +		    }
> +		});
> +	    }
> +	});
> +
> +	var set_button_status = function() {
> +	    var sm = me.getSelectionModel();
> +	    var rec = sm.getSelection()[0];
> +
> +	    if (!rec) {
> +		edit_btn.disable();
> +		return;
> +	    }
> +
> +	    var key = rec.data.key;
> +	    var pending = rec.data['delete'] || me.hasPendingChanges(key);
> +	    var rowdef = rows[key];
> +
> +	    edit_btn.setDisabled(!rowdef.editor);
> +	    revert_btn.setDisabled(!pending);
> +	};
> +
> +
>   	Ext.apply(me, {
>   	    url: "/api2/json/nodes/" + nodename + "/lxc/" + vmid + "/pending",
>   	    selModel: sm,
>   	    interval: 5000,
> -	    tbar: [ edit_btn ],
> +	    tbar: [ edit_btn, revert_btn ],
>   	    rows: rows,
>   	    editorConfig: {
>   		url: '/api2/extjs/' + baseurl
>   	    },
>   	    listeners: {
> -		itemdblclick: me.run_editor
> +		itemdblclick: me.run_editor,
> +		selectionchange: set_button_status
>   	    }
>   	});
>   
> @@ -181,6 +231,14 @@ Ext.define('PVE.lxc.Options', {
>   	me.on('destroy', me.rstore.stopUpdate);
>   	me.on('deactivate', me.rstore.stopUpdate);
>   
> +	// FIXME: for some reason, it takes a while for this to refresh and update
> +	// the button state.
> +	// this also happens in qemu side, so it's likely something we need to
> +	// fix somewhere else.
> +	me.mon(me.rstore, 'datachanged', function() {
> +	    set_button_status();
> +	});
> +
>       }
>   });
>   
> diff --git a/www/manager6/lxc/Resources.js b/www/manager6/lxc/Resources.js
> index 8b924a49..73533ba8 100644
> --- a/www/manager6/lxc/Resources.js
> +++ b/www/manager6/lxc/Resources.js
> @@ -215,6 +215,31 @@ Ext.define('PVE.lxc.RessourceView', {
>   	    handler: run_move
>   	});
>   
> +	var revert_btn = new Proxmox.button.Button({
> +	    text: gettext('Revert'),
> +	    selModel: me.selModel,
> +	    disabled: true,
> +	    handler: function(b, e, rec) {
> +		var rowdef = me.rows[rec.data.key] || {};
> +		var keys = rowdef.multiKey ||  [ rec.data.key ];
> +		var revert = keys.join(',');
> +		Proxmox.Utils.API2Request({
> +		    url: '/api2/extjs/' + baseurl,
> +		    waitMsgTarget: me,
> +		    method: 'PUT',
> +		    params: {
> +			'revert': revert
> +		    },
> +		    callback: function() {
> +			me.rstore.load();
> +		    },
> +		    failure: function (response, opts) {
> +			Ext.Msg.alert('Error',response.htmlStatus);
> +		    }
> +		});
> +	    }
> +	});
> +
>   	var set_button_status = function() {
>   	    var rec = me.selModel.getSelection()[0];
>   
> @@ -222,12 +247,14 @@ Ext.define('PVE.lxc.RessourceView', {
>   		edit_btn.disable();
>   		remove_btn.disable();
>   		resize_btn.disable();
> +		revert_btn.disable();
>   		return;
>   	    }
>   	    var key = rec.data.key;
>   	    var value = rec.data.value;
>   	    var rowdef = rows[key];
>   
> +	    var pending = rec.data['delete'] || me.hasPendingChanges(key);
>   	    var isDisk = (rowdef.tdCls == 'pve-itype-icon-storage');
>   
>   	    var noedit = rec.data['delete'] || !rowdef.editor;
> @@ -242,6 +269,7 @@ Ext.define('PVE.lxc.RessourceView', {
>   	    remove_btn.setDisabled(!isDisk || rec.data.key === 'rootfs' || !diskCap);
>   	    resize_btn.setDisabled(!isDisk || !diskCap);
>   	    move_btn.setDisabled(!isDisk || !diskCap);
> +	    revert_btn.setDisabled(!pending);
>   
>   	};
>   	
> @@ -299,7 +327,8 @@ Ext.define('PVE.lxc.RessourceView', {
>   		edit_btn,
>   		remove_btn,
>   		resize_btn,
> -		move_btn
> +		move_btn,
> +		revert_btn
>   	    ],
>   	    rows: rows,
>   	    sorterFn: sorterFn,
> 





More information about the pve-devel mailing list