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

[Fabian Grünbichler]

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)) {
+			    if (first === 'over') {
+				over = second === 1;
+			    } else {
+				for (const [kind, usage] of Object.entries(second)) {
+				    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