Commit 666bbc50 authored by Jose Vargas's avatar Jose Vargas

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
<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"
......
<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>
<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:'),
......
query getPipelineCountByStatus($projectPath: ID!) {
project(fullPath: $projectPath) {
totalPipelines: pipelines {
count
}
successfulPipelines: pipelines(status: SUCCESS) {
count
}
failedPipelines: pipelines(status: FAILED) {
count
}
totalPipelineDuration
}
}
query getProjectPipelineStatistics($projectPath: ID!) {
project(fullPath: $projectPath) {
pipelineAnalytics {
weekPipelinesTotals
weekPipelinesLabels
weekPipelinesSuccessful
monthPipelinesLabels
monthPipelinesTotals
monthPipelinesSuccessful
yearPipelinesLabels
yearPipelinesTotals
yearPipelinesSuccessful
pipelineTimesLabels
pipelineTimesValues
}
}
}
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,
......
...@@ -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]
......
---
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
...@@ -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 ""
......
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);
}
});
});
});
});
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);
} }
......
...@@ -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();
}); });
}); });
...@@ -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