1113264 - Multiple job logs push action buttons outside the job details navbar

Status: RESOLVED DUPLICATE of bug 1142579

(Tree Management :: Treeherder: Frontend, defect, P3)

Description

[Cameron Dawson [:camd]]

Perhaps we could have a drop-down for multiple logs?  or make the width of that panel more dynamic?  Or handle wrapping of toolbar icons better.  Some tools make a ">>" icon on the right to access buttons that have been pushed off.  Not sure what the right call is there, tbh.

Comment 2

[Jonathan French (:jfrench)]

(In reply to Cameron Dawson [:camd] from comment #0)
> Perhaps we could have a drop-down for multiple logs?

I like that idea, as it won't matter how many logs are associated with the job. And when the number of Logs exceeds the available menu height we'd generate a scroll bar like the Repo menu.

Log (primary in the navbar, always 'Log1')
Log (menu entry popup, launches Logviewer to Log2)
Log (menu entry popup, as above, Log3)
..and so on

Comment 3

[Pachi]

Hi there, I am an outreachy applicant and would like to work on this bug. ty

Comment 4

[Sarah Clements [:sclements]]

Hi Pachi, I'll assign it to you. Cameron (cdawson) will be the one to ask if you have questions about this particular bug.

Comment 5

[Cameron Dawson [:camd]]

The place in the code where this will show is in these files:
https://github.com/mozilla/treeherder/blob/1300d3927e327e505bb4b8ed4afb24d270c3a0a3/ui/job-view/details/summary/LogUrls.jsx#L38

The logUrls array param will usually only have one entry. But if it has multiple, the way we display should be improved.

I would start by changing the value of logUrls in that file to have 3 or more items in the array. Perhaps like this:
const logUrls = [props.logUrls[0], props.logUrls[0], props.logUrls[0]];

Though it would be better to 3 log urls that would have unique href values (so you can tell that the right ones are showing).

Then start changing the way they're listed. Perhaps a drop-down to show them, rather than all of the links being crammed on the same line in the ActionBar.jsx area.

I hope this helps to get you started. Please let me know if you need more info. :)

-Cam

Comment 6

[Cameron Dawson [:camd]]

Attachment: Screenshot 1.png

Comment 7

[Cameron Dawson [:camd]]

Attachment: Screenshot 2.png

Comment 8

[Cameron Dawson [:camd]]

This deals with the details panel when you click one of the completed jobs in the main view. In the upper left of the lower panel is the "ActionBar" which generally looks like screenshot 1. Then when there are too many log urls, it looks somewhat like screenshot 2.

Comment 9

[Sarah Clements [:sclements]]

Attachment: Screen Shot 2019-10-01 at 2.57.42 PM.png

This is where you find that job details panel - click a bolded letter/symbol (could be any color)

Comment 10

[Pachi]

I tried to create the Mock we talked about, I created a new array with 3x the log but apparently the linter is saying there is a syntax error, I have spent a good part of the weekend trying to figure it out, but nothings seems wrong. I am attaching a screenshot. I would appreciate any pointers about how to go from here. Thank you!

Comment 11

[Pachi]

Attachment: code_problem.png

Comment 12

[Cameron Dawson [:camd]]

This bug has some good info in it, but I'm marking this as the duplicate of Bug 1142579 because someone is actively working on the other one.

Comment 13

[Sarah Clements [:sclements]]

(In reply to Pachi from comment #10)

I tried to create the Mock we talked about, I created a new array with 3x the log but apparently the linter is saying there is a syntax error, I have spent a good part of the weekend trying to figure it out, but nothings seems wrong. I am attaching a screenshot. I would appreciate any pointers about how to go from here. Thank you!

I realize you've been assigned to another bug, but to answer your question - the answer is in the linter comments. Parsed is undefined means you are using it as a variable and the value is undefined. Did you intend parsed to be a variable or a string?