Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

3 files changed, 47 insertions, 20 deletions

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 0777dddfc19..c6e2b2e1140 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
@@ -45,9 +45,12 @@ export default {
   },
   data() {
     return {
-      timesChartTransformedData: {
-        full: this.mergeLabelsAndValues(this.timesChartData.labels, this.timesChartData.values),
-      },
+      timesChartTransformedData: [
+        {
+          name: 'full',
+          data: this.mergeLabelsAndValues(this.timesChartData.labels, this.timesChartData.values),
+        },
+      ],
     };
   },
   computed: {
@@ -128,7 +131,7 @@ export default {
         <gl-column-chart
           :height="$options.chartContainerHeight"
           :option="$options.timesChartOptions"
-          :data="timesChartTransformedData"
+          :bars="timesChartTransformedData"
           :y-axis-title="__('Minutes')"
           :x-axis-title="__('Commit')"
           x-axis-type="category"
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 cd9e464c5ac..aa59717ddcd 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
@@ -1,4 +1,7 @@
 <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>
diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js
index 4ae2b729200..eef1bc2d28b 100644
--- a/app/assets/javascripts/projects/pipelines/charts/index.js
+++ b/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),