Add total duration of all pipelines to CI/CD analytics

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

 <script>
+import { formatPipelineDuration } from '~/pipelines/utils';
+import { s__, n__ } from '~/locale';
+
 export default {
   props: {
     counts: {
@@ -6,25 +9,44 @@ export default {
       required: true,
     },
   },
+  computed: {
+    totalDuration() {
+      return formatPipelineDuration(this.counts.totalDuration);
+    },
+    entries() {
+      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 entries">
+      <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