From 9731ef33c1b6a172cd0501b8301dc591635b9a89 Mon Sep 17 00:00:00 2001
From: Libor Vanc <lvanc@gitlab.com>
Date: Tue, 9 Jan 2024 11:50:50 -1000
Subject: [PATCH 01/10] Added MetricTile component

---
 .../charts/components/pipeline_charts.vue     | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index 6422b4ac8d889b..654d4cbe8cc535 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -23,6 +23,7 @@ import {
 import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '../graphql/queries/get_project_pipeline_statistics.query.graphql';
 import StatisticsList from './statistics_list.vue';
+import MetricTile from '~/analytics/shared/components/metric_tile.vue';
 
 const defaultAnalyticsValues = {
   weekPipelinesTotals: [],
@@ -54,6 +55,7 @@ export default {
     GlChartSeriesLabel,
     GlSkeletonLoader,
     StatisticsList,
+    MetricTile,
     CiCdAnalyticsCharts,
   },
   inject: {
@@ -70,6 +72,8 @@ export default {
       counts: { ...defaultCountValues },
       tooltipTitle: '',
       tooltipContent: [],
+      metrics: [],
+      groupedMetrics: [],
     };
   },
   apollo: {
@@ -212,6 +216,9 @@ export default {
         },
       };
     },
+    hasGroupedMetrics() {
+      return Boolean(this.groupBy.length);
+    },
   },
   methods: {
     hideAlert() {
@@ -324,15 +331,36 @@ export default {
       failure.text
     }}</gl-alert>
     <div class="gl-mb-3">
-      <h3>{{ s__('PipelineCharts|CI/CD Analytics') }}</h3>
+      <h4>{{ s__('PipelineCharts|CI/CD Analytics') }}</h4>
     </div>
-    <h4 class="gl-my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-md-12 gl-mb-3">
         <gl-skeleton-loader v-if="loading" :lines="5" />
         <statistics-list v-else :counts="formattedCounts" />
+
+        <!-- Adding Shared metric tile -->
+        <!-- 
+          <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
+          <div
+            v-for="(group, groupIndex) in groupedMetrics"
+            :key="group.key"
+            class="gl-mb-7"
+            data-testid="metrics-group"
+          >
+            <div class="gl-display-flex gl-flex-wrap">
+              <metric-tile
+                v-for="metric in group.data"
+                :key="metric.identifier"
+                :metric="metric"
+                class="gl-mt-5 gl-pr-10"
+              />
+            </div>
+          </div>
+        </div> 
+      -->
+
       </div>
-      <div v-if="!loading" class="col-md-6">
+      <div v-if="!loading" class="col-md-12">
         <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong>
         <gl-column-chart
           :height="$options.chartContainerHeight"
-- 
GitLab


From 5b2508f2a991f8a9f41052c6ae6c6565e3d9e302 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Fri, 9 Feb 2024 12:17:51 -0500
Subject: [PATCH 02/10] Proposed format changes for CI/CD Analytics

Update the layout of the CI/CD Analytics page to  match design in the
associated issue.

- bulleted list of stats changed to row of GlSingleStat components
- Pipeline charts moved above Pipeline durations chart

Changelog: fixed
---
 .../charts/components/pipeline_charts.vue     | 109 +++++++-----------
 .../charts/components/statistics_list.vue     |  71 ++++++++----
 locale/gitlab.pot                             |  19 ++-
 .../statistics_list_spec.js.snap              |  92 +++++++++------
 .../charts/components/statistics_list_spec.js |  18 +--
 5 files changed, 160 insertions(+), 149 deletions(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index 654d4cbe8cc535..b56c7c5e8eb45b 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -23,7 +23,6 @@ import {
 import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '../graphql/queries/get_project_pipeline_statistics.query.graphql';
 import StatisticsList from './statistics_list.vue';
-import MetricTile from '~/analytics/shared/components/metric_tile.vue';
 
 const defaultAnalyticsValues = {
   weekPipelinesTotals: [],
@@ -55,7 +54,6 @@ export default {
     GlChartSeriesLabel,
     GlSkeletonLoader,
     StatisticsList,
-    MetricTile,
     CiCdAnalyticsCharts,
   },
   inject: {
@@ -72,8 +70,6 @@ export default {
       counts: { ...defaultCountValues },
       tooltipTitle: '',
       tooltipContent: [],
-      metrics: [],
-      groupedMetrics: [],
     };
   },
   apollo: {
@@ -216,9 +212,6 @@ export default {
         },
       };
     },
-    hasGroupedMetrics() {
-      return Boolean(this.groupBy.length);
-    },
   },
   methods: {
     hideAlert() {
@@ -333,67 +326,47 @@ export default {
     <div class="gl-mb-3">
       <h4>{{ s__('PipelineCharts|CI/CD Analytics') }}</h4>
     </div>
-    <div class="row">
-      <div class="col-md-12 gl-mb-3">
-        <gl-skeleton-loader v-if="loading" :lines="5" />
-        <statistics-list v-else :counts="formattedCounts" />
-
-        <!-- Adding Shared metric tile -->
-        <!-- 
-          <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
-          <div
-            v-for="(group, groupIndex) in groupedMetrics"
-            :key="group.key"
-            class="gl-mb-7"
-            data-testid="metrics-group"
-          >
-            <div class="gl-display-flex gl-flex-wrap">
-              <metric-tile
-                v-for="metric in group.data"
-                :key="metric.identifier"
-                :metric="metric"
-                class="gl-mt-5 gl-pr-10"
-              />
-            </div>
-          </div>
-        </div> 
-      -->
-
-      </div>
-      <div v-if="!loading" class="col-md-12">
-        <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong>
-        <gl-column-chart
-          :height="$options.chartContainerHeight"
-          :option="chartOptions"
-          :bars="timesChartTransformedData"
-          :y-axis-title="__('Minutes')"
-          :x-axis-title="__('Commit')"
-          x-axis-type="category"
-        />
-      </div>
+    <statistics-list :loading="loading" :counts="formattedCounts" />
+    <h4>{{ __('Pipelines charts') }}</h4>
+    <div v-if="loading" class="gl-display-flex">
+      <gl-skeleton-loader :width="1000" :height="300">
+        <rect y="0" x="0" :width="1000" :height="300" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <ci-cd-analytics-charts
+      v-else
+      :charts="areaCharts"
+      :chart-options="$options.areaChartOptions"
+      :format-tooltip-text="formatTooltipText"
+    >
+      <template #tooltip-title>{{ tooltipTitle }}</template>
+      <template #tooltip-content>
+        <div
+          v-for="{ key, name, color, value } in tooltipContent"
+          :key="key"
+          class="gl-display-flex gl-justify-content-space-between"
+        >
+          <gl-chart-series-label class="gl-font-sm gl-mr-7" :color="color">
+            {{ name }}
+          </gl-chart-series-label>
+          <div class="gl-font-weight-bold">{{ value }}</div>
+        </div>
+      </template>
+    </ci-cd-analytics-charts>
+    <h4 class="gl-mt-6">{{ __('Pipeline durations for the last 30 commits') }}</h4>
+    <div v-if="loading" class="gl-display-flex">
+      <gl-skeleton-loader :width="1000" :height="300">
+        <rect y="0" x="0" :width="1000" :height="300" rx="4" />
+      </gl-skeleton-loader>
     </div>
-    <template v-if="!loading">
-      <hr />
-      <h4 class="gl-my-4">{{ __('Pipelines charts') }}</h4>
-      <ci-cd-analytics-charts
-        :charts="areaCharts"
-        :chart-options="$options.areaChartOptions"
-        :format-tooltip-text="formatTooltipText"
-      >
-        <template #tooltip-title>{{ tooltipTitle }}</template>
-        <template #tooltip-content>
-          <div
-            v-for="{ key, name, color, value } in tooltipContent"
-            :key="key"
-            class="gl-display-flex gl-justify-content-space-between"
-          >
-            <gl-chart-series-label class="gl-font-sm gl-mr-7" :color="color">
-              {{ name }}
-            </gl-chart-series-label>
-            <div class="gl-font-weight-bold">{{ value }}</div>
-          </div>
-        </template>
-      </ci-cd-analytics-charts>
-    </template>
+    <gl-column-chart
+      v-else
+      :height="$options.chartContainerHeight"
+      :option="chartOptions"
+      :bars="timesChartTransformedData"
+      :y-axis-title="__('Minutes')"
+      :x-axis-title="__('Commit')"
+      x-axis-type="category"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index f921b2dfdd63c4..c0390678d1ac7b 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -1,13 +1,16 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
-import { s__, n__, formatNumber } from '~/locale';
+import { s__, formatNumber } from '~/locale';
 
 const defaultPrecision = 2;
 
 export default {
   components: {
     GlLink,
+    GlSingleStat,
+    GlSkeletonLoader,
   },
   inject: {
     failedPipelinesLink: {
@@ -19,6 +22,11 @@ export default {
       type: Object,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     statistics() {
@@ -26,37 +34,58 @@ export default {
 
       return [
         {
-          title: s__('PipelineCharts|Total:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.total)),
+          label: s__('PipelineCharts|Total pipelines'),
+          identifier: 'total-pipelines',
+          value: formatNumber(this.counts.total),
         },
         {
-          title: s__('PipelineCharts|Successful:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.success)),
+          label: s__('PipelineCharts|Success ratio'),
+          identifier: 'success-ratio',
+          value: formatPercent(this.counts.successRatio, defaultPrecision),
         },
         {
-          title: s__('PipelineCharts|Failed:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.failed)),
-          link: this.failedPipelinesLink,
+          label: s__('PipelineCharts|Successful pipelines'),
+          identifier: 'successful-pipelines',
+          value: formatNumber(this.counts.success),
         },
         {
-          title: s__('PipelineCharts|Success ratio:'),
-          value: formatPercent(this.counts.successRatio, defaultPrecision),
+          label: s__('PipelineCharts|Failed pipelines'),
+          identifier: 'failed-pipelines',
+          value: formatNumber(this.counts.failed),
+          link: this.failedPipelinesLink, // not implemented in single stat
         },
+        /** NOT IMPLEMENTED */
+        // {
+        //   label: s__('PipelineCharts|Average duration'),
+        //   identifier: 'average-duration',
+        //   value: formatNumber(this.counts.failed),
+        // },
       ];
     },
   },
 };
 </script>
 <template>
-  <ul>
-    <template v-for="({ title, value, link }, index) in statistics">
-      <li :key="index">
-        <span>{{ title }}</span>
-        <gl-link v-if="link" :href="link">
-          {{ value }}
-        </gl-link>
-        <strong v-else>{{ value }}</strong>
-      </li>
+  <div class="gl-display-flex gl-flex-wrap gl-gap-6 gl-mb-6">
+    <template v-for="statistic in statistics">
+      <div v-if="loading" :key="statistic.identifier" class="gl-w-20 gl-h-10">
+        <gl-skeleton-loader :width="160" :height="56">
+          <rect y="0" x="0" :width="160" :height="56" rx="4" />
+        </gl-skeleton-loader>
+      </div>
+      <div v-else :key="statistic.label">
+        <gl-single-stat
+          :id="statistic.identifier"
+          :value="`${statistic.value}`"
+          :title="statistic.label"
+          :unit="statistic.unit || ''"
+          :should-animate="true"
+          use-delimiters
+        />
+        <gl-link v-if="statistic.link" :href="statistic.link">{{
+          s__('Pipeline|See details')
+        }}</gl-link>
+      </div>
     </template>
-  </ul>
+  </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4084c1645d51ca..5a738188582b3f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1666,11 +1666,6 @@ msgid_plural "%{merge_requests} open merge requests"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "1 pipeline"
-msgid_plural "%d pipelines"
-msgstr[0] ""
-msgstr[1] ""
-
 msgid "1 role"
 msgid_plural "%d roles"
 msgstr[0] ""
@@ -35959,22 +35954,19 @@ msgstr ""
 msgid "PipelineCharts|CI/CD Analytics"
 msgstr ""
 
-msgid "PipelineCharts|Failed:"
+msgid "PipelineCharts|Failed pipelines"
 msgstr ""
 
-msgid "PipelineCharts|Overall statistics"
+msgid "PipelineCharts|Success ratio"
 msgstr ""
 
-msgid "PipelineCharts|Success ratio:"
-msgstr ""
-
-msgid "PipelineCharts|Successful:"
+msgid "PipelineCharts|Successful pipelines"
 msgstr ""
 
 msgid "PipelineCharts|There was an error parsing the data for the charts."
 msgstr ""
 
-msgid "PipelineCharts|Total:"
+msgid "PipelineCharts|Total pipelines"
 msgstr ""
 
 msgid "PipelineEditorFileTree|Configuration files added with the include keyword"
@@ -36763,6 +36755,9 @@ msgstr ""
 msgid "Pipeline|Running"
 msgstr ""
 
+msgid "Pipeline|See details"
+msgstr ""
+
 msgid "Pipeline|Skipped"
 msgstr ""
 
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
index a2877a9f17c78c..27a33ee49cabda 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -1,40 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatisticsList displays the counts data with labels 1`] = `
-<ul>
-  <li>
-    <span>
-      Total:
-    </span>
-    <strong>
-      40,000 pipelines
-    </strong>
-  </li>
-  <li>
-    <span>
-      Successful:
-    </span>
-    <strong>
-      20,000 pipelines
-    </strong>
-  </li>
-  <li>
-    <span>
-      Failed:
-    </span>
-    <gl-link-stub
-      href="/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed"
-    >
-      20,000 pipelines
-    </gl-link-stub>
-  </li>
-  <li>
-    <span>
-      Success ratio:
-    </span>
-    <strong>
-      50.00%
-    </strong>
-  </li>
-</ul>
+<div
+  class="gl-display-flex gl-flex-wrap gl-gap-6 gl-mb-6"
+>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-0"
+      shouldanimate="true"
+      title="Total pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="40,000"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-1"
+      shouldanimate="true"
+      title="Success ratio"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="50.00%"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-2"
+      shouldanimate="true"
+      title="Successful pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="20,000"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-3"
+      shouldanimate="true"
+      title="Failed pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="20,000"
+      variant="muted"
+    />
+  </div>
+</div>
 `;
diff --git a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
index 24dbc628ce6939..b7a04055b2408d 100644
--- a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
@@ -1,4 +1,9 @@
-import { GlLink } from '@gitlab/ui';
+/**
+ * NOTE: the link to failed pipelines cannot be included in GlSingleStat as it is currently implemented.
+ * Relevant lines in this file have been removed.
+ *
+ * See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/141307#note_1766620265 for more details.
+ */
 import { shallowMount } from '@vue/test-utils';
 import Component from '~/projects/pipelines/charts/components/statistics_list.vue';
 import { counts } from '../mock_data';
@@ -6,15 +11,8 @@ 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,
       },
@@ -24,8 +22,4 @@ describe('StatisticsList', () => {
   it('displays the counts data with labels', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
-
-  it('displays failed pipelines link', () => {
-    expect(findFailedPipelinesLink().attributes('href')).toBe(failedPipelinesLink);
-  });
 });
-- 
GitLab


From 9c8e47f8ff1efbeff656ea01272ac2c0153e318e Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Sat, 10 Feb 2024 12:06:56 -0500
Subject: [PATCH 03/10] Do not show link when 0 failed pipelines

Per suggestion from Libor
---
 .../projects/pipelines/charts/components/statistics_list.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index c0390678d1ac7b..f623b945baabd7 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -82,7 +82,7 @@ export default {
           :should-animate="true"
           use-delimiters
         />
-        <gl-link v-if="statistic.link" :href="statistic.link">{{
+        <gl-link v-if="statistic.link && statistic.value !== 0" :href="statistic.link">{{
           s__('Pipeline|See details')
         }}</gl-link>
       </div>
-- 
GitLab


From b9dc9dd16c7972c34b27321534b325368142a7f8 Mon Sep 17 00:00:00 2001
From: Libor Vanc <lvanc@gitlab.com>
Date: Tue, 9 Jan 2024 11:50:50 -1000
Subject: [PATCH 04/10] Added MetricTile component

---
 .../charts/components/pipeline_charts.vue     | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index 6422b4ac8d889b..654d4cbe8cc535 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -23,6 +23,7 @@ import {
 import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '../graphql/queries/get_project_pipeline_statistics.query.graphql';
 import StatisticsList from './statistics_list.vue';
+import MetricTile from '~/analytics/shared/components/metric_tile.vue';
 
 const defaultAnalyticsValues = {
   weekPipelinesTotals: [],
@@ -54,6 +55,7 @@ export default {
     GlChartSeriesLabel,
     GlSkeletonLoader,
     StatisticsList,
+    MetricTile,
     CiCdAnalyticsCharts,
   },
   inject: {
@@ -70,6 +72,8 @@ export default {
       counts: { ...defaultCountValues },
       tooltipTitle: '',
       tooltipContent: [],
+      metrics: [],
+      groupedMetrics: [],
     };
   },
   apollo: {
@@ -212,6 +216,9 @@ export default {
         },
       };
     },
+    hasGroupedMetrics() {
+      return Boolean(this.groupBy.length);
+    },
   },
   methods: {
     hideAlert() {
@@ -324,15 +331,36 @@ export default {
       failure.text
     }}</gl-alert>
     <div class="gl-mb-3">
-      <h3>{{ s__('PipelineCharts|CI/CD Analytics') }}</h3>
+      <h4>{{ s__('PipelineCharts|CI/CD Analytics') }}</h4>
     </div>
-    <h4 class="gl-my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-md-12 gl-mb-3">
         <gl-skeleton-loader v-if="loading" :lines="5" />
         <statistics-list v-else :counts="formattedCounts" />
+
+        <!-- Adding Shared metric tile -->
+        <!-- 
+          <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
+          <div
+            v-for="(group, groupIndex) in groupedMetrics"
+            :key="group.key"
+            class="gl-mb-7"
+            data-testid="metrics-group"
+          >
+            <div class="gl-display-flex gl-flex-wrap">
+              <metric-tile
+                v-for="metric in group.data"
+                :key="metric.identifier"
+                :metric="metric"
+                class="gl-mt-5 gl-pr-10"
+              />
+            </div>
+          </div>
+        </div> 
+      -->
+
       </div>
-      <div v-if="!loading" class="col-md-6">
+      <div v-if="!loading" class="col-md-12">
         <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong>
         <gl-column-chart
           :height="$options.chartContainerHeight"
-- 
GitLab


From f42bfe9011ffe90258b7b040326af2f99d42f70c Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Fri, 9 Feb 2024 12:17:51 -0500
Subject: [PATCH 05/10] Proposed format changes for CI/CD Analytics

Update the layout of the CI/CD Analytics page to  match design in the
associated issue.

- bulleted list of stats changed to row of GlSingleStat components
- Pipeline charts moved above Pipeline durations chart

Changelog: fixed
---
 .../charts/components/pipeline_charts.vue     | 109 +++++++-----------
 .../charts/components/statistics_list.vue     |  71 ++++++++----
 locale/gitlab.pot                             |  19 ++-
 .../statistics_list_spec.js.snap              |  92 +++++++++------
 .../charts/components/statistics_list_spec.js |  18 +--
 5 files changed, 160 insertions(+), 149 deletions(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index 654d4cbe8cc535..b56c7c5e8eb45b 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -23,7 +23,6 @@ import {
 import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '../graphql/queries/get_project_pipeline_statistics.query.graphql';
 import StatisticsList from './statistics_list.vue';
-import MetricTile from '~/analytics/shared/components/metric_tile.vue';
 
 const defaultAnalyticsValues = {
   weekPipelinesTotals: [],
@@ -55,7 +54,6 @@ export default {
     GlChartSeriesLabel,
     GlSkeletonLoader,
     StatisticsList,
-    MetricTile,
     CiCdAnalyticsCharts,
   },
   inject: {
@@ -72,8 +70,6 @@ export default {
       counts: { ...defaultCountValues },
       tooltipTitle: '',
       tooltipContent: [],
-      metrics: [],
-      groupedMetrics: [],
     };
   },
   apollo: {
@@ -216,9 +212,6 @@ export default {
         },
       };
     },
-    hasGroupedMetrics() {
-      return Boolean(this.groupBy.length);
-    },
   },
   methods: {
     hideAlert() {
@@ -333,67 +326,47 @@ export default {
     <div class="gl-mb-3">
       <h4>{{ s__('PipelineCharts|CI/CD Analytics') }}</h4>
     </div>
-    <div class="row">
-      <div class="col-md-12 gl-mb-3">
-        <gl-skeleton-loader v-if="loading" :lines="5" />
-        <statistics-list v-else :counts="formattedCounts" />
-
-        <!-- Adding Shared metric tile -->
-        <!-- 
-          <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
-          <div
-            v-for="(group, groupIndex) in groupedMetrics"
-            :key="group.key"
-            class="gl-mb-7"
-            data-testid="metrics-group"
-          >
-            <div class="gl-display-flex gl-flex-wrap">
-              <metric-tile
-                v-for="metric in group.data"
-                :key="metric.identifier"
-                :metric="metric"
-                class="gl-mt-5 gl-pr-10"
-              />
-            </div>
-          </div>
-        </div> 
-      -->
-
-      </div>
-      <div v-if="!loading" class="col-md-12">
-        <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong>
-        <gl-column-chart
-          :height="$options.chartContainerHeight"
-          :option="chartOptions"
-          :bars="timesChartTransformedData"
-          :y-axis-title="__('Minutes')"
-          :x-axis-title="__('Commit')"
-          x-axis-type="category"
-        />
-      </div>
+    <statistics-list :loading="loading" :counts="formattedCounts" />
+    <h4>{{ __('Pipelines charts') }}</h4>
+    <div v-if="loading" class="gl-display-flex">
+      <gl-skeleton-loader :width="1000" :height="300">
+        <rect y="0" x="0" :width="1000" :height="300" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <ci-cd-analytics-charts
+      v-else
+      :charts="areaCharts"
+      :chart-options="$options.areaChartOptions"
+      :format-tooltip-text="formatTooltipText"
+    >
+      <template #tooltip-title>{{ tooltipTitle }}</template>
+      <template #tooltip-content>
+        <div
+          v-for="{ key, name, color, value } in tooltipContent"
+          :key="key"
+          class="gl-display-flex gl-justify-content-space-between"
+        >
+          <gl-chart-series-label class="gl-font-sm gl-mr-7" :color="color">
+            {{ name }}
+          </gl-chart-series-label>
+          <div class="gl-font-weight-bold">{{ value }}</div>
+        </div>
+      </template>
+    </ci-cd-analytics-charts>
+    <h4 class="gl-mt-6">{{ __('Pipeline durations for the last 30 commits') }}</h4>
+    <div v-if="loading" class="gl-display-flex">
+      <gl-skeleton-loader :width="1000" :height="300">
+        <rect y="0" x="0" :width="1000" :height="300" rx="4" />
+      </gl-skeleton-loader>
     </div>
-    <template v-if="!loading">
-      <hr />
-      <h4 class="gl-my-4">{{ __('Pipelines charts') }}</h4>
-      <ci-cd-analytics-charts
-        :charts="areaCharts"
-        :chart-options="$options.areaChartOptions"
-        :format-tooltip-text="formatTooltipText"
-      >
-        <template #tooltip-title>{{ tooltipTitle }}</template>
-        <template #tooltip-content>
-          <div
-            v-for="{ key, name, color, value } in tooltipContent"
-            :key="key"
-            class="gl-display-flex gl-justify-content-space-between"
-          >
-            <gl-chart-series-label class="gl-font-sm gl-mr-7" :color="color">
-              {{ name }}
-            </gl-chart-series-label>
-            <div class="gl-font-weight-bold">{{ value }}</div>
-          </div>
-        </template>
-      </ci-cd-analytics-charts>
-    </template>
+    <gl-column-chart
+      v-else
+      :height="$options.chartContainerHeight"
+      :option="chartOptions"
+      :bars="timesChartTransformedData"
+      :y-axis-title="__('Minutes')"
+      :x-axis-title="__('Commit')"
+      x-axis-type="category"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index f921b2dfdd63c4..c0390678d1ac7b 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -1,13 +1,16 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
-import { s__, n__, formatNumber } from '~/locale';
+import { s__, formatNumber } from '~/locale';
 
 const defaultPrecision = 2;
 
 export default {
   components: {
     GlLink,
+    GlSingleStat,
+    GlSkeletonLoader,
   },
   inject: {
     failedPipelinesLink: {
@@ -19,6 +22,11 @@ export default {
       type: Object,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     statistics() {
@@ -26,37 +34,58 @@ export default {
 
       return [
         {
-          title: s__('PipelineCharts|Total:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.total)),
+          label: s__('PipelineCharts|Total pipelines'),
+          identifier: 'total-pipelines',
+          value: formatNumber(this.counts.total),
         },
         {
-          title: s__('PipelineCharts|Successful:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.success)),
+          label: s__('PipelineCharts|Success ratio'),
+          identifier: 'success-ratio',
+          value: formatPercent(this.counts.successRatio, defaultPrecision),
         },
         {
-          title: s__('PipelineCharts|Failed:'),
-          value: n__('1 pipeline', '%d pipelines', formatNumber(this.counts.failed)),
-          link: this.failedPipelinesLink,
+          label: s__('PipelineCharts|Successful pipelines'),
+          identifier: 'successful-pipelines',
+          value: formatNumber(this.counts.success),
         },
         {
-          title: s__('PipelineCharts|Success ratio:'),
-          value: formatPercent(this.counts.successRatio, defaultPrecision),
+          label: s__('PipelineCharts|Failed pipelines'),
+          identifier: 'failed-pipelines',
+          value: formatNumber(this.counts.failed),
+          link: this.failedPipelinesLink, // not implemented in single stat
         },
+        /** NOT IMPLEMENTED */
+        // {
+        //   label: s__('PipelineCharts|Average duration'),
+        //   identifier: 'average-duration',
+        //   value: formatNumber(this.counts.failed),
+        // },
       ];
     },
   },
 };
 </script>
 <template>
-  <ul>
-    <template v-for="({ title, value, link }, index) in statistics">
-      <li :key="index">
-        <span>{{ title }}</span>
-        <gl-link v-if="link" :href="link">
-          {{ value }}
-        </gl-link>
-        <strong v-else>{{ value }}</strong>
-      </li>
+  <div class="gl-display-flex gl-flex-wrap gl-gap-6 gl-mb-6">
+    <template v-for="statistic in statistics">
+      <div v-if="loading" :key="statistic.identifier" class="gl-w-20 gl-h-10">
+        <gl-skeleton-loader :width="160" :height="56">
+          <rect y="0" x="0" :width="160" :height="56" rx="4" />
+        </gl-skeleton-loader>
+      </div>
+      <div v-else :key="statistic.label">
+        <gl-single-stat
+          :id="statistic.identifier"
+          :value="`${statistic.value}`"
+          :title="statistic.label"
+          :unit="statistic.unit || ''"
+          :should-animate="true"
+          use-delimiters
+        />
+        <gl-link v-if="statistic.link" :href="statistic.link">{{
+          s__('Pipeline|See details')
+        }}</gl-link>
+      </div>
     </template>
-  </ul>
+  </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 63c0e7aeabf985..1228992607fc6e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1662,11 +1662,6 @@ msgid_plural "%{merge_requests} open merge requests"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "1 pipeline"
-msgid_plural "%d pipelines"
-msgstr[0] ""
-msgstr[1] ""
-
 msgid "1 role"
 msgid_plural "%d roles"
 msgstr[0] ""
@@ -36038,22 +36033,19 @@ msgstr ""
 msgid "PipelineCharts|CI/CD Analytics"
 msgstr ""
 
-msgid "PipelineCharts|Failed:"
+msgid "PipelineCharts|Failed pipelines"
 msgstr ""
 
-msgid "PipelineCharts|Overall statistics"
+msgid "PipelineCharts|Success ratio"
 msgstr ""
 
-msgid "PipelineCharts|Success ratio:"
-msgstr ""
-
-msgid "PipelineCharts|Successful:"
+msgid "PipelineCharts|Successful pipelines"
 msgstr ""
 
 msgid "PipelineCharts|There was an error parsing the data for the charts."
 msgstr ""
 
-msgid "PipelineCharts|Total:"
+msgid "PipelineCharts|Total pipelines"
 msgstr ""
 
 msgid "PipelineEditorFileTree|Configuration files added with the include keyword"
@@ -36842,6 +36834,9 @@ msgstr ""
 msgid "Pipeline|Running"
 msgstr ""
 
+msgid "Pipeline|See details"
+msgstr ""
+
 msgid "Pipeline|Skipped"
 msgstr ""
 
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
index a2877a9f17c78c..27a33ee49cabda 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -1,40 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatisticsList displays the counts data with labels 1`] = `
-<ul>
-  <li>
-    <span>
-      Total:
-    </span>
-    <strong>
-      40,000 pipelines
-    </strong>
-  </li>
-  <li>
-    <span>
-      Successful:
-    </span>
-    <strong>
-      20,000 pipelines
-    </strong>
-  </li>
-  <li>
-    <span>
-      Failed:
-    </span>
-    <gl-link-stub
-      href="/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed"
-    >
-      20,000 pipelines
-    </gl-link-stub>
-  </li>
-  <li>
-    <span>
-      Success ratio:
-    </span>
-    <strong>
-      50.00%
-    </strong>
-  </li>
-</ul>
+<div
+  class="gl-display-flex gl-flex-wrap gl-gap-6 gl-mb-6"
+>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-0"
+      shouldanimate="true"
+      title="Total pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="40,000"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-1"
+      shouldanimate="true"
+      title="Success ratio"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="50.00%"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-2"
+      shouldanimate="true"
+      title="Successful pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="20,000"
+      variant="muted"
+    />
+  </div>
+  <div>
+    <gl-single-stat-stub
+      animationdecimalplaces="0"
+      id="reference-3"
+      shouldanimate="true"
+      title="Failed pipelines"
+      titleiconclass=""
+      unit=""
+      usedelimiters="true"
+      value="20,000"
+      variant="muted"
+    />
+  </div>
+</div>
 `;
diff --git a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
index 24dbc628ce6939..b7a04055b2408d 100644
--- a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
@@ -1,4 +1,9 @@
-import { GlLink } from '@gitlab/ui';
+/**
+ * NOTE: the link to failed pipelines cannot be included in GlSingleStat as it is currently implemented.
+ * Relevant lines in this file have been removed.
+ *
+ * See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/141307#note_1766620265 for more details.
+ */
 import { shallowMount } from '@vue/test-utils';
 import Component from '~/projects/pipelines/charts/components/statistics_list.vue';
 import { counts } from '../mock_data';
@@ -6,15 +11,8 @@ 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,
       },
@@ -24,8 +22,4 @@ describe('StatisticsList', () => {
   it('displays the counts data with labels', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
-
-  it('displays failed pipelines link', () => {
-    expect(findFailedPipelinesLink().attributes('href')).toBe(failedPipelinesLink);
-  });
 });
-- 
GitLab


From 78fba30c4c9f845f88c54ea639301947a1e77413 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Sat, 10 Feb 2024 12:06:56 -0500
Subject: [PATCH 06/10] Do not show link when 0 failed pipelines

Per suggestion from Libor
---
 .../projects/pipelines/charts/components/statistics_list.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index c0390678d1ac7b..f623b945baabd7 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -82,7 +82,7 @@ export default {
           :should-animate="true"
           use-delimiters
         />
-        <gl-link v-if="statistic.link" :href="statistic.link">{{
+        <gl-link v-if="statistic.link && statistic.value !== 0" :href="statistic.link">{{
           s__('Pipeline|See details')
         }}</gl-link>
       </div>
-- 
GitLab


From 3427b007b3156e2a336791aacb89536e1e2808c7 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Thu, 22 Feb 2024 11:05:08 -0500
Subject: [PATCH 07/10] Suggestion from Annabel

Apply same padding to "See details" link as is applied to the single
stat, so that left edges align.
---
 .../pipelines/charts/components/statistics_list.vue   | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index f623b945baabd7..6cde3c9bf6c99d 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -52,7 +52,7 @@ export default {
           label: s__('PipelineCharts|Failed pipelines'),
           identifier: 'failed-pipelines',
           value: formatNumber(this.counts.failed),
-          link: this.failedPipelinesLink, // not implemented in single stat
+          link: this.failedPipelinesLink,
         },
         /** NOT IMPLEMENTED */
         // {
@@ -82,9 +82,12 @@ export default {
           :should-animate="true"
           use-delimiters
         />
-        <gl-link v-if="statistic.link && statistic.value !== 0" :href="statistic.link">{{
-          s__('Pipeline|See details')
-        }}</gl-link>
+        <gl-link
+          v-if="statistic.link && statistic.value !== 0"
+          class="gl-p-2"
+          :href="statistic.link"
+          >{{ s__('Pipeline|See details') }}</gl-link
+        >
       </div>
     </template>
   </div>
-- 
GitLab


From f8e3ee26ebc8677aaa87b87eaec49db1fe4a9e2a Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Thu, 22 Feb 2024 11:56:18 -0500
Subject: [PATCH 08/10] Fix failing rspec

---
 spec/features/projects/graph_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/features/projects/graph_spec.rb b/spec/features/projects/graph_spec.rb
index effe743ac81e27..dbafd236b21ffa 100644
--- a/spec/features/projects/graph_spec.rb
+++ b/spec/features/projects/graph_spec.rb
@@ -95,7 +95,7 @@
     end
 
     it 'renders CI graphs' do
-      expect(page).to have_content 'Overall'
+      expect(page).to have_content 'CI/CD Analytics'
       expect(page).to have_content 'Last week'
       expect(page).to have_content 'Last month'
       expect(page).to have_content 'Last year'
-- 
GitLab


From 36314b7853e69f6a75cad2a49c71d7d3110fd90b Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Mon, 26 Feb 2024 10:50:09 -0500
Subject: [PATCH 09/10] Address feedback from @ekigbo

---
 .../charts/components/statistics_list.vue     | 20 +++++-------
 .../statistics_list_spec.js.snap              |  6 ++++
 .../charts/components/statistics_list_spec.js | 32 +++++++++++++++----
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index 6cde3c9bf6c99d..8de2ad817231d2 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -54,15 +54,14 @@ export default {
           value: formatNumber(this.counts.failed),
           link: this.failedPipelinesLink,
         },
-        /** NOT IMPLEMENTED */
-        // {
-        //   label: s__('PipelineCharts|Average duration'),
-        //   identifier: 'average-duration',
-        //   value: formatNumber(this.counts.failed),
-        // },
       ];
     },
   },
+  methods: {
+    shouldDisplayLink(statistic) {
+      return statistic.link && statistic.value !== 0;
+    },
+  },
 };
 </script>
 <template>
@@ -82,12 +81,9 @@ export default {
           :should-animate="true"
           use-delimiters
         />
-        <gl-link
-          v-if="statistic.link && statistic.value !== 0"
-          class="gl-p-2"
-          :href="statistic.link"
-          >{{ s__('Pipeline|See details') }}</gl-link
-        >
+        <gl-link v-if="shouldDisplayLink(statistic)" class="gl-p-2" :href="statistic.link">{{
+          s__('Pipeline|See details')
+        }}</gl-link>
       </div>
     </template>
   </div>
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
index 27a33ee49cabda..c47579185e1a40 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -55,6 +55,12 @@ exports[`StatisticsList displays the counts data with labels 1`] = `
       value="20,000"
       variant="muted"
     />
+    <gl-link-stub
+      class="gl-p-2"
+      href="/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed"
+    >
+      See details
+    </gl-link-stub>
   </div>
 </div>
 `;
diff --git a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
index b7a04055b2408d..02560fa3fa12b9 100644
--- a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
@@ -1,9 +1,4 @@
-/**
- * NOTE: the link to failed pipelines cannot be included in GlSingleStat as it is currently implemented.
- * Relevant lines in this file have been removed.
- *
- * See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/141307#note_1766620265 for more details.
- */
+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';
@@ -11,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,
       },
@@ -22,4 +24,22 @@ describe('StatisticsList', () => {
   it('displays the counts data with labels', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('displays failed pipelines link', () => {
+    expect(findFailedPipelinesLink().attributes('href')).toBe(failedPipelinesLink);
+  });
+
+  describe('with no failed piplines link', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(Component, {
+        propsData: {
+          counts,
+        },
+      });
+    });
+
+    it('hides the failed pipelines link', () => {
+      expect(findFailedPipelinesLink().exists()).toBe(false);
+    });
+  });
 });
-- 
GitLab


From 99a73910669ee2807ba05d72d6a81908b51b11de Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Tue, 27 Feb 2024 10:17:57 -0500
Subject: [PATCH 10/10] Remove updated loading animations

As recommended by @ekigbo, they'll be moved to a separate MR
---
 .../charts/components/pipeline_charts.vue     | 15 ++------
 .../charts/components/statistics_list.vue     | 36 ++++++++-----------
 2 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index b56c7c5e8eb45b..20ae0a7fc83e56 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -326,15 +326,10 @@ export default {
     <div class="gl-mb-3">
       <h4>{{ s__('PipelineCharts|CI/CD Analytics') }}</h4>
     </div>
-    <statistics-list :loading="loading" :counts="formattedCounts" />
+    <gl-skeleton-loader v-if="loading" :lines="5" />
+    <statistics-list v-else :counts="formattedCounts" />
     <h4>{{ __('Pipelines charts') }}</h4>
-    <div v-if="loading" class="gl-display-flex">
-      <gl-skeleton-loader :width="1000" :height="300">
-        <rect y="0" x="0" :width="1000" :height="300" rx="4" />
-      </gl-skeleton-loader>
-    </div>
     <ci-cd-analytics-charts
-      v-else
       :charts="areaCharts"
       :chart-options="$options.areaChartOptions"
       :format-tooltip-text="formatTooltipText"
@@ -354,13 +349,7 @@ export default {
       </template>
     </ci-cd-analytics-charts>
     <h4 class="gl-mt-6">{{ __('Pipeline durations for the last 30 commits') }}</h4>
-    <div v-if="loading" class="gl-display-flex">
-      <gl-skeleton-loader :width="1000" :height="300">
-        <rect y="0" x="0" :width="1000" :height="300" rx="4" />
-      </gl-skeleton-loader>
-    </div>
     <gl-column-chart
-      v-else
       :height="$options.chartContainerHeight"
       :option="chartOptions"
       :bars="timesChartTransformedData"
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
index 8de2ad817231d2..714e0ff8c1f8e3 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { GlLink } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
 import { s__, formatNumber } from '~/locale';
@@ -10,7 +10,6 @@ export default {
   components: {
     GlLink,
     GlSingleStat,
-    GlSkeletonLoader,
   },
   inject: {
     failedPipelinesLink: {
@@ -66,25 +65,18 @@ export default {
 </script>
 <template>
   <div class="gl-display-flex gl-flex-wrap gl-gap-6 gl-mb-6">
-    <template v-for="statistic in statistics">
-      <div v-if="loading" :key="statistic.identifier" class="gl-w-20 gl-h-10">
-        <gl-skeleton-loader :width="160" :height="56">
-          <rect y="0" x="0" :width="160" :height="56" rx="4" />
-        </gl-skeleton-loader>
-      </div>
-      <div v-else :key="statistic.label">
-        <gl-single-stat
-          :id="statistic.identifier"
-          :value="`${statistic.value}`"
-          :title="statistic.label"
-          :unit="statistic.unit || ''"
-          :should-animate="true"
-          use-delimiters
-        />
-        <gl-link v-if="shouldDisplayLink(statistic)" class="gl-p-2" :href="statistic.link">{{
-          s__('Pipeline|See details')
-        }}</gl-link>
-      </div>
-    </template>
+    <div v-for="statistic in statistics" :key="statistic.label">
+      <gl-single-stat
+        :id="statistic.identifier"
+        :value="`${statistic.value}`"
+        :title="statistic.label"
+        :unit="statistic.unit || ''"
+        :should-animate="true"
+        use-delimiters
+      />
+      <gl-link v-if="shouldDisplayLink(statistic)" class="gl-p-2" :href="statistic.link">{{
+        s__('Pipeline|See details')
+      }}</gl-link>
+    </div>
   </div>
 </template>
-- 
GitLab