Commit 82351981 authored by Jose Vargas's avatar Jose Vargas

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
parent 666bbc50
<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>
......
......@@ -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';
......@@ -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);
};
- 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 },
......
......@@ -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 ""
......
// 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>
......
......@@ -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);
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment