[RFC PATCH yew-comp 3/3] log-view: improve display of lines with '\r'

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

Some tools, like 'dd', will output '\r' as line delimiter, so it
overwrites the last line in the cli output.

Since the browser typically ignores '\r' in the DOM, this kind of output
leads to very long and unreadable lines.

In ExtJS, the problem is circumvented somewhat: it uses '.innerHTML'
which leads to the browser parsing and normalizing line endings.

This "works", in the sense that the lines will displayed separately,
but interferes with the paging algorithm that depends on the backend
line count (which counts "\n" only currently).

We can improve this in the frontend only, by only displaying the 'last
line' (everything after the last '\r') by default, and adding a hint
icon that shows the full output in a tooltip.

This fixes the issue with readability, does not interfere with the
paging algorithm, and sill provides the full output (on demand).

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
this is a pattern we don't have yet, showing inline icons in task log
I did not want to do the same thing extjs does, since it can break the
virtual scrolling.

the long-term fix is to fix the command invokations to replace \r to \n
but this does not fix already existing task logs and older PVE/PBS
servers, so having a workaround/solution in the gui is still useful
IMHO.

 src/log_view.rs | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/log_view.rs b/src/log_view.rs
index fdfce4c..90000d4 100644
--- a/src/log_view.rs
+++ b/src/log_view.rs
@@ -9,13 +9,14 @@ use serde_json::json;
 use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::virtual_dom::{Key, VComp, VNode};
 
+use pwt::css;
 use pwt::dom::DomSizeObserver;
 use pwt::prelude::*;
 use pwt::props::{
     AsClassesMut, AsCssStylesMut, ContainerBuilder, CssMarginBuilder, CssPaddingBuilder, CssStyles,
     WidgetBuilder, WidgetStyleBuilder,
 };
-use pwt::widget::Container;
+use pwt::widget::{Container, Fa, Tooltip};
 use pwt::AsyncPool;
 use pwt_macros::builder;
 
@@ -478,7 +479,27 @@ impl Component for PwtLogView {
                         let page_ref = page_ref.take().unwrap_or_default();
 
                         for item in page.lines.iter() {
-                            tag.add_child(format!("{}\n", item.t));
+                            if let Some(idx) = item.t.rfind('\r') {
+                                tag.add_child(&item.t[idx + 1..]);
+                                tag.add_child(
+                                    Tooltip::new(
+                                        Fa::new("info-circle").class(css::FontColor::Warning),
+                                    )
+                                    .rich_tip(
+                                        Container::new()
+                                            .class(css::WhiteSpace::Pre)
+                                            .with_child(tr!("Full Output:"))
+                                            .with_child(
+                                                item.t.replace("\r\n", "\n").replace("\r", "\n"),
+                                            ),
+                                    )
+                                    .padding_start(1)
+                                    .class(css::Display::Inline),
+                                );
+                            } else {
+                                tag.add_child(&item.t);
+                            }
+                            tag.add_child("\n");
                         }
 
                         let html: Html = tag.into_html_with_ref(page_ref);
-- 
2.47.3