Skip to content

G
gitlab-ce
Commit 666bbc50 authored by Jose Vargas's avatar Jose Vargas
Browse files
Options

Refactor CI/CD analytics page to GraphQL 

This moves the way the chart data is being
sent, instead of sending the data via HAML
data attributes, this uses GraphQL to
request the data asynchronously
parent c5995a35
Hide whitespace changes
Inline Side-by-side
Showing with 688 additions and 58 deletions
app/assets/javascripts/projects/pipelines/charts/components/app.vue
View file @ 666bbc50
<script> <script>
import dateFormat from 'dateformat'; import dateFormat from 'dateformat';
import { GlColumnChart } from '@gitlab/ui/dist/charts'; import { GlColumnChart } from '@gitlab/ui/dist/charts';
import { __, sprintf } from '~/locale'; import { __, s__, sprintf } from '~/locale';
import createFlash, { FLASH_TYPES } from '~/flash';
import { getDateInPast } from '~/lib/utils/datetime_utility'; 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 StatisticsList from './statistics_list.vue';
import PipelinesAreaChart from './pipelines_area_chart.vue'; import PipelinesAreaChart from './pipelines_area_chart.vue';
import { import {
CHART_CONTAINER_HEIGHT, CHART_CONTAINER_HEIGHT,
INNER_CHART_HEIGHT,
X_AXIS_LABEL_ROTATION,
X_AXIS_TITLE_OFFSET,
CHART_DATE_FORMAT, CHART_DATE_FORMAT,
INNER_CHART_HEIGHT,
ONE_WEEK_AGO_DAYS, ONE_WEEK_AGO_DAYS,
ONE_MONTH_AGO_DAYS, ONE_MONTH_AGO_DAYS,
X_AXIS_LABEL_ROTATION,
X_AXIS_TITLE_OFFSET,
} from '../constants'; } from '../constants';
const defaultCountValues = {
totalPipelines: {
count: 0,
},
successfulPipelines: {
count: 0,
},
};
const defaultAnalyticsValues = {
weekPipelinesTotals: [],
weekPipelinesLabels: [],
weekPipelinesSuccessful: [],
monthPipelinesLabels: [],
monthPipelinesTotals: [],
monthPipelinesSuccessful: [],
yearPipelinesLabels: [],
yearPipelinesTotals: [],
yearPipelinesSuccessful: [],
pipelineTimesLabels: [],
pipelineTimesValues: [],
};
export default { export default {
components: { components: {
StatisticsList,
GlColumnChart, GlColumnChart,
StatisticsList,
PipelinesAreaChart, PipelinesAreaChart,
}, },
props: { inject: {
counts: { projectPath: {
type: Object, type: String,
required: true, default: '',
},
timesChartData: {
type: Object,
required: true,
},
lastWeekChartData: {
type: Object,
required: true,
},
lastMonthChartData: {
type: Object,
required: true,
},
lastYearChartData: {
type: Object,
required: true,
}, },
}, },
data() { data() {
return { return {
timesChartTransformedData: [ counts: {
{ ...defaultCountValues,
name: 'full', },
data: this.mergeLabelsAndValues(this.timesChartData.labels, this.timesChartData.values), analytics: {
}, ...defaultAnalyticsValues,
], },
}; };
}, },
apollo: {
counts: {
query: getPipelineCountByStatus,
variables() {
return {
projectPath: this.projectPath,
};
},
update(res) {
return res.project;
},
error() {
createFlash({
message: s__('PipelineCharts|An error has ocurred when retrieving the pipeline data'),
type: FLASH_TYPES.ALERT,
});
},
},
analytics: {
query: getProjectPipelineStatistics,
variables() {
return {
projectPath: this.projectPath,
};
},
update(res) {
return res.project.pipelineAnalytics;
},
error() {
createFlash({
message: s__('PipelineCharts|An error has ocurred when retrieving the analytics data'),
type: FLASH_TYPES.ALERT,
});
},
},
},
computed: { computed: {
successRatio() {
const { successfulPipelines, failedPipelines } = this.counts;
const successfulCount = successfulPipelines?.count;
const failedCount = failedPipelines?.count;
const ratio = (successfulCount / (successfulCount + failedCount)) * 100;
return failedCount === 0 ? 100 : ratio;
},
formattedCounts() {
const {
totalPipelines,
successfulPipelines,
failedPipelines,
totalPipelineDuration,
} = this.counts;
return {
total: totalPipelines?.count,
success: successfulPipelines?.count,
failed: failedPipelines?.count,
successRatio: this.successRatio,
totalDuration: totalPipelineDuration,
};
},
areaCharts() { areaCharts() {
const { lastWeek, lastMonth, lastYear } = this.$options.chartTitles; const { lastWeek, lastMonth, lastYear } = this.$options.chartTitles;
...@@ -63,6 +133,38 @@ export default { ...@@ -63,6 +133,38 @@ export default {
this.buildAreaChartData(lastYear, this.lastYearChartData), this.buildAreaChartData(lastYear, this.lastYearChartData),
]; ];
}, },
lastWeekChartData() {
return {
labels: this.analytics.weekPipelinesLabels,
totals: this.analytics.weekPipelinesTotals,
success: this.analytics.weekPipelinesSuccessful,
};
},
lastMonthChartData() {
return {
labels: this.analytics.monthPipelinesLabels,
totals: this.analytics.monthPipelinesTotals,
success: this.analytics.monthPipelinesSuccessful,
};
},
lastYearChartData() {
return {
labels: this.analytics.yearPipelinesLabels,
totals: this.analytics.yearPipelinesTotals,
success: this.analytics.yearPipelinesSuccessful,
};
},
timesChartTransformedData() {
return [
{
name: 'full',
data: this.mergeLabelsAndValues(
this.analytics.pipelineTimesLabels,
this.analytics.pipelineTimesValues,
),
},
];
},
}, },
methods: { methods: {
mergeLabelsAndValues(labels, values) { mergeLabelsAndValues(labels, values) {
...@@ -116,13 +218,13 @@ export default { ...@@ -116,13 +218,13 @@ export default {
</script> </script>
<template> <template>
<div> <div>
<div class="mb-3"> <div class="gl-mb-3">
<h3>{{ s__('PipelineCharts|CI / CD Analytics') }}</h3> <h3>{{ s__('PipelineCharts|CI / CD Analytics') }}</h3>
</div> </div>
<h4 class="my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4> <h4 class="gl-my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<statistics-list :counts="counts" /> <statistics-list :counts="formattedCounts" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<strong> <strong>
...@@ -139,7 +241,7 @@ export default { ...@@ -139,7 +241,7 @@ export default {
</div> </div>
</div> </div>
<hr /> <hr />
<h4 class="my-4">{{ __('Pipelines charts') }}</h4> <h4 class="gl-my-4">{{ __('Pipelines charts') }}</h4>
<pipelines-area-chart <pipelines-area-chart
v-for="(chart, index) in areaCharts" v-for="(chart, index) in areaCharts"
:key="index" :key="index"
......
app/assets/javascripts/projects/pipelines/charts/components/app_legacy.vue 0 → 100644
View file @ 666bbc50
<script>
import dateFormat from 'dateformat';
import { GlColumnChart } from '@gitlab/ui/dist/charts';
import { __, sprintf } from '~/locale';
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: {
type: Object,
required: true,
},
timesChartData: {
type: Object,
required: true,
},
lastWeekChartData: {
type: Object,
required: true,
},
lastMonthChartData: {
type: Object,
required: true,
},
lastYearChartData: {
type: Object,
required: true,
},
},
data() {
return {
timesChartTransformedData: [
{
name: 'full',
data: this.mergeLabelsAndValues(this.timesChartData.labels, this.timesChartData.values),
},
],
};
},
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: {
height: INNER_CHART_HEIGHT,
xAxis: {
axisLabel: {
rotate: X_AXIS_LABEL_ROTATION,
},
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>
<div>
<div class="mb-3">
<h3>{{ s__('PipelineCharts|CI / CD Analytics') }}</h3>
</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"
:bars="timesChartTransformedData"
:y-axis-title="__('Minutes')"
:x-axis-title="__('Commit')"
x-axis-type="category"
/>
</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>
app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue
View file @ 666bbc50
<script> <script>
import { formatTime } from '~/lib/utils/datetime_utility'; import { formatTime } from '~/lib/utils/datetime_utility';
import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format';
import { s__, n__ } from '~/locale'; import { s__, n__ } from '~/locale';
const defaultPrecision = 2;
export default { export default {
props: { props: {
counts: { counts: {
...@@ -14,6 +17,8 @@ export default { ...@@ -14,6 +17,8 @@ export default {
return formatTime(this.counts.totalDuration); return formatTime(this.counts.totalDuration);
}, },
statistics() { statistics() {
const formatter = getFormatter(SUPPORTED_FORMATS.percentHundred);
return [ return [
{ {
title: s__('PipelineCharts|Total:'), title: s__('PipelineCharts|Total:'),
...@@ -29,7 +34,7 @@ export default { ...@@ -29,7 +34,7 @@ export default {
}, },
{ {
title: s__('PipelineCharts|Success ratio:'), title: s__('PipelineCharts|Success ratio:'),
value: `${this.counts.successRatio}%`, value: formatter(this.counts.successRatio, defaultPrecision),
}, },
{ {
title: s__('PipelineCharts|Total duration:'), title: s__('PipelineCharts|Total duration:'),
......
app/assets/javascripts/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql 0 → 100644
View file @ 666bbc50
query getPipelineCountByStatus($projectPath: ID!) {
project(fullPath: $projectPath) {
totalPipelines: pipelines {
count
}
successfulPipelines: pipelines(status: SUCCESS) {
count
}
failedPipelines: pipelines(status: FAILED) {
count
}
totalPipelineDuration
}
}
app/assets/javascripts/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql 0 → 100644
View file @ 666bbc50
query getProjectPipelineStatistics($projectPath: ID!) {
project(fullPath: $projectPath) {
pipelineAnalytics {
weekPipelinesTotals
weekPipelinesLabels
weekPipelinesSuccessful
monthPipelinesLabels
monthPipelinesTotals
monthPipelinesSuccessful
yearPipelinesLabels
yearPipelinesTotals
yearPipelinesSuccessful
pipelineTimesLabels
pipelineTimesValues
}
}
}
app/assets/javascripts/projects/pipelines/charts/index.js
View file @ 666bbc50
import Vue from 'vue'; import Vue from 'vue';
import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';
import ProjectPipelinesChartsLegacy from './components/app_legacy.vue';
import ProjectPipelinesCharts from './components/app.vue'; import ProjectPipelinesCharts from './components/app.vue';
Vue.use(VueApollo);
const apolloProvider = new VueApollo({
defaultClient: createDefaultClient(),
});
export default () => { export default () => {
const el = document.querySelector('#js-project-pipelines-charts-app'); const el = document.querySelector('#js-project-pipelines-charts-app');
const { const {
...@@ -20,6 +29,7 @@ export default () => { ...@@ -20,6 +29,7 @@ export default () => {
lastYearChartLabels, lastYearChartLabels,
lastYearChartTotals, lastYearChartTotals,
lastYearChartSuccess, lastYearChartSuccess,
projectPath,
} = el.dataset; } = el.dataset;
const parseAreaChartData = (labels, totals, success) => ({ const parseAreaChartData = (labels, totals, success) => ({
...@@ -28,14 +38,29 @@ export default () => { ...@@ -28,14 +38,29 @@ export default () => {
success: JSON.parse(success), success: JSON.parse(success),
}); });
if (gon.features.graphqlPipelineAnalytics) {
return new Vue({
el,
name: 'ProjectPipelinesChartsApp',
components: {
ProjectPipelinesCharts,
},
apolloProvider,
provide: {
projectPath,
},
render: createElement => createElement(ProjectPipelinesCharts, {}),
});
}
return new Vue({ return new Vue({
el, el,
name: 'ProjectPipelinesChartsApp', name: 'ProjectPipelinesChartsApp',
components: { components: {
ProjectPipelinesCharts, ProjectPipelinesChartsLegacy,
}, },
render: createElement => render: createElement =>
createElement(ProjectPipelinesCharts, { createElement(ProjectPipelinesChartsLegacy, {
props: { props: {
counts: { counts: {
failed: countsFailed, failed: countsFailed,
......
app/controllers/projects/pipelines_controller.rb
View file @ 666bbc50
...@@ -17,6 +17,7 @@ class Projects::PipelinesController < Projects::ApplicationController ...@@ -17,6 +17,7 @@ class Projects::PipelinesController < Projects::ApplicationController
push_frontend_feature_flag(:new_pipeline_form, project, default_enabled: true) push_frontend_feature_flag(:new_pipeline_form, project, default_enabled: true)
push_frontend_feature_flag(:graphql_pipeline_header, project, type: :development, default_enabled: false) push_frontend_feature_flag(:graphql_pipeline_header, project, type: :development, default_enabled: false)
push_frontend_feature_flag(:graphql_pipeline_details, project, type: :development, default_enabled: false) push_frontend_feature_flag(:graphql_pipeline_details, project, type: :development, default_enabled: false)
push_frontend_feature_flag(:graphql_pipeline_analytics, project, type: :development)
push_frontend_feature_flag(:new_pipeline_form_prefilled_vars, project, type: :development) push_frontend_feature_flag(:new_pipeline_form_prefilled_vars, project, type: :development)
end end
before_action :ensure_pipeline, only: [:show] before_action :ensure_pipeline, only: [:show]
......
config/feature_flags/development/graphql_pipeline_analytics.yml 0 → 100644
View file @ 666bbc50
---
name: graphql_pipeline_analytics
introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48267
rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/290153
milestone: '13.7'
type: development
group: group::continuos integration
default_enabled: false
locale/gitlab.pot
View file @ 666bbc50
...@@ -20113,6 +20113,12 @@ msgstr "" ...@@ -20113,6 +20113,12 @@ msgstr ""
msgid "Pipeline: %{status}" msgid "Pipeline: %{status}"
msgstr "" msgstr ""
msgid "PipelineCharts|An error has ocurred when retrieving the analytics data"
msgstr ""
msgid "PipelineCharts|An error has ocurred when retrieving the pipeline data"
msgstr ""
msgid "PipelineCharts|CI / CD Analytics" msgid "PipelineCharts|CI / CD Analytics"
msgstr "" msgstr ""
......
spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js 0 → 100644
View file @ 666bbc50
import { shallowMount } from '@vue/test-utils';
import { GlColumnChart } from '@gitlab/ui/dist/charts';
import Component from '~/projects/pipelines/charts/components/app_legacy.vue';
import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
import {
counts,
timesChartData,
areaChartData as lastWeekChartData,
areaChartData as lastMonthChartData,
lastYearChartData,
} from '../mock_data';
describe('ProjectsPipelinesChartsApp', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(Component, {
propsData: {
counts,
timesChartData,
lastWeekChartData,
lastMonthChartData,
lastYearChartData,
},
});
});
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('bars')).toBe(wrapper.vm.timesChartTransformedData);
expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
});
});
describe('pipelines charts', () => {
it('displays 3 area charts', () => {
expect(wrapper.findAll(PipelinesAreaChart).length).toBe(3);
});
describe('displays individual correctly', () => {
it('renders with the correct data', () => {
const charts = wrapper.findAll(PipelinesAreaChart);
for (let i = 0; i < charts.length; i += 1) {
const chart = charts.at(i);
expect(chart.exists()).toBeTruthy();
expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
}
});
});
});
});
spec/frontend/projects/pipelines/charts/components/app_spec.js
View file @ 666bbc50
import { shallowMount } from '@vue/test-utils'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import createMockApollo from 'jest/helpers/mock_apollo_helper';
import { GlColumnChart } from '@gitlab/ui/dist/charts'; import { GlColumnChart } from '@gitlab/ui/dist/charts';
import Component from '~/projects/pipelines/charts/components/app.vue'; import Component from '~/projects/pipelines/charts/components/app.vue';
import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue'; import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
import { import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
counts, import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
timesChartData, import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
areaChartData as lastWeekChartData,
areaChartData as lastMonthChartData, const projectPath = 'gitlab-org/gitlab';
lastYearChartData, const localVue = createLocalVue();
} from '../mock_data'; localVue.use(VueApollo);
describe('ProjectsPipelinesChartsApp', () => { describe('ProjectsPipelinesChartsApp', () => {
let wrapper; let wrapper;
let fakeApollo;
beforeEach(() => { beforeEach(() => {
const requestHandlers = [
[getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
[getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
];
fakeApollo = createMockApollo(requestHandlers);
wrapper = shallowMount(Component, { wrapper = shallowMount(Component, {
propsData: { provide: {
counts, projectPath,
timesChartData,
lastWeekChartData,
lastMonthChartData,
lastYearChartData,
}, },
localVue,
apolloProvider: fakeApollo,
}); });
}); });
...@@ -35,14 +43,20 @@ describe('ProjectsPipelinesChartsApp', () => { ...@@ -35,14 +43,20 @@ describe('ProjectsPipelinesChartsApp', () => {
it('displays the statistics list', () => { it('displays the statistics list', () => {
const list = wrapper.find(StatisticsList); const list = wrapper.find(StatisticsList);
expect(list.exists()).toBeTruthy(); expect(list.exists()).toBe(true);
expect(list.props('counts')).toBe(counts); expect(list.props('counts')).toMatchObject({
failed: 1,
success: 23,
total: 34,
successRatio: 95.83333333333334,
totalDuration: 2471,
});
}); });
it('displays the commit duration chart', () => { it('displays the commit duration chart', () => {
const chart = wrapper.find(GlColumnChart); const chart = wrapper.find(GlColumnChart);
expect(chart.exists()).toBeTruthy(); expect(chart.exists()).toBe(true);
expect(chart.props('yAxisTitle')).toBe('Minutes'); expect(chart.props('yAxisTitle')).toBe('Minutes');
expect(chart.props('xAxisTitle')).toBe('Commit'); expect(chart.props('xAxisTitle')).toBe('Commit');
expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData); expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData);
...@@ -52,7 +66,7 @@ describe('ProjectsPipelinesChartsApp', () => { ...@@ -52,7 +66,7 @@ describe('ProjectsPipelinesChartsApp', () => {
describe('pipelines charts', () => { describe('pipelines charts', () => {
it('displays 3 area charts', () => { it('displays 3 area charts', () => {
expect(wrapper.findAll(PipelinesAreaChart).length).toBe(3); expect(wrapper.findAll(PipelinesAreaChart)).toHaveLength(3);
}); });
describe('displays individual correctly', () => { describe('displays individual correctly', () => {
...@@ -62,7 +76,7 @@ describe('ProjectsPipelinesChartsApp', () => { ...@@ -62,7 +76,7 @@ describe('ProjectsPipelinesChartsApp', () => {
for (let i = 0; i < charts.length; i += 1) { for (let i = 0; i < charts.length; i += 1) {
const chart = charts.at(i); const chart = charts.at(i);
expect(chart.exists()).toBeTruthy(); expect(chart.exists()).toBe(true);
expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data); expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title); expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
} }
......
spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
View file @ 666bbc50
...@@ -18,7 +18,7 @@ describe('StatisticsList', () => { ...@@ -18,7 +18,7 @@ describe('StatisticsList', () => {
wrapper = null; wrapper = null;
}); });
it('matches the snapshot', () => { it('displays the counts data with labels', () => {
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
}); });
spec/frontend/projects/pipelines/charts/mock_data.js
View file @ 666bbc50
...@@ -32,3 +32,218 @@ export const transformedAreaChartData = [ ...@@ -32,3 +32,218 @@ export const transformedAreaChartData = [
data: [['01 Jan', 3], ['02 Jan', 3], ['03 Jan', 3], ['04 Jan', 3], ['05 Jan', 5]], data: [['01 Jan', 3], ['02 Jan', 3], ['03 Jan', 3], ['04 Jan', 3], ['05 Jan', 5]],
}, },
]; ];
export const mockPipelineCount = {
data: {
project: {
totalPipelines: { count: 34, __typename: 'PipelineConnection' },
successfulPipelines: { count: 23, __typename: 'PipelineConnection' },
failedPipelines: { count: 1, __typename: 'PipelineConnection' },
totalPipelineDuration: 2471,
__typename: 'Project',
},
},
};
export const mockPipelineStatistics = {
data: {
project: {
pipelineAnalytics: {
weekPipelinesTotals: [0, 0, 0, 0, 0, 0, 0, 0],
weekPipelinesLabels: [
'24 November',
'25 November',
'26 November',
'27 November',
'28 November',
'29 November',
'30 November',
'01 December',
],
weekPipelinesSuccessful: [0, 0, 0, 0, 0, 0, 0, 0],
monthPipelinesLabels: [
'01 November',
'02 November',
'03 November',
'04 November',
'05 November',
'06 November',
'07 November',
'08 November',
'09 November',
'10 November',
'11 November',
'12 November',
'13 November',
'14 November',
'15 November',
'16 November',
'17 November',
'18 November',
'19 November',
'20 November',
'21 November',
'22 November',
'23 November',
'24 November',
'25 November',
'26 November',
'27 November',
'28 November',
'29 November',
'30 November',
'01 December',
],
monthPipelinesTotals: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
2,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
],
monthPipelinesSuccessful: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
],
yearPipelinesLabels: [
'December 2019',
'January 2020',
'February 2020',
'March 2020',
'April 2020',
'May 2020',
'June 2020',
'July 2020',
'August 2020',
'September 2020',
'October 2020',
'November 2020',
'December 2020',
],
yearPipelinesTotals: [0, 0, 0, 0, 0, 0, 0, 0, 23, 7, 2, 2, 0],
yearPipelinesSuccessful: [0, 0, 0, 0, 0, 0, 0, 0, 17, 5, 1, 0, 0],
pipelineTimesLabels: [
'b3781247',
'b3781247',
'a50ba059',
'8e414f3b',
'b2964d50',
'7caa525b',
'761b164e',
'd3eccd18',
'e2750f63',
'e2750f63',
'1dfb4b96',
'b49d6f94',
'66fa2f80',
'e2750f63',
'fc82cf15',
'19fb20b2',
'25f03a24',
'e054110f',
'0278b7b2',
'38478c16',
'38478c16',
'38478c16',
'1fb2103e',
'97b99fb5',
'8abc6e87',
'c94e80e3',
'5d349a50',
'5d349a50',
'9c581037',
'02d95fb2',
],
pipelineTimesValues: [
1,
0,
0,
0,
0,
1,
1,
2,
1,
0,
1,
2,
2,
0,
4,
2,
1,
2,
1,
1,
0,
1,
1,
0,
1,
5,
2,
0,
0,
0,
],
__typename: 'Analytics',
},
__typename: 'Project',
},
},
};
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7