Add latest changes from gitlab-org/gitlab@master

4 files changed, 155 insertions, 0 deletions

diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 4bd72c405ee..4dc1c512689 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
@@ -1,17 +1,25 @@
 <script>
+import dateFormat from 'dateformat';
+import { __, sprintf } from '~/locale';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import { getDateInPast } from '~/lib/utils/datetime_utility';
 import StatisticsList from './statistics_list.vue';
+import PipelinesAreaChart from './pipelines_area_chart.vue';
 import {
   CHART_CONTAINER_HEIGHT,
   INNER_CHART_HEIGHT,
   X_AXIS_LABEL_ROTATION,
   X_AXIS_TITLE_OFFSET,
+  CHART_DATE_FORMAT,
+  ONE_WEEK_AGO_DAYS,
+  ONE_MONTH_AGO_DAYS,
 } from '../constants';
 
 export default {
   components: {
     StatisticsList,
     GlColumnChart,
+    PipelinesAreaChart,
   },
   props: {
     counts: {
@@ -22,6 +30,18 @@ export default {
       type: Object,
       required: true,
     },
+    lastWeekChartData: {
+      type: Object,
+      required: true,
+    },
+    lastMonthChartData: {
+      type: Object,
+      required: true,
+    },
+    lastYearChartData: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
@@ -30,10 +50,38 @@ export default {
       },
     };
   },
+  computed: {
+    areaCharts() {
+      const { lastWeek, lastMonth, lastYear } = this.$options.chartTitles;
+
+      return [
+        this.buildAreaChartData(lastWeek, this.lastWeekChartData),
+        this.buildAreaChartData(lastMonth, this.lastMonthChartData),
+        this.buildAreaChartData(lastYear, this.lastYearChartData),
+      ];
+    },
+  },
   methods: {
     mergeLabelsAndValues(labels, values) {
       return labels.map((label, index) => [label, values[index]]);
     },
+    buildAreaChartData(title, data) {
+      const { labels, totals, success } = data;
+
+      return {
+        title,
+        data: [
+          {
+            name: 'all',
+            data: this.mergeLabelsAndValues(labels, totals),
+          },
+          {
+            name: 'success',
+            data: this.mergeLabelsAndValues(labels, success),
+          },
+        ],
+      };
+    },
   },
   chartContainerHeight: CHART_CONTAINER_HEIGHT,
   timesChartOptions: {
@@ -45,6 +93,22 @@ export default {
       nameGap: X_AXIS_TITLE_OFFSET,
     },
   },
+  get chartTitles() {
+    const today = dateFormat(new Date(), CHART_DATE_FORMAT);
+    const pastDate = timeScale =>
+      dateFormat(getDateInPast(new Date(), timeScale), CHART_DATE_FORMAT);
+    return {
+      lastWeek: sprintf(__('Pipelines for last week (%{oneWeekAgo} - %{today})'), {
+        oneWeekAgo: pastDate(ONE_WEEK_AGO_DAYS),
+        today,
+      }),
+      lastMonth: sprintf(__('Pipelines for last month (%{oneMonthAgo} - %{today})'), {
+        oneMonthAgo: pastDate(ONE_MONTH_AGO_DAYS),
+        today,
+      }),
+      lastYear: __('Pipelines for last year'),
+    };
+  },
 };
 </script>
 <template>
@@ -68,5 +132,14 @@ export default {
         />
       </div>
     </div>
+    <hr />
+    <h4 class="my-4">{{ __('Pipelines charts') }}</h4>
+    <pipelines-area-chart
+      v-for="(chart, index) in areaCharts"
+      :key="index"
+      :chart-data="chart.data"
+    >
+      {{ chart.title }}
+    </pipelines-area-chart>
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue
new file mode 100644
index 00000000000..d701f238a2e
--- /dev/null
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue
@@ -0,0 +1,46 @@
+<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 {
+  components: {
+    GlAreaChart,
+    ResizableChartContainer,
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+    },
+  },
+  areaChartOptions: {
+    xAxis: {
+      name: s__('Pipeline|Date'),
+      type: 'category',
+    },
+    yAxis: {
+      name: s__('Pipeline|Pipelines'),
+    },
+  },
+  chartContainerHeight: CHART_CONTAINER_HEIGHT,
+};
+</script>
+<template>
+  <div class="prepend-top-default">
+    <p>
+      <slot></slot>
+    </p>
+    <resizable-chart-container>
+      <gl-area-chart
+        slot-scope="{ width }"
+        :width="width"
+        :height="$options.chartContainerHeight"
+        :data="chartData"
+        :include-legend-avg-max="false"
+        :option="$options.areaChartOptions"
+      />
+    </resizable-chart-container>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/pipelines/charts/constants.js b/app/assets/javascripts/projects/pipelines/charts/constants.js
index eeb29370e51..5dbe3c01100 100644
--- a/app/assets/javascripts/projects/pipelines/charts/constants.js
+++ b/app/assets/javascripts/projects/pipelines/charts/constants.js
@@ -5,3 +5,9 @@ export const INNER_CHART_HEIGHT = 200;
 export const X_AXIS_LABEL_ROTATION = 45;
 
 export const X_AXIS_TITLE_OFFSET = 60;
+
+export const ONE_WEEK_AGO_DAYS = 7;
+
+export const ONE_MONTH_AGO_DAYS = 31;
+
+export const CHART_DATE_FORMAT = 'dd mmm';
diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js
index b0f5f549980..4ae2b729200 100644
--- a/app/assets/javascripts/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/projects/pipelines/charts/index.js
@@ -10,8 +10,23 @@ export default () => {
     successRatio,
     timesChartLabels,
     timesChartValues,
+    lastWeekChartLabels,
+    lastWeekChartTotals,
+    lastWeekChartSuccess,
+    lastMonthChartLabels,
+    lastMonthChartTotals,
+    lastMonthChartSuccess,
+    lastYearChartLabels,
+    lastYearChartTotals,
+    lastYearChartSuccess,
   } = el.dataset;
 
+  const parseAreaChartData = (labels, totals, success) => ({
+    labels: JSON.parse(labels),
+    totals: JSON.parse(totals),
+    success: JSON.parse(success),
+  });
+
   return new Vue({
     el,
     name: 'ProjectPipelinesChartsApp',
@@ -31,6 +46,21 @@ export default () => {
             labels: JSON.parse(timesChartLabels),
             values: JSON.parse(timesChartValues),
           },
+          lastWeekChartData: parseAreaChartData(
+            lastWeekChartLabels,
+            lastWeekChartTotals,
+            lastWeekChartSuccess,
+          ),
+          lastMonthChartData: parseAreaChartData(
+            lastMonthChartLabels,
+            lastMonthChartTotals,
+            lastMonthChartSuccess,
+          ),
+          lastYearChartData: parseAreaChartData(
+            lastYearChartLabels,
+            lastYearChartTotals,
+            lastYearChartSuccess,
+          ),
         },
       }),
   });