[pbs-devel] [PATCH proxmox-backup v14 15/26] ui: add (un)mount button to summary

[Dominik Csapak]

this patch removes the 'connection summary' from the overview, because...

On 11/22/24 15:47, Hannes Laimer wrote:
> And only try to load datastore information if the datastore is
> available.
> 
> Signed-off-by: Hannes Laimer <h.laimer at proxmox.com>
> ---
> changes since v13:
>   * stop statusStore update on first failed request, start again on mount
> 
>   www/datastore/Summary.js | 94 +++++++++++++++++++++++++++++++++++++++-
>   1 file changed, 92 insertions(+), 2 deletions(-)
> 
> diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
> index a932b4e01..2d79a7951 100644
> --- a/www/datastore/Summary.js
> +++ b/www/datastore/Summary.js
> @@ -309,7 +309,84 @@ Ext.define('PBS.DataStoreSummary', {
>   	    model: 'pve-rrd-datastore',
>   	});
>   
> -	me.callParent();
> +	me.statusStore = Ext.create('Proxmox.data.ObjectStore', {
> +	    url: `/api2/json/admin/datastore/${me.datastore}/status`,
> +	    interval: 1000,
> +	});
> +
> +	let unmountBtn = Ext.create('Ext.Button', {
> +	    text: gettext('Unmount'),
> +	    hidden: true,
> +	    handler: () => {
> +		Proxmox.Utils.API2Request({
> +		    url: `/admin/datastore/${me.datastore}/unmount`,
> +		    method: 'POST',
> +		    failure: function(response) {
> +			Ext.Msg.alert(gettext('Error'), response.htmlStatus);
> +		    },
> +		    success: function(response, options) {
> +			Ext.create('Proxmox.window.TaskViewer', {
> +			    upid: response.result.data,
> +			}).show();
> +		    },
> +		});
> +	    },
> +	});
> +
> +	let mountBtn = Ext.create('Ext.Button', {
> +	    text: gettext('Mount'),
> +	    hidden: true,
> +	    handler: () => {
> +		Proxmox.Utils.API2Request({
> +		    url: `/admin/datastore/${me.datastore}/mount`,
> +		    method: 'POST',
> +		    failure: function(response) {
> +			Ext.Msg.alert(gettext('Error'), response.htmlStatus);
> +		    },
> +		    success: function(response, options) {
> +			me.statusStore.startUpdate();
> +			Ext.create('Proxmox.window.TaskViewer', {
> +			    upid: response.result.data,
> +			}).show();
> +		    },
> +		});
> +	    },
> +	});
> +
> +	Ext.apply(me, {
> +	    tbar: [unmountBtn, mountBtn, '->', { xtype: 'proxmoxRRDTypeSelector' }],
> +	});

you define a few buttons and overwrite the 'tbar' config, here, but forgot to add
the 'connection summary' again.


please don't do it this way, but rather put the buttons to the remaining tbar
config above. since you don't actually need any info from the initComponent
(AFAICS) this should not be a problem

you should be able to add a 'referenceHolder' property on the view to be able
to use 'reference' and 'lookup' to get to the components in the listener below

If it's really not possible to get to the tbar, please remove the original 'tbar'
definition at least, since it'll not be used anyway.

> +
> +	me.mon(me.statusStore, 'load', (s, records, success) => {
> +	    if (!success) {
> +		me.statusStore.stopUpdate();
> +		me.down('pbsDataStoreInfo').fireEvent('deactivate');
> +		Proxmox.Utils.API2Request({
> +		    url: `/config/datastore/${me.datastore}`,
> +		    success: response => {
> +			let mode = response.result.data['maintenance-mode'];
> +			let [type, _message] = PBS.Utils.parseMaintenanceMode(mode);
> +			if (!response.result.data['backing-device']) {
> +			    return;
> +			}
> +			if (!type || type === 'read-only') {
> +			    unmountBtn.setDisabled(true);
> +			    mountBtn.setDisabled(false);
> +			} else if (type === 'unmount') {
> +			    unmountBtn.setDisabled(true);
> +			    mountBtn.setDisabled(true);
> +			} else {
> +			    unmountBtn.setDisabled(false);
> +			    mountBtn.setDisabled(false);
> +			}
> +		    },
> +		});
> +	    } else {
> +		me.down('pbsDataStoreInfo').fireEvent('activate');
> +		unmountBtn.setDisabled(false);
> +		mountBtn.setDisabled(true);
> +	    }
> +	});

i'm not completely sure about that, but i think one should call
'me.mon' only after the callParents call. I may be mistaken though.

(you should be able to move the code below that, since it'll trigger only
after the initcomponent anyway)

>   
>   	let sp = Ext.state.Manager.getProvider();
>   	me.mon(sp, 'statechange', function(provider, key, value) {
> @@ -322,11 +399,17 @@ Ext.define('PBS.DataStoreSummary', {
>   	    Proxmox.Utils.updateColumns(me);
>   	});
>   
> +	me.callParent();
> +
>   	Proxmox.Utils.API2Request({
>   	    url: `/config/datastore/${me.datastore}`,
>   	    waitMsgTarget: me.down('pbsDataStoreInfo'),
>   	    success: function(response) {
> -		let path = Ext.htmlEncode(response.result.data.path);
> +		let data = response.result.data;
> +		let path = Ext.htmlEncode(data.path);
> +		const removable = Object.prototype.hasOwnProperty.call(data, "backing-device");

i mean it works, but our usual way to code that would be something like:

let removable = !!data['backing-device'];

is there a special reason for calling the hasOwnProperty method?

> +		unmountBtn.setHidden(!removable);
> +		mountBtn.setHidden(!removable);
>   		me.down('pbsDataStoreInfo').setTitle(`${me.datastore} (${path})`);
>   		me.down('pbsDataStoreNotes').setNotes(response.result.data.comment);
>   	    },
> @@ -344,6 +427,13 @@ Ext.define('PBS.DataStoreSummary', {
>   	    let hasIoTicks = records?.some((rec) => rec?.data?.io_ticks !== undefined);
>   	    me.down('#ioDelayChart').setVisible(!success || hasIoTicks);
>   	}, undefined, { single: true });
> +	me.on('afterrender', () => {
> +	    me.statusStore.startUpdate();
> +	});
> +
> +	me.on('destroy', () => {
> +	    me.statusStore.stopUpdate();
> +	});

any special reason to put this here instead of the  activate/deactivate/destroy handlers above, were 
we also handle the rrdstore?

>   
>   	me.query('proxmoxRRDChart').forEach((chart) => {
>   	    chart.setStore(me.rrdstore);