Page MenuHomePhabricator

Show build status as colors on headers
AbandonedPublic

Authored by hach-que on Jul 31 2014, 6:55 AM.
Tags
None
Referenced Files
F14028595: D10095.diff
Fri, Nov 8, 2:19 PM
F13987209: D10095.id.diff
Mon, Oct 21, 8:04 AM
F13984166: D10095.diff
Sun, Oct 20, 11:26 AM
F13982309: D10095.id.diff
Sat, Oct 19, 10:15 PM
F13981445: D10095.diff
Sat, Oct 19, 4:35 PM
F13980936: D10095.id24275.diff
Sat, Oct 19, 1:25 PM
F13980612: D10095.diff
Sat, Oct 19, 11:39 AM
F13980479: D10095.id.diff
Sat, Oct 19, 10:57 AM
Subscribers

Details

Reviewers
epriestley
chad
Group Reviewers
Blessed Reviewers
Summary

Depends on previous related diffs, D10090 to D10094.

This shows the status of each build target and the build overall as the background color of the headers. It's a bit intense, but quite nice once you get used to it.

Test Plan

Viewed a build, saw the headers appear with the colored background.

harbormastercolors.png (777×853 px, 56 KB)

Diff Detail

Repository
rP Phabricator
Branch
build-view-header-color
Lint
Lint Passed
Unit
Tests Passed
Build Status
Buildable 1963
Build 1964: [Placeholder Plan] Wait for 30 Seconds

Event Timeline

hach-que retitled this revision from to Show build status as colors on headers.
hach-que updated this object.
hach-que edited the test plan for this revision. (Show Details)
hach-que added a reviewer: epriestley.
hach-que edited edge metadata.

The current pattern is to use the standard object and set the status as icon/text just under the title. These colored headers aren't used anywhere (I think?) and they'll likely get removed altogether since they don't fit the UI anywhere - at least where they were anticipated being used never came to fruition.

If these need more oomph, maybe it's a common flaw with other objects we can look at all at once, or build something special inside object box header like a larger icon.

I think this probably could be used more generally, but I'm not sure there's anywhere else that really warrants the intensity of making the whole header coloured.

After you get used to this on the build page in Harbormaster, it's definitely much more usable (it directs your eyes immediately to where the problem is) than just an individual icon with colour. Prior to this, it is just the status icon and colour, but it doesn't have the same "immediately look at the problem" effect.

The other nice thing about this is that it clearly groups content by the build target, because the build target headers are coloured, whereas the build logs have the standard header. So things feel as though they belong to the build target above it, rather than currently where it's just a bunch of boxes on the screen.

The CSS styles here do need to be moved somewhere more generic, but I wasn't quite sure what CSS file to move it into.

This is pretty ugly and not consistent with any other part of the UI. I think this page is just bad in general and has information at the wrong level of granularity.

The "Status" field is much less prominent and visible than it should be, while the list of build targets is basically incomprehensible because it's huge. It's less bad than it used to be, but still seems far too granular. This is only going to get worse over time -- imagine a more complicated build with parameterized targets and you could easily have 20-30 of those.

I think we should look at putting a summary table under the top property view, and possibly replacing all of the page content with that. Targets should get a detail page for all the granular stuff. The list of targets on the Buildable is basically better than this page is.

Basically, I think all these pages are organizing information wrong and presenting it at the wrong level of granularity, and we can produce a more useful UI by attacking that than by adding REALLY BRIGHT headers to compensate for the interface being way too granular.

Haha, I think Evan beat me to it. I think a summary table at the top is a great idea. There was some work done on Herald transactions that might be reusable, or I think there is an actual summary table like for reviewer status.

Another thought, simply add "[PASS} My Header Title" or "[FAIL} My Header Title" (color in pass/fail) to provide better reference.

I disagree that the buildable's view of targets is better than this page. The buildable view doesn't tell you anything useful at all, and doesn't give you any way of diagnosing an issue (you can't view logs, etc).

What Bamboo does is have a list on the left hand side that is the list of targets and their statuses, and the right hand side is the actively selected target (or job as they call it). They do use these kinds of header colours on each target and the build overall, but obviously for each target that's limited to the left hand side area.

That kind of multi-column layout with AJAX changing stuff is way outside my CSS / JS skills though, and I do think that this kind of header colourisation is at least an improvement over what we currently have.

In D10095#11, @chad wrote:

Another thought, simply add "[PASS} My Header Title" or "[FAIL} My Header Title" (color in pass/fail) to provide better reference.

I don't think that will be useful. We originally had a version of this without the header colours (just the status icon, name and it's colourisation), but it's nowhere near as clear as with the header colours.