2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2017-03-17 17:21:25 +00:00
|
|
|
import Vue from 'vue';
|
2017-03-11 06:45:34 +00:00
|
|
|
import Cookies from 'js-cookie';
|
2020-02-14 18:08:45 +00:00
|
|
|
import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
|
2020-08-20 09:09:55 +00:00
|
|
|
import { deprecatedCreateFlash as Flash } from '../flash';
|
2019-08-08 08:13:15 +00:00
|
|
|
import { __ } from '~/locale';
|
2017-04-18 13:55:09 +00:00
|
|
|
import Translate from '../vue_shared/translate';
|
2017-10-09 07:45:51 +00:00
|
|
|
import banner from './components/banner.vue';
|
2017-09-26 10:47:19 +00:00
|
|
|
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-08-19 06:51:06 +00:00
|
|
|
import stageNavItem from './components/stage_nav_item.vue';
|
2017-09-25 11:23:29 +00:00
|
|
|
import CycleAnalyticsService from './cycle_analytics_service';
|
|
|
|
import CycleAnalyticsStore from './cycle_analytics_store';
|
2016-10-20 04:34:16 +00:00
|
|
|
|
2017-04-18 13:55:09 +00:00
|
|
|
Vue.use(Translate);
|
|
|
|
|
2018-02-28 17:13:46 +00:00
|
|
|
export default () => {
|
2016-11-21 20:04:16 +00:00
|
|
|
const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
|
2019-07-12 12:26:39 +00:00
|
|
|
const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
|
2016-10-20 04:34:16 +00:00
|
|
|
|
2018-10-10 06:09:55 +00:00
|
|
|
// eslint-disable-next-line no-new
|
|
|
|
new Vue({
|
2016-10-20 04:34:16 +00:00
|
|
|
el: '#cycle-analytics',
|
|
|
|
name: 'CycleAnalytics',
|
2018-01-03 23:14:55 +00:00
|
|
|
components: {
|
2019-08-08 08:13:15 +00:00
|
|
|
GlEmptyState,
|
2020-02-14 18:08:45 +00:00
|
|
|
GlLoadingIcon,
|
2018-01-03 23:14:55 +00:00
|
|
|
banner,
|
|
|
|
'stage-issue-component': stageComponent,
|
2019-06-17 13:17:18 +00:00
|
|
|
'stage-plan-component': stageComponent,
|
2018-01-03 23:14:55 +00:00
|
|
|
'stage-code-component': stageCodeComponent,
|
|
|
|
'stage-test-component': stageTestComponent,
|
|
|
|
'stage-review-component': stageReviewComponent,
|
|
|
|
'stage-staging-component': stageStagingComponent,
|
|
|
|
'stage-production-component': stageComponent,
|
2019-08-08 08:13:15 +00:00
|
|
|
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-08-19 06:51:06 +00:00
|
|
|
'stage-nav-item': stageNavItem,
|
2018-01-03 23:14:55 +00:00
|
|
|
},
|
2017-09-25 11:23:29 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
store: CycleAnalyticsStore,
|
|
|
|
state: CycleAnalyticsStore.state,
|
|
|
|
isLoading: false,
|
|
|
|
isLoadingStage: false,
|
|
|
|
isEmptyStage: false,
|
|
|
|
hasError: false,
|
|
|
|
startDate: 30,
|
|
|
|
isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
|
2019-08-08 08:13:15 +00:00
|
|
|
service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath),
|
2017-09-25 11:23:29 +00:00
|
|
|
};
|
2016-10-20 23:24:36 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
currentStage() {
|
2017-09-25 11:23:29 +00:00
|
|
|
return this.store.currentActiveStage();
|
2016-10-20 23:24:36 +00:00
|
|
|
},
|
|
|
|
},
|
2016-10-20 04:34:16 +00:00
|
|
|
created() {
|
2019-07-12 12:26:39 +00:00
|
|
|
// Conditional check placed here to prevent this method from being called on the
|
2020-02-07 21:08:39 +00:00
|
|
|
// new Value Stream Analytics page (i.e. the new page will be initialized blank and only
|
2019-07-12 12:26:39 +00:00
|
|
|
// 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-09-18 14:02:45 +00:00
|
|
|
// Follow up issue: https://gitlab.com/gitlab-org/gitlab-foss/issues/64490
|
2019-07-12 12:26:39 +00:00
|
|
|
if (cycleAnalyticsEl.dataset.requestPath) this.fetchCycleAnalyticsData();
|
2016-10-20 04:34:16 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2016-10-20 23:24:36 +00:00
|
|
|
handleError() {
|
2017-09-25 11:23:29 +00:00
|
|
|
this.store.setErrorState(true);
|
2020-02-07 21:08:39 +00:00
|
|
|
return new Flash(__('There was an error while fetching value stream analytics data.'));
|
2016-10-20 04:34:16 +00:00
|
|
|
},
|
|
|
|
initDropdown() {
|
|
|
|
const $dropdown = $('.js-ca-dropdown');
|
|
|
|
const $label = $dropdown.find('.dropdown-label');
|
|
|
|
|
2018-10-10 06:09:55 +00:00
|
|
|
$dropdown
|
|
|
|
.find('li a')
|
|
|
|
.off('click')
|
|
|
|
.on('click', e => {
|
|
|
|
e.preventDefault();
|
|
|
|
const $target = $(e.currentTarget);
|
|
|
|
this.startDate = $target.data('value');
|
2016-10-20 04:34:16 +00:00
|
|
|
|
2018-10-10 06:09:55 +00:00
|
|
|
$label.text($target.text().trim());
|
|
|
|
this.fetchCycleAnalyticsData({ startDate: this.startDate });
|
|
|
|
});
|
2016-10-20 04:34:16 +00:00
|
|
|
},
|
|
|
|
fetchCycleAnalyticsData(options) {
|
2016-10-20 23:24:36 +00:00
|
|
|
const fetchOptions = options || { startDate: this.startDate };
|
2016-10-20 04:34:16 +00:00
|
|
|
|
2016-10-20 23:24:36 +00:00
|
|
|
this.isLoading = true;
|
2016-10-20 04:34:16 +00:00
|
|
|
|
2017-09-25 11:23:29 +00:00
|
|
|
this.service
|
2016-10-20 23:24:36 +00:00
|
|
|
.fetchCycleAnalyticsData(fetchOptions)
|
2018-10-10 06:09:55 +00:00
|
|
|
.then(response => {
|
2017-09-25 11:23:29 +00:00
|
|
|
this.store.setCycleAnalyticsData(response);
|
2016-10-20 23:24:36 +00:00
|
|
|
this.selectDefaultStage();
|
2016-10-20 04:34:16 +00:00
|
|
|
this.initDropdown();
|
2017-09-25 11:23:29 +00:00
|
|
|
this.isLoading = false;
|
2016-10-20 04:34:16 +00:00
|
|
|
})
|
2017-09-25 11:23:29 +00:00
|
|
|
.catch(() => {
|
2016-10-20 23:24:36 +00:00
|
|
|
this.handleError();
|
|
|
|
this.isLoading = false;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
selectDefaultStage() {
|
2017-08-04 08:07:05 +00:00
|
|
|
const stage = this.state.stages[0];
|
2016-11-19 07:38:07 +00:00
|
|
|
this.selectStage(stage);
|
2016-10-20 23:24:36 +00:00
|
|
|
},
|
|
|
|
selectStage(stage) {
|
|
|
|
if (this.isLoadingStage) return;
|
|
|
|
if (this.currentStage === stage) return;
|
|
|
|
|
2016-11-19 07:38:07 +00:00
|
|
|
if (!stage.isUserAllowed) {
|
2017-09-25 11:23:29 +00:00
|
|
|
this.store.setActiveStage(stage);
|
2016-11-19 07:38:07 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-10-20 23:24:36 +00:00
|
|
|
this.isLoadingStage = true;
|
2017-09-25 11:23:29 +00:00
|
|
|
this.store.setStageEvents([], stage);
|
|
|
|
this.store.setActiveStage(stage);
|
2016-10-20 23:24:36 +00:00
|
|
|
|
2017-09-25 11:23:29 +00:00
|
|
|
this.service
|
2016-10-20 23:24:36 +00:00
|
|
|
.fetchStageData({
|
|
|
|
stage,
|
|
|
|
startDate: this.startDate,
|
2019-08-08 08:13:15 +00:00
|
|
|
projectIds: this.selectedProjectIds,
|
2016-10-20 23:24:36 +00:00
|
|
|
})
|
2018-10-10 06:09:55 +00:00
|
|
|
.then(response => {
|
2016-11-16 21:11:27 +00:00
|
|
|
this.isEmptyStage = !response.events.length;
|
2017-09-25 11:23:29 +00:00
|
|
|
this.store.setStageEvents(response.events, stage);
|
|
|
|
this.isLoadingStage = false;
|
2016-10-20 23:24:36 +00:00
|
|
|
})
|
2017-09-25 11:23:29 +00:00
|
|
|
.catch(() => {
|
2016-10-20 23:24:36 +00:00
|
|
|
this.isEmptyStage = true;
|
|
|
|
this.isLoadingStage = false;
|
2016-10-20 04:34:16 +00:00
|
|
|
});
|
2016-10-20 23:24:36 +00:00
|
|
|
},
|
|
|
|
dismissOverviewDialog() {
|
|
|
|
this.isOverviewDialogDismissed = true;
|
2017-04-08 08:44:03 +00:00
|
|
|
Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
|
2016-10-20 23:24:36 +00:00
|
|
|
},
|
2019-08-08 08:13:15 +00:00
|
|
|
createCycleAnalyticsService(requestPath) {
|
|
|
|
return new CycleAnalyticsService({
|
|
|
|
requestPath,
|
|
|
|
});
|
|
|
|
},
|
2016-10-20 23:24:36 +00:00
|
|
|
},
|
2016-10-20 04:34:16 +00:00
|
|
|
});
|
2018-02-28 17:13:46 +00:00
|
|
|
};
|