Closed Bug 1643114 Opened 2 months ago Closed 20 days ago

UX Improvements to the Log Viewer

Categories

(Tree Management :: Treeherder: Log Viewer, enhancement)

enhancement

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: camd, Assigned: suyash546, Mentored)

References

(Blocks 1 open bug)

Details

(Whiteboard: gsoc)

Attachments

(2 files)

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.

Blocks: 1640322
Whiteboard: gsoc

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.

: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?

Flags: needinfo?(suyash546)

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

Flags: needinfo?(suyash546)

yes, next in the queue works for me!

Mentor: cdawson
Assignee: nobody → suyash546

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

  • 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

Flags: needinfo?(sclements)
Flags: needinfo?(cdawson)

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

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

Flags: needinfo?(sclements)

(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.

Flags: needinfo?(cdawson)

(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.

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
Status: NEW → RESOLVED
Closed: 20 days ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.