[pve-devel] [PATCH v2 manager 4/4] ui: add pool limits and usage

[Daniel Kral]

On 16/04/2024 14:20, Fabian Grünbichler wrote:
> Signed-off-by: Fabian Grünbichler <f.gruenbichler at proxmox.com>
> ---
> 
> Notes:
>     this is very "bare", obviously we'd want
>     - a nicer grid/.. display of usage
>     - a way to edit the limits
>     
>     I am not yet sure how to integrate this nicely, and wanted to get feedback on the rest first.
>     
>     v2:
>     - fold in change I forgot to include in patch:
>      (== vs ===, ? 1 : 0 vs just using the comparison result)
>     
>     add edit window
> 
>  www/manager6/pool/StatusView.js | 141 +++++++++++++++++++++++++++++++-
>  1 file changed, 140 insertions(+), 1 deletion(-)
> 
> diff --git a/www/manager6/pool/StatusView.js b/www/manager6/pool/StatusView.js
> index 3d46b3b1a..293ee1443 100644
> --- a/www/manager6/pool/StatusView.js
> +++ b/www/manager6/pool/StatusView.js
> @@ -1,12 +1,103 @@
> +var labelWidth = 200;
> +
> +Ext.define('PVE.pool.LimitInputPanel', {
> +    extend: 'Proxmox.panel.InputPanel',
> +    alias: 'widget.pvePoolLimitInputPanel',
> +
> +    onGetValues: function(values) {
> +	let ret = PVE.Parser.printPropertyString(values, 'type');
> +	if (ret === '') {
> +	    return { 'delete': 'limits' };
> +	}
> +	return { limits: ret };
> +    },
> +
> +    items: [
> +	    {
> +		xtype: 'proxmoxintegerfield',
> +		name: 'mem-config',
> +		minValue: 0,
> +		value: '0',
> +		step: 32,
> +		fieldLabel: gettext('Memory Config Limit') + ' (MiB)',
> +		labelWidth: labelWidth,
> +		allowBlank: false,
> +	    },
> +	    {
> +		xtype: 'proxmoxintegerfield',
> +		name: 'mem-run',
> +		minValue: 0,
> +		value: '0',
> +		step: 32,
> +		fieldLabel: gettext('Memory Running Limit') + ' (MiB)',
> +		labelWidth: labelWidth,
> +		allowBlank: false,
> +	    },
> +	    {
> +		xtype: 'proxmoxintegerfield',
> +		name: 'cpu-config',
> +		minValue: 0,
> +		value: '0',
> +		fieldLabel: gettext('CPU Config Limit'),
> +		labelWidth: labelWidth,
> +		allowBlank: false,
> +	    },
> +	    {
> +		xtype: 'proxmoxintegerfield',
> +		name: 'cpu-run',
> +		minValue: 0,
> +		value: '0',
> +		fieldLabel: gettext('CPU Running Limit'),
> +		labelWidth: labelWidth,
> +		allowBlank: false,
> +	    },
> +	],
> +});
> +
> +Ext.define('PVE.pool.EditLimits', {
> +    extend: 'Proxmox.window.Edit',
> +
> +    width: 640,
> +    height: 480,
> +
> +    initComponent: function() {
> +	var me = this;
> +
> +	if (!me.pool) {
> +	    throw "no pool specified";
> +	}
> +
> +	me.url = '/pools/';
> +	me.method = 'PUT';
> +	me.extraRequestParams = { poolid: me.pool };
> +	me.autoLoad = true;
> +
> +	Ext.apply(me, {
> +	    subject: gettext('Pool Limits'),
> +	    items: Ext.create('PVE.pool.LimitInputPanel'),
> +	});
> +
> +	me.callParent();
> +
> +	me.load({
> +	    success: function(response) {
> +		me.poolconfig = response.result.data[0];
> +		let limits = me.poolconfig.limits;
> +		me.setValues(PVE.Parser.parsePropertyString(limits));
> +	    },
> +	});
> +    },
> +});
> +
>  Ext.define('PVE.pool.StatusView', {
>      extend: 'Proxmox.grid.ObjectGrid',
>      alias: ['widget.pvePoolStatusView'],
> -    disabled: true,
>  
>      title: gettext('Status'),
>      cwidth1: 150,
>      interval: 30000,
>      //height: 195,
> +
>      initComponent: function() {
>  	var me = this;
>  
> @@ -15,17 +106,65 @@ Ext.define('PVE.pool.StatusView', {
>  	    throw "no pool specified";
>  	}
>  
> +	var reload = function() {
> +	    me.rstore.load();
> +	};
> +
>  	var rows = {
>  	    comment: {
>  		header: gettext('Comment'),
>  		renderer: Ext.String.htmlEncode,
>  		required: true,
>  	    },
> +	    usage: {
> +		header: gettext('Usage'),
> +		required: false,
> +		renderer: value => {
> +		    if (value === null) {
> +			return '-';
> +		    } else {
> +			let rendered = '';
> +			let over = false;
> +			for (const [first, second] of Object.entries(value)) {

We could append an `.sort()` for `Object.entries(value)` here...

> +			    if (first === 'over') {
> +				over = second === 1;
> +			    } else {
> +				for (const [kind, usage] of Object.entries(second)) {

...and here, as the `encode_json` / `decode_json` function in Perl seems
to be kinda racy on preserving the order of the sent keys, which made
the rendered key-value-pairs jump around in the WebGUI.

Better yet, it could be sorted at the API endpoint instead, as we use
these values for user-facing displays and those should be the same order
every time.

> +				    if (rendered === '') {
> +				        rendered = `${first}-${kind}=${usage}`;
> +				    } else {
> +				        rendered = rendered + `, ${first}-${kind}=${usage}`;
> +				    }
> +				}
> +			    }
> +			}
> +			if (over) {
> +			    rendered = rendered + "\nover limit";
> +			}
> +			return rendered;
> +		    }
> +		},
> +	    },
> +	    limits: {
> +		header: gettext('Resource Limits'),
> +		required: false,
> +	    },
>  	};
>  
>  	Ext.apply(me, {
>  	    url: "/api2/json/pools/?poolid=" + pool,
>  	    rows: rows,
> +	    tbar: [
> +		{
> +		    text: gettext('Edit Limits'),
> +		    iconCls: 'pve-itype-icon-qemu',
> +		    handler: function() {
> +		        var win = Ext.create('PVE.pool.EditLimits', { pool: pool });
> +		        win.on('destroy', reload);
> +		        win.show();
> +		    },
> +		},
> +	    ],
>  	});
>  
>  	me.callParent();
> -- 
> 2.39.2