Logs are effectively impossible to copy when the log window has scroll-bar

[Ark-kun]

There is something wrong with log line selection. You cannot select more lines than fits in the window and when you scroll, some weird things happens with the selection.
This is probably caused by the line numbering UX component.
I'd prefer working selection over line numbering (whih might not add much value to the logs).

[Bobgy]

/assign @Bobgy

[Bobgy]

@Ark-kun Do you mean selecting log of a pipeline run step? I tried this and it selects with no issues when log has more than one screen with chrome on a macbook.

Is this issue already fixed? or it only reproduces on a different device?

[Bobgy]

My attempt video: https://drive.google.com/file/d/1flmz7jiM84nZ8DgPTBMNiM-T8oUJWEVq/view
(I didn't use a new release, but it is bundled with KF 0.6.1 released on 2019/6/27. I think it should cover this issue.

[martin-laurent]

I'm not sure this video is testing the right thing. For example, given your video, the faulty behavior is that, if you were to copy/paste the text selected you would get only lines from 12 to 41 instead of 7 to 41 as you would expect. This is terrible for long logs.

[mattnworb]

The problem is especially pronounced (in my experience) when the component is still running and therefore producing new logs.

[Bobgy]

Thanks for the explanation. Now I understand the problem. Will think about a fix.

[Bobgy]

Sorry for not replying for a while, because I've got some other stuff on my priority list. I just tried to investigate the issue today.

The problem is with our own implementation of LogViewer component. It uses react-virtualized under the hood to deal with large size of logs. react-virtualized only renders visible and a few more hidden lines on the screen. Therefore, it doesn't work with selection + scrolling well.

If selection is an important feature, then my proposed workaround is to only render like last 1000 lines of log in UI and stop using react-virtualized.

Reasoning:

• Selection works natively without virtualization
• UI won't crash when log size is huge. It just provides limited content (last 1000 lines), which I think is enough. If more is needed, user can choose another alternative to view logs.

[Bobgy]

@Ark-kun what do you think about the solution?

[Bobgy]

A demo about the fix: https://drive.google.com/file/d/11v2G1JaZOt2XHMqbCfsF4aKWxfvvHp5g/view

[Bobgy]

I also researched npm libraries that we can use out of box.

I found this one, but I worry the amount of maintenance it gets: https://github.com/mozilla-frontend-infra/react-lazylog

[martin-laurent]

Personally I think that keeping only 1000 lines of code would NOT be a good idea as that would hide logs of things happening at startup (before a really long tensorflow stacktrace for example).

If anything, there is a related bug where there is either links to stackdriver logs OR the logs in the UI but never both. Having them both always visible (or at least the stackdriver logs) always visible would be better.

Also when the component is running (before it is fully done) the it's impossible to scroll, because the viewing component seems to force the position at the bottom y every few seconds which is really annoying.

If these two things can be fixed, personally I'd be in a much happier place.

[Bobgy]

@martin-laurent thanks for the valuable feedback.

What about top 1000 lines + bottom 1000 lines? that will be trickier to implement, but still doable.
EDIT: I found a better solution. Do you think you would ever want to select more than 1000 lines? Basically, I can configure UI to render 1000 extra lines both above and below the line you scrolled to, so as long as you don't need to select more than 1000 lines, this would work.
(if you need to copy all the log, a separate button should be provided IMO)
EDIT2: Here's a POC you can reference: https://drive.google.com/file/d/1jTg0mztuT0_Vq2lkRlQnjS0i8PEP3vdo/view

If anything, there is a related bug where there is either links to stackdriver logs OR the logs in the UI but never both. Having them both always visible (or at least the stackdriver logs) always visible would be better.

Can you point me to the issue? I think that should be fixed for sure.

Also when the component is running (before it is fully done) the it's impossible to scroll, because the viewing component seems to force the position at the bottom y every few seconds which is really annoying.

This is our bug, I can easily fix it.

I want to change it to only scroll to bottom when it was already scrolled to bottom. If users scrolled up manually, then it will remain its position.

[Bobgy]

I made a PR: #2370 that can fix:

• this issue, at most 1000 lines of logs can be copied when scrolling

• Also when the component is running (before it is fully done) the it's impossible to scroll, because the viewing component seems to force the position at the bottom y every few seconds which is really annoying.

DEMO: https://drive.google.com/file/d/1jTg0mztuT0_Vq2lkRlQnjS0i8PEP3vdo/view

@martin-laurent Would this solve your problem?

[martin-laurent]

@Bobgy Looks perfect IMO

[Bobgy]

@martin-laurent Great, I will continue with the approach.