public inbox for pve-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Daniel Kral <d.kral@proxmox.com>
To: f.gruenbichler@proxmox.com
Cc: pve-devel@lists.proxmox.com
Subject: Re: [pve-devel] [PATCH v2 manager 4/4] ui: add pool limits and usage
Date: Thu, 19 Dec 2024 17:07:30 +0100	[thread overview]
Message-ID: <20241219160730.186517-1-d.kral@proxmox.com> (raw)
In-Reply-To: <20240416122054.733817-14-f.gruenbichler@proxmox.com>

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #1: Type: text/plain, Size: 5749 bytes --]

On 16/04/2024 14:20, Fabian Grünbichler wrote:
> Signed-off-by: Fabian Grünbichler <f.gruenbichler@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








[-- Attachment #2: Type: text/plain, Size: 160 bytes --]

_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

  reply	other threads:[~2024-12-19 16:07 UTC|newest]

Thread overview: 34+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2024-04-16 12:20 [pve-devel] [PATCH v2 qemu-server/pve-container 0/19] pool resource limits Fabian Grünbichler
2024-04-16 12:20 ` [pve-devel] [PATCH v2 access-control 1/1] pools: define " Fabian Grünbichler
2024-12-19 16:01   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 container 1/7] config: add pool usage helper Fabian Grünbichler
2024-12-19 16:01   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 container 2/7] status: add pool usage fields Fabian Grünbichler
2024-12-19 16:02   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 container 3/7] create/restore/clone: handle pool limits Fabian Grünbichler
2024-04-16 12:20 ` [pve-devel] [PATCH v2 container 4/7] start: " Fabian Grünbichler
2024-04-16 12:20 ` [pve-devel] [PATCH v2 container 5/7] hotplug: " Fabian Grünbichler
2024-12-19 16:03   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 container 6/7] rollback: " Fabian Grünbichler
2024-04-16 12:20 ` [pve-devel] [PATCH v2 container 7/7] update: " Fabian Grünbichler
2024-12-19 16:04   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 guest-common 1/1] helpers: add pool limit/usage helpers Fabian Grünbichler
2024-12-19 16:04   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 manager 1/4] api: pools: add limits management Fabian Grünbichler
2024-12-19 16:05   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 manager 2/4] pvestatd: collect and broadcast pool usage Fabian Grünbichler
2024-12-19 16:06   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 manager 3/4] api: return pool usage when queried Fabian Grünbichler
2024-04-16 12:20 ` [pve-devel] [PATCH v2 manager 4/4] ui: add pool limits and usage Fabian Grünbichler
2024-12-19 16:07   ` Daniel Kral [this message]
2024-04-16 12:20 ` [pve-devel] [PATCH v2 qemu-server 1/6] config: add pool usage helper Fabian Grünbichler
2024-12-19 16:08   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 qemu-server 2/6] vmstatus: add usage values for pool limits Fabian Grünbichler
2024-12-19 16:08   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 qemu-server 3/6] create/restore/clone: handle " Fabian Grünbichler
2024-04-16 12:20 ` [pve-devel] [PATCH v2 qemu-server 4/6] update/hotplug: " Fabian Grünbichler
2024-12-19 16:09   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 qemu-server 5/6] start: " Fabian Grünbichler
2024-12-19 16:09   ` Daniel Kral
2024-04-16 12:20 ` [pve-devel] [PATCH v2 qemu-server 6/6] rollback: " Fabian Grünbichler
2024-12-19 15:59 ` [pve-devel] [PATCH v2 qemu-server/pve-container 0/19] pool resource limits Daniel Kral

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20241219160730.186517-1-d.kral@proxmox.com \
    --to=d.kral@proxmox.com \
    --cc=f.gruenbichler@proxmox.com \
    --cc=pve-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal