On 16/04/2024 14:20, Fabian Grünbichler wrote:
> Signed-off-by: Fabian Grünbichler <f.gruenbich...@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
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
