Display jobs as scrolling list in sidebar

3 files changed, 149 insertions, 128 deletions

diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 1ee4ee5f10e..c54d8fc2267 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -20,7 +20,6 @@
 
       this.populateJobs(build_stage);
       this.updateStageDropdownText(build_stage);
-      this.updateJobDropdownText(build_name);
       this.hideSidebar();
 
       $(document).off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
@@ -146,11 +145,6 @@
 
     Build.prototype.updateStageDropdownText = function(stage) {
       $('.stage-selection').text(stage);
-      this.updateJobDropdownText('-');
-    };
-
-    Build.prototype.updateJobDropdownText = function(name) {
-      $('.build-selection').text(name);
     };
 
     Build.prototype.updateDropdown = function(e) {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 5ecbe038612..f22b5fb84f8 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -53,22 +53,6 @@
       left: 70px;
     }
   }
-
-  .build-dropdown {
-    display: inline-block;
-    margin-top: 16px;
-
-    svg {
-      position: relative;
-      top: 2px;
-      margin-right: 3px;
-      height: 13px;
-    }
-
-    .stage-item {
-      cursor: pointer;
-    }
-  }
 }
 
 .build-header {
@@ -116,24 +100,70 @@
 }
 
 .right-sidebar.build-sidebar {
-  padding-top: $gl-padding;
-  padding-bottom: $gl-padding;
+  padding: $gl-padding 0;
+  border-left: 1px solid $border-color;
 
   &.right-sidebar-collapsed {
     display: none;
   }
 
+  .blocks-container {
+    padding: $gl-padding;
+  }
+
   .block {
     width: 100%;
   }
 
   .build-sidebar-header {
-    padding-top: 0;
+    padding: 0 $gl-padding $gl-padding;
 
     .gutter-toggle {
       margin-top: 0;
     }
   }
+
+  .stage-item {
+    cursor: pointer;
+
+    &:hover {
+      color: $gl-text-color;
+    }
+  }
+
+  .build-dropdown {
+    padding: 0 $gl-padding;
+  }
+
+  .builds-container {
+    margin: $gl-padding 0;
+    background-color: $white-light;
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+
+    svg {
+      position: relative;
+      top: 2px;
+      margin-right: 3px;
+      height: 13px;
+    }
+
+    a {
+      display: block;
+      padding: $gl-padding 10px;
+
+      &:hover {
+        background-color: $row-hover;
+        color: $gl-text-color;
+      }
+    }
+
+    .build-job {
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
 }
 
 .build-detail-row {
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index 47d0c93b0ba..726c816716c 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -23,122 +23,119 @@
           %li
             %a.stage-item= stage
 
-    .dropdown.build-dropdown
-      %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
-        %span.build-selection More
-        = icon('caret-down')
-      %ul.dropdown-menu
-        - statuses.each do |build_status|
-          - builds.select{|build| build.status == build_status}.each do |build|
-            %li.build-job{class: ('active' if build == @build), data: {stage: build.stage}}
-              = link_to namespace_project_build_path(@project.namespace, @project, build) do
-                = ci_icon_for_status(build.status)
-                %span
-                  - if build.name
-                    = build.name
-                  - else
-                    = build.id
+    .builds-container
+      - statuses.each do |build_status|
+        - builds.select{|build| build.status == build_status}.each do |build|
+          .build-job{class: ('active' if build == @build), data: {stage: build.stage}}
+            = link_to namespace_project_build_path(@project.namespace, @project, build) do
+              = ci_icon_for_status(build.status)
+              %span
+                - if build.name
+                  = build.name
+                - else
+                  = build.id
 
-      - if @build.retried?
-        %li.active
-          %a
-            Build ##{@build.id}
-            ·
-            %i.fa.fa-warning
-            This build was retried.
+        - if @build.retried?
+          %li.active
+            %a
+              Build ##{@build.id}
+              ·
+              %i.fa.fa-warning
+              This build was retried.
 
-  - if can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?)
-    .block{ class: ("block-first" if !@build.coverage) }
-      .title
-        Build artifacts
-      - if @build.artifacts_expired?
-        %p.build-detail-row
-          The artifacts were removed
-          #{time_ago_with_tooltip(@build.artifacts_expire_at)}
-      - elsif @build.artifacts_expire_at
-        %p.build-detail-row
-          The artifacts will be removed in
-          %span.js-artifacts-remove= @build.artifacts_expire_at
+  .blocks-container
+    - if can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?)
+      .block{ class: ("block-first" if !@build.coverage) }
+        .title
+          Build artifacts
+        - if @build.artifacts_expired?
+          %p.build-detail-row
+            The artifacts were removed
+            #{time_ago_with_tooltip(@build.artifacts_expire_at)}
+        - elsif @build.artifacts_expire_at
+          %p.build-detail-row
+            The artifacts will be removed in
+            %span.js-artifacts-remove= @build.artifacts_expire_at
 
-      - if @build.artifacts?
-        .btn-group.btn-group-justified{ role: :group }
-          - if @build.artifacts_expire_at
-            = link_to keep_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post do
-              Keep
+        - if @build.artifacts?
+          .btn-group.btn-group-justified{ role: :group }
+            - if @build.artifacts_expire_at
+              = link_to keep_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post do
+                Keep
 
-          = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default' do
-            Download
+            = 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
+            - 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? || @build.artifacts_expired?))) }
-    .title
-      Build details
-      - if can?(current_user, :update_build, @build) && @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:
-        = time_interval_in_words(@build.duration)
-    - if @build.finished_at
-      %p.build-detail-row
-        %span.build-light-text Finished:
-        #{time_ago_with_tooltip(@build.finished_at)}
-    - if @build.erased_at
+    .block{ class: ("block-first" if !@build.coverage && !(can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?))) }
+      .title
+        Build details
+        - if can?(current_user, :update_build, @build) && @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:
+          = time_interval_in_words(@build.duration)
+      - 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 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
+        %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
+    - 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:
+          %span.build-light-text Token:
+          #{@build.trigger_request.trigger.short_token}
 
+        - if @build.trigger_request.variables
+          %p
+            %span.build-light-text Variables:
 
-        - @build.trigger_request.variables.each do |key, value|
-          %code
-            #{key}=#{value}
 
-  .block
-    .title
-      Commit title
-    %p.build-light-text.append-bottom-0
-      #{@build.pipeline.git_commit_title}
+          - @build.trigger_request.variables.each do |key, value|
+            %code
+              #{key}=#{value}
 
-  - if @build.tags.any?
     .block
       .title
-        Tags
-      - @build.tag_list.each do |tag|
-        %span.label.label-primary
-          = tag
+        Commit title
+      %p.build-light-text.append-bottom-0
+        #{@build.pipeline.git_commit_title}
+
+    - if @build.tags.any?
+      .block
+        .title
+          Tags
+        - @build.tag_list.each do |tag|
+          %span.label.label-primary
+            = tag