CI build page UI update

Added sidebar
Removed elements not present in design

app/assets/javascripts/application.js.coffee

@@ -267,8 +267,8 @@ $ ->
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
   $(window)
-    .off "resize"
-    .on "resize", (e) ->
+    .off "resize.app"
+    .on "resize.app", (e) ->
       fitSidebarForSize()
 
   gl.awardsHandler = new AwardsHandler()

app/assets/javascripts/ci/build.coffee

-class CiBuild
+class @CiBuild
   @interval: null
   @state: null
 
-  constructor: (build_url, build_status, build_state) ->
+  constructor: (@build_url, @build_status, @state) ->
     clearInterval(CiBuild.interval)
 
-    @state = build_state
+    # Init breakpoint checker
+    @bp = Breakpoints.get()
+    @hideSidebar()
+    $('.js-build-sidebar').niceScroll()
+    $(document)
+      .off 'click', '.js-sidebar-build-toggle'
+      .on 'click', '.js-sidebar-build-toggle', @toggleSidebar
 
-    @initScrollButtonAffix()
+    $(window)
+      .off 'resize.build'
+      .on 'resize.build', @hideSidebar
 
-    if build_status == "running" || build_status == "pending"
+    if $('#build-trace').length
+      @getInitialBuildTrace()
+      @initScrollButtonAffix()
+
+    if @build_status is "running" or @build_status is "pending"
       #
       # Bind autoscroll button to follow build output
       #
-      $("#autoscroll-button").bind "click", ->
+      $('#autoscroll-button').on 'click', ->
         state = $(this).data("state")
         if "enabled" is state
           $(this).data "state", "disabled"
@@ -27,26 +39,37 @@ class CiBuild
       # Only valid for runnig build when output changes during time
       #
       CiBuild.interval = setInterval =>
-        if window.location.href.split("#").first() is build_url
-          last_state = @state
-          $.ajax
-            url: build_url + "/trace.json?state=" + encodeURIComponent(@state)
-            dataType: "json"
-            success: (log) =>
-              return unless last_state is @state
-
-              if log.state and log.status is "running"
-                @state = log.state
-                if log.append
-                  $('.fa-refresh').before log.html
-                else
-                  $('#build-trace code').html log.html
-                  $('#build-trace code').append '<i class="fa fa-refresh fa-spin"/>'
-                @checkAutoscroll()
-              else if log.status isnt build_status
-                Turbolinks.visit build_url
+        if window.location.href.split("#").first() is @build_url
+          @getBuildTrace()
       , 4000
 
+  getInitialBuildTrace: ->
+    $.ajax
+      url: @build_url
+      dataType: 'json'
+      success: (build_data) ->
+        $('.js-build-output').html build_data.trace_html
+
+        if build_data.status is 'success' or build_data.status is 'failed'
+          $('.js-build-refresh').remove()
+
+  getBuildTrace: ->
+    $.ajax
+      url: "#{@build_url}/trace.json?state=#{encodeURIComponent(@state)}"
+      dataType: "json"
+      success: (log) =>
+        if log.state
+          @state = log.state
+
+        if log.status is "running"
+          if log.append
+            $('.js-build-output').append log.html
+          else
+            $('.js-build-output').html log.html
+          @checkAutoscroll()
+        else if log.status isnt @build_status
+          Turbolinks.visit @build_url
+
   checkAutoscroll: ->
     $("html,body").scrollTop $("#build-trace").height()  if "enabled" is $("#autoscroll-button").data("state")
 
@@ -61,4 +84,22 @@ class CiBuild
           $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top)
     )
 
-@CiBuild = CiBuild
+  shouldHideSidebar: ->
+    bootstrapBreakpoint = @bp.getBreakpointSize()
+
+    bootstrapBreakpoint is 'xs' or bootstrapBreakpoint is 'sm'
+
+  toggleSidebar: =>
+    if @shouldHideSidebar()
+      $('.js-build-sidebar')
+        .toggleClass 'right-sidebar-expanded right-sidebar-collapsed'
+
+  hideSidebar: =>
+    if @shouldHideSidebar()
+      $('.js-build-sidebar')
+        .removeClass 'right-sidebar-expanded'
+        .addClass 'right-sidebar-collapsed'
+    else
+      $('.js-build-sidebar')
+        .removeClass 'right-sidebar-collapsed'
+        .addClass 'right-sidebar-expanded'

app/assets/stylesheets/framework/sidebar.scss

@@ -273,7 +273,9 @@
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    padding-right: $sidebar_collapsed_width;
+    &:not(.build-sidebar) {
+      padding-right: $sidebar_collapsed_width;
+    }
   }
 
   @media (min-width: $screen-md-min) {

app/assets/stylesheets/framework/variables.scss

@@ -260,3 +260,6 @@ $calendar-header-color: #b8b8b8;
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: #faf9f9;
+
+$ci-output-bg: #1d1f21;
+$ci-text-color: #c5c8c6;

app/assets/stylesheets/pages/builds.scss

@@ -53,37 +53,92 @@
       left: 70px;
     }
   }
+}
 
-  .build-widget {
-    padding: 10px;
-    background: $background-color;
-    margin-bottom: 20px;
-    border-radius: 4px;
+.build-header {
+  position: relative;
+  padding-right: 40px;
 
-    .title {
-      margin-top: 0;
-      color: #666;
-      line-height: 1.5;
-    }
-    .attr-name {
-      color: #777;
-    }
+  @media (min-width: $screen-sm-min) {
+    padding-right: 0;
   }
 
-  .alert-disabled {
-    background: $background-color;
+  a {
+    color: $gl-gray;
 
-    a {
-      color: #3084bb !important;
+    &:hover {
+      color: $gl-link-color;
+      text-decoration: none;
     }
   }
+
+  code {
+    color: $code-color;
+  }
+
+  .avatar {
+    float: none;
+    margin-right: 2px;
+    margin-left: 2px;
+  }
 }
 
 table.builds {
-
   .build-link {
     a {
       color: $gl-dark-link-color;
     }
   }
 }
+
+.build-trace {
+  background: $ci-output-bg;
+  color: $ci-text-color;
+  white-space: pre;
+  overflow-x: auto;
+  font-size: 12px;
+
+  .fa-refresh {
+    font-size: 24px;
+  }
+
+  .bash {
+    display: block;
+  }
+}
+
+.right-sidebar.build-sidebar {
+  padding-top: $gl-padding;
+  padding-bottom: $gl-padding;
+
+  &.right-sidebar-collapsed {
+    display: none;
+  }
+
+  .block {
+    width: 100%;
+  }
+
+  .build-sidebar-header {
+    padding-top: 0;
+
+    .gutter-toggle {
+      margin-top: 0;
+    }
+  }
+}
+
+.build-detail-row {
+  margin-bottom: 5px;
+}
+
+.build-light-text {
+  color: $gl-placeholder-color;
+}
+
+.build-gutter-toggle {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -17px;
+}

app/assets/stylesheets/pages/issuable.scss

@@ -29,7 +29,7 @@
   }
 }
 
-.issuable-sidebar {
+.right-sidebar {
   a {
     color: inherit;
   }
@@ -74,6 +74,10 @@
     }
   }
 
+  .block-first {
+    padding-top: 0;
+  }
+
   .title {
     color: $gl-text-color;
     margin-bottom: 10px;

app/assets/stylesheets/pages/xterm.scss

@@ -11,18 +11,15 @@
   $magenta: #cd00cd;
   $cyan: #00cdcd;
   $white: #e5e5e5;
-  $l-black: #7f7f7f;
-  $l-red: #f00;
-  $l-green: #0f0;
-  $l-yellow: #ff0;
-  $l-blue: #5c5cff;
-  $l-magenta: #f0f;
-  $l-cyan: #0ff;
-  $l-white: #fff;
+  $l-black: #373b41;
+  $l-red: #c66;
+  $l-green: #b5bd68;
+  $l-yellow: #f0c674;
+  $l-blue: #81a2be;
+  $l-magenta: #b294bb;
+  $l-cyan: #8abeb7;
+  $l-white: $ci-text-color;
 
-  .term-bold {
-    font-weight: bold;
-  }
   .term-italic {
     font-style: italic;
   }

app/controllers/projects/builds_controller.rb

@@ -41,7 +41,7 @@ class Projects::BuildsController < Projects::ApplicationController
   def trace
     respond_to do |format|
       format.json do
-        render json: @build.trace_with_state(params[:state]).merge!(id: @build.id, status: @build.status)
+        render json: @build.trace_with_state(params[:state].presence).merge!(id: @build.id, status: @build.status)
       end
     end
   end

app/helpers/nav_helper.rb

@@ -30,6 +30,8 @@ module NavHelper
       else
         "page-gutter right-sidebar-expanded"
       end
+    elsif current_path?('builds#show')
+      "page-gutter build-sidebar right-sidebar-expanded"
     end
   end
 

app/views/projects/artifacts/browse.html.haml

 - page_title 'Artifacts', "#{@build.name} (##{@build.id})", 'Builds'
+- header_title project_title(@project, "Builds", project_builds_path(@project))
 
 .top-block.row-content-block.clearfix
   .pull-right

app/views/projects/builds/_header.html.haml

+.content-block.build-header
+  = ci_status_with_icon(@build.status)
+  Build
+  %strong ##{@build.id}
+  for commit
+  = link_to ci_status_path(@build.commit) do
+    %strong= @build.pipeline.short_sha
+  from
+  = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
+    %code
+      = @build.ref
+  - if @build.user
+    = render "user"
+  = time_ago_with_tooltip(@build.created_at)
+  %button.btn.btn-default.pull-right.visible-xs-block.visible-sm-block.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
+    = icon('angle-double-left')

app/views/projects/builds/_sidebar.html.haml

+%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar
+  .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
+    Build
+    %strong ##{@build.id}
+    %a.gutter-toggle.pull-right.js-sidebar-build-toggle{ href: "#" }
+      = icon('angle-double-right')
+  - if @build.coverage
+    .block.block-first
+      .title
+        Test coverage
+      %p.build-detail-row
+        #{@build.coverage}%
+
+  - if can?(current_user, :read_build, @project) && @build.artifacts?
+    .block{ class: ("block-first" if !@build.coverage) }
+      .title
+        Build artifacts
+      .btn-group.btn-group-justified{ role: :group }
+        = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default' do
+          Download
+
+        - if @build.artifacts_metadata?
+          = link_to browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default' do
+            Browse
+
+  .block{ class: ("block-first" if !@build.coverage && !(can?(current_user, :read_build, @project) && @build.artifacts?)) }
+    .title
+      Build details
+      - if @build.retryable?
+        = link_to "Retry", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'pull-right', method: :post
+    - if @build.merge_request
+      %p.build-detail-row
+        %span.build-light-text Merge Request:
+        = link_to "#{@build.merge_request.to_reference}", merge_request_path(@build.merge_request)
+    - if @build.duration
+      %p.build-detail-row
+        %span.build-light-text Duration:
+        #{duration_in_words(@build.finished_at, @build.started_at)}
+    - if @build.finished_at
+      %p.build-detail-row
+        %span.build-light-text Finished:
+        #{time_ago_with_tooltip(@build.finished_at)}
+    - if @build.erased_at
+      %p.build-detail-row
+        %span.build-light-text Erased:
+        #{time_ago_with_tooltip(@build.erased_at)}
+    %p.build-detail-row
+      %span.build-light-text Runner:
+      - if @build.runner && current_user && current_user.admin
+        = link_to "##{@build.runner.id}", admin_runner_path(@build.runner.id)
+      - elsif @build.runner
+        \##{@build.runner.id}
+    .btn-group.btn-group-justified{ role: :group }
+      - if @build.has_trace?
+        = link_to 'Raw', raw_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default'
+      - if @build.active?
+        = link_to "Cancel", cancel_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post
+      - if can?(current_user, :update_build, @project) && @build.erasable?
+        = link_to erase_namespace_project_build_path(@project.namespace, @project, @build),
+                  class: "btn btn-sm btn-default", method: :post,
+                  data: { confirm: "Are you sure you want to erase this build?" } do
+          Erase
+
+  - if @build.trigger_request
+    .build-widget
+      %h4.title
+        Trigger
+
+      %p
+        %span.build-light-text Token:
+        #{@build.trigger_request.trigger.short_token}
+
+      - if @build.trigger_request.variables
+        %p
+          %span.build-light-text Variables:
+
+        %code
+          - @build.trigger_request.variables.each do |key, value|
+            #{key}=#{value}
+
+  .block
+    .title
+      Commit message
+    %p.build-light-text.append-bottom-0
+      #{@build.pipeline.git_commit_message}
+
+  - if @build.tags.any?
+    .block
+      .title
+        Tags
+      - @build.tag_list.each do |tag|
+        %span.label.label-primary
+          = tag

app/views/projects/builds/_user.html.haml

+by
+%a{ href: user_path(@build.user) }
+  = image_tag avatar_icon(@build.user, 24), class: "avatar s24"
+  %strong= @build.user.to_reference

app/views/projects/builds/show.html.haml

 - page_title "#{@build.name} (##{@build.id})", "Builds"
 - trace_with_state = @build.trace_with_state
+- header_title project_title(@project, "Builds", project_builds_path(@project))
 
 .build-page
-  .row-content-block.top-block
-    Build ##{@build.id} for commit
-    %strong.monospace= link_to @build.pipeline.short_sha, ci_status_path(@build.pipeline)
-    from
-    = link_to @build.ref, namespace_project_commits_path(@project.namespace, @project, @build.ref)
-    - merge_request = @build.merge_request
-    - if merge_request
-      via
-      = link_to "merge request #{merge_request.to_reference}", merge_request_path(merge_request)
+  = render "header"
 
-  #up-build-trace
   - builds = @build.pipeline.builds.latest.to_a
   - if builds.size > 1
     %ul.nav-links.no-top.no-bottom
@@ -33,18 +25,6 @@
             ·
             %i.fa.fa-warning
             This build was retried.
-
-  .row-content-block.middle-block
-    .build-head
-      .clearfix
-        = ci_status_with_icon(@build.status)
-        - if @build.duration
-          %span
-            %i.fa.fa-time
-            #{duration_in_words(@build.finished_at, @build.started_at)}
-        .pull-right
-          #{time_ago_with_tooltip(@build.finished_at) if @build.finished_at}
-
   - if @build.stuck?
     - unless @build.any_runners_online?
       .bs-callout.bs-callout-warning
@@ -64,158 +44,27 @@
           = link_to namespace_project_runners_path(@build.project.namespace, @build.project) do
             Runners page
 
-  .row.prepend-top-default
-    .col-md-9
-      .clearfix
-        - if @build.active?
-          .autoscroll-container
-            %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
-          .clearfix
+  .prepend-top-default
+    - if @build.active?
+      .autoscroll-container
+        %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
       #js-build-scroll.scroll-controls
-        = link_to '#up-build-trace', class: 'btn' do
+        = link_to '#build-trace', class: 'btn' do
           %i.fa.fa-angle-up
         = link_to '#down-build-trace', class: 'btn' do
           %i.fa.fa-angle-down
+    - if @build.erased?
+      .erased.alert.alert-warning
+        - erased_by = "by #{link_to @build.erased_by.name, user_path(@build.erased_by)}" if @build.erased_by
+        Build has been erased #{erased_by.html_safe} #{time_ago_with_tooltip(@build.erased_at)}
+    - else
+      %pre.build-trace#build-trace
+        %code.bash.js-build-output
+        = icon("refresh spin", class: "js-build-refresh")
 
-      - if @build.erased?
-        .erased.alert.alert-warning
-          - erased_by = "by #{link_to @build.erased_by.name, user_path(@build.erased_by)}" if @build.erased_by
-          Build has been erased #{erased_by.html_safe} #{time_ago_with_tooltip(@build.erased_at)}
-      - else
-        %pre.trace#build-trace
-          %code.bash
-            = preserve do
-              = raw trace_with_state[:html]
-              - if @build.active?
-                %i{:class => "fa fa-refresh fa-spin"}
-
-      %div#down-build-trace
-
-    .col-md-3
-      - if @build.coverage
-        .build-widget
-          %h4.title
-            Test coverage
-          %h1 #{@build.coverage}%
-
-      - if can?(current_user, :read_build, @project) && @build.artifacts?
-        .build-widget.artifacts
-          %h4.title Build artifacts
-          .center
-            .btn-group{ role: :group }
-              = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-primary' do
-                = icon('download')
-                Download
-
-              - if @build.artifacts_metadata?
-                = link_to browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-primary' do
-                  = icon('folder-open')
-                  Browse
-
-      .build-widget.build-controls
-        %h4.title
-          Build ##{@build.id}
-          - if can?(current_user, :update_build, @project)
-            .center
-              .btn-group{ role: :group }
-                - if @build.active?
-                  = link_to "Cancel", cancel_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-danger', method: :post
-                - elsif @build.retryable?
-                  = link_to "Retry", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-primary', method: :post
-
-                - if @build.erasable?
-                  = link_to erase_namespace_project_build_path(@project.namespace, @project, @build),
-                            class: 'btn btn-sm btn-warning', method: :post,
-                            data: { confirm: 'Are you sure you want to erase this build?' } do
-                    = icon('eraser')
-                    Erase
-                - if @build.has_trace?
-                  = link_to 'Raw', raw_namespace_project_build_path(@project.namespace, @project, @build),
-                            class: 'btn btn-sm btn-success', target: '_blank'
-
-        .clearfix
-          - if @build.duration
-            %p
-              %span.attr-name Duration:
-              #{duration_in_words(@build.finished_at, @build.started_at)}
-          %p
-            %span.attr-name Created:
-            #{time_ago_with_tooltip(@build.created_at)}
-          - if @build.finished_at
-            %p
-              %span.attr-name Finished:
-              #{time_ago_with_tooltip(@build.finished_at)}
-          - if @build.erased_at
-            %p
-              %span.attr-name Erased:
-              #{time_ago_with_tooltip(@build.erased_at)}
-          %p
-            %span.attr-name Runner:
-            - if @build.runner && current_user && current_user.admin
-              = link_to "##{@build.runner.id}", admin_runner_path(@build.runner.id)
-            - elsif @build.runner
-              \##{@build.runner.id}
-
-      - if @build.trigger_request
-        .build-widget
-          %h4.title
-            Trigger
-
-          %p
-            %span.attr-name Token:
-            #{@build.trigger_request.trigger.short_token}
-
-          - if @build.trigger_request.variables
-            %p
-              %span.attr-name Variables:
-
-            %code
-              - @build.trigger_request.variables.each do |key, value|
-                #{key}=#{value}
-
-      .build-widget
-        %h4.title
-          Commit
-          .pull-right
-            %small
-              = link_to @build.pipeline.short_sha, ci_status_path(@build.pipeline), class: "monospace"
-        %p
-          %span.attr-name Branch:
-          = link_to @build.ref, namespace_project_commits_path(@project.namespace, @project, @build.ref)
-        %p
-          %span.attr-name Author:
-          #{@build.pipeline.git_author_name}
-        %p
-          %span.attr-name Message:
-          #{@build.pipeline.git_commit_message}
-
-      - if @build.tags.any?
-        .build-widget
-          %h4.title
-            Tags
-          - @build.tag_list.each do |tag|
-            %span.label.label-primary
-              = tag
-
-      - if @builds.present?
-        .build-widget
-          %h4.title #{pluralize(@builds.count(:id), "other build")} for
-          = succeed ":" do
-            = link_to @build.pipeline.short_sha, ci_status_path(@build.pipeline), class: "monospace"
-          %table.table.builds
-            - @builds.each_with_index do |build, i|
-              %tr.build
-                %td
-                  = ci_icon_for_status(build.status)
-                %td
-                  = link_to namespace_project_build_path(@project.namespace, @project, build) do
-                    - if build.name
-                      = build.name
-                    - else
-                      %span ##{build.id}
-
-                %td.status= build.status
+    #down-build-trace
 
+= render "sidebar"
 
-  :javascript
-    new CiBuild("#{namespace_project_build_url(@project.namespace, @project, @build)}", "#{@build.status}", "#{trace_with_state[:state]}")
+:javascript
+  new CiBuild("#{namespace_project_build_url(@project.namespace, @project, @build)}", "#{@build.status}", "#{trace_with_state[:state]}")

features/steps/project/builds/artifacts.rb

@@ -5,11 +5,11 @@ class Spinach::Features::ProjectBuildsArtifacts < Spinach::FeatureSteps
   include RepoHelpers
 
   step 'I click artifacts download button' do
-    page.within('.artifacts') { click_link 'Download' }
+    click_link 'Download'
   end
 
   step 'I click artifacts browse button' do
-    page.within('.artifacts') { click_link 'Browse' }
+    click_link 'Browse'
   end
 
   step 'I should see content of artifacts archive' do

spec/features/builds_spec.rb

@@ -93,9 +93,7 @@ describe "Builds" do
       end
 
       it 'has button to download artifacts' do
-        page.within('.artifacts') do
-          expect(page).to have_content 'Download'
-        end
+        expect(page).to have_content 'Download'
       end
     end
 
@@ -107,9 +105,7 @@ describe "Builds" do
       end
 
       it do
-        page.within('.build-controls') do
-          expect(page).to have_link 'Raw'
-        end
+        expect(page).to have_link 'Raw'
       end
     end
   end
@@ -165,15 +161,10 @@ describe "Builds" do
   end
 
   describe "GET /:project/builds/:id/download" do
-    context "Build from project" do
-      before do
-        @build.update_attributes(artifacts_file: artifacts_file)
-        visit namespace_project_build_path(@project.namespace, @project, @build)
-        page.within('.artifacts') { click_link 'Download' }
-      end
-
-      it { expect(page.status_code).to eq(200) }
-      it { expect(page.response_headers['Content-Type']).to eq(artifacts_file.content_type) }
+    before do
+      @build.update_attributes(artifacts_file: artifacts_file)
+      visit namespace_project_build_path(@project.namespace, @project, @build)
+      click_link 'Download'
     end
 
     context "Build from other project" do
@@ -246,10 +237,8 @@ describe "Builds" do
       it { expect(page.status_code).to eq(200) }
     end
 
-    context "Build from other project" do
-      before do
-        visit status_namespace_project_build_path(@project.namespace, @project, @build2)
-      end
+    it 'sends the right headers' do
+      click_link 'Raw'
 
       it { expect(page.status_code).to eq(404) }
     end