[RFC PATCH datacenter-manager 1/2] ui: pve: tree: render guest tags directly after their name

[Dominik Csapak <d.csapak@proxmox.com>]

instead of putting them in to a separate column. This increases
the space available for the name when there are no (or small) tags, vs
always reserving space for tags that might not exist.

To show an ellipsis on the tags, add the overflow and text-overflow css
classes for each tag and the overall tags container,

To shrink the tag container before the guest name, use a flexbox trick:
by setting the flex-shrink value to an much higher value than the name
box, it shrinks the tags "first" (technically both shrink, but the text
box now only a fraction of a pixel, which is not visible) and only when
they reach a very small width the name box shrinks. This is rather a
hack, but without reworking how we render the tree column as a whole,
there is not really a better way.

This also makes it more consistent with how tags are rendered in PVEs
resource tree.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
really not sure about the flex-shrink hack, but reworking the markup
here would mean revisiting it in several places. We can still do this,
but i think this can be ok as a stop-gap measure.

 ui/css/pdm.scss    |  3 +++
 ui/src/pve/tree.rs | 19 ++++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/ui/css/pdm.scss b/ui/css/pdm.scss
index bd6bd02b..2a8fa1ce 100644
--- a/ui/css/pdm.scss
+++ b/ui/css/pdm.scss
@@ -51,7 +51,10 @@
 
 .pve-tags {
     text-overflow: ellipsis;
+    overflow: hidden;
     .pve-tag {
+        text-overflow: ellipsis;
+        overflow: hidden;
         border-radius: var(--pwt-button-corner-shape);
         padding-inline: var(--pwt-spacer-2)
     }
diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index 0042331c..2faa4349 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -611,6 +611,7 @@ fn columns(
             .flex(1)
             .tree_column(store)
             .render(move |entry: &PveTreeNode| {
+                let mut extra = None;
                 let (icon, text) = match entry {
                     PveTreeNode::Root if loading => (
                         Container::from_tag("i").class("pwt-loading-icon"),
@@ -622,9 +623,15 @@ fn columns(
                     ),
                     PveTreeNode::Node(r) => (utils::render_node_status_icon(r), r.node.to_string()),
                     PveTreeNode::Qemu(r) => {
+                        if !r.tags.is_empty() {
+                            extra = Some(render_guest_tags(&r.tags).style("flex-shrink", "100000"));
+                        }
                         (utils::render_qemu_status_icon(r), render_qemu_name(r, true))
                     }
                     PveTreeNode::Lxc(r) => {
+                        if !r.tags.is_empty() {
+                            extra = Some(render_guest_tags(&r.tags).style("flex-shrink", "100000"));
+                        }
                         (utils::render_lxc_status_icon(r), render_lxc_name(r, true))
                     }
                     PveTreeNode::Storage(r) => {
@@ -632,15 +639,9 @@ fn columns(
                     }
                 };
 
-                render_tree_column(icon.into(), text).into()
-            })
-            .into(),
-        DataTableColumn::new(tr!("Tags"))
-            .flex(1)
-            .render(move |entry: &PveTreeNode| match entry {
-                PveTreeNode::Lxc(lxc) => render_guest_tags(&lxc.tags[..]).into(),
-                PveTreeNode::Qemu(qemu) => render_guest_tags(&qemu.tags[..]).into(),
-                _ => html! {},
+                render_tree_column(icon.into(), text)
+                    .with_optional_child(extra)
+                    .into()
             })
             .into(),
         DataTableColumn::new(tr!("Actions"))
-- 
2.47.3