[pve-devel] [PATCH manager v2 5/5] ui: GuestStatusView: show distro logo and name in summary header

[Christoph Heiss <c.heiss@proxmox.com>]

It fits neatly there, is rather unintrusive and yet still visible at
first sight. It also solves the problem of having to create a bigger
row, so that the icon is still easily recognisable. At the default
font-size of 13pt, this really wasn't the case.

Verified that each supported distro is present in the font and the name
matches up and tested through all supported distros (including
'unmanaged').

Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
---
 www/manager6/panel/GuestStatusView.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/www/manager6/panel/GuestStatusView.js b/www/manager6/panel/GuestStatusView.js
index ca2f03453..c773f252d 100644
--- a/www/manager6/panel/GuestStatusView.js
+++ b/www/manager6/panel/GuestStatusView.js
@@ -29,6 +29,7 @@ Ext.define('PVE.panel.GuestStatusView', {
 		success: ({ result }) => {
 		    view.down('#unprivileged').updateValue(
 			Proxmox.Utils.format_boolean(result.data.unprivileged));
+		    view.ostype = result.data.ostype;
 		},
 	    });
 	},
@@ -166,6 +167,22 @@ Ext.define('PVE.panel.GuestStatusView', {
 		+ ')';
 	}
 
-	me.setTitle(me.getRecordValue('name') + text);
+	let title = `<div class="left-aligned">${me.getRecordValue('name') + text}</div>`;
+
+	if (me.pveSelNode.data.type === 'lxc' && me.ostype && me.ostype !== 'unmanaged') {
+	    // Manual mappings for distros with special casing
+	    const namemap = {
+		'archlinux': 'Arch Linux',
+		'nixos': 'NixOS',
+		'opensuse': 'openSUSE',
+		'centos': 'CentOS',
+	    };
+
+	    const distro = namemap[me.ostype] ?? Ext.String.capitalize(me.ostype);
+	    title += `<div class="right-aligned">
+		<i class="fl-${me.ostype} fl-fw"></i>&nbsp;${distro}</div>`;
+	}
+
+	me.setTitle(title);
     },
 });
-- 
2.41.0