Improve the pipelines design

app/assets/stylesheets/pages/pipelines.scss

+.pipeline-stage {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

app/controllers/projects/pipelines_controller.rb

@@ -25,7 +25,7 @@ class Projects::PipelinesController < Projects::ApplicationController
       flash[:alert] = e.message
       render 'new'
     rescue
-      flash[:alert] = 'Undefined error'
+      flash[:alert] = 'The pipeline could not be created. Please try again.'
       render 'new'
     end
   end

app/models/commit_status.rb

@@ -14,6 +14,7 @@ class CommitStatus < ActiveRecord::Base
   alias_attribute :author, :user
 
   scope :latest, -> { where(id: unscope(:select).select('max(id)').group(:name, :commit_id)) }
+  scope :retried, -> { where.not(id: latest) }
   scope :ordered, -> { order(:name) }
   scope :ignored, -> { where(allow_failure: true, status: [:failed, :canceled]) }
 

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

@@ -19,7 +19,7 @@
       - if commit.triggered?
         %span.label.label-primary triggered
       - if commit.yaml_errors.present?
-        %span.label.label-danger.has-tooltip(title="#{commit.yaml_errors}") yaml invalid
+        %span.label.label-danger.has-tooltip{ title: "#{commit.yaml_errors}" } yaml invalid
       - if commit.builds.any?(&:stuck?)
         %span.label.label-warning stuck
 
@@ -36,7 +36,7 @@
       %td
         - if status = stages_status[stage]
           - tooltip = "#{stage.titleize}: #{status}"
-          %span.has-tooltip(title="#{tooltip}"){class: "ci-status-icon-#{status}"}
+          %span.has-tooltip{ title: "#{tooltip}", class: "ci-status-icon-#{status}" }
             = ci_icon_for_status(status)
 
   %td
@@ -74,4 +74,4 @@
          
         - 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", class: "cred")
+            = icon("remove")

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

-- latest = statuses.latest
-- retried = statuses.where.not(id: latest)
 %tr
   %th{colspan: 10}
     %strong
-      - status = latest.status
+      - status = statuses.latest.status
       %span{class: "ci-status-link ci-status-icon-#{status}"}
         = ci_icon_for_status(status)
       - if stage
          
         = stage.titleize.pluralize
-  = render latest.ordered, coverage: @project.build_coverage_enabled?, tage: false, ref: false, allow_retry: true
-  = render retried.ordered, coverage: @project.build_coverage_enabled?, stage: false, ref: false, retried: true
+  = render statuses.latest.ordered, coverage: @project.build_coverage_enabled?, stage: false, ref: false, allow_retry: true
+  = render statuses.retried.ordered, coverage: @project.build_coverage_enabled?, stage: false, ref: false, retried: true
   %tr
     %td{colspan: 10}
        

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

@@ -27,14 +27,14 @@
     .pull-right
       = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline), class: "ci-status ci-#{pipeline.status}" do
         = ci_icon_for_status(pipeline.status)
-        pipeline:
+        Pipeline:
         = ci_label_for_status(pipeline.status)
 
   - elsif @commit.status
     .pull-right
       = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status ci-#{@commit.status}" do
         = ci_icon_for_status(@commit.status)
-        build:
+        Build:
         = ci_label_for_status(@commit.status)
 
   %span.light Authored by

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

@@ -27,7 +27,7 @@
     - if can? current_user, :create_pipeline, @project
       = link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do
         = icon('plus')
-        New
+        New pipeline
 
       - unless @repository.gitlab_ci_yml
         = link_to 'Get started with Pipelines', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
@@ -36,7 +36,7 @@
         = icon('wrench')
         %span CI Lint
 
-.gray-content-block
+.row-content-block
   - if @scope == 'running'
     Running pipelines for this project
   - elsif @scope.nil?
@@ -57,8 +57,8 @@
           %th Commit
           - stages.each do |stage|
             %th
-              %span.has-tooltip(title="#{stage.titleize}")
-                = truncate(stage.titleize.pluralize, length: 8)
+              %span.pipeline-stage.has-tooltip{ title: "#{stage.titleize}" }
+                = stage.titleize.pluralize
           %th
           %th
         = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages

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

@@ -9,7 +9,7 @@
   New Pipeline
 %hr
 
-= form_tag namespace_project_pipelines_path, method: :post, id: "new-pipeline-form", class: "form-horizontal js-create-branch-form js-requires-input" do
+= form_tag namespace_project_pipelines_path, method: :post, id: "new-pipeline-form", class: "form-horizontal js-new-pipeline-form js-requires-input" do
   .form-group
     = label_tag :ref, 'Create for', class: 'control-label'
     .col-sm-10
@@ -22,4 +22,4 @@
 :javascript
   var availableRefs = #{@project.repository.ref_names.to_json};
 
-  new NewBranchForm($('.js-create-branch-form'), availableRefs)
+  new NewBranchForm($('.js-new-pipeline-form'), availableRefs)