Improve design of commit_box with status of builds and pipelines

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

 - @ci_commits.each do |ci_commit|
-  = render "ci_commit", ci_commit: ci_commit
+  = render "ci_commit", ci_commit: ci_commit, pipeline_details: true

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

@@ -7,20 +7,21 @@
       - if ci_commit.builds.running_or_pending.any?
         = link_to "Cancel running", cancel_namespace_project_pipeline_path(@project.namespace, @project, ci_commit.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
 
-  .oneline
-    Pipeline
-    = link_to "##{ci_commit.id}", namespace_project_pipeline_path(@project.namespace, @project, ci_commit.id), class: "monospace"
-    with
-    = pluralize ci_commit.statuses.count(:id), "build"
-    - if ci_commit.ref
-      for
-      = link_to ci_commit.ref, namespace_project_commits_path(@project.namespace, @project, ci_commit.ref), class: "monospace"
-    - if defined?(link_to_commit) && link_to_commit
-      for commit
-      = link_to ci_commit.short_sha, namespace_project_commit_path(@project.namespace, @project, ci_commit.sha), class: "monospace"
-    - if ci_commit.duration
-      in
-      = time_interval_in_words ci_commit.duration
+  - if defined?(pipeline_details) && pipeline_details
+    .oneline
+      Pipeline
+      = link_to "##{ci_commit.id}", namespace_project_pipeline_path(@project.namespace, @project, ci_commit.id), class: "monospace"
+      with
+      = pluralize ci_commit.statuses.count(:id), "build"
+      - if ci_commit.ref
+        for
+        = link_to ci_commit.ref, namespace_project_commits_path(@project.namespace, @project, ci_commit.ref), class: "monospace"
+      - if defined?(link_to_commit) && link_to_commit
+        for commit
+        = link_to ci_commit.short_sha, namespace_project_commit_path(@project.namespace, @project, ci_commit.sha), class: "monospace"
+      - if ci_commit.duration
+        in
+        = time_interval_in_words ci_commit.duration
 
 - if ci_commit.yaml_errors.present?
   .bs-callout.bs-callout-danger

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

@@ -23,20 +23,6 @@
 
 %p
 .commit-info-row
-  - if defined?(pipeline) && pipeline
-    .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:
-        = 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:
-        = ci_label_for_status(@commit.status)
-
   %span.light Authored by
   %strong
     = commit_author_link(@commit, avatar: true, size: 24)
@@ -60,6 +46,27 @@
   %span.commit-info.branches
     %i.fa.fa-spinner.fa-spin
 
+- if defined?(pipeline) && pipeline
+  .commit-info-row
+    Pipeline
+    = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline), class: "ci-status-link ci-status-icon-#{pipeline.status}" do
+      = ci_icon_for_status(pipeline.status)
+      = ci_label_for_status(pipeline.status)
+    - if pipeline.duration
+      in
+      = time_interval_in_words 3600
+
+- elsif @commit.status
+  .commit-info-row
+    Builds for
+    = pluralize(@commit.ci_commits.count, 'pipeline')
+    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status-link ci-status-icon-#{@commit.status}" do
+      = ci_icon_for_status(@commit.status)
+      = ci_label_for_status(@commit.status)
+    - if @commit.ci_commits.duration
+      in
+      = time_interval_in_words @commit.ci_commits.duration
+
 .commit-box.content-block
   %h3.commit-title
     = markdown escape_once(@commit.title), pipeline: :single_line