2020-01-31 18:09:11 +00:00
|
|
|
import Vue from 'vue';
|
2020-12-09 21:09:43 +00:00
|
|
|
import VueApollo from 'vue-apollo';
|
|
|
|
import createDefaultClient from '~/lib/graphql';
|
|
|
|
import ProjectPipelinesChartsLegacy from './components/app_legacy.vue';
|
2020-01-31 18:09:11 +00:00
|
|
|
import ProjectPipelinesCharts from './components/app.vue';
|
|
|
|
|
2020-12-09 21:09:43 +00:00
|
|
|
Vue.use(VueApollo);
|
|
|
|
|
|
|
|
const apolloProvider = new VueApollo({
|
|
|
|
defaultClient: createDefaultClient(),
|
|
|
|
});
|
|
|
|
|
|
|
|
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
|
2020-01-31 18:09:11 +00:00
|
|
|
const {
|
|
|
|
countsFailed,
|
|
|
|
countsSuccess,
|
|
|
|
countsTotal,
|
2020-10-29 12:08:50 +00:00
|
|
|
countsTotalDuration,
|
2020-01-31 18:09:11 +00:00
|
|
|
successRatio,
|
|
|
|
timesChartLabels,
|
|
|
|
timesChartValues,
|
2020-02-11 12:08:52 +00:00
|
|
|
lastWeekChartLabels,
|
|
|
|
lastWeekChartTotals,
|
|
|
|
lastWeekChartSuccess,
|
|
|
|
lastMonthChartLabels,
|
|
|
|
lastMonthChartTotals,
|
|
|
|
lastMonthChartSuccess,
|
|
|
|
lastYearChartLabels,
|
|
|
|
lastYearChartTotals,
|
|
|
|
lastYearChartSuccess,
|
2020-12-09 21:09:43 +00:00
|
|
|
projectPath,
|
2020-01-31 18:09:11 +00:00
|
|
|
} = el.dataset;
|
|
|
|
|
2020-12-09 21:09:43 +00:00
|
|
|
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) {
|
|
|
|
return new Vue({
|
|
|
|
el,
|
|
|
|
name: 'ProjectPipelinesChartsApp',
|
|
|
|
components: {
|
|
|
|
ProjectPipelinesCharts,
|
|
|
|
},
|
|
|
|
apolloProvider,
|
|
|
|
provide: {
|
|
|
|
projectPath,
|
|
|
|
},
|
|
|
|
render: createElement => createElement(ProjectPipelinesCharts, {}),
|
|
|
|
});
|
|
|
|
}
|
2020-02-11 12:08:52 +00:00
|
|
|
|
2020-01-31 18:09:11 +00:00
|
|
|
return new Vue({
|
|
|
|
el,
|
2020-12-09 21:09:43 +00:00
|
|
|
name: 'ProjectPipelinesChartsAppLegacy',
|
2020-01-31 18:09:11 +00:00
|
|
|
components: {
|
2020-12-09 21:09:43 +00:00
|
|
|
ProjectPipelinesChartsLegacy,
|
2020-01-31 18:09:11 +00:00
|
|
|
},
|
|
|
|
render: createElement =>
|
2020-12-09 21:09:43 +00:00
|
|
|
createElement(ProjectPipelinesChartsLegacy, {
|
2020-01-31 18:09:11 +00:00
|
|
|
props: {
|
|
|
|
counts: {
|
|
|
|
failed: countsFailed,
|
|
|
|
success: countsSuccess,
|
|
|
|
total: countsTotal,
|
|
|
|
successRatio,
|
2020-10-29 12:08:50 +00:00
|
|
|
totalDuration: countsTotalDuration,
|
2020-01-31 18:09:11 +00:00
|
|
|
},
|
|
|
|
timesChartData: {
|
|
|
|
labels: JSON.parse(timesChartLabels),
|
|
|
|
values: JSON.parse(timesChartValues),
|
|
|
|
},
|
2020-02-11 12:08:52 +00:00
|
|
|
lastWeekChartData: parseAreaChartData(
|
|
|
|
lastWeekChartLabels,
|
|
|
|
lastWeekChartTotals,
|
|
|
|
lastWeekChartSuccess,
|
|
|
|
),
|
|
|
|
lastMonthChartData: parseAreaChartData(
|
|
|
|
lastMonthChartLabels,
|
|
|
|
lastMonthChartTotals,
|
|
|
|
lastMonthChartSuccess,
|
|
|
|
),
|
|
|
|
lastYearChartData: parseAreaChartData(
|
|
|
|
lastYearChartLabels,
|
|
|
|
lastYearChartTotals,
|
|
|
|
lastYearChartSuccess,
|
|
|
|
),
|
2020-01-31 18:09:11 +00:00
|
|
|
},
|
|
|
|
}),
|
|
|
|
});
|
|
|
|
};
|
2020-12-09 21:09:43 +00:00
|
|
|
|
|
|
|
export default () => {
|
|
|
|
const el = document.querySelector('#js-project-pipelines-charts-app');
|
|
|
|
return !el ? {} : mountPipelineChartsApp(el);
|
|
|
|
};
|