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

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

[Dominik Csapak]

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

[RFC PATCH datacenter-manager 2/2] ui: pve: tree: size action column better

[Dominik Csapak]

instead of using a fixed pixel size. While the new expression looks ugly, that is the
exact size needed to show all action columns in all density variants.

Ideally we'd have a way to automatically size a column by it's content
(in a buffered grid), but until we implement such a thing, this should
be ok.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
meh, i don't like either the before nor the after. I have some ideas
how we could make this work on the datatable side in a generic way, but
this is rather involved, and i'm not sure if it's worth it to spend
much time on it when we can do it like this.

 ui/src/pve/tree.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index 2faa4349..6cac96fa 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -645,7 +645,7 @@ fn columns(
             })
             .into(),
         DataTableColumn::new(tr!("Actions"))
-            .width("180px")
+            .width("calc(4 * (20px + 2* var(--pwt-spacer-1)) + 2 * var(--pwt-spacer-2))")
             .render(move |entry: &PveTreeNode| {
                 let (id, local_id, guest_info, node) = match entry {
                     PveTreeNode::Lxc(r) => {
-- 
2.47.3