Merge branch 'pipelines-page-redesign' into 'master'

Pipelines page redesign

Closes #23637
![Screen_Shot_2016-11-15_at_1.36.34_PM](/uploads/edc6a58f00cca3e03ffd1689bd6eebd8/Screen_Shot_2016-11-15_at_1.36.34_PM.png)

See merge request !7487

app/assets/javascripts/pipelines.js.es6

@@ -3,26 +3,12 @@
 
   class Pipelines {
     constructor() {
-      this.initGraphToggle();
       this.addMarginToBuildColumns();
     }
 
-    initGraphToggle() {
-      this.pipelineGraph = document.querySelector('.pipeline-graph');
-      this.toggleButton = document.querySelector('.toggle-pipeline-btn');
-      this.toggleButtonText = this.toggleButton.querySelector('.toggle-btn-text');
-      this.toggleButton.addEventListener('click', this.toggleGraph.bind(this));
-    }
-
-    toggleGraph() {
-      const graphCollapsed = this.pipelineGraph.classList.contains('graph-collapsed');
-      this.toggleButton.classList.toggle('graph-collapsed');
-      this.pipelineGraph.classList.toggle('graph-collapsed');
-      this.toggleButtonText.textContent = graphCollapsed ? 'Hide' : 'Expand';
-    }
-
     addMarginToBuildColumns() {
-      const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
+      this.pipelineGraph = document.querySelector('.pipeline-graph');
+      const secondChildBuildNodes = document.querySelector('.pipeline-graph').querySelectorAll('.build:nth-child(2)');
       for (buildNodeIndex in secondChildBuildNodes) {
         const buildNode = secondChildBuildNodes[buildNodeIndex];
         const firstChildBuildNode = buildNode.previousElementSibling;

app/assets/stylesheets/framework.scss

@@ -39,3 +39,5 @@
 @import "framework/typography.scss";
 @import "framework/zen.scss";
 @import "framework/blank";
+@import "framework/wells.scss";
+@import "framework/page-header.scss";

app/assets/stylesheets/framework/buttons.scss

@@ -349,6 +349,12 @@
   }
 }
 
+.btn-inverted {
+  &-secondary {
+    @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
+  }
+}
+
 @media (max-width: $screen-xs-max) {
   .btn-wide-on-xs {
     width: 100%;

app/assets/stylesheets/framework/page-header.scss

+.page-content-header {
+  line-height: 34px;
+  padding: 10px 0;
+  margin-bottom: 0;
+
+  @media (min-width: $screen-sm-min) {
+    display: flex;
+    align-items: center;
+
+    .header-main-content {
+      flex: 1;
+    }
+  }
+
+  .header-action-buttons {
+    i {
+      color: $gl-icon-color;
+      font-size: 13px;
+      margin-right: 3px;
+    }
+
+    @media (max-width: $screen-xs-max) {
+      .btn {
+        width: 100%;
+        margin-top: 10px;
+      }
+
+      .dropdown {
+        width: 100%;
+      }
+    }
+  }
+
+  .avatar {
+    @extend .avatar-inline;
+    margin-left: 0;
+
+    @media (min-width: $screen-sm-min) {
+      margin-left: 4px;
+    }
+  }
+
+  .commit-committer-link,
+  .commit-author-link {
+    color: $gl-gray;
+    font-weight: bold;
+  }
+
+  .fa-clipboard {
+    color: $dropdown-title-btn-color;
+  }
+
+  .commit-info {
+    &.branches {
+      margin-left: 8px;
+    }
+  }
+
+  .ci-status-link {
+
+    svg {
+      position: relative;
+      top: 2px;
+      margin: 0 2px 0 3px;
+    }
+  }
+}

app/assets/stylesheets/framework/variables.scss

@@ -90,8 +90,8 @@ $table-border-color: #f0f0f0;
 $background-color: $gray-light;
 $dark-background-color: #f5f5f5;
 $table-text-gray: #8f8f8f;
-$widget-expand-item: #e8f2f7;
-$widget-inner-border: #eef0f2;
+$well-expand-item: #e8f2f7;
+$well-inner-border: #eef0f2;
 
 /*
  * Text

app/assets/stylesheets/framework/wells.scss

+.info-well {
+  background: $background-color;
+  color: $gl-gray;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  .well-segment {
+    padding: $gl-padding;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $well-inner-border;
+    }
+
+    &.branch-info {
+      .monospace,
+      .commit-info {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .icon-container {
+    display: inline-block;
+    margin-right: 8px;
+
+    svg {
+      position: relative;
+      top: 2px;
+      height: 16px;
+      width: 16px;
+    }
+
+    &.commit-icon {
+      svg {
+        path {
+          fill: $gl-text-color;
+        }
+      }
+    }
+  }
+
+  .label.label-gray {
+    background-color: $well-expand-item;
+  }
+}

app/assets/stylesheets/pages/builds.scss

@@ -62,10 +62,6 @@
   min-height: 58px;
   align-items: center;
 
-  .btn-inverted {
-    @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
-  }
-
   @media (max-width: $screen-sm-max) {
     padding-right: 40px;
 
@@ -76,7 +72,6 @@
 
   .header-content {
     flex: 1;
-  }
 
     a {
       color: $gl-gray;
@@ -86,6 +81,7 @@
         text-decoration: none;
       }
     }
+  }
 
   code {
     color: $code-color;

app/assets/stylesheets/pages/commit.scss

@@ -26,143 +26,12 @@
   white-space: pre-wrap;
 }
 
-.commit-info-row {
-  margin-bottom: 10px;
-  line-height: 24px;
-  padding-top: 6px;
-
-  &.commit-info-row-header {
-    line-height: 34px;
-    padding: 10px 0;
-    margin-bottom: 0;
-
-    @media (min-width: $screen-sm-min) {
-      display: flex;
-      align-items: center;
-
-      .commit-meta {
-        flex: 1;
-      }
-    }
-
-    .commit-hash-full {
-      @media (max-width: $screen-sm-max) {
-        width: 80px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-
-    .commit-action-buttons {
-      i {
-        color: $gl-icon-color;
-        font-size: 13px;
-        margin-right: 3px;
-      }
-
-      @media (max-width: $screen-xs-max) {
-        .dropdown {
-          width: 100%;
-          margin-top: 10px;
-        }
-
-        .dropdown-toggle {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  .avatar {
-    @extend .avatar-inline;
-    margin-left: 0;
-
-    @media (min-width: $screen-sm-min) {
-      margin-left: 4px;
-    }
-  }
-
-  .commit-committer-link,
-  .commit-author-link {
-    color: $gl-gray;
-    font-weight: bold;
-  }
-
-  .fa-clipboard {
-    color: $dropdown-title-btn-color;
-  }
-
-  .commit-info {
-    &.branches {
-      margin-left: 8px;
-    }
-  }
-
-  .ci-status-link {
-
-    svg {
-      position: relative;
-      top: 2px;
-      margin: 0 2px 0 3px;
-    }
-  }
-}
-
 .js-details-expand {
   &:hover {
     text-decoration: none;
   }
 }
 
-.commit-info-widget {
-  background: $background-color;
-  color: $gl-gray;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-
-  .widget-row {
-    padding: $gl-padding;
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid $widget-inner-border;
-    }
-
-    &.branch-info {
-      .monospace,
-      .commit-info {
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .icon-container {
-    display: inline-block;
-    margin-right: 8px;
-
-    svg {
-      position: relative;
-      top: 2px;
-      height: 16px;
-      width: 16px;
-    }
-
-    &.commit-icon {
-      svg {
-        path {
-          fill: $gl-text-color;
-        }
-      }
-    }
-  }
-
-  .label.label-gray {
-    background-color: $widget-expand-item;
-  }
-}
-
 .ci-status-link {
   svg {
     overflow: visible;
@@ -184,6 +53,17 @@
   }
 }
 
+.commit-hash-full {
+  @media (max-width: $screen-sm-max) {
+    width: 80px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
 .file-stats {
   ul {
     list-style: none;

app/assets/stylesheets/pages/merge_requests.scss

@@ -61,7 +61,7 @@
   }
 
   .ci_widget {
-    border-bottom: 1px solid $widget-inner-border;
+    border-bottom: 1px solid $well-inner-border;
 
     svg {
       margin-right: 4px;

app/assets/stylesheets/pages/pipelines.scss

@@ -300,6 +300,8 @@
 
 .pipeline-graph {
   width: 100%;
+  background-color: $background-color;
+  padding: $gl-padding;
   overflow: auto;
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
@@ -363,6 +365,7 @@
 
   .build {
     border: 1px solid $border-color;
+    background-color: $white-light;
     position: relative;
     padding: 7px 10px 8px;
     border-radius: 30px;

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

@@ -17,6 +17,6 @@
       = render "user"
     = time_ago_with_tooltip(@build.created_at)
   - if can?(current_user, :update_build, @build) && @build.retryable?
-    = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-inverted pull-right', method: :post
+    = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-inverted-secondary pull-right', method: :post
   %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/commit/_commit_box.html.haml

-.commit-info-row.commit-info-row-header
-  .commit-meta
+.page-content-header
+  .header-main-content
     %strong Commit
     %strong.monospace.js-details-short= @commit.short_id
     = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
@@ -19,7 +19,8 @@
       %strong
         = commit_committer_link(@commit, avatar: true, size: 24)
       #{time_ago_with_tooltip(@commit.committed_date)}
-  .commit-action-buttons
+
+  .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
       %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
         = icon('comment')
@@ -55,8 +56,8 @@
     %pre.commit-description
       = preserve(markdown(@commit.description, pipeline: :single_line, author: @commit.author))
 
-.commit-info-widget
-  .widget-row.branch-info
+.info-well
+  .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")
     %span.cgray= pluralize(@commit.parents.count, "parent")
@@ -66,7 +67,7 @@
       %i.fa.fa-spinner.fa-spin
 
   - if @commit.status
-    .widget-row.pipeline-info
+    .well-segment.pipeline-info
       .icon-container
         = ci_icon_for_status(@commit.status)
       Pipeline

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

 .pipeline-graph-container
   .row-content-block.build-content.middle-block.pipeline-actions
     .pull-right
-      %button.btn.btn-grouped.btn-white.toggle-pipeline-btn
-        %span.toggle-btn-text Hide
-        %span pipeline graph
-        %span.caret
       - if can?(current_user, :update_pipeline, pipeline.project)
         - if pipeline.builds.latest.failed.any?(&:retryable?)
           = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post

app/views/projects/commits/_commit.html.haml

@@ -36,7 +36,6 @@
         %pre.commit-row-description.js-toggle-content
           = preserve(markdown(commit.description, pipeline: :single_line, author: commit.author))
 
-      .commit-row-info
       = commit_author_link(commit, avatar: false, size: 24)
       authored
       #{time_ago_with_tooltip(commit.committed_date)}

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

-%p
-.commit-info-row
-  Pipeline
-  = link_to "##{@pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, @pipeline.id), class: "monospace"
-  with
-  = pluralize @pipeline.statuses.count(:id), "build"
-  - if @pipeline.ref
-    for
-    = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
-  - if @pipeline.duration
-    in
-    = time_interval_in_words(@pipeline.duration)
-  - if @pipeline.queued_duration
-    = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
-
-  .pull-right
+.page-content-header
+  .header-main-content
     = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), class: "ci-status ci-#{@pipeline.status}" do
       = ci_icon_for_status(@pipeline.status)
       = ci_label_for_status(@pipeline.status)
+    %strong Pipeline ##{@commit.pipelines.last.id}
+    triggered #{time_ago_with_tooltip(@commit.authored_date)} by
+    = author_avatar(@commit, size: 24)
+    = commit_author_link(@commit)
+  .header-action-buttons
+    - if can?(current_user, :update_pipeline, @pipeline.project)
+      - if @pipeline.builds.latest.failed.any?(&:retryable?)
+        = link_to "Retry failed", retry_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'btn btn-inverted-secondary', method: :post
+      - if @pipeline.builds.running_or_pending.any?
+        = link_to "Cancel running", cancel_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
 
 - if @commit
-  .commit-info-row
-    %span.light Authored by
-    %strong
-      = commit_author_link(@commit, avatar: true, size: 24)
-    #{time_ago_with_tooltip(@commit.authored_date)}
-
-.commit-info-row
-  %span.light Commit
-  = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace"
-  = clipboard_button(clipboard_text: @pipeline.sha)
-
-- if @commit
-  .commit-box.content-block
+  .commit-box
     %h3.commit-title
       = markdown(@commit.title, pipeline: :single_line)
     - if @commit.description.present?
       %pre.commit-description
         = preserve(markdown(@commit.description, pipeline: :single_line))
+
+.info-well
+  - if @commit.status
+    .well-segment.pipeline-info
+      .icon-container
+        = ci_icon_for_status(@commit.status)
+      = pluralize @pipeline.statuses.count(:id), "build"
+      - if @pipeline.ref
+        from
+        = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
+      - if @pipeline.duration
+        in
+        = time_interval_in_words(@pipeline.duration)
+      - if @pipeline.queued_duration
+        = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
+
+  .well-segment.branch-info
+    .icon-container.commit-icon
+      = custom_icon("icon_commit")
+    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace js-details-short"
+    = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
+      %span.text-expander
+        \...
+    %span.js-details-content.hide
+      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace commit-hash-full"
+    = clipboard_button(clipboard_text: @pipeline.sha, title: "Copy commit SHA to clipboard")

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

+.tabs-holder
+  %ul.nav-links.no-top.no-bottom
+    %li.active
+      = link_to "Pipeline", "#js-tab-pipeline", data: { target: '#js-tab-pipeline', action: 'pipeline', toggle: 'tab' }, class: 'pipeline-tab'
+    %li
+      = link_to "#js-tab-builds", data: { target: '#js-tab-builds', action: 'build', toggle: 'tab' }, class: 'builds-tab' do
+        Builds
+        %span.badge= pipeline.statuses.count
+
+.tab-content
+  #js-tab-pipeline.tab-pane.active
+    .build-content.middle-block.pipeline-graph
+      .pipeline-visualization
+        %ul.stage-column-list
+          - stages = pipeline.stages_with_latest_statuses
+          - stages.each do |stage, statuses|
+            %li.stage-column
+              .stage-name
+                %a{name: stage}
+                - if stage
+                  = stage.titleize
+              .builds-container
+                %ul
+                  = render "projects/commit/pipeline_stage", statuses: statuses
+
+  #js-tab-builds.tab-pane
+    - if pipeline.yaml_errors.present?
+      .bs-callout.bs-callout-danger
+        %h4 Found errors in your .gitlab-ci.yml:
+        %ul
+          - pipeline.yaml_errors.split(",").each do |error|
+            %li= error
+        You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
+
+    - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
+      .bs-callout.bs-callout-warning
+        \.gitlab-ci.yml not found in this commit
+
+    .table-holder.pipeline-holder
+      %table.table.ci-table.pipeline
+        %thead
+          %tr
+            %th Status
+            %th Build ID
+            %th Name
+            %th
+            - if pipeline.project.build_coverage_enabled?
+              %th Coverage
+            %th
+        - pipeline.statuses.relevant.stages.each do |stage|
+          = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)

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

@@ -3,9 +3,7 @@
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
-  .prepend-top-default
   - if @commit
     = render "projects/pipelines/info"
-    %div.block-connector
 
-  = render "projects/commit/pipeline", pipeline: @pipeline
+  = render "projects/pipelines/with_tabs", pipeline: @pipeline

changelogs/unreleased/23637-title-bar-pipelines.yml

+---
+title: Redesign pipelines page
+merge_request:
+author:

spec/features/projects/commits/cherry_pick_spec.rb

@@ -64,7 +64,7 @@ describe 'Cherry-pick Commits' do
 
   context "I cherry-pick a commit from a different branch", js: true do
     it do
-      find('.commit-action-buttons a.dropdown-toggle').click
+      find('.header-action-buttons a.dropdown-toggle').click
       find(:css, "a[href='#modal-cherry-pick-commit']").click
 
       page.within('#modal-cherry-pick-commit') do

spec/features/projects/pipelines_spec.rb

@@ -146,7 +146,8 @@ describe "Pipelines" do
   end
 
   describe 'GET /:project/pipelines/:id' do
-    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master') }
+    let(:project) { create(:project) }
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
 
     before do
       @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')