Bug 583988

I would spare some thought for the color blind and make the colors setable under user preferences. Apparently 1/8 men have some degree of color blindness

http://www.whatanexperience.org/2007/01/color-blind-considerations-for-ui.html

I don't see any problem. That's even better solution, that everyone can set his own color preferences...

I'm kind of in the process of expanding the whole user preference part page. I can add this in. 
Although currently I have other priorities, so this will temporarily sit on the back burner

Tempting as it always is to say "use green for pass", I'd like to recommend leaving Pass exactly as it is: in plain boring gray-on-white text.  Green, or any form of highlight, would only distract.  Assuming that Warn/Fail are the only results that merit attention, those should be the only ones with any form of visual distinction.  Boldface might be nice too.

Created attachment 453609 [details]
GreaseMonkey script for highlighting Beaker 'Fail' status

I've attached a GreaseMonkey script for highlighting 'Fail' in Beaker test results.  Unfortunately, it doesn't work reliably: it works perfectly on Firefox on my Gentoo box, but not Firefox on Fedora.  I give up looking into it, and suspect a race condition due to the AJAX loading of the results log.  I'm enclosing because it may work for others; and because someone may be able to fix it properly. May the Source be with you.

Thanks to Jeffrey Burke for forwarding me an existing GreaseMonkey script.  That motivated me to try.

Created attachment 453788 [details]
rhts-colorize v1.1

Script now reruns itself every 5 seconds, to handle AJAXy page updates.  Kludgy... but now works reliably on all my Firefoxes.

Documented my GreaseMonkey script, with screen captures:

  http://file.bos.redhat.com/~esantiag/beaker-colorize/

nice! Thanks Ed. 
I've made few changes to further compact the log names (removal or <br> tags and shorten the logs to test|console|avc). One result now fits into one line (even on my display).

Created attachment 540995 [details]
patch from comment#8

(In reply to comment #8)
> nice! Thanks Ed. 
> I've made few changes to further compact the log names (removal or <br> tags
> and shorten the logs to test|console|avc). One result now fits into one line
> (even on my display).

Beautiful! That is so much more readable. Thanks, Ales. I have updated the script and updated my screenshot in comment 7.

Created attachment 541236 [details]
Example of additional coloring

Ed, Ales, your contribution is great, that's without question. I just have 2 comments to this.

1. Beaker is server-side application it doesn't require all the hacks used in user javascript (loops covering async loads for example). Actually javascript is unnecessary at all for server side implementation. Simply said, patch against beaker would be much more helpful for beaker developers (question is if they accept it, but it is another story). :)

2. Colors are good and more colors are even better. ;) I attached a screenshot of my customization as an example. It colorizes also other states. These additional colors help me everyday in orientation.

That's it.

(In reply to comment #11)

> 2. Colors are good and more colors are even better. ;) I attached a screenshot
> of my customization as an example. It colorizes also other states. These
> additional colors help me everyday in orientation.

Thanks for the example. I'm intrigued by the graying-out of lines 4 and 5, but don't know what's special about those. I don't know what's special about line 3 that makes it get yellow, either, but assume you have good reason for it.

For the green, though, I must politely take exception. I deliberately left Pass results untouched, and think that's important: the human eye seeks out differences, so seeing red or orange Fail/Warn makes them very prominent. Makes it easy to spot, to draw attention. But seeing them among green is harder, because the green itself draws attention. The eye has to work harder.

Basically my mantra is: use color sparingly, and to indicate importance. When things are good, leave them looking boring. Boring is good.

Created attachment 587667 [details]
speed optimization patch: only run if page changed

The script is rather slow on long jobs with many results, freezing firefox every 5 seconds. I've implemented simple check to only trigger the update if the document has changed. It also allowed me do decrease the interval from 5sec to 1sec, making is more responsive.

Created attachment 587773 [details]
beaker-colorize v1.5

Very nice, Ales! Thank you. I've taken the liberty of refactoring a little. Latest version (1.5) of beaker-colorize.user.js now uploaded.

Thank you, Ed. Much better code. One optimization got lost though: running the friendlyization part from inside the colorization part. Because afaik we're only interesed in the a-elements within td.class == "list result" which is exactly what we test for in the colorization loop.

For me it cuts the run time from about 9 seconds down to 4 on this job:
https://beaker.engineering.redhat.com/jobs/239566

Created attachment 587826 [details]
beaker-colorize v1.6

Oops! Sorry, I didn't notice that. v1.6 now uploaded, and once again, many thanks for these improvements.

Created attachment 591184 [details]
Include pages

I noticed, that script is not active on page pattern: 
https://beaker.engineering.redhat.com/tasks/*
I think, it should be added as include page too. 
For example, matrix view redirects you to this page if you want to see the results.

Are we all set here?  We have merged some patches for color result viewing on beaker jobs page.

Thanks for all your suggestions and contributions in this bug, folks. As Bill mentioned we have merged a patch to colorize results in the list of jobs/recipes. So I don't think there is anything left for us to do here.

This bug requests colors for view of detail of job/recipe. So  any change in list of jobs/recipes don't affect this report.

So we went back to this bug today and we feel with the new job and recipe UIs adding more colour will be distracting. We've added Bootstrap labels with colour coding which should be what users were looking for here to quickly scan the page. If there is more colouring needed, I guess there is always a possibility to use Greasemonkey scripts.

Anyway, I'd like to close this bug with the release of the new job and recipe improvements. If there is anything specifically missing in the new UI, it might make sense to track that in a separate bug.