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