Merge branch '196183-convert-ci-cd-charts-to-echarts' into 'master'

Convert project CI/CD Analytics Overall statistics section to ECharts

See merge request gitlab-org/gitlab!23840

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

 import $ from 'jquery';
 import Chart from 'chart.js';
 
-import { barChartOptions, lineChartOptions } from '~/lib/utils/chart_utils';
+import { lineChartOptions } from '~/lib/utils/chart_utils';
+
+import initProjectPipelinesChartsApp from '~/projects/pipelines/charts/index';
 
 const SUCCESS_LINE_COLOR = '#1aaa55';
 
@@ -44,40 +46,13 @@ const buildChart = (chartScope, shouldAdjustFontSize) => {
   });
 };
 
-const buildBarChart = (chartTimesData, shouldAdjustFontSize) => {
-  const data = {
-    labels: chartTimesData.labels,
-    datasets: [
-      {
-        backgroundColor: 'rgba(220,220,220,0.5)',
-        borderColor: 'rgba(220,220,220,1)',
-        borderWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
-        data: chartTimesData.values,
-      },
-    ],
-  };
-  return new Chart(
-    $('#build_timesChart')
-      .get(0)
-      .getContext('2d'),
-    {
-      type: 'bar',
-      data,
-      options: barChartOptions(shouldAdjustFontSize),
-    },
-  );
-};
-
 document.addEventListener('DOMContentLoaded', () => {
-  const chartTimesData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
   const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
 
   // Scale fonts if window width lower than 768px (iPad portrait)
   const shouldAdjustFontSize = window.innerWidth < 768;
 
-  buildBarChart(chartTimesData, shouldAdjustFontSize);
-
   chartsData.forEach(scope => buildChart(scope, shouldAdjustFontSize));
 });
+
+document.addEventListener('DOMContentLoaded', initProjectPipelinesChartsApp);

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

+<script>
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import StatisticsList from './statistics_list.vue';
+import {
+  CHART_CONTAINER_HEIGHT,
+  INNER_CHART_HEIGHT,
+  X_AXIS_LABEL_ROTATION,
+  X_AXIS_TITLE_OFFSET,
+} from '../constants';
+
+export default {
+  components: {
+    StatisticsList,
+    GlColumnChart,
+  },
+  props: {
+    counts: {
+      type: Object,
+      required: true,
+    },
+    timesChartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      timesChartTransformedData: {
+        full: this.mergeLabelsAndValues(this.timesChartData.labels, this.timesChartData.values),
+      },
+    };
+  },
+  methods: {
+    mergeLabelsAndValues(labels, values) {
+      return labels.map((label, index) => [label, values[index]]);
+    },
+  },
+  chartContainerHeight: CHART_CONTAINER_HEIGHT,
+  timesChartOptions: {
+    height: INNER_CHART_HEIGHT,
+    xAxis: {
+      axisLabel: {
+        rotate: X_AXIS_LABEL_ROTATION,
+      },
+      nameGap: X_AXIS_TITLE_OFFSET,
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <h4 class="my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
+    <div class="row">
+      <div class="col-md-6">
+        <statistics-list :counts="counts" />
+      </div>
+      <div class="col-md-6">
+        <strong>
+          {{ __('Duration for the last 30 commits') }}
+        </strong>
+        <gl-column-chart
+          :height="$options.chartContainerHeight"
+          :option="$options.timesChartOptions"
+          :data="timesChartTransformedData"
+          :y-axis-title="__('Minutes')"
+          :x-axis-title="__('Commit')"
+          x-axis-type="category"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

+<script>
+export default {
+  props: {
+    counts: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</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>
+  </ul>
+</template>

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

+export const CHART_CONTAINER_HEIGHT = 300;
+
+export const INNER_CHART_HEIGHT = 200;
+
+export const X_AXIS_LABEL_ROTATION = 45;
+
+export const X_AXIS_TITLE_OFFSET = 60;

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

+import Vue from 'vue';
+import ProjectPipelinesCharts from './components/app.vue';
+
+export default () => {
+  const el = document.querySelector('#js-project-pipelines-charts-app');
+  const {
+    countsFailed,
+    countsSuccess,
+    countsTotal,
+    successRatio,
+    timesChartLabels,
+    timesChartValues,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    name: 'ProjectPipelinesChartsApp',
+    components: {
+      ProjectPipelinesCharts,
+    },
+    render: createElement =>
+      createElement(ProjectPipelinesCharts, {
+        props: {
+          counts: {
+            failed: countsFailed,
+            success: countsSuccess,
+            total: countsTotal,
+            successRatio,
+          },
+          timesChartData: {
+            labels: JSON.parse(timesChartLabels),
+            values: JSON.parse(timesChartValues),
+          },
+        },
+      }),
+  });
+};

app/views/projects/pipelines/charts.html.haml

 - page_title _('CI / CD Charts')
 
+#js-project-pipelines-charts-app{ data: { counts: @counts, success_ratio: success_ratio(@counts), times_chart: { labels: @charts[:pipeline_times].labels, values: @charts[:pipeline_times].pipeline_times } } }
+
 #charts.ci-charts
-  = render 'projects/pipelines/charts/overall'
   %hr
   = render 'projects/pipelines/charts/pipelines'

app/views/projects/pipelines/charts/_overall.haml

-%h4.mt-4.mb-4= s_("PipelineCharts|Overall statistics")
-.row
-  .col-md-6
-    = render 'projects/pipelines/charts/pipeline_statistics'
-  .col-md-6
-    = render 'projects/pipelines/charts/pipeline_times'

app/views/projects/pipelines/charts/_pipeline_statistics.haml

-%ul
-  %li
-    = s_("PipelineCharts|Total:")
-    %strong= n_("1 pipeline", "%d pipelines", @counts[:total]) % @counts[:total]
-  %li
-    = s_("PipelineCharts|Successful:")
-    %strong= n_("1 pipeline", "%d pipelines", @counts[:success]) % @counts[:success]
-  %li
-    = s_("PipelineCharts|Failed:")
-    %strong= n_("1 pipeline", "%d pipelines", @counts[:failed]) % @counts[:failed]
-  %li
-    = s_("PipelineCharts|Success ratio:")
-    %strong
-      #{success_ratio(@counts)}%

app/views/projects/pipelines/charts/_pipeline_times.haml

-%p.light
-  = _("Commit duration in minutes for last 30 commits")
-
-%div
-  %canvas#build_timesChart{ height: 200 }
-
--# haml-lint:disable InlineJavaScript
-%script#pipelinesTimesChartsData{ type: "application/json" }= { :labels => @charts[:pipeline_times].labels, :values => @charts[:pipeline_times].pipeline_times }.to_json.html_safe

changelogs/unreleased/196183-convert-ci-cd-charts-to-echarts.yml

+---
+title: Migrate CI CD statistics + duration chart to VueJS
+merge_request: 23840
+author:
+type: changed

locale/gitlab.pot

@@ -4801,9 +4801,6 @@ msgstr ""
 msgid "Commit deleted"
 msgstr ""
 
-msgid "Commit duration in minutes for last 30 commits"
-msgstr ""
-
 msgid "Commit message"
 msgstr ""
 
@@ -6813,6 +6810,9 @@ msgstr ""
 msgid "Duration"
 msgstr ""
 
+msgid "Duration for the last 30 commits"
+msgstr ""
+
 msgid "During this process, you’ll be asked for URLs from GitLab’s side. Use the URLs shown below."
 msgstr ""
 

spec/features/projects/graph_spec.rb

@@ -85,7 +85,7 @@ describe 'Project Graph', :js do
       expect(page).to have_content 'Pipelines for last week'
       expect(page).to have_content 'Pipelines for last month'
       expect(page).to have_content 'Pipelines for last year'
-      expect(page).to have_content 'Commit duration in minutes for last 30 commits'
+      expect(page).to have_content 'Duration for the last 30 commits'
     end
   end
 end

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatisticsList matches the snapshot 1`] = `
+<ul>
+  <li>
+    <span>
+      Total:
+    </span>
+     
+    <strong>
+      4 pipelines
+    </strong>
+  </li>
+   
+  <li>
+    <span>
+      Successful:
+    </span>
+     
+    <strong>
+      2 pipelines
+    </strong>
+  </li>
+   
+  <li>
+    <span>
+      Failed:
+    </span>
+     
+    <strong>
+      2 pipelines
+    </strong>
+  </li>
+   
+  <li>
+    <span>
+      Success ratio:
+    </span>
+     
+    <strong>
+      50%
+    </strong>
+  </li>
+</ul>
+`;

spec/frontend/projects/pipelines/charts/components/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import Component from '~/projects/pipelines/charts/components/app';
+import StatisticsList from '~/projects/pipelines/charts/components/statistics_list';
+import { counts, timesChartData } from '../mock_data';
+
+describe('ProjectsPipelinesChartsApp', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        counts,
+        timesChartData,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('overall statistics', () => {
+    it('displays the statistics list', () => {
+      const list = wrapper.find(StatisticsList);
+
+      expect(list.exists()).toBeTruthy();
+      expect(list.props('counts')).toBe(counts);
+    });
+
+    it('displays the commit duration chart', () => {
+      const chart = wrapper.find(GlColumnChart);
+
+      expect(chart.exists()).toBeTruthy();
+      expect(chart.props('yAxisTitle')).toBe('Minutes');
+      expect(chart.props('xAxisTitle')).toBe('Commit');
+      expect(chart.props('data')).toBe(wrapper.vm.timesChartTransformedData);
+      expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
+    });
+  });
+});

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

+import { shallowMount } from '@vue/test-utils';
+import Component from '~/projects/pipelines/charts/components/statistics_list';
+import { counts } from '../mock_data';
+
+describe('StatisticsList', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        counts,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

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

+export const counts = {
+  failed: 2,
+  success: 2,
+  total: 4,
+  successRatio: 50,
+};
+
+export const timesChartData = {
+  labels: ['as1234', 'kh423hy', 'ji56bvg', 'th23po'],
+  values: [5, 3, 7, 4],
+};