[pve-devel] [PATCH manager v5 0/2] Show container ip in summary and network tab

[pve-devel] [PATCH manager v5 0/2] Show container ip in summary and network tab

[Gabriel Goller]

Show the ip/hwaddress of the network interfaces of containers in the summary
tab of the container and in the network tab on a per-interface basis.

This series was originally by Leo Nunner:
https://lore.proxmox.com/pve-devel/20230615094333.66179-1-l.nunner@proxmox.com/

Note that the pve-network part has been merged already
(https://lore.proxmox.com/pve-devel/bbc59ae4-e552-4e2f-9bb3-8b4e47bd6cb1@proxmox.com/).

v5, thanks @Thomas:
 - fix network interfaces list not displayed correctly when nothing configured
 - use Proxmox.Async
 - make summary container status scrollable to show all the IPs
 - change 'dhcp' to 'dynamic' as we don't know if it's dhcp for sure
 - (note that this version only contains the pve-manager patches, the
   pve-network part has been merged already)

v4, thanks @Daniel:
 - remove duplicate code (copy paste error)
 - rebase on latest master

v3, thanks @Thomas, @Maximiliano:
 - fixed wording in schema description
 - stay backwards-compatible by keeping old attributes
 - use array reference instead of array

v2, thanks @Dominik:
 - show if ip is static or dynamic (dhcp)
 - show multiple ips per interface
 - refactor/reuse AgentIPView instead of adding ContainerIPView component
 - various other small improvements

pve-manager:

Gabriel Goller (2):
  lxc: show dynamically assigned IPs in network tab
  guest: refactor and reuse AgentIPView for containers

 www/manager6/Makefile                         |   2 +-
 www/manager6/lxc/Network.js                   | 115 ++++++++++----
 www/manager6/panel/GuestStatusView.js         | 140 +++++++++++++++++-
 www/manager6/panel/GuestSummary.js            |   1 +
 .../{qemu/AgentIPView.js => panel/IPView.js}  |  79 ++--------
 5 files changed, 235 insertions(+), 102 deletions(-)
 rename www/manager6/{qemu/AgentIPView.js => panel/IPView.js} (58%)


Summary over all repositories:
  5 files changed, 235 insertions(+), 102 deletions(-)

-- 
Generated by git-murpp 0.8.0


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

[pve-devel] [PATCH pve-manager v5 1/2] lxc: show dynamically assigned IPs in network tab

[Gabriel Goller]

Adds a call to /nodes/{node}/lxc/{vmid}/interfaces and merges the
returned data with the existing configuration. This will update the
IPv4 and IPv6 address, as well as the interface name (in case the
container changed it).

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 www/manager6/lxc/Network.js | 115 ++++++++++++++++++++++++++----------
 1 file changed, 84 insertions(+), 31 deletions(-)

diff --git a/www/manager6/lxc/Network.js b/www/manager6/lxc/Network.js
index b2cd94109485..bfe918d516ae 100644
--- a/www/manager6/lxc/Network.js
+++ b/www/manager6/lxc/Network.js
@@ -351,33 +351,72 @@ Ext.define('PVE.lxc.NetworkView', {
     stateful: true,
     stateId: 'grid-lxc-network',
 
-    load: function() {
+    load: async function() {
 	let me = this;
 
 	Proxmox.Utils.setErrorMask(me, true);
 
-	Proxmox.Utils.API2Request({
-	    url: me.url,
-	    failure: function(response, opts) {
-		Proxmox.Utils.setErrorMask(me, gettext('Error') + ': ' + response.htmlStatus);
-	    },
-	    success: function(response, opts) {
-		Proxmox.Utils.setErrorMask(me, false);
-		let result = Ext.decode(response.responseText);
-		me.dataCache = result.data || {};
-		let records = [];
-		for (const [key, value] of Object.entries(me.dataCache)) {
-		    if (key.match(/^net\d+/)) {
-			let net = PVE.Parser.parseLxcNetwork(value);
-			net.id = key;
-			records.push(net);
+	let nodename = me.pveSelNode.data.node;
+	let vmid = me.pveSelNode.data.vmid;
+
+	try {
+	    let ifResponse = await Proxmox.Async.api2({
+		url: `/nodes/${nodename}/lxc/${vmid}/interfaces`,
+		method: 'GET',
+	    });
+	    let confResponse = await Proxmox.Async.api2({
+		url: me.url,
+	    });
+	    Proxmox.Utils.setErrorMask(me, false);
+
+	    let interfaces = [];
+	    for (const [, iface] of Object.entries(ifResponse?.result?.data || {})) {
+		interfaces[iface['hardware-address']] = iface;
+	    }
+
+	    let records = [];
+	    me.dataCache = confResponse.result.data || {};
+	    for (const [key, value] of Object.entries(confResponse.result.data)) {
+		if (!key.match(/^net\d+/)) {
+		    continue;
+		}
+		let config = PVE.Parser.parseLxcNetwork(value);
+		let net = structuredClone(config);
+		net.id = key;
+
+		let iface = interfaces[config.hwaddr.toLowerCase()];
+		if (iface) {
+		    net.name = iface.name;
+		    net.ip = [];
+		    net.ip6 = [];
+		    for (const i of iface['ip-addresses']) {
+			let ip_with_prefix = `${i['ip-address']}/${i.prefix}`;
+			if (i['ip-address-type'] === "inet") {
+			    if (config.ip === ip_with_prefix) {
+				net.ip.push(`${ip_with_prefix} (static)`);
+			    } else {
+				// this could be dhcp, but also a static address set directly on the container
+				net.ip.push(`${ip_with_prefix} (dynamic)`);
+			    }
+			} else if (i['ip-address-type'] === "inet6") {
+			    if (config.ip6 === ip_with_prefix) {
+				net.ip6.push(`${ip_with_prefix} (static)`);
+			    } else {
+				// this could be dhcp, slaac, but also a static address set directly on the container
+				net.ip6.push(`${ip_with_prefix} (dynamic)`);
+			    }
+			}
 		    }
 		}
-		me.store.loadData(records);
-		me.down('button[name=addButton]').setDisabled(records.length >= 32);
-	    },
-	});
-    },
+		records.push(net);
+	    }
+
+	    me.store.loadData(records);
+	    me.down('button[name=addButton]').setDisabled(records.length >= 32);
+	} catch (error) {
+	    Proxmox.Utils.setErrorMask(me, gettext('Error') + ': ' + error);
+	}
+},
 
     initComponent: function() {
 	let me = this;
@@ -504,7 +543,7 @@ Ext.define('PVE.lxc.NetworkView', {
 		},
 		{
 		    header: gettext('VLAN Tag'),
-		    width: 80,
+		    width: 70,
 		    dataIndex: 'tag',
 		},
 		{
@@ -514,16 +553,30 @@ Ext.define('PVE.lxc.NetworkView', {
 		},
 		{
 		    header: gettext('IP address'),
-		    width: 150,
+		    width: 300,
 		    dataIndex: 'ip',
-		    renderer: function(value, metaData, rec) {
-			if (rec.data.ip && rec.data.ip6) {
-			    return rec.data.ip + "<br>" + rec.data.ip6;
-			} else if (rec.data.ip6) {
-			    return rec.data.ip6;
-			} else {
-			    return rec.data.ip;
-			}
+		    renderer: function(_value, _metaData, rec) {
+			const formatIpValue = (value, prefix) => {
+			    if (Array.isArray(value) && value.length > 0) {
+				// multiple addresses (usually from the api)
+				return value.join("<br>") + "<br>";
+			    } else if (typeof value === 'string') {
+				if (value === "dhcp") {
+				    // ipv4 and ipv6 dhcp
+				    return `${prefix}dhcp <br>`;
+				} else if (value === "auto") {
+				    // ipv6 slaac
+				    return `${prefix}auto <br>`;
+				} else if (value.length > 0) {
+				    // single address (usually from config)
+				    return value + "<br>";
+				}
+			    }
+			    return '';
+			};
+
+			return formatIpValue(rec.data.ip, 'ip: ') +
+			       formatIpValue(rec.data.ip6, 'ip6: ');
 		    },
 		},
 		{
-- 
2.39.5



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

[pve-devel] [PATCH pve-manager v5 2/2] guest: refactor and reuse AgentIPView for containers

[Gabriel Goller]

Refactor AgentIPView to be generic over container and vms. Reuse it in
the Container Summary to show the ip addresses of the container. Also
make the GuestSummary scrollable, as it can potentially be bigger
(because of the ip-addresses that can be shown) than 300 (which is the
size of the RRD graphs).

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 www/manager6/Makefile                         |   2 +-
 www/manager6/panel/GuestStatusView.js         | 140 +++++++++++++++++-
 www/manager6/panel/GuestSummary.js            |   1 +
 .../{qemu/AgentIPView.js => panel/IPView.js}  |  79 ++--------
 4 files changed, 151 insertions(+), 71 deletions(-)
 rename www/manager6/{qemu/AgentIPView.js => panel/IPView.js} (58%)

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index fdf0e8165969..cf4a4f803da4 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -103,6 +103,7 @@ JSSRC= 							\
 	panel/BackupJobPrune.js				\
 	panel/HealthWidget.js				\
 	panel/IPSet.js					\
+	panel/IPView.js					\
 	panel/RunningChart.js				\
 	panel/StatusPanel.js				\
 	panel/GuestStatusView.js			\
@@ -234,7 +235,6 @@ JSSRC= 							\
 	pool/Config.js					\
 	pool/StatusView.js				\
 	pool/Summary.js					\
-	qemu/AgentIPView.js				\
 	qemu/AudioEdit.js				\
 	qemu/BootOrderEdit.js				\
 	qemu/CDEdit.js					\
diff --git a/www/manager6/panel/GuestStatusView.js b/www/manager6/panel/GuestStatusView.js
index 6401811c73bb..6c06141fd9f3 100644
--- a/www/manager6/panel/GuestStatusView.js
+++ b/www/manager6/panel/GuestStatusView.js
@@ -146,14 +146,150 @@ Ext.define('PVE.panel.GuestStatusView', {
 	    height: 15,
 	},
 	{
-	    itemId: 'ips',
-	    xtype: 'pveAgentIPView',
+	    itemId: 'agentIPs',
+	    xtype: 'pveIPView',
 	    cbind: {
 		rstore: '{rstore}',
 		pveSelNode: '{pveSelNode}',
 		hidden: '{isLxc}',
 		disabled: '{isLxc}',
 	    },
+	    createUpdateStoreCallback: function(ipview, nodename, vmid) {
+		ipview.ipStore = Ext.create('Proxmox.data.UpdateStore', {
+		    interval: 10000,
+		    storeid: 'pve-qemu-agent-' + vmid,
+		    method: 'POST',
+		    proxy: {
+			type: 'proxmox',
+			url: '/api2/json/nodes/' + nodename + '/qemu/' + vmid + '/agent/network-get-interfaces',
+		    },
+		});
+		ipview.callParent();
+
+		ipview.mon(ipview.ipStore, 'load', function(_store, records, success) {
+		    if (records && records.length) {
+			ipview.nics = records[0].data.result;
+		    } else {
+			ipview.nics = undefined;
+		    }
+		    ipview.updateStatus(!success);
+		});
+	    },
+	    updateStatusCallback: function(ipview, unsuccessful, defaulttext) {
+		var text = defaulttext || gettext('No network information');
+		var more = false;
+		if (unsuccessful) {
+		    text = gettext('Guest Agent not running');
+		} else if (ipview.agent && ipview.running) {
+		    if (Ext.isArray(ipview.nics) && ipview.nics.length) {
+			more = true;
+			var ips = ipview.getDefaultIps(ipview.nics);
+			if (ips.length !== 0) {
+			    text = ips.join('<br>');
+			}
+		    } else if (ipview.nics && ipview.nics.error) {
+			let msg = gettext('Cannot get info from Guest Agent<br>Error: {0}');
+			text = Ext.String.format(msg, Ext.htmlEncode(ipview.nics.error.desc));
+		    }
+		} else if (ipview.agent) {
+		    text = gettext('Guest Agent not running');
+		} else {
+		    text = gettext('No Guest Agent configured');
+		}
+
+		var ipBox = ipview.down('#ipBox');
+		ipBox.update(text);
+
+		var moreBtn = ipview.down('#moreBtn');
+		moreBtn.setVisible(more);
+	    },
+	    startIPStoreCallback: function(ipview, store) {
+		let agentRec = store.getById('agent');
+		let state = store.getById('status');
+
+		ipview.agent = agentRec && agentRec.data.value === 1;
+		ipview.running = state && state.data.value === 'running';
+
+		var caps = Ext.state.Manager.get('GuiCap');
+
+		if (!caps.vms['VM.Monitor']) {
+		    var errorText = gettext("Requires '{0}' Privileges");
+		    ipview.updateStatus(false, Ext.String.format(errorText, 'VM.Monitor'));
+		    return;
+		}
+
+		if (ipview.agent && ipview.running && ipview.ipStore.isStopped) {
+		    ipview.ipStore.startUpdate();
+		} else if (ipview.ipStore.isStopped) {
+		    ipview.updateStatus();
+		}
+	    },
+	},
+	{
+	    itemId: 'ctIPS',
+	    xtype: 'pveIPView',
+	    cbind: {
+		rstore: '{rstore}',
+		pveSelNode: '{pveSelNode}',
+		hidden: '{!isLxc}',
+		disabled: '{!isLxc}',
+	    },
+	    createUpdateStoreCallback: function(ipview, nodename, vmid) {
+		ipview.ipStore = Ext.create('Proxmox.data.UpdateStore', {
+		    interval: 10000,
+		    storeid: 'lxc-interfaces-' + vmid,
+		    method: 'GET',
+		    proxy: {
+			type: 'proxmox',
+			url: '/api2/json/nodes/' + nodename + '/lxc/' + vmid + '/interfaces',
+		    },
+		});
+		ipview.callParent();
+
+		ipview.mon(ipview.ipStore, 'load', function(_store, records, success) {
+		    if (records && records.length) {
+			ipview.nics = records.map(r => r.data);
+		    } else {
+			ipview.nics = undefined;
+		    }
+		    ipview.updateStatus(!success);
+		});
+	    },
+	    updateStatusCallback: function(ipview, _unsuccessful, defaulttext) {
+		var text = defaulttext || gettext('No network information');
+		var more = false;
+		if (Ext.isArray(ipview.nics) && ipview.nics.length) {
+		    more = true;
+		    var ips = ipview.getDefaultIps(ipview.nics);
+		    if (ips.length !== 0) {
+			text = ips.join('<br>');
+		    }
+		}
+		var ipBox = ipview.down('#ipBox');
+		ipBox.update(text);
+
+		var moreBtn = ipview.down('#moreBtn');
+		moreBtn.setVisible(more);
+	    },
+	    startIPStoreCallback: function(ipview, store) {
+		let state = store.getById('status');
+
+		ipview.running = state && state.data.value === 'running';
+
+		var caps = Ext.state.Manager.get('GuiCap');
+
+		if (!caps.vms['VM.Audit']) {
+		    var errorText = gettext("Requires '{0}' Privileges");
+		    ipview.updateStatus(false, Ext.String.format(errorText, 'VM.Audit'));
+		    return;
+		}
+
+		if (ipview.running && ipview.ipStore.isStopped) {
+		    ipview.ipStore.startUpdate();
+		} else if (ipview.ipStore.isStopped) {
+		    ipview.updateStatus();
+		}
+	    },
 	},
     ],
 
diff --git a/www/manager6/panel/GuestSummary.js b/www/manager6/panel/GuestSummary.js
index 1565db3f658d..baf658714128 100644
--- a/www/manager6/panel/GuestSummary.js
+++ b/www/manager6/panel/GuestSummary.js
@@ -38,6 +38,7 @@ Ext.define('PVE.guest.Summary', {
 		itemId: 'gueststatus',
 		pveSelNode: me.pveSelNode,
 		rstore: rstore,
+		scrollable: 'y',
 	    },
 	    {
 		xtype: 'pmxNotesView',
diff --git a/www/manager6/qemu/AgentIPView.js b/www/manager6/panel/IPView.js
similarity index 58%
rename from www/manager6/qemu/AgentIPView.js
rename to www/manager6/panel/IPView.js
index a554de65f119..f8d1e77d139d 100644
--- a/www/manager6/qemu/AgentIPView.js
+++ b/www/manager6/panel/IPView.js
@@ -1,7 +1,7 @@
 Ext.define('PVE.window.IPInfo', {
     extend: 'Ext.window.Window',
     width: 600,
-    title: gettext('Guest Agent Network Information'),
+    title: gettext('Network Information'),
     height: 300,
     layout: {
 	type: 'fit',
@@ -53,9 +53,9 @@ Ext.define('PVE.window.IPInfo', {
     ],
 });
 
-Ext.define('PVE.qemu.AgentIPView', {
+Ext.define('PVE.IPView', {
     extend: 'Ext.container.Container',
-    xtype: 'pveAgentIPView',
+    xtype: 'pveIPView',
 
     layout: {
 	type: 'hbox',
@@ -63,6 +63,9 @@ Ext.define('PVE.qemu.AgentIPView', {
     },
 
     nics: [],
+    startIPStoreCallback: undefined,
+    updateStatusCallback: undefined,
+    createUpdateStoreCallback: undefined,
 
     items: [
 	{
@@ -92,7 +95,7 @@ Ext.define('PVE.qemu.AgentIPView', {
 		    hidden: true,
 		    ui: 'default-toolbar',
 		    handler: function(btn) {
-			let view = this.up('pveAgentIPView');
+			let view = this.up('pveIPView');
 
 			var win = Ext.create('PVE.window.IPInfo');
 			win.down('grid').getStore().setData(view.nics);
@@ -127,55 +130,14 @@ Ext.define('PVE.qemu.AgentIPView', {
 
     startIPStore: function(store, records, success) {
 	var me = this;
-	let agentRec = store.getById('agent');
-	let state = store.getById('status');
 
-	me.agent = agentRec && agentRec.data.value === 1;
-	me.running = state && state.data.value === 'running';
-
-	var caps = Ext.state.Manager.get('GuiCap');
-
-	if (!caps.vms['VM.Monitor']) {
-	    var errorText = gettext("Requires '{0}' Privileges");
-	    me.updateStatus(false, Ext.String.format(errorText, 'VM.Monitor'));
-	    return;
-	}
-
-	if (me.agent && me.running && me.ipStore.isStopped) {
-	    me.ipStore.startUpdate();
-	} else if (me.ipStore.isStopped) {
-	    me.updateStatus();
-	}
+	me.startIPStoreCallback(me, store);
     },
 
     updateStatus: function(unsuccessful, defaulttext) {
 	var me = this;
-	var text = defaulttext || gettext('No network information');
-	var more = false;
-	if (unsuccessful) {
-	    text = gettext('Guest Agent not running');
-	} else if (me.agent && me.running) {
-	    if (Ext.isArray(me.nics) && me.nics.length) {
-		more = true;
-		var ips = me.getDefaultIps(me.nics);
-		if (ips.length !== 0) {
-		    text = ips.join('<br>');
-		}
-	    } else if (me.nics && me.nics.error) {
-		let msg = gettext('Cannot get info from Guest Agent<br>Error: {0}');
-		text = Ext.String.format(msg, Ext.htmlEncode(me.nics.error.desc));
-	    }
-	} else if (me.agent) {
-	    text = gettext('Guest Agent not running');
-	} else {
-	    text = gettext('No Guest Agent configured');
-	}
-
-	var ipBox = me.down('#ipBox');
-	ipBox.update(text);
 
-	var moreBtn = me.down('#moreBtn');
-	moreBtn.setVisible(more);
+	me.updateStatusCallback(me, unsuccessful, defaulttext);
     },
 
     initComponent: function() {
@@ -192,26 +154,7 @@ Ext.define('PVE.qemu.AgentIPView', {
 	var nodename = me.pveSelNode.data.node;
 	var vmid = me.pveSelNode.data.vmid;
 
-	me.ipStore = Ext.create('Proxmox.data.UpdateStore', {
-	    interval: 10000,
-	    storeid: 'pve-qemu-agent-' + vmid,
-	    method: 'POST',
-	    proxy: {
-		type: 'proxmox',
-		url: '/api2/json/nodes/' + nodename + '/qemu/' + vmid + '/agent/network-get-interfaces',
-	    },
-	});
-
-	me.callParent();
-
-	me.mon(me.ipStore, 'load', function(store, records, success) {
-	    if (records && records.length) {
-		me.nics = records[0].data.result;
-	    } else {
-		me.nics = undefined;
-	    }
-	    me.updateStatus(!success);
-	});
+	me.createUpdateStoreCallback(me, nodename, vmid);
 
 	me.on('destroy', me.ipStore.stopUpdate, me.ipStore);
 
@@ -220,7 +163,7 @@ Ext.define('PVE.qemu.AgentIPView', {
 	    me.startIPStore(me.rstore, me.rstore.getData(), false);
 	}
 
-	// check if the guest agent is there on every statusstore load
 	me.mon(me.rstore, 'load', me.startIPStore, me);
     },
 });
+
-- 
2.39.5



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