Adds pipeline mini-graph to system information box in Commit View

app/assets/javascripts/dispatcher.js

@@ -201,10 +201,13 @@ const UserCallout = require('./user_callout');
           new gl.Diff();
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
+          new MiniPipelineGraph({
+            container: '.js-commit-pipeline-graph',
+          }).bindEvents();
           break;
         case 'projects:commit:pipelines':
           new MiniPipelineGraph({
-            container: '.js-pipeline-table',
+            container: '.js-commit-pipeline-graph',
           }).bindEvents();
           break;
         case 'projects:commits:show':

app/assets/stylesheets/pages/commits.scss

@@ -38,6 +38,38 @@
   }
 }
 
+.pipeline-info {
+  .status-icon-container {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 3px;
+
+    svg {
+      display: block;
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  .mr-widget-pipeline-graph {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 -6px 0 0;
+
+    .dropdown-menu {
+      margin-top: 11px;
+    }
+  }
+}
+
+.branch-info .commit-icon {
+  margin-right: 3px;
+
+  svg {
+    top: 3px;
+  }
+}
+
 /*
  * Commit message textarea for web editor and
  * custom merge request message

app/models/commit.rb

@@ -231,6 +231,10 @@ class Commit
     project.pipelines.where(sha: sha)
   end
 
+  def latest_pipeline
+    pipelines.last
+  end
+
   def status(ref = nil)
     @statuses ||= {}
 

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

@@ -63,15 +63,15 @@
 
   - if @commit.status
     .well-segment.pipeline-info
-      %div{ class: "icon-container ci-status-icon-#{@commit.status}" }
-        = link_to namespace_project_pipeline_path(@project.namespace, @project, @commit.pipelines.last.id) do
+      .status-icon-container{ class: "ci-status-icon-#{@commit.status}" }
+        = link_to namespace_project_pipeline_path(@project.namespace, @project, @commit.latest_pipeline.id) do
           = ci_icon_for_status(@commit.status)
       Pipeline
-      = link_to "##{@commit.pipelines.last.id}", namespace_project_pipeline_path(@project.namespace, @project, @commit.pipelines.last.id), class: "monospace"
-      for
-      = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
-      %span.ci-status-label
+      = link_to "##{@commit.latest_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, @commit.latest_pipeline.id), class: "monospace"
       = ci_label_for_status(@commit.status)
+      - if @commit.latest_pipeline.stages.any?
+        .mr-widget-pipeline-graph
+          = render 'shared/mini_pipeline_graph', pipeline: @commit.latest_pipeline, klass: 'js-commit-pipeline-graph'
       in
       = time_interval_in_words @commit.pipelines.total_duration
 

changelogs/unreleased/28494-mini-pipeline-graph-commit-view.yml

+---
+title: Adds pipeline mini-graph to system information box in Commit View
+merge_request:
+author:

features/steps/project/commits/commits.rb

@@ -163,7 +163,7 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
   end
 
   step 'I see commit ci info' do
-    expect(page).to have_content "Pipeline #1 for 570e7b2a pending"
+    expect(page).to have_content "Pipeline #1 pending"
   end
 
   step 'I search "submodules" commits' do

spec/features/projects/commit/mini_pipeline_graph_spec.rb

+require 'rails_helper'
+
+feature 'Mini Pipeline Graph in Commit View', :js, :feature do
+  include WaitForAjax
+
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :public) }
+
+  before do
+    login_as(user)
+  end
+
+  context 'when commit has pipelines' do
+    let(:pipeline) do
+      create(:ci_empty_pipeline,
+              project: project,
+              ref: project.default_branch,
+              sha: project.commit.sha)
+    end
+
+    let(:build) do
+      create(:ci_build, pipeline: pipeline)
+    end
+
+    before do
+      build.run
+      visit namespace_project_commit_path(project.namespace, project, project.commit.id)
+    end
+
+    it 'should display a mini pipeline graph' do
+      expect(page).to have_selector('.mr-widget-pipeline-graph')
+    end
+
+    it 'should show the builds list when stage is clicked' do
+      first('.mini-pipeline-graph-dropdown-toggle').click
+
+      wait_for_ajax
+
+      page.within '.js-builds-dropdown-list' do
+        expect(page).to have_selector('.ci-status-icon-running')
+        expect(page).to have_content(build.stage)
+      end
+    end
+  end
+
+  context 'when commit does not have pipelines' do
+    before do
+      visit namespace_project_commit_path(project.namespace, project, project.commit.id)
+    end
+
+    it 'should not display a mini pipeline graph' do
+      expect(page).not_to have_selector('.mr-widget-pipeline-graph')
+    end
+  end
+end

spec/models/commit_spec.rb

@@ -212,6 +212,25 @@ eos
     end
   end
 
+  describe '#latest_pipeline' do
+    let!(:first_pipeline) do
+      create(:ci_empty_pipeline,
+        project: project,
+        sha: commit.sha,
+        status: 'success')
+    end
+    let!(:second_pipeline) do
+      create(:ci_empty_pipeline,
+        project: project,
+        sha: commit.sha,
+        status: 'success')
+    end
+
+    it 'returns latest pipeline' do
+      expect(commit.latest_pipeline).to eq second_pipeline
+    end
+  end
+
   describe '#status' do
     context 'without ref argument' do
       before do

spec/views/projects/commit/_commit_box.html.haml_spec.rb

@@ -25,7 +25,7 @@ describe 'projects/commit/_commit_box.html.haml' do
 
     render
 
-    expect(rendered).to have_text("Pipeline ##{third_pipeline.id} for #{Commit.truncate_sha(project.commit.sha)} failed")
+    expect(rendered).to have_text("Pipeline ##{third_pipeline.id} failed")
   end
 
   context 'viewing a commit' do