[pve-devel] [PATCH widget-toolkit v2 0/2] improve logpanel behaviour for fast tasks

[pve-devel] [PATCH widget-toolkit v2 0/2] improve logpanel behaviour for fast tasks

[Dominik Csapak]

improves the handling of fast moving tasks
* no glitching
* catching up to the end of the task log

changes from v1:
* dropped 3/3 (different approach makes it obsolete)
* set the length to total when we really need it
* decouple updating the start parameter from the scrollevent
* make the scrolling to bottom not rely on the scrollevent for updating

Dominik Csapak (2):
  ui: logpanel: fix glitching fast task logs
  ui: logpanel: catch up to very fast task logs with api calls

 src/panel/LogView.js | 49 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 12 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH widget-toolkit v2 1/2] ui: logpanel: fix glitching fast task logs

[Dominik Csapak]

if the total we got was bigger than the last line number, we appended
empty lines at the end of the panel, to which we scrolled

the only time we need to do that is when we do not follow the task log
'live' but when we are elsewhere (to keep the scroll position/size)

so give the lines directly to 'updateView' and let it decide
if we append the empty lines at the end

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/LogView.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/panel/LogView.js b/src/panel/LogView.js
index 1772737..51335fa 100644
--- a/src/panel/LogView.js
+++ b/src/panel/LogView.js
@@ -45,27 +45,33 @@ Ext.define('Proxmox.panel.LogView', {
 	    return maxPos - pos;
 	},
 
-	updateView: function(text, first, total) {
+	updateView: function(lines, first, total) {
 	    let me = this;
 	    let view = me.getView();
 	    let viewModel = me.getViewModel();
 	    let content = me.lookup('content');
 	    let data = viewModel.get('data');
 
-	    if (first === data.first && total === data.total && text.length === data.textlen) {
+	    if (first === data.first && total === data.total && lines.length === data.lines) {
 		return; // same content, skip setting and scrolling
 	    }
 	    viewModel.set('data', {
 		first: first,
 		total: total,
-		textlen: text.length,
+		lines: lines.length,
 	    });
 
 	    let scrollPos = me.scrollPosBottom();
+	    let scrollToBottom = view.scrollToEnd && scrollPos <= 5;
 
-	    content.update(text);
+	    if (!scrollToBottom) {
+		// so that we have the 'correct' height for the text
+		lines.length = total;
+	    }
+
+	    content.update(lines.join('<br>'));
 
-	    if (view.scrollToEnd && scrollPos <= 5) {
+	    if (scrollToBottom) {
 		// we use setTimeout to work around scroll handling on touchscreens
 		setTimeout(function() { view.scrollTo(0, Infinity); }, 10);
 	    }
@@ -97,8 +103,7 @@ Ext.define('Proxmox.panel.LogView', {
 			lines[line.n - 1] = Ext.htmlEncode(line.t);
 		    });
 
-		    lines.length = total;
-		    me.updateView(lines.join('<br>'), first - 1, total);
+		    me.updateView(lines, first - 1, total);
 		    me.running = false;
 		    if (me.requested) {
 			me.requested = false;
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit v2 2/2] ui: logpanel: catch up to very fast task logs with api calls

[Dominik Csapak]

by updating the start to 'total-limit' if we follow the task log live.
to do that, we decouple the 'scroll' event from updating the 'start'
parameter and call that directly after we scrolled down.

to not trigger the scroll event multiple times, suspend the scroll event
while doing that.

while we're touching those lines, remove the 'setTimeout' workaround
for touchscreens, since it seems to work fine since extjs 7.0

this also fixes the issue that the scroll event is not called sometimes

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/LogView.js | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/panel/LogView.js b/src/panel/LogView.js
index 51335fa..0ce48f5 100644
--- a/src/panel/LogView.js
+++ b/src/panel/LogView.js
@@ -72,8 +72,11 @@ Ext.define('Proxmox.panel.LogView', {
 	    content.update(lines.join('<br>'));
 
 	    if (scrollToBottom) {
-		// we use setTimeout to work around scroll handling on touchscreens
-		setTimeout(function() { view.scrollTo(0, Infinity); }, 10);
+		let scroller = view.getScrollable();
+		scroller.suspendEvent('scroll');
+		view.scrollTo(0, Infinity);
+		me.updateStart(true);
+		scroller.resumeEvent('scroll');
 	    }
 	},
 
@@ -126,6 +129,25 @@ Ext.define('Proxmox.panel.LogView', {
 	    });
 	},
 
+	updateStart: function(scrolledToBottom, targetLine) {
+	    let me = this;
+	    let view = me.getView();
+	    let viewModel = me.getViewModel();
+
+	    let limit = viewModel.get('params.limit');
+
+	    if (scrolledToBottom) {
+		let total = viewModel.get('data.total');
+		viewModel.set('params.start',
+		    Math.max(parseInt(total - limit, 10), 0));
+	    } else {
+		viewModel.set('params.start',
+		    Math.max(parseInt(targetLine - (limit / 2) + 10, 10), 0));
+	    }
+
+	    view.loadTask.delay(200);
+	},
+
 	onScroll: function(x, y) {
 	    let me = this;
 	    let view = me.getView();
@@ -141,9 +163,7 @@ Ext.define('Proxmox.panel.LogView', {
 	    let viewEnd = parseInt(line + viewLines + 1 + view.viewBuffer, 10);
 
 	    if (viewStart < start || viewEnd > start+limit) {
-		viewModel.set('params.start',
-		    Math.max(parseInt(line - (limit / 2) + 10, 10), 0));
-		view.loadTask.delay(200);
+		me.updateStart(false, line);
 	    }
 	},
 
-- 
2.30.2

[pve-devel] applied-series: [PATCH widget-toolkit v2 0/2] improve logpanel behaviour for fast tasks

[Thomas Lamprecht]

On 23.11.21 13:02, Dominik Csapak wrote:
> improves the handling of fast moving tasks
> * no glitching
> * catching up to the end of the task log
> 
> changes from v1:
> * dropped 3/3 (different approach makes it obsolete)
> * set the length to total when we really need it
> * decouple updating the start parameter from the scrollevent
> * make the scrolling to bottom not rely on the scrollevent for updating
> 
> Dominik Csapak (2):
>   ui: logpanel: fix glitching fast task logs
>   ui: logpanel: catch up to very fast task logs with api calls
> 
>  src/panel/LogView.js | 49 +++++++++++++++++++++++++++++++++-----------
>  1 file changed, 37 insertions(+), 12 deletions(-)
> 

That one now works out very well on all my tests now.

applied, thanks!