Refactor tests and improve error handling

This improves on the existing error handling
to use the GlAlert component. This also
adds comments to remove/refactor the parts
that will be affected once the feature flag
rolls out

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

 <script>
 import dateFormat from 'dateformat';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import { GlAlert } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
-import createFlash, { FLASH_TYPES } from '~/flash';
 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';
@@ -11,9 +11,14 @@ import PipelinesAreaChart from './pipelines_area_chart.vue';
 import {
   CHART_CONTAINER_HEIGHT,
   CHART_DATE_FORMAT,
+  DEFAULT,
   INNER_CHART_HEIGHT,
+  LOAD_ANALYTICS_FAILURE,
+  LOAD_PIPELINES_FAILURE,
   ONE_WEEK_AGO_DAYS,
   ONE_MONTH_AGO_DAYS,
+  PARSE_FAILURE,
+  UNSUPPORTED_DATA,
   X_AXIS_LABEL_ROTATION,
   X_AXIS_TITLE_OFFSET,
 } from '../constants';
@@ -43,6 +48,7 @@ const defaultAnalyticsValues = {
 
 export default {
   components: {
+    GlAlert,
     GlColumnChart,
     StatisticsList,
     PipelinesAreaChart,
@@ -61,6 +67,8 @@ export default {
       analytics: {
         ...defaultAnalyticsValues,
       },
+      showFailureAlert: false,
+      failureType: null,
     };
   },
   apollo: {
@@ -71,14 +79,11 @@ export default {
           projectPath: this.projectPath,
         };
       },
-      update(res) {
-        return res.project;
+      update(data) {
+        return data?.project;
       },
       error() {
-        createFlash({
-          message: s__('PipelineCharts|An error has ocurred when retrieving the pipeline data'),
-          type: FLASH_TYPES.ALERT,
-        });
+        this.reportFailure(LOAD_PIPELINES_FAILURE);
       },
     },
     analytics: {
@@ -88,18 +93,39 @@ export default {
           projectPath: this.projectPath,
         };
       },
-      update(res) {
-        return res.project.pipelineAnalytics;
+      update(data) {
+        return data?.project?.pipelineAnalytics;
       },
       error() {
-        createFlash({
-          message: s__('PipelineCharts|An error has ocurred when retrieving the analytics data'),
-          type: FLASH_TYPES.ALERT,
-        });
+        this.reportFailure(LOAD_ANALYTICS_FAILURE);
       },
     },
   },
   computed: {
+    failure() {
+      switch (this.failureType) {
+        case LOAD_ANALYTICS_FAILURE:
+          return {
+            text: this.$options.errorTexts[LOAD_ANALYTICS_FAILURE],
+            variant: 'danger',
+          };
+        case PARSE_FAILURE:
+          return {
+            text: this.$options.errorTexts[PARSE_FAILURE],
+            variant: 'danger',
+          };
+        case UNSUPPORTED_DATA:
+          return {
+            text: this.$options.errorTexts[UNSUPPORTED_DATA],
+            variant: 'info',
+          };
+        default:
+          return {
+            text: this.$options.errorTexts[DEFAULT],
+            variant: 'danger',
+          };
+      }
+    },
     successRatio() {
       const { successfulPipelines, failedPipelines } = this.counts;
       const successfulCount = successfulPipelines?.count;
@@ -126,12 +152,20 @@ export default {
     },
     areaCharts() {
       const { lastWeek, lastMonth, lastYear } = this.$options.chartTitles;
+      let areaChartsData = [];
 
-      return [
+      try {
+        areaChartsData = [
           this.buildAreaChartData(lastWeek, this.lastWeekChartData),
           this.buildAreaChartData(lastMonth, this.lastMonthChartData),
           this.buildAreaChartData(lastYear, this.lastYearChartData),
         ];
+      } catch {
+        areaChartsData = [];
+        this.reportFailure(PARSE_FAILURE);
+      }
+
+      return areaChartsData;
     },
     lastWeekChartData() {
       return {
@@ -187,6 +221,13 @@ export default {
         ],
       };
     },
+    hideAlert() {
+      this.showFailureAlert = false;
+    },
+    reportFailure(type) {
+      this.showFailureAlert = true;
+      this.failureType = type;
+    },
   },
   chartContainerHeight: CHART_CONTAINER_HEIGHT,
   timesChartOptions: {
@@ -198,6 +239,16 @@ export default {
       nameGap: X_AXIS_TITLE_OFFSET,
     },
   },
+  errorTexts: {
+    [LOAD_ANALYTICS_FAILURE]: s__(
+      'PipelineCharts|An error has ocurred when retrieving the analytics data',
+    ),
+    [LOAD_PIPELINES_FAILURE]: s__(
+      'PipelineCharts|An error has ocurred when retrieving the pipelines data',
+    ),
+    [PARSE_FAILURE]: s__('PipelineCharts|There was an error parsing the data for the charts.'),
+    [DEFAULT]: s__('PipelineCharts|An unknown error occurred while processing CI/CD analytics.'),
+  },
   get chartTitles() {
     const today = dateFormat(new Date(), CHART_DATE_FORMAT);
     const pastDate = timeScale =>
@@ -218,6 +269,9 @@ export default {
 </script>
 <template>
   <div>
+    <gl-alert v-if="showFailureAlert" :variant="failure.variant" @dismiss="hideAlert">
+      {{ failure.text }}
+    </gl-alert>
     <div class="gl-mb-3">
       <h3>{{ s__('PipelineCharts|CI / CD Analytics') }}</h3>
     </div>

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

@@ -11,3 +11,9 @@ export const ONE_WEEK_AGO_DAYS = 7;
 export const ONE_MONTH_AGO_DAYS = 31;
 
 export const CHART_DATE_FORMAT = 'dd mmm';
+
+export const DEFAULT = 'default';
+export const PARSE_FAILURE = 'parse_failure';
+export const LOAD_ANALYTICS_FAILURE = 'load_analytics_failure';
+export const LOAD_PIPELINES_FAILURE = 'load_analytics_failure';
+export const UNSUPPORTED_DATA = 'unsupported_data';

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

@@ -10,8 +10,11 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-export default () => {
-  const el = document.querySelector('#js-project-pipelines-charts-app');
+const mountPipelineChartsApp = el => {
+  // Not all of the values will be defined since some them will be
+  // empty depending on the value of the graphql_pipeline_analytics
+  // feature flag, once the rollout of the feature flag is completed
+  // the undefined values will be deleted
   const {
     countsFailed,
     countsSuccess,
@@ -32,13 +35,23 @@ export default () => {
     projectPath,
   } = el.dataset;
 
-  const parseAreaChartData = (labels, totals, success) => ({
+  const parseAreaChartData = (labels, totals, success) => {
+    let parsedData = {};
+
+    try {
+      parsedData = {
         labels: JSON.parse(labels),
         totals: JSON.parse(totals),
         success: JSON.parse(success),
-  });
+      };
+    } catch {
+      parsedData = {};
+    }
+
+    return parsedData;
+  };
 
-  if (gon.features.graphqlPipelineAnalytics) {
+  if (gon?.features?.graphqlPipelineAnalytics) {
     return new Vue({
       el,
       name: 'ProjectPipelinesChartsApp',
@@ -55,7 +68,7 @@ export default () => {
 
   return new Vue({
     el,
-    name: 'ProjectPipelinesChartsApp',
+    name: 'ProjectPipelinesChartsAppLegacy',
     components: {
       ProjectPipelinesChartsLegacy,
     },
@@ -92,3 +105,8 @@ export default () => {
       }),
   });
 };
+
+export default () => {
+  const el = document.querySelector('#js-project-pipelines-charts-app');
+  return !el ? {} : mountPipelineChartsApp(el);
+};

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

 - page_title _('CI / CD Analytics')
 
-#js-project-pipelines-charts-app{ data: { counts: @counts, success_ratio: success_ratio(@counts),
+- if Feature.enabled?(:graphql_pipeline_analytics)
+  #js-project-pipelines-charts-app{ data: { project_path: @project.full_path } }
+- else
+  #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 },
     last_week_chart: { labels: @charts[:week].labels, totals: @charts[:week].total, success: @charts[:week].success },
     last_month_chart: { labels: @charts[:month].labels, totals: @charts[:month].total, success: @charts[:month].success },

locale/gitlab.pot

@@ -20116,7 +20116,10 @@ msgstr ""
 msgid "PipelineCharts|An error has ocurred when retrieving the analytics data"
 msgstr ""
 
-msgid "PipelineCharts|An error has ocurred when retrieving the pipeline data"
+msgid "PipelineCharts|An error has ocurred when retrieving the pipelines data"
+msgstr ""
+
+msgid "PipelineCharts|An unknown error occurred while processing CI/CD analytics."
 msgstr ""
 
 msgid "PipelineCharts|CI / CD Analytics"
@@ -20134,6 +20137,9 @@ msgstr ""
 msgid "PipelineCharts|Successful:"
 msgstr ""
 
+msgid "PipelineCharts|There was an error parsing the data for the charts."
+msgstr ""
+
 msgid "PipelineCharts|Total duration:"
 msgstr ""
 

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`] = `
+exports[`StatisticsList displays the counts data with labels 1`] = `
 <ul>
   <li>
     <span>
@@ -35,7 +35,7 @@ exports[`StatisticsList matches the snapshot 1`] = `
     </span>
      
     <strong>
-      50%
+      50.00%
     </strong>
   </li>
   <li>

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

@@ -15,23 +15,31 @@ localVue.use(VueApollo);
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
-  let fakeApollo;
 
-  beforeEach(() => {
+  function createMockApolloProvider() {
     const requestHandlers = [
       [getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
       [getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
     ];
 
-    fakeApollo = createMockApollo(requestHandlers);
+    return createMockApollo(requestHandlers);
+  }
+
+  function createComponent(options = {}) {
+    const { fakeApollo } = options;
 
-    wrapper = shallowMount(Component, {
+    return shallowMount(Component, {
       provide: {
         projectPath,
       },
       localVue,
       apolloProvider: fakeApollo,
     });
+  }
+
+  beforeEach(() => {
+    const fakeApollo = createMockApolloProvider();
+    wrapper = createComponent({ fakeApollo });
   });
 
   afterEach(() => {
@@ -77,6 +85,8 @@ describe('ProjectsPipelinesChartsApp', () => {
           const chart = charts.at(i);
 
           expect(chart.exists()).toBe(true);
+          // TODO: Refactor this to use the mocked data instead of the vm data
+          // https://gitlab.com/gitlab-org/gitlab/-/issues/292085
           expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
           expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
         }