Add link for failed pipelines

On the CI/CD analytics page
add a link to view failed pipelines.

Changelog: changed

app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue

 <script>
+import { GlLink } from '@gitlab/ui';
 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
 import { s__, n__ } from '~/locale';
 
 const defaultPrecision = 2;
 
 export default {
+  components: {
+    GlLink,
+  },
+  inject: {
+    failedPipelinesLink: {
+      default: '',
+    },
+  },
   props: {
     counts: {
       type: Object,
@@ -27,6 +36,7 @@ export default {
         {
           title: s__('PipelineCharts|Failed:'),
           value: n__('1 pipeline', '%d pipelines', this.counts.failed),
+          link: this.failedPipelinesLink,
         },
         {
           title: s__('PipelineCharts|Success ratio:'),
@@ -39,10 +49,13 @@ export default {
 </script>
 <template>
   <ul>
-    <template v-for="({ title, value }, index) in statistics">
+    <template v-for="({ title, value, link }, index) in statistics">
       <li :key="index">
         <span>{{ title }}</span>
-        <strong>{{ value }}</strong>
+        <gl-link v-if="link" :href="link">
+          {{ value }}
+        </gl-link>
+        <strong v-else>{{ value }}</strong>
       </li>
     </template>
   </ul>

app/assets/javascripts/projects/pipelines/charts/index.js

@@ -11,7 +11,7 @@ const apolloProvider = new VueApollo({
 });
 
 const mountPipelineChartsApp = (el) => {
-  const { projectPath } = el.dataset;
+  const { projectPath, failedPipelinesLink } = el.dataset;
 
   const shouldRenderDoraCharts = parseBoolean(el.dataset.shouldRenderDoraCharts);
   const shouldRenderQualitySummary = parseBoolean(el.dataset.shouldRenderQualitySummary);
@@ -25,6 +25,7 @@ const mountPipelineChartsApp = (el) => {
     apolloProvider,
     provide: {
       projectPath,
+      failedPipelinesLink,
       shouldRenderDoraCharts,
       shouldRenderQualitySummary,
     },

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

@@ -2,4 +2,5 @@
 
 #js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
   should_render_dora_charts: should_render_dora_charts.to_s,
-  should_render_quality_summary: should_render_quality_summary.to_s } }
+  should_render_quality_summary: should_render_quality_summary.to_s,
+  failed_pipelines_link: project_pipelines_path(@project, page: '1', scope: 'all', status: 'failed') } }

spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap

@@ -25,9 +25,13 @@ exports[`StatisticsList displays the counts data with labels 1`] = `
       Failed:
     </span>
      
-    <strong>
+    <gl-link-stub
+      href="/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed"
+    >
+      
         2 pipelines
-    </strong>
+      
+    </gl-link-stub>
   </li>
   <li>
     <span>

spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js

+import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Component from '~/projects/pipelines/charts/components/statistics_list.vue';
 import { counts } from '../mock_data';
@@ -5,8 +6,15 @@ import { counts } from '../mock_data';
 describe('StatisticsList', () => {
   let wrapper;
 
+  const failedPipelinesLink = '/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed';
+
+  const findFailedPipelinesLink = () => wrapper.findComponent(GlLink);
+
   beforeEach(() => {
     wrapper = shallowMount(Component, {
+      provide: {
+        failedPipelinesLink,
+      },
       propsData: {
         counts,
       },
@@ -15,10 +23,13 @@ describe('StatisticsList', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('displays the counts data with labels', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('displays failed pipelines link', () => {
+    expect(findFailedPipelinesLink().attributes('href')).toBe(failedPipelinesLink);
+  });
 });