ui: container guest status: show distro logo and name in summary header

It fits neatly there, is rather intrusive 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>
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by: Dominik Csapak <d.csapak@proxmox.com>
 [ TL: html-encode, just to be sure, as reviewed by Dominik ]
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/manager6/panel/GuestStatusView.js b/www/manager6/panel/GuestStatusView.js
index 9ecff7bec47855a05e02966c31707eeaccc9d0f8..6401811c73bb06a4de5ed757319c297207657442 100644 (file)
--- 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 = Ext.htmlEncode(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);
     },
 });