New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 832699 link

Starred by 2 users

Issue metadata

Status: Verified
Owner:
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

Please add more eye candy to Milo consoles

Project Member Reported by machenb...@chromium.org, Apr 13 2018

Issue description

Collecting a couple of things...

1. I'd like to have more margins everywhere. Margins make my brain relax. No margins stress me. Some of this might be related to issue 828337, but I think there should be some margin regardless of the screen size. E.g. on buildbot, I'm able to follow the light gray/dark gray lines from left to right. On milo I can hardly see them.
Comparison buildbot http://shortn/_EovkQlqEJ7 vs. milo http://shortn/_ZIjLlIk5Gc

2. On buildbot, most usernames fitted into the column, on milo they don't and they are cut off in the middle of a letter.
Comparison buildbot http://shortn/_66BnEBkeZz vs. milo http://shortn/_mHKSQQGuvU

3. On buildbot I sometimes needed to spot a revision on the console. On milo, this is replaced with a timestamp instead (I guess that's a feature). I don't find the timestamp helpful (yet... maybe I don't see it yet).
Comparison buildbot http://shortn/_9MSJfVuRtU vs milo https://screenshot.googleplex.com/63eRNMNLvND.png

4. The timestamps on milo lack margin to differentiate between the length of 1:21 PM vs. e.g. 11:36 AM. The latter is broader an it looks very squeezed. See http://shortn/_hFAu3vncQy

You think I'm nitpicking? Watch this:
5. The legend in milo has a border only around the "Failed" box, but not around the others. Maybe remove the border? See: http://shortn/_b5kLRhydNP
 

Comment 1 by no...@chromium.org, Apr 13 2018

the border is there for color-blind people. Perhaps we could add user settings to display it.

I agree that in general LUCI UI needs improvement. It is designed after buildbot right now. Related to this: bug 782369 and http://g/luci-eng/yXEub8MAs78/kJeZduYHBAAJ;context-place=forum/luci-eng
(3) is also tracked in issue 828762.
Cc: mknyszek@chromium.org
> http://g/luci-eng/yXEub8MAs78/kJeZduYHBAAJ;context-place=forum/luci-eng

I can't access the doc neither via my @google.com nor via my @chromium.org account. mknyszek@, can you please make it accessible to all via link?
Re 1: Good to know, please scratch point (5) from the list :)
Though, re 4: How will a color blind person see the difference between any of the actual build bubbles? There green/red won't look different. And in the legend, you can just read...
Created another  issue 833802  related to UI.

Comment 7 by ahaas@chromium.org, Apr 25 2018

I agree that it is really hard to find out which CL belongs to a specific red bubble, especially if the red bubble is on the right of the screen.
Project Member

Comment 8 by bugdroid1@chromium.org, Apr 26 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/infra/luci/luci-go.git/+/3bbe851467d2eda3ae8374a3cac621e6325f146d

commit 3bbe851467d2eda3ae8374a3cac621e6325f146d
Author: Sergiy Byelozyorov <sergiyb@chromium.org>
Date: Thu Apr 26 22:51:57 2018

Add spacing between lines and columns on console view

R=hinoka@chromium.org, machenbach@chromium.org

Bug: 828762,  832699 
Change-Id: I360d5f0c09c7300a2bdf843b5507ecb06a96458e
Reviewed-on: https://chromium-review.googlesource.com/1027814
Reviewed-by: Ryan Tseng <hinoka@chromium.org>
Reviewed-by: Michael Achenbach <machenbach@chromium.org>
Commit-Queue: Sergiy Byelozyorov <sergiyb@chromium.org>

[modify] https://crrev.com/3bbe851467d2eda3ae8374a3cac621e6325f146d/milo/frontend/appengine/static/common/css/console.css

Comment 9 Deleted

Comment 10 Deleted

I've just deployed a few my recent changes to the prod, which should address issues (1)-(4). The margins are not as large as on Buildbot, but making them even larger would make other consoles, e.g. https://ci.chromium.org/p/chromium/g/main/console, too spacious and thus too wide to fit on most screens.

One other concern that we've discussed offline was that consoles do not stretch with screen size, i.e. narrow consoles should use all available width and wider consoles should reduce box size to fit into the screen where possible. I'll call this issue (6) to continue numbering scheme introduced by machenbach@ in the description. The CL addressing this issue is here: https://crrev.com/c/1031030.

Please let me know if you have ideas on how to further improve the UI to better address issues (1)-(4) and (6) (you can preview it at [1] [2] [3]). Otherwise I'll mark this issue as Fixed as soon the CL for (6) lands.

[1]: https://2981-1e04250-tainted-sergiyb-dot-luci-milo-dev.appspot.com/p/v8/g/main/console
[2]: https://2981-1e04250-tainted-sergiyb-dot-luci-milo-dev.appspot.com/p/chromium/g/main/console
[3]: https://2981-1e04250-tainted-sergiyb-dot-luci-milo-dev.appspot.com/p/v8/g/side-by-side-chromium/console
Status: Fixed (was: Started)
Status: Verified (was: Fixed)
Thanks a lot! Looks much better!

Sign in to add a comment