Add latest changes from gitlab-org/gitlab@master

4 files changed, 68 insertions, 19 deletions

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 4d48468ce88..75f5edbfd2b 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
@@ -7,7 +7,8 @@ import { getDateInPast } from '~/lib/utils/datetime_utility';
 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 PipelinesAreaChart from './pipelines_area_chart.vue';
+import CiCdAnalyticsAreaChart from './ci_cd_analytics_area_chart.vue';
+
 import {
   CHART_CONTAINER_HEIGHT,
   CHART_DATE_FORMAT,
@@ -52,13 +53,19 @@ export default {
     GlColumnChart,
     GlSkeletonLoader,
     StatisticsList,
-    PipelinesAreaChart,
+    CiCdAnalyticsAreaChart,
+    DeploymentFrequencyCharts: () =>
+      import('ee_component/projects/pipelines/charts/components/deployment_frequency_charts.vue'),
   },
   inject: {
     projectPath: {
       type: String,
       default: '',
     },
+    shouldRenderDeploymentFrequencyCharts: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -260,6 +267,15 @@ export default {
       lastYear: __('Pipelines for last year'),
     };
   },
+  areaChartOptions: {
+    xAxis: {
+      name: s__('Pipeline|Date'),
+      type: 'category',
+    },
+    yAxis: {
+      name: s__('Pipeline|Pipelines'),
+    },
+  },
 };
 </script>
 <template>
@@ -292,12 +308,17 @@ export default {
     </div>
     <hr />
     <h4 class="gl-my-4">{{ __('Pipelines charts') }}</h4>
-    <pipelines-area-chart
+    <ci-cd-analytics-area-chart
       v-for="(chart, index) in areaCharts"
       :key="index"
       :chart-data="chart.data"
+      :area-chart-options="$options.areaChartOptions"
     >
       {{ chart.title }}
-    </pipelines-area-chart>
+    </ci-cd-analytics-area-chart>
+    <template v-if="shouldRenderDeploymentFrequencyCharts">
+      <hr />
+      <deployment-frequency-charts />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue b/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue
index 1a102815e97..915d334f949 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue
@@ -1,10 +1,11 @@
 <script>
 import dateFormat from 'dateformat';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
-import { __, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import { getDateInPast } from '~/lib/utils/datetime_utility';
 import StatisticsList from './statistics_list.vue';
-import PipelinesAreaChart from './pipelines_area_chart.vue';
+import CiCdAnalyticsAreaChart from './ci_cd_analytics_area_chart.vue';
+
 import {
   CHART_CONTAINER_HEIGHT,
   INNER_CHART_HEIGHT,
@@ -19,7 +20,15 @@ export default {
   components: {
     StatisticsList,
     GlColumnChart,
-    PipelinesAreaChart,
+    CiCdAnalyticsAreaChart,
+    DeploymentFrequencyCharts: () =>
+      import('ee_component/projects/pipelines/charts/components/deployment_frequency_charts.vue'),
+  },
+  inject: {
+    shouldRenderDeploymentFrequencyCharts: {
+      type: Boolean,
+      default: false,
+    },
   },
   props: {
     counts: {
@@ -112,6 +121,15 @@ export default {
       lastYear: __('Pipelines for last year'),
     };
   },
+  areaChartOptions: {
+    xAxis: {
+      name: s__('Pipeline|Date'),
+      type: 'category',
+    },
+    yAxis: {
+      name: s__('Pipeline|Pipelines'),
+    },
+  },
 };
 </script>
 <template>
@@ -140,12 +158,17 @@ export default {
     </div>
     <hr />
     <h4 class="my-4">{{ __('Pipelines charts') }}</h4>
-    <pipelines-area-chart
+    <ci-cd-analytics-area-chart
       v-for="(chart, index) in areaCharts"
       :key="index"
       :chart-data="chart.data"
+      :area-chart-options="$options.areaChartOptions"
     >
       {{ chart.title }}
-    </pipelines-area-chart>
+    </ci-cd-analytics-area-chart>
+    <template v-if="shouldRenderDeploymentFrequencyCharts">
+      <hr />
+      <deployment-frequency-charts />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue
index d726196aadf..3590e2c4632 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue
@@ -1,10 +1,10 @@
 <script>
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
-import { s__ } from '~/locale';
 import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import { CHART_CONTAINER_HEIGHT } from '../constants';
 
 export default {
+  name: 'CiCdAnalyticsAreaChart',
   components: {
     GlAreaChart,
     ResizableChartContainer,
@@ -14,14 +14,9 @@ export default {
       type: Array,
       required: true,
     },
-  },
-  areaChartOptions: {
-    xAxis: {
-      name: s__('Pipeline|Date'),
-      type: 'category',
-    },
-    yAxis: {
-      name: s__('Pipeline|Pipelines'),
+    areaChartOptions: {
+      type: Object,
+      required: true,
     },
   },
   chartContainerHeight: CHART_CONTAINER_HEIGHT,
@@ -39,7 +34,7 @@ export default {
         :height="$options.chartContainerHeight"
         :data="chartData"
         :include-legend-avg-max="false"
-        :option="$options.areaChartOptions"
+        :option="areaChartOptions"
       />
     </resizable-chart-container>
   </div>
diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js
index c94a4e6af99..12943e1c3c7 100644
--- a/app/assets/javascripts/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/projects/pipelines/charts/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import ProjectPipelinesChartsLegacy from './components/app_legacy.vue';
 import ProjectPipelinesCharts from './components/app.vue';
 
@@ -35,6 +36,10 @@ const mountPipelineChartsApp = (el) => {
     projectPath,
   } = el.dataset;
 
+  const shouldRenderDeploymentFrequencyCharts = parseBoolean(
+    el.dataset.shouldRenderDeploymentFrequencyCharts,
+  );
+
   const parseAreaChartData = (labels, totals, success) => {
     let parsedData = {};
 
@@ -61,6 +66,7 @@ const mountPipelineChartsApp = (el) => {
       apolloProvider,
       provide: {
         projectPath,
+        shouldRenderDeploymentFrequencyCharts,
       },
       render: (createElement) => createElement(ProjectPipelinesCharts, {}),
     });
@@ -72,6 +78,10 @@ const mountPipelineChartsApp = (el) => {
     components: {
       ProjectPipelinesChartsLegacy,
     },
+    provide: {
+      projectPath,
+      shouldRenderDeploymentFrequencyCharts,
+    },
     render: (createElement) =>
       createElement(ProjectPipelinesChartsLegacy, {
         props: {