Show pipeline finished timestamp

Show pipeline finished timestamp on MR widget

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -14,6 +14,7 @@ import { s__, n__ } from '~/locale';
 import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
 import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import { MT_MERGE_STRATEGY } from '../constants';
 
@@ -28,6 +29,7 @@ export default {
     GlTooltip,
     PipelineArtifacts,
     PipelineMiniGraph,
+    TimeAgoTooltip,
     TooltipOnTruncate,
     LinkedPipelinesMiniList: () =>
       import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
@@ -114,6 +116,9 @@ export default {
     showSourceBranch() {
       return Boolean(this.pipeline.ref.branch);
     },
+    finishedAt() {
+      return this.pipeline?.details?.finished_at;
+    },
     coverageDeltaClass() {
       const delta = this.pipelineCoverageDelta;
       if (delta && parseFloat(delta) > 0) {
@@ -226,6 +231,13 @@ export default {
                   class="label-branch label-truncate gl-font-weight-normal"
                 />
               </template>
+              <template v-if="finishedAt">
+                <time-ago-tooltip
+                  :time="finishedAt"
+                  tooltip-placement="bottom"
+                  data-testid="finished-at"
+                />
+              </template>
             </div>
             <div v-if="pipeline.coverage" class="coverage" data-testid="pipeline-coverage">
               {{ s__('Pipeline|Test coverage') }} {{ pipeline.coverage }}%

app/serializers/merge_requests/pipeline_entity.rb

@@ -36,6 +36,8 @@ class MergeRequests::PipelineEntity < Grape::Entity
     end
 
     expose :stages, using: StageEntity
+
+    expose :finished_at
   end
 
   # Coverage isn't always necessary (e.g. when displaying project pipelines in

changelogs/unreleased/kp-show-pipeline-finish-timestamp.yml

+---
+title: Show pipeline finished timestamp on MR widget
+merge_request: 58618
+author:
+type: added

spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js

@@ -27,6 +27,7 @@ describe('MRWidgetPipeline', () => {
   const findPipelineID = () => wrapper.findByTestId('pipeline-id');
   const findPipelineInfoContainer = () => wrapper.findByTestId('pipeline-info-container');
   const findCommitLink = () => wrapper.findByTestId('commit-link');
+  const findPipelineFinishedAt = () => wrapper.findByTestId('finished-at');
   const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
   const findAllPipelineStages = () => wrapper.findAllComponents(PipelineStage);
   const findPipelineCoverage = () => wrapper.findByTestId('pipeline-coverage');
@@ -91,6 +92,13 @@ describe('MRWidgetPipeline', () => {
       expect(findCommitLink().attributes('href')).toBe(mockData.pipeline.commit.commit_path);
     });
 
+    it('should render pipeline finished timestamp', () => {
+      expect(findPipelineFinishedAt().attributes()).toMatchObject({
+        title: 'Apr 7, 2017 2:00pm GMT+0000',
+        datetime: mockData.pipeline.details.finished_at,
+      });
+    });
+
     it('should render pipeline graph', () => {
       expect(findPipelineMiniGraph().exists()).toBe(true);
       expect(findAllPipelineStages()).toHaveLength(mockData.pipeline.details.stages.length);

spec/serializers/merge_requests/pipeline_entity_spec.rb

@@ -30,7 +30,7 @@ RSpec.describe MergeRequests::PipelineEntity do
       )
       expect(subject[:commit]).to include(:short_id, :commit_path)
       expect(subject[:ref]).to include(:branch)
-      expect(subject[:details]).to include(:artifacts, :name, :status, :stages)
+      expect(subject[:details]).to include(:artifacts, :name, :status, :stages, :finished_at)
       expect(subject[:details][:status]).to include(:icon, :favicon, :text, :label, :tooltip)
       expect(subject[:flags]).to include(:merge_request_pipeline)
     end