Merge branch '17760-pipeline-builds-design' into 'master'

Resolve "Design updates for Builds & Pipelines"

## What does this MR do?
Updates pipelines design

## What are the relevant issue numbers?
Part of  #18920    
Closes #17760  
Closes #18479    
Closes #19618 

## Screenshots (if relevant)
![Screen_Shot_2016-07-11_at_2.44.22_PM](/uploads/5048928d86093802d84c3bd7f7c5dc85/Screen_Shot_2016-07-11_at_2.44.22_PM.png)
![Screen_Shot_2016-07-11_at_2.32.17_PM](/uploads/a7ab94c8042d33bd06ef633f62bf1c99/Screen_Shot_2016-07-11_at_2.32.17_PM.png)
![Screen_Shot_2016-07-11_at_2.44.43_PM](/uploads/8aa63229ad75d373c30f342d5c86c007/Screen_Shot_2016-07-11_at_2.44.43_PM.png)

See merge request !5156

CHANGELOG

@@ -83,6 +83,7 @@ v 8.10.0 (unreleased)
   - Style of import project buttons were fixed in the new project page. !5183 (rdemirbay)
   - Fix GitHub client requests when rate limit is disabled
   - Optimistic locking for Issues and Merge Requests (Title and description overriding prevention)
+  - Redesign Builds and Pipelines pages
 
 v 8.9.6
   - Fix importing of events under notes for GitLab projects. !5154

app/assets/stylesheets/framework/avatar.scss

@@ -20,6 +20,7 @@
   }
 
   &.s16 { width: 16px; height: 16px; margin-right: 6px; }
+  &.s20 { width: 20px; height: 20px; margin-right: 7px; }
   &.s24 { width: 24px; height: 24px; margin-right: 8px; }
   &.s26 { width: 26px; height: 26px; margin-right: 8px; }
   &.s32 { width: 32px; height: 32px; margin-right: 10px; }

app/assets/stylesheets/framework/variables.scss

@@ -17,6 +17,7 @@ $focus-border-color:    #3aabf0;
 $table-border-color:    #f0f0f0;
 $background-color:      #fafafa;
 $dark-background-color: #f7f7f7;
+$table-text-gray:       #8f8f8f;
 
 /*
  * Text

app/assets/stylesheets/pages/builds.scss

@@ -83,14 +83,6 @@
   }
 }
 
-table.builds {
-  .build-link {
-    a {
-      color: $gl-dark-link-color;
-    }
-  }
-}
-
 .build-trace {
   background: $ci-output-bg;
   color: $ci-text-color;

app/assets/stylesheets/pages/pipelines.scss

 .pipelines {
   .stage {
-    max-width: 100px;
+    max-width: 80px;
+    width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .duration, .finished_at {
-    margin: 4px 0;
-  }
-
   .commit-title {
     margin: 0;
   }
@@ -22,3 +19,136 @@
     margin: 4px;
   }
 }
+
+.content-list {
+
+  &.pipelines,
+  &.builds-content-list {
+    width: 100%;
+    overflow: auto;
+  }
+}
+
+.table.builds {
+  min-width: 1100px;
+
+  tr {
+    th {
+      padding: 16px;
+      border: none;
+    }
+  }
+
+  tbody {
+    border-top-width: 1px;
+  }
+
+  .branch-commit {
+
+    .branch-name {
+      margin-left: 8px;
+      font-weight: bold;
+      max-width: 180px;
+      overflow: hidden;
+      display: inline-block;
+      white-space: nowrap;
+      vertical-align: top;
+      text-overflow: ellipsis;
+    }
+
+    svg {
+      margin: 0 6px;
+      height: 14px;
+      width: auto;
+      vertical-align: middle;
+    }
+
+    .commit-id {
+      color: $gl-link-color;
+      margin-right: 8px;
+    }
+
+    .commit-title {
+      margin-top: 4px;
+      max-width: 320px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .avatar {
+      margin-left: 0;
+    }
+
+    .label-container {
+
+      .label {
+        margin-top: 5px;
+      }
+    }
+  }
+
+  .duration,
+  .finished-at {
+    color: $table-text-gray;
+    margin: 4px 0;
+
+    .fa {
+      font-size: 12px;
+    }
+
+    svg {
+      height: 12px;
+      width: auto;
+      vertical-align: middle;
+    }
+
+    .fa,
+    svg {
+      margin-right: 5px;
+    }
+  }
+
+  .pipeline-actions {
+
+    .btn {
+      margin: 0;
+      color: $table-text-gray;
+    }
+
+    .dropdown-toggle,
+    .dropdown-menu {
+      color: $table-text-gray;
+
+      .fa {
+        color: $table-text-gray;
+        margin-right: 6px;
+        font-size: 14px;
+      }
+    }
+
+    .btn-remove {
+      color: $white-light;
+    }
+
+    .btn-group {
+      &.open {
+        .btn-default {
+          background-color: $white-normal;
+          border-color: $border-white-normal;
+        }
+      }
+    }
+  }
+
+  .build-link {
+
+    a {
+      color: $gl-dark-link-color;
+    }
+  }
+
+  .btn-group.open .dropdown-toggle {
+    box-shadow: none;
+  }
+}

app/helpers/appearances_helper.rb

@@ -31,7 +31,7 @@ module AppearancesHelper
     end
   end
 
-  def navbar_icon(icon_name, size: 16)
+  def custom_icon(icon_name, size: 16)
     render "shared/icons/#{icon_name}.svg", size: size
   end
 end

app/views/admin/builds/_build.html.haml

 - project = build.project
-%tr.build
+%tr.build.commit
   %td.status
     = ci_status_with_icon(build.status)
 
-  %td.build-link
+  %td
+    .branch-commit
       - if can?(current_user, :read_build, build.project)
         = link_to namespace_project_build_url(build.project.namespace, build.project, build) do
-        %strong Build ##{build.id}
+          %span.build-link ##{build.id}
       - else
-      %strong Build ##{build.id}
+        %span.build-link ##{build.id}
 
       - if build.stuck?
         %i.fa.fa-warning.text-warning
 
-  %td
-    - if project
-      = link_to project.name_with_namespace, admin_namespace_project_path(project.namespace, project)
-
-  %td
-    = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "monospace"
-
-  %td
       - if build.ref
-      = link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref)
+        = link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref), class: "monospace branch-name"
       - else
         .light none
+      = custom_icon("icon_commit")
 
-  %td
-    - if build.try(:runner)
-      = runner_link(build.runner)
-    - else
-      .light none
-
-  %td
-    #{build.stage} / #{build.name}
+      = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "monospace commit-id"
 
-  %td
+      .label-container
         - if build.tags.any?
           - build.tags.each do |tag|
             %span.label.label-primary
@@ -45,12 +32,28 @@
         - if build.try(:allow_failure)
           %span.label.label-danger allowed to fail
 
-  %td.duration
+  %td
+    - if project
+      = link_to project.name_with_namespace, admin_namespace_project_path(project.namespace, project)
+
+  %td
+    - if build.try(:runner)
+      = runner_link(build.runner)
+    - else
+      .light none
+
+  %td
+    #{build.stage} / #{build.name}
+
+  %td
     - if build.duration
-      #{duration_in_words(build.finished_at, build.started_at)}
+      %p.duration
+        = custom_icon("icon_timer")
+        = duration_in_numbers(build.finished_at, build.started_at)
 
-  %td.timestamp
     - if build.finished_at
+      %p.finished-at
+        = icon("calendar")
         %span #{time_ago_with_tooltip(build.finished_at)}
 
   - if defined?(coverage) && coverage

app/views/admin/builds/index.html.haml

@@ -27,7 +27,7 @@
   .row-content-block.second-block
     #{(@scope || 'all').capitalize} builds
 
-  %ul.content-list
+  %ul.content-list.builds-content-list
     - if @builds.blank?
       %li
         .nothing-here-block No builds to show
@@ -37,15 +37,11 @@
           %thead
             %tr
               %th Status
-              %th Build ID
-              %th Project
               %th Commit
-              %th Ref
+              %th Project
               %th Runner
               %th Name
-              %th Tags
-              %th Duration
-              %th Finished at
+              %th
               %th
 
           - @builds.each do |build|

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

@@ -36,7 +36,7 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
 
-  %ul.content-list
+  %ul.content-list.builds-content-list
     - if @builds.blank?
       %li
         .nothing-here-block No builds to show
@@ -46,14 +46,10 @@
           %thead
             %tr
               %th Status
-              %th Build ID
               %th Commit
-              %th Ref
               %th Stage
               %th Name
-              %th Tags
-              %th Duration
-              %th Finished at
+              %th
               - if @project.build_coverage_enabled?
                 %th Coverage
               %th

app/views/projects/ci/builds/_build.html.haml

-%tr.build
+%tr.build.commit
   %td.status
     - if can?(current_user, :read_build, build)
       = ci_status_with_icon(build.status, namespace_project_build_url(build.project.namespace, build.project, build))
     - else
       = ci_status_with_icon(build.status)
 
-  %td.build-link
+  %td
+    .branch-commit
       - if can?(current_user, :read_build, build)
         = link_to namespace_project_build_url(build.project.namespace, build.project, build) do
-        %strong ##{build.id}
+          %span ##{build.id}
       - else
-      %strong ##{build.id}
+        %span ##{build.id}
 
       - if build.stuck?
         = icon('warning', class: 'text-warning has-tooltip', title: 'Build is stuck. Check runners.')
       - if defined?(retried) && retried
         = icon('warning', class: 'text-warning has-tooltip', title: 'Build was retried.')
 
-  - if defined?(commit_sha) && commit_sha
-    %td
-      = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "monospace"
-
       - if defined?(ref) && ref
-    %td
         - if build.ref
-        = link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref)
+          = link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref), class: "monospace branch-name"
         - else
           .light none
+        = custom_icon("icon_commit")
+
+      - if defined?(commit_sha) && commit_sha
+        = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "commit-id monospace"
+
+      .label-container
+        - if build.tags.any?
+          - build.tags.each do |tag|
+            %span.label.label-primary
+              = tag
+        - if build.try(:trigger_request)
+          %span.label.label-info triggered
+        - if build.try(:allow_failure)
+          %span.label.label-danger allowed to fail
+        - if defined?(retried) && retried
+          %span.label.label-warning retried
+
 
   - if defined?(runner) && runner
     %td
@@ -43,24 +56,13 @@
     = build.name
 
   %td
-    .label-container
-      - if build.tags.any?
-        - build.tags.each do |tag|
-          %span.label.label-primary
-            = tag
-      - if build.try(:trigger_request)
-        %span.label.label-info triggered
-      - if build.try(:allow_failure)
-        %span.label.label-danger allowed to fail
-      - if defined?(retried) && retried
-        %span.label.label-warning retried
-
-  %td.duration
     - if build.duration
-      #{duration_in_words(build.finished_at, build.started_at)}
-
-  %td.timestamp
+      %p.duration
+        = custom_icon("icon_timer")
+        = duration_in_numbers(build.finished_at, build.started_at)
     - if build.finished_at
+      %p.finished-at
+        = icon("calendar")
         %span #{time_ago_with_tooltip(build.finished_at)}
 
   - if defined?(coverage) && coverage
@@ -79,4 +81,4 @@
             = icon('remove', class: 'cred')
         - elsif defined?(allow_retry) && allow_retry && build.retryable?
           = link_to retry_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Retry', class: 'btn btn-build' do
-            = icon('refresh')
+            = icon('repeat')

app/views/projects/ci/pipelines/_pipeline.html.haml

 - status = pipeline.status
 %tr.commit
   %td.commit-link
-    = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline.id), class: "ci-status ci-#{status}" do
-      = ci_icon_for_status(status)
-      %strong ##{pipeline.id}
+    = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline.id) do
+      = ci_status_with_icon(status)
+
 
   %td
-    %div.branch-commit
+    .branch-commit
+      = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline.id) do
+        %span ##{pipeline.id}
       - if pipeline.ref
-        = link_to pipeline.ref, namespace_project_commits_path(@project.namespace, @project, pipeline.ref), class: "monospace"
-        ·
+        = link_to pipeline.ref, namespace_project_commits_path(@project.namespace, @project, pipeline.ref), class: "monospace branch-name"
+        = custom_icon("icon_commit")
       = link_to pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, pipeline.sha), class: "commit-id monospace"
-       
       - if pipeline.tag?
         %span.label.label-primary tag
       - elsif pipeline.latest?
@@ -25,6 +26,7 @@
 
       %p.commit-title
         - if commit = pipeline.commit
+          = commit_author_avatar(commit, size: 20)
           = link_to_gfm truncate(commit.title, length: 60), namespace_project_commit_path(@project.namespace, @project, commit.id), class: "commit-row-message"
         - else
           Cant find HEAD commit for this branch
@@ -45,15 +47,30 @@
   %td
     - if pipeline.started_at && pipeline.finished_at
       %p.duration
+        = custom_icon("icon_timer")
         = duration_in_numbers(pipeline.finished_at, pipeline.started_at)
+    - if pipeline.finished_at
+      %p.finished-at
+        = icon("calendar")
+        #{time_ago_with_tooltip(pipeline.finished_at)}
 
-  %td
+  %td.pipeline-actions
     .controls.hidden-xs.pull-right
       - artifacts = pipeline.builds.latest.select { |b| b.artifacts? }
       - if artifacts.present?
-        .dropdown.inline.build-artifacts
-          %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
-            = icon('download')
+        .btn-group.inline
+          .btn-group
+            %a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
+              = icon("play")
+              %b.caret
+            %ul.dropdown-menu.dropdown-menu-align-right
+              %li
+                = link_to '#' do
+                  = icon("play")
+                  %span Deploy to production
+          .btn-group
+            %a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'}
+              = icon("download")
               %b.caret
             %ul.dropdown-menu.dropdown-menu-align-right
               - artifacts.each do |build|

app/views/projects/commit/_pipeline.html.haml

@@ -42,9 +42,7 @@
         %th Status
         %th Build ID
         %th Name
-        %th Tags
-        %th Duration
-        %th Finished at
+        %th
         - if pipeline.project.build_coverage_enabled?
           %th Coverage
         %th

app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml

@@ -50,10 +50,12 @@
 
   %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

app/views/projects/issues/index.html.haml

@@ -32,7 +32,7 @@
         Code, test, and deploy together
     .blank-state
       .blank-state-icon
-        = navbar_icon("issues", size: 50)
+        = custom_icon("issues", size: 50)
       %h3.blank-state-title
         You don't have any issues right now.
       %p.blank-state-text

app/views/projects/pipelines/index.html.haml

@@ -45,13 +45,13 @@
       .table-holder
         %table.table.builds
           %tbody
-            %th ID
+            %th Status
             %th Commit
             - stages.each do |stage|
               %th.stage
                 %span.has-tooltip{ title: "#{stage.titleize}" }
                   = stage.titleize
-            %th Duration
+            %th
             %th
           = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
 

app/views/shared/icons/_icon_commit.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/>
+</svg>

app/views/shared/icons/_icon_timer.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="#8F8F8F" fill-rule="evenodd"><path d="M29.513 10.134A15.922 15.922 0 0 0 23 7.28V6h2.993C26.55 6 27 5.552 27 5V2a1 1 0 0 0-1.007-1H14.007C13.45 1 13 1.448 13 2v3a1 1 0 0 0 1.007 1H17v1.28C9.597 8.686 4 15.19 4 23c0 8.837 7.163 16 16 16s16-7.163 16-16c0-3.461-1.099-6.665-2.967-9.283l1.327-1.58a2.498 2.498 0 0 0-.303-3.53 2.499 2.499 0 0 0-3.528.315l-1.016 1.212zM20 34c6.075 0 11-4.925 11-11s-4.925-11-11-11S9 16.925 9 23s4.925 11 11 11z"/><path d="M19 21h-4.002c-.552 0-.998.452-.998 1.01v1.98c0 .567.447 1.01.998 1.01h7.004c.274 0 .521-.111.701-.291a.979.979 0 0 0 .297-.704v-8.01c0-.54-.452-.995-1.01-.995h-1.98a.997.997 0 0 0-1.01.995V21z"/></g></svg>
\ No newline at end of file