1643114 - UX Improvements to the Log Viewer

Status: RESOLVED FIXED

(Tree Management :: Treeherder, enhancement)

Description

[Cameron Dawson [:camd]]

Most devs use the Log Viewer. But most of them find it insufficient and end up going to the Raw Log.

Some would like better syntax highlighting. This is a script from Greg Tatum that does it to the raw log. We may be able to use some of this to improve the highlighting within the Log Viewer: https://github.com/gregtatum/scripts/blob/master/mochitest-formatter/from-talos-log.js

react-lazylog is the component we use for the logs and it has a lot of functionality. Please explore that before going into straight CSS formatting. https://mozilla-frontend-infra.github.io/react-lazylog/

In addition, many said the top details sections take up too much screen real-estate. We should just make them collapse-able. Or possibly collapsed by default and then expand-able. For this, I recommend a triangle icon on the left for expand/collapse. When collapsed, the left side should show the value shown in the Job: field that is there now. And the right side should show a count of failed lines.

Comment 1

[Sarah Clements [:sclements]]

It didn't seem like people looked at a lot of the stuff in the top left corner - like the artifacts and the details that are duplicated from the DetailsPanel in the jobs view. So perhaps that part can be pared down.

So the changes should include:

• syntax highlighting for additional log lines (stack traces, console logs, etc)
• collapsible top pane as Cam mentioned and remove some of the details on the left side that aren't being used
• full text search
• add a button in failure summary tab to go straight to that failure line in the log

Once the syntax highlighting and collapsible top panel changes are made we should launch this via heroku review apps and get some feedback from one or two of our users.

Comment 2

[Joel Maher ( :jmaher ) (UTC -8)]

:suyash, this would be a good next step to help out with treeherder UX and preparing for future push health changes, can you put this in your queue?

Comment 3

[Suyash Salampuria]

Yeah absolutely Joel, These points looks interesting to me
Should I have this next in my queue

Comment 4

[Joel Maher ( :jmaher ) (UTC -8)]

yes, next in the queue works for me!

Comment 5

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/treeherder/pull/6490

Comment 6

[Sarah Clements [:sclements]]

Suyash, Cam's already enabled search functionality for the log (in bug 1643104) so you don't need to do the part.

Comment 7

[Suyash Salampuria]

• add a button in failure summary tab to go straight to that failure line in the log

Could you please explain here a bit more what needs to be done. Currently, we are directly going to the first error line in the log. I am not clear about what needs to be done exactly

Comment 8

[Suyash Salampuria]

Related to the bug 1506627, an issue was opened
https://github.com/mozilla-frontend-infra/react-lazylog/issues/24
And I see that it has not been solved as yet
overscan count does not work as we are expecting it to

Comment 9

[Sarah Clements [:sclements]]

(removing this needinfo request because we went over Suyash's question on a zoom call)

Comment 10

[Cameron Dawson [:camd]]

(In reply to Suyash Salampuria from comment #7)

• add a button in failure summary tab to go straight to that failure line in the log

Could you please explain here a bit more what needs to be done. Currently, we are directly going to the first error line in the log. I am not clear about what needs to be done exactly

Sorry I wasn't in that zoom call. But this would involve adding a link to the log viewer with the linenumber param set like: &lineNumber=2710. I'm figuring that's what you discussed.

Comment 11

[Sarah Clements [:sclements]]

(In reply to Cameron Dawson [:camd] from comment #10)

Sorry I wasn't in that zoom call. But this would involve adding a link to the log viewer with the linenumber param set like: &lineNumber=2710. I'm figuring that's what you discussed.

You mean adding a link in the failure summary tab right? Yes, I showed him that tab in Treeherder and explained that he needed to make the failure lines contain urls that go to the corresponding log line in the log viewer.

We had a zoom call to go over the login bug.

Comment 12

[Suyash Salampuria]

Some improvements to made

1. Fix CSS for 0 matches found beside the search bar
2. Searching for anything removes the formatting from the log viewer
3. Make the search bar behave something like what happens in a browser or a text editor

Comment 13

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/treeherder/pull/6556