Implement a new build view

Orginal comment: https://gitlab.com/gitlab-org/gitlab-ce/issues/2932#note_2647887

Here's what I see as the intentional changes:

1. Improve job bar (color icons, upcasing, pipe separator)
2. Improve status and build meta info (combine into single line, under job bar)
3. Improve pull commit message to section above output (instead of sidebar)
4. Remove redundant meta info from sidebar (build # and other builds)
5. Improve colors of job output
6. Overall color/layout around the borders

Milestone changed to 8.5

mentioned in issue #2932 (closed)

mentioned in issue #4263 (closed)

Added frontend label

Added ~19173 label

mentioned in issue #12776 (moved)

Milestone changed to 8.6

I'm not sure how much you're planning on re-designing, but there are features in the Travis CI build output that I really like:

• Section / task "folding" - Only important info (build output) are shown, while Git clone, Docker pull, etc. hidden by default.
• Section / task labeling - As seen on the right side, this tells which part of the .travis-ci.yml is running
• Section / task timing - Also as seen on the right side, the amount of time each part took to execute
• Linkable line numbers - Sometimes it's nice to be able to send someone a link directly to a line in the build output.

(From https://travis-ci.org/JonathonReinhart/scuba/jobs/107068716)

I can post a separate issue if it would make sense.

@jonathon-reinhart That are very nice features! I think that adding permalinks to each line in build trace is a good beginning. What do you think @ayufan?

mentioned in issue #13205 (moved)

Maybe downloading a raw log would be also something useful, what do you think @jonathon-reinhart?

In my old fork of GitLab CI I did port the Travis-CI build log with all of it's features: lines, and folding: https://github.com/ayufan/gitlab-ci/blob/topic/ci/lib/ansi2html.rb#L86 We could think about reusing that :)

@grzesiek Ideally we should download raw trace in client and render everything with javascript :)

mentioned in issue #13559 (closed)

Milestone changed to 8.8

mentioned in issue #14717 (closed)

mentioned in issue #15598 (closed)

mentioned in issue #17686 (closed)

Milestone changed to 8.10

Milestone changed to 8.9

@ayufan We slated this for 8.9, but have we confirmed with @jschatz1 that frontend is going to be able to work on it?

@ayufan @markpundsack we most likely will have time. If we get pinged sooner rather than later.

@jschatz1 This is something that were already started by @iamphill: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3829

There are so many changes in that screenshot, it's hard to know what's covered by this issue. For example, I assume the changes to the left sidebar are orthogonal to this issue and just represent an intermediate state of icon development.

Here's what I see as the intentional changes:

1. Job bar (color icons, upcasing, pipe separator)
2. Combining status and build meta info into single line, under job bar
3. Pull commit message to section above output (instead of sidebar)
4. Remove redundant meta info from sidebar (build # and other builds)
5. Colors of job output
6. Overall color/layout around the borders

With our release of Pipelines, and the Atlassian and Jenkins announcing their own pipelines UIs, I can't help but wonder if we should use a pipelines view here as well. The example above has all of the jobs in a single stage, so it's not a good example to highlight pipelines.

Jenkins' Blue Ocean announcement looks like a pretty good interpretation of pipeline visuals. The pipeline takes up too much vertical space in those screenshots, but it's clean.

FWIW, I like @jonathon-reinhart's suggestions for Travis-style features. I'm not sure we currently have the data to handle all of it.

@jschatz1 Can we get !3829 (merged) merged without waiting on the rest of the items in this mockup? The changes in !3829 (merged) already look like a great improvement. In fact, the only piece untouched is the job bar (1) which I'd be happy to drop in favor of re-thinking in terms of Pipelines.

mentioned in issue #18141 (closed)

mentioned in issue #14664 (moved)

Moved pipeline rendering discussion to https://gitlab.com/gitlab-org/gitlab-ce/issues/18141.

Created https://gitlab.com/gitlab-org/gitlab-ce/issues/18144 for linkable log lines. Already issue for linkable log lines (https://gitlab.com/gitlab-org/gitlab-ce/issues/13205).

There's already an issue for collapsing the build log into sections (#14664 (moved)). I copied @jonathon-reinhart's comments there.

@markpundsack that screenshot looks old and out of date . I could be wrong though.

@iamphill @markpundsack reviewed. Will merged once fixed up.

mentioned in issue #18249 (closed)

Added ~15078 label

mentioned in issue #18664 (closed)

Removed ~15078 label

Removed ~19173 frontend labels

Milestone changed to %8.10

Added ~19173 frontend labels

A bunch of changes were shipped in 8.9, and other issues were updated with comments for the rest. I don't think there's anything left in this issue, so I'm closing it.

Status changed to closed

mentioned in issue gitlab#4215