Merge branch 'add-total-duration-to-cicd-analytics-page' into 'master'

Add Total Duration to CI/CD Analytics Page

See merge request gitlab-org/gitlab!44863

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import '~/lib/utils/datetime_utility';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { formatTime } from '~/lib/utils/datetime_utility';
 
 export default {
   directives: {
@@ -27,24 +27,7 @@ export default {
       return this.finishedTime !== '';
     },
     durationFormatted() {
-      const date = new Date(this.duration * 1000);
-
-      let hh = date.getUTCHours();
-      let mm = date.getUTCMinutes();
-      let ss = date.getSeconds();
-
-      // left pad
-      if (hh < 10) {
-        hh = `0${hh}`;
-      }
-      if (mm < 10) {
-        mm = `0${mm}`;
-      }
-      if (ss < 10) {
-        ss = `0${ss}`;
-      }
-
-      return `${hh}:${mm}:${ss}`;
+      return formatTime(this.duration);
     },
   },
 };

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

 <script>
+import { formatTime } from '~/lib/utils/datetime_utility';
+import { s__, n__ } from '~/locale';
+
 export default {
   props: {
     counts: {
@@ -6,25 +9,44 @@ export default {
       required: true,
     },
   },
+  computed: {
+    totalDuration() {
+      return formatTime(this.counts.totalDuration);
+    },
+    statistics() {
+      return [
+        {
+          title: s__('PipelineCharts|Total:'),
+          value: n__('1 pipeline', '%d pipelines', this.counts.total),
+        },
+        {
+          title: s__('PipelineCharts|Successful:'),
+          value: n__('1 pipeline', '%d pipelines', this.counts.success),
+        },
+        {
+          title: s__('PipelineCharts|Failed:'),
+          value: n__('1 pipeline', '%d pipelines', this.counts.failed),
+        },
+        {
+          title: s__('PipelineCharts|Success ratio:'),
+          value: `${this.counts.successRatio}%`,
+        },
+        {
+          title: s__('PipelineCharts|Total duration:'),
+          value: this.totalDuration,
+        },
+      ];
+    },
+  },
 };
 </script>
 <template>
   <ul>
-    <li>
-      <span>{{ s__('PipelineCharts|Total:') }}</span>
-      <strong>{{ n__('1 pipeline', '%d pipelines', counts.total) }}</strong>
-    </li>
-    <li>
-      <span>{{ s__('PipelineCharts|Successful:') }}</span>
-      <strong>{{ n__('1 pipeline', '%d pipelines', counts.success) }}</strong>
-    </li>
-    <li>
-      <span>{{ s__('PipelineCharts|Failed:') }}</span>
-      <strong>{{ n__('1 pipeline', '%d pipelines', counts.failed) }}</strong>
-    </li>
-    <li>
-      <span>{{ s__('PipelineCharts|Success ratio:') }}</span>
-      <strong>{{ counts.successRatio }}%</strong>
-    </li>
+    <template v-for="({ title, value }, index) in statistics">
+      <li :key="index">
+        <span>{{ title }}</span>
+        <strong>{{ value }}</strong>
+      </li>
+    </template>
   </ul>
 </template>

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

@@ -7,6 +7,7 @@ export default () => {
     countsFailed,
     countsSuccess,
     countsTotal,
+    countsTotalDuration,
     successRatio,
     timesChartLabels,
     timesChartValues,
@@ -41,6 +42,7 @@ export default () => {
             success: countsSuccess,
             total: countsTotal,
             successRatio,
+            totalDuration: countsTotalDuration,
           },
           timesChartData: {
             labels: JSON.parse(timesChartLabels),

app/controllers/projects/pipelines_controller.rb

@@ -193,6 +193,7 @@ class Projects::PipelinesController < Projects::ApplicationController
     @counts[:total] = @project.all_pipelines.count(:all)
     @counts[:success] = @project.all_pipelines.success.count(:all)
     @counts[:failed] = @project.all_pipelines.failed.count(:all)
+    @counts[:total_duration] = @project.all_pipelines.total_duration
   end
 
   def test_report

changelogs/unreleased/add-total-duration-to-cicd-analytics-page.yml

+---
+title: Add Total Duration to CI/CD Analytics Page
+merge_request: 44863
+author: Kev @KevSlashNull
+type: added

locale/gitlab.pot

@@ -19402,6 +19402,9 @@ msgstr ""
 msgid "PipelineCharts|Successful:"
 msgstr ""
 
+msgid "PipelineCharts|Total duration:"
+msgstr ""
+
 msgid "PipelineCharts|Total:"
 msgstr ""
 

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

@@ -11,7 +11,6 @@ exports[`StatisticsList matches the snapshot 1`] = `
       4 pipelines
     </strong>
   </li>
-   
   <li>
     <span>
       Successful:
@@ -21,7 +20,6 @@ exports[`StatisticsList matches the snapshot 1`] = `
       2 pipelines
     </strong>
   </li>
-   
   <li>
     <span>
       Failed:
@@ -31,7 +29,6 @@ exports[`StatisticsList matches the snapshot 1`] = `
       2 pipelines
     </strong>
   </li>
-   
   <li>
     <span>
       Success ratio:
@@ -41,5 +38,14 @@ exports[`StatisticsList matches the snapshot 1`] = `
       50%
     </strong>
   </li>
+  <li>
+    <span>
+      Total duration:
+    </span>
+     
+    <strong>
+      00:01:56
+    </strong>
+  </li>
 </ul>
 `;

spec/frontend/projects/pipelines/charts/mock_data.js

@@ -3,6 +3,7 @@ export const counts = {
   success: 2,
   total: 4,
   successRatio: 50,
+  totalDuration: 116158,
 };
 
 export const timesChartData = {