Merge branch 'improve-pipeline-design' into 'master'

Improve design of Pipeline view

## What does this MR do?

Improves current design of Pipelines view when there is multiple stages.
This makes the statuses clickable and makes the view more compact.

## Screenshots (if relevant)

![Screen_Shot_2016-05-21_at_01.20.40](/uploads/dd031b7af7005c7a61f3165fefa8b7c9/Screen_Shot_2016-05-21_at_01.20.40.png)

cc @DouweM @markpundsack @rspeicher @marin 

See merge request !4230

12 files changed, 45 insertions, 56 deletions

diff --git a/CHANGELOG b/CHANGELOG
index bb0c3d55de9..4a38505eeea 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -39,6 +39,7 @@ v 8.8.0
   - Added inline diff styling for `change_title` system notes. (Adam Butler)
   - Project#open_branches has been cleaned up and no longer loads entire records into memory.
   - Escape HTML in commit titles in system note messages
+  - Improve design of Pipeline View
   - Fix scope used when accessing container registry
   - Fix creation of Ci::Commit object which can lead to pending, failed in some scenarios
   - Improve multiple branch push performance by memoizing permission checking
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 2ae6c61d524..ee4f573f91b 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -281,7 +281,7 @@
 }
 
 .page-with-layout-nav {
-  margin-top: 50px;
+  margin-top: $header-height + 2;
 
   &.controls-dropdown-visible {
     @media (max-width: $screen-xs-min) {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c4005ba1e69..4f8a8748d3f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -280,11 +280,5 @@
       background-color: $white-light;
       color: $gl-placeholder-color;
     }
-
-    th,
-    td {
-      padding: 16px;
-    }
   }
 }
-
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 546176b65e4..6128868b670 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,4 +1,24 @@
-.pipeline-stage {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.pipelines {
+  .stage {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .duration, .finished_at {
+    margin: 4px 0;
+  }
+
+  .commit-title {
+    margin: 0;
+  }
+
+  .controls {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: 4px;
+  }
 }
diff --git a/app/views/admin/builds/index.html.haml b/app/views/admin/builds/index.html.haml
index ed24757087b..d74cf8598e8 100644
--- a/app/views/admin/builds/index.html.haml
+++ b/app/views/admin/builds/index.html.haml
@@ -47,4 +47,3 @@
           = render "admin/builds/build", build: build
 
     = paginate @builds, theme: 'gitlab'
-
diff --git a/app/views/projects/builds/index.html.haml b/app/views/projects/builds/index.html.haml
index 98f4a9416e5..7c0bec264ab 100644
--- a/app/views/projects/builds/index.html.haml
+++ b/app/views/projects/builds/index.html.haml
@@ -35,9 +35,6 @@
         = icon('wrench')
         %span CI Lint
 
-.row-content-block
-  #{(@scope || 'all').capitalize} builds from this project
-
 %ul.content-list
   - if @builds.blank?
     %li
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index e23a3782c6b..5bd6e3f0ebc 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -57,14 +57,10 @@
 
   %td.duration
     - if build.duration
-      = icon("clock-o")
-       
       #{duration_in_words(build.finished_at, build.started_at)}
 
   %td.timestamp
     - if build.finished_at
-      = icon("calendar")
-       
       %span #{time_ago_with_tooltip(build.finished_at)}
 
   - if defined?(coverage) && coverage
diff --git a/app/views/projects/ci/commits/_commit.html.haml b/app/views/projects/ci/commits/_commit.html.haml
index 13162b41f9b..5b6b940a0c4 100644
--- a/app/views/projects/ci/commits/_commit.html.haml
+++ b/app/views/projects/ci/commits/_commit.html.haml
@@ -12,10 +12,10 @@
         ·
       = link_to commit.short_sha, namespace_project_commit_path(@project.namespace, @project, commit.sha), class: "commit-id monospace"
        
-      - if commit.latest?
-        %span.label.label-success latest
       - if commit.tag?
         %span.label.label-primary tag
+      - elsif commit.latest?
+        %span.label.label-success.has-tooltip{ title: 'Latest build for this branch' } latest
       - if commit.triggered?
         %span.label.label-primary triggered
       - if commit.yaml_errors.present?
@@ -23,33 +23,29 @@
       - if commit.builds.any?(&:stuck?)
         %span.label.label-warning stuck
 
-      %p
-        %span
-          - if commit_data = commit.commit_data
-            = link_to_gfm commit_data.title, namespace_project_commit_path(@project.namespace, @project, commit_data.id), class: "commit-row-message"
-          - else
-            Cant find HEAD commit for this branch
+      %p.commit-title
+        - if commit_data = commit.commit_data
+          = link_to_gfm truncate(commit_data.title, length: 60), namespace_project_commit_path(@project.namespace, @project, commit_data.id), class: "commit-row-message"
+        - else
+          Cant find HEAD commit for this branch
 
 
     - stages_status = commit.statuses.stages_status
     - stages.each do |stage|
       %td
-        - if status = stages_status[stage]
-          - tooltip = "#{stage.titleize}: #{status}"
-          %span.has-tooltip{ title: "#{tooltip}", class: "ci-status-icon-#{status}" }
+        - status = stages_status[stage]
+        - tooltip = "#{stage.titleize}: #{status || 'not found'}"
+        - if status
+          = link_to namespace_project_pipeline_path(@project.namespace, @project, commit.id, anchor: stage), class: "has-tooltip ci-status-icon-#{status}", title: tooltip do
             = ci_icon_for_status(status)
+        - else
+          .light.has-tooltip{ title: tooltip }
+            \-
 
   %td
     - if commit.started_at && commit.finished_at
-      %p
-        = icon("clock-o")
-         
+      %p.duration
         #{duration_in_words(commit.finished_at, commit.started_at)}
-    - if commit.finished_at
-      %p
-        = icon("calendar")
-         
-        #{time_ago_with_tooltip(commit.finished_at)}
 
   %td
     .controls.hidden-xs.pull-right
@@ -67,11 +63,9 @@
                   %span #{build.name}
 
       - if can?(current_user, :update_pipeline, @project)
-         
         - if commit.retryable? && commit.builds.failed.any?
           = link_to retry_namespace_project_pipeline_path(@project.namespace, @project, commit.id), class: 'btn has-tooltip', title: "Retry", method: :post do
             = icon("repeat")
-         
         - if commit.active?
           = link_to cancel_namespace_project_pipeline_path(@project.namespace, @project, commit.id), class: 'btn btn-remove has-tooltip', title: "Cancel", method: :post do
             = icon("remove")
diff --git a/app/views/projects/commit/_ci_stage.html.haml b/app/views/projects/commit/_ci_stage.html.haml
index aaa318e1eb3..ae7bb01223e 100644
--- a/app/views/projects/commit/_ci_stage.html.haml
+++ b/app/views/projects/commit/_ci_stage.html.haml
@@ -1,6 +1,7 @@
 %tr
   %th{colspan: 10}
     %strong
+      %a{name: stage}
       - status = statuses.latest.status
       %span{class: "ci-status-link ci-status-icon-#{status}"}
         = ci_icon_for_status(status)
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index 5041f0f5c03..5bc5c71283e 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -50,14 +50,10 @@
 
   %td.duration
     - if generic_commit_status.duration
-      = icon("clock-o")
-       
       #{duration_in_words(generic_commit_status.finished_at, generic_commit_status.started_at)}
 
   %td.timestamp
     - if generic_commit_status.finished_at
-      = icon("calendar")
-       
       %span #{time_ago_with_tooltip(generic_commit_status.finished_at)}
 
   - if defined?(coverage) && coverage
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 9d5b6d367c9..a6c12814adf 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -36,15 +36,7 @@
         = icon('wrench')
         %span CI Lint
 
-.row-content-block
-  - if @scope == 'running'
-    Running pipelines for this project
-  - elsif @scope.nil?
-    Pipelines for this project
-  - else
-    #{@scope.titleize} for this project
-
-%ul.content-list
+%ul.content-list.pipelines
   - stages = @pipelines.stages
   - if @pipelines.blank?
     %li
@@ -56,10 +48,10 @@
           %th ID
           %th Commit
           - stages.each do |stage|
-            %th
-              %span.pipeline-stage.has-tooltip{ title: "#{stage.titleize}" }
+            %th.stage
+              %span.has-tooltip{ title: "#{stage.titleize}" }
                 = stage.titleize.pluralize
-          %th
+          %th Duration
           %th
         = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
 
diff --git a/spec/features/builds_spec.rb b/spec/features/builds_spec.rb
index 716c4accf43..7a05d30e8b5 100644
--- a/spec/features/builds_spec.rb
+++ b/spec/features/builds_spec.rb
@@ -43,7 +43,6 @@ describe "Builds" do
       end
 
       it { expect(page).to have_selector('.nav-links li.active', text: 'All') }
-      it { expect(page).to have_selector('.row-content-block', text: 'All builds from this project') }
       it { expect(page).to have_content @build.short_sha }
       it { expect(page).to have_content @build.ref }
       it { expect(page).to have_content @build.name }