debian-mirror-gitlab/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

166 lines
5.8 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-08-17 22:00:37 +05:30
import Vue from 'vue';
import Cookies from 'js-cookie';
2020-03-09 13:42:32 +05:30
import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
2019-10-12 21:52:04 +05:30
import filterMixins from 'ee_else_ce/analytics/cycle_analytics/mixins/filter_mixins';
2018-03-17 18:26:18 +05:30
import Flash from '../flash';
2019-10-12 21:52:04 +05:30
import { __ } from '~/locale';
2017-08-17 22:00:37 +05:30
import Translate from '../vue_shared/translate';
2018-03-17 18:26:18 +05:30
import banner from './components/banner.vue';
import stageCodeComponent from './components/stage_code_component.vue';
import stageComponent from './components/stage_component.vue';
import stageReviewComponent from './components/stage_review_component.vue';
import stageStagingComponent from './components/stage_staging_component.vue';
import stageTestComponent from './components/stage_test_component.vue';
2019-12-04 20:38:33 +05:30
import stageNavItem from './components/stage_nav_item.vue';
2018-03-17 18:26:18 +05:30
import CycleAnalyticsService from './cycle_analytics_service';
import CycleAnalyticsStore from './cycle_analytics_store';
2017-08-17 22:00:37 +05:30
Vue.use(Translate);
2018-03-27 19:54:05 +05:30
export default () => {
2017-08-17 22:00:37 +05:30
const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
2019-09-30 21:07:59 +05:30
const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
// eslint-disable-next-line no-new
new Vue({
2017-08-17 22:00:37 +05:30
el: '#cycle-analytics',
name: 'CycleAnalytics',
2018-03-17 18:26:18 +05:30
components: {
2019-10-12 21:52:04 +05:30
GlEmptyState,
2020-03-09 13:42:32 +05:30
GlLoadingIcon,
2018-03-17 18:26:18 +05:30
banner,
'stage-issue-component': stageComponent,
2019-09-04 21:01:54 +05:30
'stage-plan-component': stageComponent,
2018-03-17 18:26:18 +05:30
'stage-code-component': stageCodeComponent,
'stage-test-component': stageTestComponent,
'stage-review-component': stageReviewComponent,
'stage-staging-component': stageStagingComponent,
'stage-production-component': stageComponent,
2019-10-12 21:52:04 +05:30
GroupsDropdownFilter: () =>
import('ee_component/analytics/shared/components/groups_dropdown_filter.vue'),
ProjectsDropdownFilter: () =>
import('ee_component/analytics/shared/components/projects_dropdown_filter.vue'),
DateRangeDropdown: () =>
import('ee_component/analytics/shared/components/date_range_dropdown.vue'),
2019-12-04 20:38:33 +05:30
'stage-nav-item': stageNavItem,
2018-03-17 18:26:18 +05:30
},
2019-12-21 20:55:43 +05:30
mixins: [filterMixins],
2018-03-17 18:26:18 +05:30
data() {
return {
store: CycleAnalyticsStore,
state: CycleAnalyticsStore.state,
isLoading: false,
isLoadingStage: false,
isEmptyStage: false,
hasError: false,
startDate: 30,
isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
2019-10-12 21:52:04 +05:30
service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath),
2018-03-17 18:26:18 +05:30
};
2017-08-17 22:00:37 +05:30
},
2019-12-04 20:38:33 +05:30
defaultNumberOfSummaryItems: 3,
2017-08-17 22:00:37 +05:30
computed: {
currentStage() {
2018-03-17 18:26:18 +05:30
return this.store.currentActiveStage();
2017-08-17 22:00:37 +05:30
},
2019-12-04 20:38:33 +05:30
summaryTableColumnClass() {
return this.state.summary.length === this.$options.defaultNumberOfSummaryItems
? 'col-sm-3'
: 'col-sm-4';
},
2017-08-17 22:00:37 +05:30
},
created() {
2019-09-30 21:07:59 +05:30
// Conditional check placed here to prevent this method from being called on the
2020-03-09 13:42:32 +05:30
// new Value Stream Analytics page (i.e. the new page will be initialized blank and only
2019-09-30 21:07:59 +05:30
// after a group is selected the cycle analyitcs data will be fetched). Once the
// old (current) page has been removed this entire created method as well as the
// variable itself can be completely removed.
2019-12-04 20:38:33 +05:30
// Follow up issue: https://gitlab.com/gitlab-org/gitlab-foss/issues/64490
2019-09-30 21:07:59 +05:30
if (cycleAnalyticsEl.dataset.requestPath) this.fetchCycleAnalyticsData();
2017-08-17 22:00:37 +05:30
},
methods: {
handleError() {
2018-03-17 18:26:18 +05:30
this.store.setErrorState(true);
2020-03-09 13:42:32 +05:30
return new Flash(__('There was an error while fetching value stream analytics data.'));
2017-08-17 22:00:37 +05:30
},
initDropdown() {
const $dropdown = $('.js-ca-dropdown');
const $label = $dropdown.find('.dropdown-label');
2018-12-13 13:39:08 +05:30
$dropdown
.find('li a')
.off('click')
.on('click', e => {
e.preventDefault();
const $target = $(e.currentTarget);
this.startDate = $target.data('value');
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
$label.text($target.text().trim());
this.fetchCycleAnalyticsData({ startDate: this.startDate });
});
2017-08-17 22:00:37 +05:30
},
fetchCycleAnalyticsData(options) {
const fetchOptions = options || { startDate: this.startDate };
this.isLoading = true;
2018-03-17 18:26:18 +05:30
this.service
2017-08-17 22:00:37 +05:30
.fetchCycleAnalyticsData(fetchOptions)
2018-12-13 13:39:08 +05:30
.then(response => {
2018-03-17 18:26:18 +05:30
this.store.setCycleAnalyticsData(response);
2017-08-17 22:00:37 +05:30
this.selectDefaultStage();
this.initDropdown();
2018-03-17 18:26:18 +05:30
this.isLoading = false;
2017-08-17 22:00:37 +05:30
})
2018-03-17 18:26:18 +05:30
.catch(() => {
2017-08-17 22:00:37 +05:30
this.handleError();
this.isLoading = false;
});
},
selectDefaultStage() {
2017-09-10 17:25:29 +05:30
const stage = this.state.stages[0];
2017-08-17 22:00:37 +05:30
this.selectStage(stage);
},
selectStage(stage) {
if (this.isLoadingStage) return;
if (this.currentStage === stage) return;
if (!stage.isUserAllowed) {
2018-03-17 18:26:18 +05:30
this.store.setActiveStage(stage);
2017-08-17 22:00:37 +05:30
return;
}
this.isLoadingStage = true;
2018-03-17 18:26:18 +05:30
this.store.setStageEvents([], stage);
this.store.setActiveStage(stage);
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
this.service
2017-08-17 22:00:37 +05:30
.fetchStageData({
stage,
startDate: this.startDate,
2019-10-12 21:52:04 +05:30
projectIds: this.selectedProjectIds,
2017-08-17 22:00:37 +05:30
})
2018-12-13 13:39:08 +05:30
.then(response => {
2017-08-17 22:00:37 +05:30
this.isEmptyStage = !response.events.length;
2018-03-17 18:26:18 +05:30
this.store.setStageEvents(response.events, stage);
this.isLoadingStage = false;
2017-08-17 22:00:37 +05:30
})
2018-03-17 18:26:18 +05:30
.catch(() => {
2017-08-17 22:00:37 +05:30
this.isEmptyStage = true;
this.isLoadingStage = false;
});
},
dismissOverviewDialog() {
this.isOverviewDialogDismissed = true;
Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
},
2019-10-12 21:52:04 +05:30
createCycleAnalyticsService(requestPath) {
return new CycleAnalyticsService({
requestPath,
});
},
2017-08-17 22:00:37 +05:30
},
});
2018-03-27 19:54:05 +05:30
};