Skip to content

G
gitlab-ce
Commit 82ed9302 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo Committed by Mike Greiling
Browse files
Options

Fetch cycle analytics data from the new backend 

For https://gitlab.com/gitlab-org/gitlab/issues/13076
we need to fetch cycle analytics data from
the /-/analytics dedicated endpoints introduced
in https://gitlab.com/gitlab-org/gitlab/merge_requests/18208

Remove unneeded lines
parent 2c93bad0
Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 310 deletions
app/assets/javascripts/lib/utils/text_utility.js
View file @ 82ed9302
......@@ -138,6 +138,14 @@ export const stripHtml = (string, replace = '') => {
*/
export const convertToCamelCase = string => string.replace(/(_\w)/g, s => s[1].toUpperCase());
/**
* Converts camelCase string to snake_case
*
* @param {*} string
*/
export const convertToSnakeCase = string =>
slugifyWithUnderscore(string.match(/([a-zA-Z][^A-Z]*)/g).join(' '));
/**
* Converts a sentence to lower case from the second word onwards
* e.g. Hello World => Hello world
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
View file @ 82ed9302
<script>
import { GlEmptyState, GlDaterangePicker } from '@gitlab/ui';
import { GlEmptyState, GlDaterangePicker, GlLoadingIcon } from '@gitlab/ui';
import { mapActions, mapState, mapGetters } from 'vuex';
import { getDateInPast } from '~/lib/utils/datetime_utility';
import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
......@@ -14,6 +14,7 @@ export default {
name: 'CycleAnalytics',
components: {
GlEmptyState,
GlLoadingIcon,
GroupsDropdownFilter,
ProjectsDropdownFilter,
SummaryTable,
......@@ -49,7 +50,7 @@ export default {
'isAddingCustomStage',
'selectedGroup',
'selectedProjectIds',
'selectedStageName',
'selectedStageId',
'stages',
'summary',
'labels',
......@@ -83,7 +84,7 @@ export default {
},
methods: {
...mapActions([
'fetchGroupLabels',
'fetchCustomStageFormData',
'fetchCycleAnalyticsData',
'fetchStageData',
'setCycleAnalyticsDataEndpoint',
......@@ -92,7 +93,7 @@ export default {
'setSelectedProjects',
'setSelectedTimeframe',
'fetchStageData',
'setSelectedStageName',
'setSelectedStageId',
'hideCustomStageForm',
'showCustomStageForm',
'setDateRange',
......@@ -101,7 +102,6 @@ export default {
this.setCycleAnalyticsDataEndpoint(group.full_path);
this.setSelectedGroup(group);
this.fetchCycleAnalyticsData();
this.fetchGroupLabels(this.currentGroupPath);
},
onProjectsSelect(projects) {
const projectIds = projects.map(value => value.id);
......@@ -110,7 +110,7 @@ export default {
},
onStageSelect(stage) {
this.hideCustomStageForm();
this.setSelectedStageName(stage.name);
this.setSelectedStageId(stage.id);
this.setStageDataEndpoint(this.currentStage.slug);
this.fetchStageData(this.currentStage.name);
},
......@@ -196,24 +196,29 @@ export default {
"
/>
<div v-else-if="!errorCode">
<summary-table class="js-summary-table" :items="summary" />
<stage-table
v-if="currentStage"
class="js-stage-table"
:current-stage="currentStage"
:stages="stages"
:is-loading="isLoadingStage"
:is-empty-stage="isEmptyStage"
:is-adding-custom-stage="isAddingCustomStage"
:current-stage-events="currentStageEvents"
:custom-stage-form-events="customStageFormEvents"
:labels="labels"
:no-data-svg-path="noDataSvgPath"
:no-access-svg-path="noAccessSvgPath"
:can-edit-stages="hasCustomizableCycleAnalytics"
@selectStage="onStageSelect"
@showAddStageForm="onShowAddStageForm"
/>
<div v-if="isLoading">
<gl-loading-icon class="mt-4" size="md" />
</div>
<div v-else>
<summary-table class="js-summary-table" :items="summary" />
<stage-table
v-if="currentStage"
class="js-stage-table"
:current-stage="currentStage"
:stages="stages"
:is-loading="isLoadingStage"
:is-empty-stage="isEmptyStage"
:is-adding-custom-stage="isAddingCustomStage"
:current-stage-events="currentStageEvents"
:custom-stage-form-events="customStageFormEvents"
:labels="labels"
:no-data-svg-path="noDataSvgPath"
:no-access-svg-path="noAccessSvgPath"
:can-edit-stages="hasCustomizableCycleAnalytics"
@selectStage="onStageSelect"
@showAddStageForm="onShowAddStageForm"
/>
</div>
</div>
</div>
</div>
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_event_list.vue
View file @ 82ed9302
......@@ -40,13 +40,13 @@ export default {
<limit-warning :count="events.length" />
</div>
<stage-build-item
v-if="isCurrentStage(stage.name, STAGE_NAME_TEST)"
v-if="isCurrentStage(stage.slug, STAGE_NAME_TEST)"
:stage="stage"
:events="events"
:with-build-status="true"
/>
<stage-build-item
v-else-if="isCurrentStage(stage.name, STAGE_NAME_STAGING)"
v-else-if="isCurrentStage(stage.slug, STAGE_NAME_STAGING)"
:stage="stage"
:events="events"
/>
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_nav_item.vue
View file @ 82ed9302
......@@ -17,10 +17,6 @@ export default {
default: false,
required: false,
},
isUserAllowed: {
type: Boolean,
required: true,
},
title: {
type: String,
required: true,
......@@ -41,7 +37,7 @@ export default {
return this.value && this.value.length > 0;
},
editable() {
return this.isUserAllowed && this.canEdit;
return this.canEdit;
},
},
};
......@@ -54,13 +50,8 @@ export default {
{{ title }}
</div>
<div class="stage-nav-item-cell stage-median mr-4">
<template v-if="isUserAllowed">
<span v-if="hasValue">{{ value }}</span>
<span v-else class="stage-empty">{{ __('Not enough data') }}</span>
</template>
<template v-else>
<span class="not-available">{{ __('Not available') }}</span>
</template>
<span v-if="hasValue">{{ value }}</span>
<span v-else class="stage-empty">{{ __('Not enough data') }}</span>
</div>
<template v-slot:dropdown-options>
<template v-if="isDefaultStage">
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_table.vue
View file @ 82ed9302
......@@ -71,7 +71,7 @@ export default {
},
computed: {
stageName() {
return this.currentStage ? this.currentStage.legend : __('Related Issues');
return this.currentStage ? this.currentStage.title : __('Related Issues');
},
shouldDisplayStage() {
const { currentStageEvents = [], isLoading, isEmptyStage } = this;
......@@ -138,8 +138,8 @@ export default {
:key="`ca-stage-title-${stage.title}`"
:title="stage.title"
:value="stage.value"
:is-active="!isAddingCustomStage && stage.name === currentStage.name"
:is-user-allowed="stage.isUserAllowed"
:is-active="!isAddingCustomStage && stage.id === currentStage.id"
:is-default-stage="!stage.custom"
@select="selectStage(stage)"
/>
<add-stage-button
......@@ -151,12 +151,6 @@ export default {
</nav>
<div class="section stage-events">
<gl-loading-icon v-if="isLoading" class="mt-4" size="md" />
<gl-empty-state
v-else-if="currentStage && !currentStage.isUserAllowed"
:title="__('You need permission.')"
:description="__('Want to see the data? Please ask an administrator for access.')"
:svg-path="noAccessSvgPath"
/>
<custom-stage-form
v-else-if="isAddingCustomStage"
:events="customStageFormEvents"
......
ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js
View file @ 82ed9302
import dateFormat from 'dateformat';
import axios from '~/lib/utils/axios_utils';
import createFlash, { hideFlash } from '~/flash';
import { __ } from '~/locale';
import Api from '~/api';
import httpStatus from '~/lib/utils/http_status';
import * as types from './mutation_types';
import { dateFormats } from '../../shared/constants';
import { nestQueryStringKeys } from '../utils';
const removeError = () => {
const flashEl = document.querySelector('.flash-alert');
......@@ -22,8 +21,8 @@ export const setStageDataEndpoint = ({ commit }, stageSlug) =>
export const setSelectedGroup = ({ commit }, group) => commit(types.SET_SELECTED_GROUP, group);
export const setSelectedProjects = ({ commit }, projectIds) =>
commit(types.SET_SELECTED_PROJECTS, projectIds);
export const setSelectedStageName = ({ commit }, stageName) =>
commit(types.SET_SELECTED_STAGE_NAME, stageName);
export const setSelectedStageId = ({ commit }, stageId) =>
commit(types.SET_SELECTED_STAGE_ID, stageId);
export const setDateRange = (
{ commit, dispatch, state },
......@@ -42,38 +41,24 @@ export const receiveStageDataSuccess = ({ commit }, data) =>
export const receiveStageDataError = ({ commit }) => {
commit(types.RECEIVE_STAGE_DATA_ERROR);
createFlash(__('There was an error while fetching cycle analytics data.'));
createFlash(__('There was an error fetching data for the selected stage'));
};
export const fetchStageData = ({ state, dispatch }) => {
export const fetchStageData = ({ state, dispatch, getters }) => {
const { cycleAnalyticsRequestParams = {} } = getters;
dispatch('requestStageData');
axios
.get(state.endpoints.stageData, {
params: {
'cycle_analytics[created_after]': dateFormat(state.startDate, dateFormats.isoDate),
'cycle_analytics[created_before]': dateFormat(state.endDate, dateFormats.isoDate),
'cycle_analytics[project_ids]': state.selectedProjectIds,
},
params: nestQueryStringKeys(cycleAnalyticsRequestParams, 'cycle_analytics'),
})
.then(({ data }) => dispatch('receiveStageDataSuccess', data))
.catch(error => dispatch('receiveStageDataError', error));
};
export const requestCycleAnalyticsData = ({ commit }) => commit(types.REQUEST_CYCLE_ANALYTICS_DATA);
export const receiveCycleAnalyticsDataSuccess = ({ state, commit, dispatch }, data) => {
commit(types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS, data);
const { stages = [] } = state;
if (stages && stages.length) {
removeError();
const { slug } = stages[0];
dispatch('setStageDataEndpoint', slug);
dispatch('fetchStageData');
} else {
createFlash(__('There was an error while fetching cycle analytics data.'));
}
};
export const receiveCycleAnalyticsDataSuccess = ({ commit }) =>
commit(types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS);
export const receiveCycleAnalyticsDataError = ({ commit }, { response }) => {
const { status } = response;
......@@ -83,21 +68,41 @@ export const receiveCycleAnalyticsDataError = ({ commit }, { response }) => {
createFlash(__('There was an error while fetching cycle analytics data.'));
};
export const fetchCycleAnalyticsData = ({ state, dispatch }) => {
dispatch('requestCycleAnalyticsData');
export const fetchCycleAnalyticsData = ({ dispatch }) => {
removeError();
return dispatch('requestCycleAnalyticsData')
.then(() => dispatch('fetchGroupLabels')) // fetch group label data
.then(() => dispatch('fetchGroupStagesAndEvents')) // fetch stage data
.then(() => dispatch('fetchSummaryData')) // fetch summary data and stage medians
.then(() => dispatch('receiveCycleAnalyticsDataSuccess'))
.catch(error => dispatch('receiveCycleAnalyticsDataError', error));
};
axios
export const requestSummaryData = ({ commit }) => commit(types.REQUEST_SUMMARY_DATA);
export const receiveSummaryDataError = ({ commit }, error) => {
commit(types.RECEIVE_SUMMARY_DATA_ERROR, error);
createFlash(__('There was an error while fetching cycle analytics summary data.'));
};
export const receiveSummaryDataSuccess = ({ commit }, data) =>
commit(types.RECEIVE_SUMMARY_DATA_SUCCESS, data);
export const fetchSummaryData = ({ state, dispatch, getters }) => {
const { cycleAnalyticsRequestParams = {} } = getters;
dispatch('requestSummaryData');
return axios
.get(state.endpoints.cycleAnalyticsData, {
params: {
'cycle_analytics[created_after]': dateFormat(state.startDate, dateFormats.isoDate),
'cycle_analytics[created_before]': dateFormat(state.endDate, dateFormats.isoDate),
'cycle_analytics[project_ids]': state.selectedProjectIds,
},
params: nestQueryStringKeys(cycleAnalyticsRequestParams, 'cycle_analytics'),
})
.then(({ data }) => dispatch('receiveCycleAnalyticsDataSuccess', data))
.catch(error => dispatch('receiveCycleAnalyticsDataError', error));
.then(({ data }) => dispatch('receiveSummaryDataSuccess', data))
.catch(error => dispatch('receiveSummaryDataError', error));
};
export const requestGroupStagesAndEvents = ({ commit }) =>
commit(types.REQUEST_GROUP_STAGES_AND_EVENTS);
export const hideCustomStageForm = ({ commit }) => commit(types.HIDE_CUSTOM_STAGE_FORM);
export const showCustomStageForm = ({ commit }) => commit(types.SHOW_CUSTOM_STAGE_FORM);
......@@ -111,10 +116,44 @@ export const receiveGroupLabelsError = ({ commit }, error) => {
export const requestGroupLabels = ({ commit }) => commit(types.REQUEST_GROUP_LABELS);
export const fetchGroupLabels = ({ dispatch }, groupPath) => {
export const fetchGroupLabels = ({ dispatch, state }) => {
dispatch('requestGroupLabels');
const {
selectedGroup: { fullPath },
} = state;
return Api.groupLabels(groupPath)
return Api.groupLabels(fullPath)
.then(data => dispatch('receiveGroupLabelsSuccess', data))
.catch(error => dispatch('receiveGroupLabelsError', error));
};
export const receiveGroupStagesAndEventsError = ({ commit }) => {
commit(types.RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR);
createFlash(__('There was an error fetching cycle analytics stages.'));
};
export const receiveGroupStagesAndEventsSuccess = ({ state, commit, dispatch }, data) => {
commit(types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS, data);
const { stages = [] } = state;
if (stages && stages.length) {
const { slug } = stages[0];
dispatch('setStageDataEndpoint', slug);
dispatch('fetchStageData');
} else {
createFlash(__('There was an error while fetching cycle analytics data.'));
}
};
export const fetchGroupStagesAndEvents = ({ state, dispatch, getters }) => {
const {
cycleAnalyticsRequestParams: { created_after, project_ids },
} = getters;
dispatch('requestGroupStagesAndEvents');
return axios
.get(state.endpoints.cycleAnalyticsStagesAndEvents, {
params: nestQueryStringKeys({ start_date: created_after, project_ids }, 'cycle_analytics'),
})
.then(({ data }) => dispatch('receiveGroupStagesAndEventsSuccess', data))
.catch(error => dispatch('receiveGroupStagesAndEventsError', error));
};
ee/app/assets/javascripts/analytics/cycle_analytics/store/getters.js
View file @ 82ed9302
import dateFormat from 'dateformat';
import httpStatus from '~/lib/utils/http_status';
import { dateFormats } from '../../shared/constants';
export const currentStage = ({ stages, selectedStageName }) =>
stages.length && selectedStageName
? stages.find(stage => stage.name === selectedStageName)
: null;
export const currentStage = ({ stages, selectedStageId }) =>
stages.length && selectedStageId ? stages.find(stage => stage.id === selectedStageId) : null;
export const defaultStage = state => (state.stages.length ? state.stages[0] : null);
export const hasNoAccessError = state => state.errorCode === httpStatus.FORBIDDEN;
export const currentGroupPath = ({ selectedGroup }) =>
selectedGroup && selectedGroup.fullPath ? selectedGroup.fullPath : null;
export const cycleAnalyticsRequestParams = ({
startDate = null,
endDate = null,
selectedProjectIds = [],
}) => ({
project_ids: selectedProjectIds,
created_after: startDate ? dateFormat(startDate, dateFormats.isoDate) : null,
created_before: endDate ? dateFormat(endDate, dateFormats.isoDate) : null,
});
ee/app/assets/javascripts/analytics/cycle_analytics/store/mutation_types.js
View file @ 82ed9302
......@@ -3,7 +3,7 @@ export const SET_STAGE_DATA_ENDPOINT = 'SET_STAGE_DATA_ENDPOINT';
export const SET_SELECTED_GROUP = 'SET_SELECTED_GROUP';
export const SET_SELECTED_PROJECTS = 'SET_SELECTED_PROJECTS';
export const SET_SELECTED_STAGE_NAME = 'SET_SELECTED_STAGE_NAME';
export const SET_SELECTED_STAGE_ID = 'SET_SELECTED_STAGE_ID';
export const SET_DATE_RANGE = 'SET_DATE_RANGE';
......@@ -21,3 +21,11 @@ export const SHOW_CUSTOM_STAGE_FORM = 'SHOW_CUSTOM_STAGE_FORM';
export const REQUEST_GROUP_LABELS = 'REQUEST_GROUP_LABELS';
export const RECEIVE_GROUP_LABELS_SUCCESS = 'RECEIVE_GROUP_LABELS_SUCCESS';
export const RECEIVE_GROUP_LABELS_ERROR = 'RECEIVE_GROUP_LABELS_ERROR';
export const REQUEST_SUMMARY_DATA = 'REQUEST_SUMMARY_DATA';
export const RECEIVE_SUMMARY_DATA_SUCCESS = 'RECEIVE_SUMMARY_DATA_SUCCESS';
export const RECEIVE_SUMMARY_DATA_ERROR = 'RECEIVE_SUMMARY_DATA_ERROR';
export const REQUEST_GROUP_STAGES_AND_EVENTS = 'REQUEST_GROUP_STAGES_AND_EVENTS';
export const RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS = 'RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS';
export const RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR = 'RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR';
ee/app/assets/javascripts/analytics/cycle_analytics/store/mutations.js
View file @ 82ed9302
import { dasherize } from '~/lib/utils/text_utility';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import * as types from './mutation_types';
import { EMPTY_STAGE_TEXT } from '../constants';
import { transformRawStages } from '../utils';
export default {
[types.SET_CYCLE_ANALYTICS_DATA_ENDPOINT](state, groupPath) {
// TODO: this endpoint will be removed when the /-/analytics endpoints are ready
// https://gitlab.com/gitlab-org/gitlab/issues/34751
state.endpoints.cycleAnalyticsData = `/groups/${groupPath}/-/cycle_analytics`;
state.endpoints.cycleAnalyticsStagesAndEvents = `/-/analytics/cycle_analytics/stages?group_id=${groupPath}`;
},
[types.SET_STAGE_DATA_ENDPOINT](state, stageSlug) {
state.endpoints.stageData = `${state.endpoints.cycleAnalyticsData}/events/${stageSlug}.json`;
// TODO: this endpoint will be replaced with a /-/analytics... endpoint when backend is ready
// https://gitlab.com/gitlab-org/gitlab/issues/34751
const { fullPath } = state.selectedGroup;
state.endpoints.stageData = `/groups/${fullPath}/-/cycle_analytics/events/${stageSlug}.json`;
},
[types.SET_SELECTED_GROUP](state, group) {
state.selectedGroup = convertObjectPropsToCamelCase(group, { deep: true });
......@@ -17,8 +22,8 @@ export default {
[types.SET_SELECTED_PROJECTS](state, projectIds) {
state.selectedProjectIds = projectIds;
},
[types.SET_SELECTED_STAGE_NAME](state, stageName) {
state.selectedStageName = stageName;
[types.SET_SELECTED_STAGE_ID](state, stageId) {
state.selectedStageId = stageId;
},
[types.SET_DATE_RANGE](state, { startDate, endDate }) {
state.startDate = startDate;
......@@ -28,27 +33,7 @@ export default {
state.isLoading = true;
state.isAddingCustomStage = false;
},
[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, data) {
state.summary = data.summary.map(item => ({
...item,
value: item.value || '-',
}));
state.stages = data.stats.map(item => {
const slug = dasherize(item.name.toLowerCase());
return {
...item,
isUserAllowed: data.permissions[slug],
emptyStageText: EMPTY_STAGE_TEXT[slug],
slug,
};
});
if (state.stages.length) {
const { name } = state.stages[0];
state.selectedStageName = name;
}
[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state) {
state.errorCode = null;
state.isLoading = false;
},
......@@ -58,13 +43,15 @@ export default {
},
[types.REQUEST_STAGE_DATA](state) {
state.isLoadingStage = true;
state.isEmptyStage = false;
},
[types.RECEIVE_STAGE_DATA_SUCCESS](state, data = {}) {
const { events = [] } = data;
state.currentStageEvents = events.map(({ name = '', ...rest }) =>
convertObjectPropsToCamelCase({ title: name, ...rest }, { deep: true }),
);
state.isEmptyStage = state.currentStageEvents.length === 0;
state.isEmptyStage = !events.length;
state.isLoadingStage = false;
},
[types.RECEIVE_STAGE_DATA_ERROR](state) {
......@@ -86,4 +73,51 @@ export default {
[types.SHOW_CUSTOM_STAGE_FORM](state) {
state.isAddingCustomStage = true;
},
[types.RECEIVE_SUMMARY_DATA_ERROR](state) {
state.summary = [];
},
[types.REQUEST_SUMMARY_DATA](state) {
state.summary = [];
},
[types.RECEIVE_SUMMARY_DATA_SUCCESS](state, data) {
const { stages } = state;
const { summary, stats } = data;
state.summary = summary.map(item => ({
...item,
value: item.value || '-',
}));
/*
* Medians will eventually be fetched from a separate endpoint, which will
* include the median calculations for the custom stages, for now we will
* grab the medians from the group level cycle analytics endpoint, which does
* not include the custom stages
* https://gitlab.com/gitlab-org/gitlab/issues/34751
*/
state.stages = stages.map(stage => {
const stat = stats.find(m => m.name === stage.slug);
return { ...stage, value: stat ? stat.value : null };
});
},
[types.REQUEST_GROUP_STAGES_AND_EVENTS](state) {
state.stages = [];
state.customStageFormEvents = [];
},
[types.RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR](state) {
state.stages = [];
state.customStageFormEvents = [];
},
[types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS](state, data) {
const { events = [], stages = [] } = data;
state.stages = transformRawStages(stages);
state.customStageFormEvents = events.map(ev =>
convertObjectPropsToCamelCase(ev, { deep: true }),
);
if (state.stages.length) {
const { id } = state.stages[0];
state.selectedStageId = id;
}
},
};
ee/app/assets/javascripts/analytics/cycle_analytics/store/state.js
View file @ 82ed9302
......@@ -2,6 +2,8 @@ export default () => ({
endpoints: {
cycleAnalyticsData: null,
stageData: null,
cycleAnalyticsStagesAndEvents: null,
summaryData: null,
},
startDate: null,
......@@ -17,7 +19,7 @@ export default () => ({
selectedGroup: null,
selectedProjectIds: [],
selectedStageName: null,
selectedStageId: null,
currentStageEvents: [],
......
ee/app/assets/javascripts/analytics/cycle_analytics/utils.js
View file @ 82ed9302
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import { convertToSnakeCase } from '~/lib/utils/text_utility';
import { isString } from 'underscore';
const EVENT_TYPE_LABEL = 'label';
export const isStartEvent = ev => Boolean(ev) && Boolean(ev.canBeStartEvent) && ev.canBeStartEvent;
......@@ -24,3 +28,20 @@ export const isLabelEvent = (labelEvents = [], ev = null) =>
export const getLabelEventsIdentifiers = (events = []) =>
events.filter(ev => ev.type && ev.type === EVENT_TYPE_LABEL).map(i => i.identifier);
export const transformRawStages = (stages = []) =>
stages
.map(({ title, ...rest }) => ({
...convertObjectPropsToCamelCase(rest, { deep: true }),
slug: convertToSnakeCase(title),
title,
}))
.sort((a, b) => a.id > b.id);
export const nestQueryStringKeys = (obj = null, targetKey = '') => {
if (!obj || !isString(targetKey) || !targetKey.length) return {};
return Object.entries(obj).reduce((prev, [key, value]) => {
const customKey = `${targetKey}[${key}]`;
return { ...prev, [customKey]: value };
}, {});
};
ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb
View file @ 82ed9302
......@@ -51,11 +51,17 @@ describe 'Group Cycle Analytics', :js do
end
end
def wait_for_stages_to_load
expect(page).to have_selector '.js-stage-table'
end
# TODO: Followup should have tests for stub_licensed_features(cycle_analytics_for_groups: false)
def select_group
dropdown = page.find('.dropdown-groups')
dropdown.click
dropdown.find('a').click
wait_for_requests
end
def select_project
......@@ -216,12 +222,7 @@ describe 'Group Cycle Analytics', :js do
dropdown.click
dropdown.find('a').click
# Make capybara wait until all the .stage-nav-item elements are rendered
# We should have NUMBER_OF_STAGES + 1 (button)
expect(page).to have_selector(
'.stage-nav-item',
count: Gitlab::Analytics::CycleAnalytics::DefaultStages.all.size + 1
)
wait_for_stages_to_load
end
context 'Add a stage button' do
......
ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js
View file @ 82ed9302
import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
import Vuex from 'vuex';
import Vue from 'vue';
import httpStatusCodes from '~/lib/utils/http_status';
import store from 'ee/analytics/cycle_analytics/store';
import Component from 'ee/analytics/cycle_analytics/components/base.vue';
import { GlEmptyState, GlDaterangePicker } from '@gitlab/ui';
......@@ -41,8 +42,8 @@ function createComponent({ opts = {}, shallow = true, withStageSelected = false
...mockData.group,
});
comp.vm.$store.dispatch('receiveCycleAnalyticsDataSuccess', {
...mockData.cycleAnalyticsData,
comp.vm.$store.dispatch('receiveGroupStagesAndEventsSuccess', {
...mockData.customizableStagesAndEvents,
});
comp.vm.$store.dispatch('receiveStageDataSuccess', {
......@@ -296,6 +297,40 @@ describe('Cycle Analytics component', () => {
});
describe('with failed requests while loading', () => {
const { full_path: groupId } = mockData.group;
function mockRequestCycleAnalyticsData(overrides = {}) {
const defaultStatus = 200;
const defaultRequests = {
fetchSummaryData: {
status: defaultStatus,
endpoint: `/groups/${groupId}/-/cycle_analytics`,
response: { ...mockData.cycleAnalyticsData },
},
fetchGroupStagesAndEvents: {
status: defaultStatus,
endpoint: `/-/analytics/cycle_analytics/stages?group_id=${groupId}`,
response: { ...mockData.customizableStagesAndEvents },
},
fetchGroupLabels: {
status: defaultStatus,
endpoint: `/groups/${groupId}/-/labels`,
response: { ...mockData.groupLabels },
},
fetchStageData: {
status: defaultStatus,
// default first stage is issue
endpoint: '/groups/foo/-/cycle_analytics/events/issue.json',
response: { ...mockData.issueEvents },
},
...overrides,
};
Object.values(defaultRequests).forEach(({ endpoint, status, response }) => {
mock.onGet(endpoint).replyOnce(status, response);
});
}
beforeEach(() => {
setFixtures('<div class="flash-container"></div>');
......@@ -310,20 +345,22 @@ describe('Cycle Analytics component', () => {
const findFlashError = () => document.querySelector('.flash-container .flash-text');
it('will display an error if the fetchCycleAnalyticsData request fails', () => {
it('will display an error if the fetchSummaryData request fails', () => {
expect(findFlashError()).toBeNull();
mock
.onGet('/groups/foo/-/labels')
.replyOnce(200, { response: { ...mockData.groupLabels } })
.onGet('/groups/foo/-/cycle_analytics')
.replyOnce(500, { response: { status: 500 } });
mockRequestCycleAnalyticsData({
fetchSummaryData: {
status: httpStatusCodes.NOT_FOUND,
endpoint: `/groups/${groupId}/-/cycle_analytics`,
response: { response: { status: httpStatusCodes.NOT_FOUND } },
},
});
wrapper.vm.onGroupSelect(mockData.group);
return waitForPromises().then(() => {
expect(findFlashError().innerText.trim()).toEqual(
'There was an error while fetching cycle analytics data.',
'There was an error while fetching cycle analytics summary data.',
);
});
});
......@@ -331,7 +368,12 @@ describe('Cycle Analytics component', () => {
it('will display an error if the fetchGroupLabels request fails', () => {
expect(findFlashError()).toBeNull();
mock.onGet('/groups/foo/-/labels').replyOnce(404, { response: { status: 404 } });
mockRequestCycleAnalyticsData({
fetchGroupLabels: {
status: httpStatusCodes.NOT_FOUND,
response: { response: { status: httpStatusCodes.NOT_FOUND } },
},
});
wrapper.vm.onGroupSelect(mockData.group);
......@@ -341,5 +383,45 @@ describe('Cycle Analytics component', () => {
);
});
});
it('will display an error if the fetchGroupStagesAndEvents request fails', () => {
expect(findFlashError()).toBeNull();
mockRequestCycleAnalyticsData({
fetchGroupStagesAndEvents: {
endPoint: '/-/analytics/cycle_analytics/stages',
status: httpStatusCodes.NOT_FOUND,
response: { response: { status: httpStatusCodes.NOT_FOUND } },
},
});
wrapper.vm.onGroupSelect(mockData.group);
return waitForPromises().then(() => {
expect(findFlashError().innerText.trim()).toEqual(
'There was an error fetching cycle analytics stages.',
);
});
});
it('will display an error if the fetchStageData request fails', () => {
expect(findFlashError()).toBeNull();
mockRequestCycleAnalyticsData({
fetchStageData: {
endPoint: `/groups/${groupId}/-/cycle_analytics/events/issue.json`,
status: httpStatusCodes.NOT_FOUND,
response: { response: { status: httpStatusCodes.NOT_FOUND } },
},
});
wrapper.vm.onGroupSelect(mockData.group);
return waitForPromises().then(() => {
expect(findFlashError().innerText.trim()).toEqual(
'There was an error fetching data for the selected stage',
);
});
});
});
});
ee/spec/frontend/analytics/cycle_analytics/components/stage_table_spec.js
View file @ 82ed9302
......@@ -29,7 +29,6 @@ function createComponent(props = {}, shallow = false) {
labels: groupLabels,
isLoading: false,
isEmptyStage: false,
isUserAllowed: true,
isAddingCustomStage: false,
noDataSvgPath,
noAccessSvgPath,
......@@ -159,45 +158,9 @@ describe('StageTable', () => {
expect(wrapper.find($sel.illustration).html()).toContain(noDataSvgPath);
});
it('will display the no data title', () => {
it('will display the no data message', () => {
expect(wrapper.html()).toContain("We don't have enough data to show this stage.");
});
it('will display the no data description', () => {
expect(wrapper.html()).toContain(
'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
);
});
});
describe('isUserAllowed = false', () => {
beforeEach(() => {
wrapper = createComponent({
currentStage: {
...issueStage,
isUserAllowed: false,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('will render the no access illustration', () => {
expect(wrapper.find($sel.illustration).exists()).toBeTruthy();
expect(wrapper.find($sel.illustration).html()).toContain(noAccessSvgPath);
});
it('will display the no access title', () => {
expect(wrapper.html()).toContain('You need permission.');
});
it('will display the no access description', () => {
expect(wrapper.html()).toContain(
'Want to see the data? Please ask an administrator for access.',
);
});
});
describe('canEditStages = true', () => {
......
ee/spec/frontend/analytics/cycle_analytics/mock_data.js
View file @ 82ed9302
......@@ -7,6 +7,16 @@ import { getDateInPast } from '~/lib/utils/datetime_utility';
import { DEFAULT_DAYS_IN_PAST } from 'ee/analytics/cycle_analytics/constants';
import { mockLabels } from '../../../../../spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data';
/*
* With the new API endpoints (analytics/cycle_analytics) we will
* fetch stages, cycleEvents and summary data from different endpoints
*/
const endpoints = {
cycleAnalyticsData: 'cycle_analytics/mock_data.json', // existing cycle analytics data
customizableCycleAnalyticsStagesAndEvents: 'analytics/cycle_analytics/stages.json', // customizable stages and events endpoint
stageEvents: stage => `cycle_analytics/events/${stage}.json`,
};
export const groupLabels = mockLabels.map(({ title, ...rest }) => ({ ...rest, name: title }));
export const group = {
......@@ -17,22 +27,26 @@ export const group = {
avatar_url: `${TEST_HOST}/images/home/nasa.svg`,
};
const getStageBySlug = (stages, slug) => stages.find(stage => stage.slug === slug) || {};
const getStageById = (stages, id) => stages.find(stage => stage.id === id) || {};
export const cycleAnalyticsData = getJSONFixture('cycle_analytics/mock_data.json');
export const cycleAnalyticsData = getJSONFixture(endpoints.cycleAnalyticsData);
export const customizableStagesAndEvents = getJSONFixture(
endpoints.customizableCycleAnalyticsStagesAndEvents,
);
const dummyState = {};
// prepare the raw stage data for our components
mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](dummyState, cycleAnalyticsData);
mutations[types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS](dummyState, customizableStagesAndEvents);
export const issueStage = getStageBySlug(dummyState.stages, 'issue');
export const planStage = getStageBySlug(dummyState.stages, 'plan');
export const reviewStage = getStageBySlug(dummyState.stages, 'review');
export const codeStage = getStageBySlug(dummyState.stages, 'code');
export const testStage = getStageBySlug(dummyState.stages, 'test');
export const stagingStage = getStageBySlug(dummyState.stages, 'staging');
export const productionStage = getStageBySlug(dummyState.stages, 'production');
export const issueStage = getStageById(dummyState.stages, 'issue');
export const planStage = getStageById(dummyState.stages, 'plan');
export const reviewStage = getStageById(dummyState.stages, 'review');
export const codeStage = getStageById(dummyState.stages, 'code');
export const testStage = getStageById(dummyState.stages, 'test');
export const stagingStage = getStageById(dummyState.stages, 'staging');
export const productionStage = getStageById(dummyState.stages, 'production');
export const allowedStages = [issueStage, planStage, codeStage];
......@@ -43,14 +57,14 @@ const deepCamelCase = obj => convertObjectPropsToCamelCase(obj, { deep: true });
const defaultStages = ['issue', 'plan', 'review', 'code', 'test', 'staging', 'production'];
const stageFixtures = defaultStages.reduce((acc, stage) => {
const { events } = getJSONFixture(`cycle_analytics/events/${stage}.json`);
const { events } = getJSONFixture(endpoints.stageEvents(stage));
return {
...acc,
[stage]: deepCamelCase(events),
};
}, {});
export const endDate = new Date(Date.now());
export const endDate = new Date(2019, 0, 14);
export const startDate = getDateInPast(endDate, DEFAULT_DAYS_IN_PAST);
export const issueEvents = stageFixtures.issue;
......@@ -61,7 +75,7 @@ export const testEvents = stageFixtures.test;
export const stagingEvents = stageFixtures.staging;
export const productionEvents = stageFixtures.production;
const { events: rawCustomStageEvents } = getJSONFixture('analytics/cycle_analytics/stages.json');
const { events: rawCustomStageEvents } = customizableStagesAndEvents;
const camelCasedStageEvents = rawCustomStageEvents.map(deepCamelCase);
export const customStageStartEvents = camelCasedStageEvents.filter(ev => ev.canBeStartEvent);
......@@ -74,6 +88,7 @@ export const customStageStopEvents = camelCasedStageEvents.filter(ev =>
);
// TODO: the shim below should be removed once we have label events seeding
// https://gitlab.com/gitlab-org/gitlab/issues/33112
export const labelStartEvent = { ...customStageStartEvents[0], type: 'label' };
const firstAllowedStopEvent = labelStartEvent.allowedEndEvents[0];
// We need to enusre that the stop event can be applied to the start event
......
ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js
View file @ 82ed9302
......@@ -3,6 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
import testAction from 'helpers/vuex_action_helper';
import { TEST_HOST } from 'helpers/test_constants';
import createFlash from '~/flash';
import * as getters from 'ee/analytics/cycle_analytics/store/getters';
import * as actions from 'ee/analytics/cycle_analytics/store/actions';
import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
import {
......@@ -12,6 +13,7 @@ import {
groupLabels,
startDate,
endDate,
customizableStagesAndEvents,
} from '../mock_data';
const stageData = { events: [] };
......@@ -19,6 +21,7 @@ const error = new Error('Request failed with status code 404');
const groupPath = 'cool-group';
const groupLabelsEndpoint = `/groups/${groupPath}/-/labels`;
const flashErrorMessage = 'There was an error while fetching cycle analytics data.';
const selectedGroup = { fullPath: groupPath };
describe('Cycle analytics actions', () => {
let state;
......@@ -35,12 +38,14 @@ describe('Cycle analytics actions', () => {
stageData: `${TEST_HOST}/groups/${group.path}/-/cycle_analytics/events/${cycleAnalyticsData.stats[0].name}.json`,
},
stages: [],
getters,
};
mock = new MockAdapter(axios);
});
afterEach(() => {
mock.restore();
state = { ...state, selectedGroup: null };
});
it.each`
......@@ -49,7 +54,7 @@ describe('Cycle analytics actions', () => {
${'setStageDataEndpoint'} | ${'SET_STAGE_DATA_ENDPOINT'} | ${'endpoints.stageData'} | ${'new_stage_name'}
${'setSelectedGroup'} | ${'SET_SELECTED_GROUP'} | ${'selectedGroup'} | ${'someNewGroup'}
${'setSelectedProjects'} | ${'SET_SELECTED_PROJECTS'} | ${'selectedProjectIds'} | ${[10, 20, 30, 40]}
${'setSelectedStageName'} | ${'SET_SELECTED_STAGE_NAME'} | ${'selectedStageName'} | ${'someNewGroup'}
${'setSelectedStageId'} | ${'SET_SELECTED_STAGE_ID'} | ${'selectedStageId'} | ${'someNewGroup'}
`('$action should set $stateKey with $payload and type $type', ({ action, type, payload }) => {
testAction(
actions[action],
......@@ -164,19 +169,20 @@ describe('Cycle analytics actions', () => {
commit: () => {},
});
shouldFlashAnError();
shouldFlashAnError('There was an error fetching data for the selected stage');
});
});
describe('fetchGroupLabels', () => {
beforeEach(() => {
state = { ...state, selectedGroup };
mock.onGet(groupLabelsEndpoint).replyOnce(200, groupLabels);
});
it('dispatches receiveGroupLabels if the request succeeds', done => {
testAction(
actions.fetchGroupLabels,
groupPath,
null,
state,
[],
[
......@@ -193,8 +199,8 @@ describe('Cycle analytics actions', () => {
it('dispatches receiveGroupLabelsError if the request fails', done => {
testAction(
actions.fetchGroupLabels,
'this-path-does-not-exist',
state,
null,
{ ...state, selectedGroup: { fullPath: null } },
[],
[
{ type: 'requestGroupLabels' },
......@@ -222,132 +228,157 @@ describe('Cycle analytics actions', () => {
});
describe('fetchCycleAnalyticsData', () => {
function mockFetchCycleAnalyticsAction(overrides = {}) {
const mocks = {
requestCycleAnalyticsData:
overrides.requestCycleAnalyticsData || jest.fn().mockResolvedValue(),
fetchGroupStagesAndEvents:
overrides.fetchGroupStagesAndEvents || jest.fn().mockResolvedValue(),
fetchSummaryData: overrides.fetchSummaryData || jest.fn().mockResolvedValue(),
receiveCycleAnalyticsDataSuccess:
overrides.receiveCycleAnalyticsDataSuccess || jest.fn().mockResolvedValue(),
};
return {
mocks,
mockDispatchContext: jest
.fn()
.mockImplementationOnce(mocks.requestCycleAnalyticsData)
.mockImplementationOnce(mocks.fetchGroupStagesAndEvents)
.mockImplementationOnce(mocks.fetchSummaryData)
.mockImplementationOnce(mocks.receiveCycleAnalyticsDataSuccess),
};
}
beforeEach(() => {
setFixtures('<div class="flash-container"></div>');
mock.onGet(state.endpoints.cycleAnalyticsData).replyOnce(200, cycleAnalyticsData);
state = { ...state, selectedGroup, startDate, endDate };
});
it('dispatches receiveCycleAnalyticsDataSuccess with received data', done => {
testAction(
actions.fetchCycleAnalyticsData,
null,
state,
[],
[
{ type: 'requestCycleAnalyticsData' },
{
type: 'receiveCycleAnalyticsDataSuccess',
payload: { ...cycleAnalyticsData },
},
],
done,
);
it(`dispatches actions for required cycle analytics data`, done => {
const { mocks, mockDispatchContext } = mockFetchCycleAnalyticsAction();
actions
.fetchCycleAnalyticsData({
dispatch: mockDispatchContext,
state: {},
commit: () => {},
})
.then(() => {
expect(mockDispatchContext).toHaveBeenCalled();
expect(mocks.requestCycleAnalyticsData).toHaveBeenCalled();
expect(mocks.fetchGroupStagesAndEvents).toHaveBeenCalled();
expect(mocks.fetchSummaryData).toHaveBeenCalled();
expect(mocks.receiveCycleAnalyticsDataSuccess).toHaveBeenCalled();
done();
})
.catch(done.fail);
});
it('dispatches receiveCycleAnalyticsError on error', done => {
const brokenState = {
...state,
endpoints: {
cycleAnalyticsData: 'this will break',
},
};
it(`displays an error if fetchSummaryData fails`, done => {
const { mockDispatchContext } = mockFetchCycleAnalyticsAction({
fetchSummaryData: actions.fetchSummaryData({
dispatch: jest
.fn()
.mockResolvedValueOnce()
.mockImplementation(actions.receiveSummaryDataError({ commit: () => {} })),
commit: () => {},
state: { ...state, endpoints: { cycleAnalyticsData: '/this/is/fake' } },
getters,
}),
});
testAction(
actions.fetchCycleAnalyticsData,
null,
brokenState,
[],
[
{ type: 'requestCycleAnalyticsData' },
{
type: 'receiveCycleAnalyticsDataError',
payload: error,
},
],
done,
);
actions
.fetchCycleAnalyticsData({
dispatch: mockDispatchContext,
state: {},
commit: () => {},
})
.then(() => {
shouldFlashAnError('There was an error while fetching cycle analytics summary data.');
done();
})
.catch(done.fail);
});
describe('requestCycleAnalyticsData', () => {
it(`commits the ${types.REQUEST_CYCLE_ANALYTICS_DATA} mutation`, done => {
testAction(
actions.requestCycleAnalyticsData,
{ ...cycleAnalyticsData },
state,
[
{
type: types.REQUEST_CYCLE_ANALYTICS_DATA,
},
],
[],
done,
);
it(`displays an error if fetchGroupStagesAndEvents fails`, done => {
const { mockDispatchContext } = mockFetchCycleAnalyticsAction({
fetchGroupStagesAndEvents: actions.fetchGroupStagesAndEvents({
dispatch: jest
.fn()
.mockResolvedValueOnce()
.mockImplementation(actions.receiveGroupStagesAndEventsError({ commit: () => {} })),
commit: () => {},
state: { ...state, endpoints: { cycleAnalyticsData: '/this/is/fake' } },
getters,
}),
});
});
});
describe('receiveCycleAnalyticsDataSuccess', () => {
beforeEach(() => {
setFixtures('<div class="flash-container"></div>');
});
it(`commits the ${types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS} mutation`, done => {
testAction(
actions.receiveCycleAnalyticsDataSuccess,
{ ...cycleAnalyticsData },
state,
[
{
type: types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS,
payload: { ...cycleAnalyticsData },
},
],
[],
done,
);
actions
.fetchCycleAnalyticsData({
dispatch: mockDispatchContext,
state: {},
commit: () => {},
})
.then(() => {
shouldFlashAnError('There was an error fetching cycle analytics stages.');
done();
})
.catch(done.fail);
});
it('removes an existing flash error if present', () => {
const commit = jest.fn();
const dispatch = jest.fn();
const stateWithStages = {
...state,
stages,
};
createFlash(flashErrorMessage);
describe('with an existing error', () => {
beforeEach(() => {
setFixtures('<div class="flash-container"></div>');
});
const flashAlert = document.querySelector('.flash-alert');
it('removes an existing flash error if present', done => {
const { mockDispatchContext } = mockFetchCycleAnalyticsAction();
createFlash(flashErrorMessage);
expect(flashAlert).toBeVisible();
const flashAlert = document.querySelector('.flash-alert');
actions.receiveCycleAnalyticsDataSuccess({ commit, dispatch, state: stateWithStages });
expect(flashAlert).toBeVisible();
expect(flashAlert.style.opacity).toBe('0');
actions
.fetchCycleAnalyticsData({
dispatch: mockDispatchContext,
state: {},
commit: () => {},
})
.then(() => {
expect(flashAlert.style.opacity).toBe('0');
done();
})
.catch(done.fail);
});
});
it("dispatches the 'setStageDataEndpoint' and 'fetchStageData' actions", done => {
const { slug } = stages[0];
const { id } = stages[0];
const stateWithStages = {
...state,
stages,
};
testAction(
actions.receiveCycleAnalyticsDataSuccess,
{ ...cycleAnalyticsData },
actions.receiveGroupStagesAndEventsSuccess,
{ ...customizableStagesAndEvents },
stateWithStages,
[
{
type: types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS,
payload: { ...cycleAnalyticsData },
type: types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS,
payload: { ...customizableStagesAndEvents },
},
],
[{ type: 'setStageDataEndpoint', payload: slug }, { type: 'fetchStageData' }],
[{ type: 'setStageDataEndpoint', payload: id }, { type: 'fetchStageData' }],
done,
);
});
it('will flash an error when there are no stages', () => {
[[], null].forEach(emptyStages => {
actions.receiveCycleAnalyticsDataSuccess(
actions.receiveGroupStagesAndEventsSuccess(
{
commit: () => {},
state: { stages: emptyStages },
......@@ -364,6 +395,7 @@ describe('Cycle analytics actions', () => {
beforeEach(() => {
setFixtures('<div class="flash-container"></div>');
});
it(`commits the ${types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR} mutation on a 403 response`, done => {
const response = { status: 403 };
testAction(
......@@ -410,4 +442,61 @@ describe('Cycle analytics actions', () => {
shouldFlashAnError();
});
});
describe('receiveGroupStagesAndEventsSuccess', () => {
beforeEach(() => {
setFixtures('<div class="flash-container"></div>');
});
it(`commits the ${types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS} mutation`, done => {
testAction(
actions.receiveGroupStagesAndEventsSuccess,
{ ...customizableStagesAndEvents },
state,
[
{
type: types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS,
payload: { ...customizableStagesAndEvents },
},
],
[],
done,
);
});
it("dispatches the 'setStageDataEndpoint' and 'fetchStageData' actions", done => {
const { id } = stages[0];
const stateWithStages = {
...state,
stages,
};
testAction(
actions.receiveGroupStagesAndEventsSuccess,
{ ...customizableStagesAndEvents },
stateWithStages,
[
{
type: types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS,
payload: { ...customizableStagesAndEvents },
},
],
[{ type: 'setStageDataEndpoint', payload: id }, { type: 'fetchStageData' }],
done,
);
});
it('will flash an error when there are no stages', () => {
[[], null].forEach(emptyStages => {
actions.receiveGroupStagesAndEventsSuccess(
{
commit: () => {},
state: { stages: emptyStages },
},
{},
);
shouldFlashAnError();
});
});
});
});
ee/spec/frontend/analytics/cycle_analytics/store/getters_spec.js
View file @ 82ed9302
import * as getters from 'ee/analytics/cycle_analytics/store/getters';
import { allowedStages as stages } from '../mock_data';
import { allowedStages as stages, startDate, endDate } from '../mock_data';
let state = null;
const selectedProjectIds = [5, 8, 11];
describe('Cycle analytics getters', () => {
describe('with default state', () => {
beforeEach(() => {
state = {
stages: [],
selectedStageName: null,
selectedStageId: null,
};
});
......@@ -33,7 +34,7 @@ describe('Cycle analytics getters', () => {
beforeEach(() => {
state = {
stages,
selectedStageName: null,
selectedStageId: null,
};
});
......@@ -58,7 +59,7 @@ describe('Cycle analytics getters', () => {
beforeEach(() => {
state = {
stages,
selectedStageName: stages[2].name,
selectedStageId: stages[2].id,
};
});
......@@ -111,4 +112,27 @@ describe('Cycle analytics getters', () => {
});
});
});
describe('cycleAnalyticsRequestParams', () => {
beforeEach(() => {
const fullPath = 'cool-beans';
state = {
selectedGroup: {
fullPath,
},
startDate,
endDate,
selectedProjectIds,
};
});
it.each`
param | value
${'created_after'} | ${'2018-12-15'}
${'created_before'} | ${'2019-01-14'}
${'project_ids'} | ${[5, 8, 11]}
`('should return the $param with value $value', ({ param, value }) => {
expect(getters.cycleAnalyticsRequestParams(state)).toMatchObject({ [param]: value });
});
});
});
ee/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js
View file @ 82ed9302
......@@ -15,6 +15,7 @@ import {
groupLabels,
startDate,
endDate,
customizableStagesAndEvents,
} from '../mock_data';
let state = null;
......@@ -29,15 +30,21 @@ describe('Cycle analytics mutations', () => {
});
it.each`
mutation | stateKey | value
${types.REQUEST_STAGE_DATA} | ${'isLoadingStage'} | ${true}
${types.RECEIVE_STAGE_DATA_ERROR} | ${'isEmptyStage'} | ${true}
${types.RECEIVE_STAGE_DATA_ERROR} | ${'isLoadingStage'} | ${false}
${types.REQUEST_CYCLE_ANALYTICS_DATA} | ${'isLoading'} | ${true}
${types.HIDE_CUSTOM_STAGE_FORM} | ${'isAddingCustomStage'} | ${false}
${types.SHOW_CUSTOM_STAGE_FORM} | ${'isAddingCustomStage'} | ${true}
${types.REQUEST_GROUP_LABELS} | ${'labels'} | ${[]}
${types.RECEIVE_GROUP_LABELS_ERROR} | ${'labels'} | ${[]}
mutation | stateKey | value
${types.HIDE_CUSTOM_STAGE_FORM} | ${'isAddingCustomStage'} | ${false}
${types.SHOW_CUSTOM_STAGE_FORM} | ${'isAddingCustomStage'} | ${true}
${types.REQUEST_STAGE_DATA} | ${'isLoadingStage'} | ${true}
${types.RECEIVE_STAGE_DATA_ERROR} | ${'isEmptyStage'} | ${true}
${types.RECEIVE_STAGE_DATA_ERROR} | ${'isLoadingStage'} | ${false}
${types.REQUEST_CYCLE_ANALYTICS_DATA} | ${'isLoading'} | ${true}
${types.REQUEST_GROUP_LABELS} | ${'labels'} | ${[]}
${types.RECEIVE_GROUP_LABELS_ERROR} | ${'labels'} | ${[]}
${types.RECEIVE_SUMMARY_DATA_ERROR} | ${'summary'} | ${[]}
${types.REQUEST_SUMMARY_DATA} | ${'summary'} | ${[]}
${types.RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR} | ${'stages'} | ${[]}
${types.REQUEST_GROUP_STAGES_AND_EVENTS} | ${'stages'} | ${[]}
${types.RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR} | ${'customStageFormEvents'} | ${[]}
${types.REQUEST_GROUP_STAGES_AND_EVENTS} | ${'customStageFormEvents'} | ${[]}
`('$mutation will set $stateKey=$value', ({ mutation, stateKey, value }) => {
mutations[mutation](state);
......@@ -46,12 +53,12 @@ describe('Cycle analytics mutations', () => {
it.each`
mutation | payload | expectedState
${types.SET_CYCLE_ANALYTICS_DATA_ENDPOINT} | ${'cool-beans'} | ${{ endpoints: { cycleAnalyticsData: '/groups/cool-beans/-/cycle_analytics' } }}
${types.SET_STAGE_DATA_ENDPOINT} | ${'rad-stage'} | ${{ endpoints: { stageData: '/fake/api/events/rad-stage.json' } }}
${types.SET_CYCLE_ANALYTICS_DATA_ENDPOINT} | ${'cool-beans'} | ${{ endpoints: { cycleAnalyticsStagesAndEvents: '/-/analytics/cycle_analytics/stages?group_id=cool-beans' } }}
${types.SET_STAGE_DATA_ENDPOINT} | ${'rad-stage'} | ${{ endpoints: { stageData: '/groups/rad-stage/-/cycle_analytics/events/rad-stage.json' } }}
${types.SET_SELECTED_GROUP} | ${{ fullPath: 'cool-beans' }} | ${{ selectedGroup: { fullPath: 'cool-beans' }, selectedProjectIds: [] }}
${types.SET_SELECTED_PROJECTS} | ${[606, 707, 808, 909]} | ${{ selectedProjectIds: [606, 707, 808, 909] }}
${types.SET_DATE_RANGE} | ${{ startDate, endDate }} | ${{ startDate, endDate }}
${types.SET_SELECTED_STAGE_NAME} | ${'first-stage'} | ${{ selectedStageName: 'first-stage' }}
${types.SET_SELECTED_STAGE_ID} | ${'first-stage'} | ${{ selectedStageId: 'first-stage' }}
`(
'$mutation with payload $payload will update state with $expectedState',
({ mutation, payload, expectedState }) => {
......@@ -110,11 +117,18 @@ describe('Cycle analytics mutations', () => {
expect(state.errorCode).toBe(null);
expect(state.isLoading).toBe(false);
});
});
describe(`${types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS}`, () => {
describe('with data', () => {
it('will convert the stats object to stages', () => {
mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, cycleAnalyticsData);
beforeEach(() => {
mutations[types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS](
state,
customizableStagesAndEvents,
);
});
it('will convert the stats object to stages', () => {
[issueStage, planStage, codeStage, stagingStage, reviewStage, productionStage].forEach(
stage => {
expect(state.stages).toContainEqual(stage);
......@@ -122,25 +136,48 @@ describe('Cycle analytics mutations', () => {
);
});
it('will set the selectedStageName to the name of the first stage', () => {
mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, cycleAnalyticsData);
expect(state.selectedStageName).toEqual('issue');
it('will set the selectedStageId to the id of the first stage', () => {
expect(state.selectedStageId).toEqual('issue');
});
});
});
it('will set each summary item with a value of 0 to "-"', () => {
// { value: '-', title: 'New Issues' }, { value: '-', title: 'Deploys' }
describe(`${types.RECEIVE_SUMMARY_DATA_SUCCESS}`, () => {
beforeEach(() => {
state = { stages: [{ slug: 'plan' }, { slug: 'issue' }, { slug: 'test' }] };
mutations[types.RECEIVE_SUMMARY_DATA_SUCCESS](state, {
...cycleAnalyticsData,
summary: [{ value: 0, title: 'New Issues' }, { value: 0, title: 'Deploys' }],
stats: [
{
name: 'issue',
value: '1 day ago',
},
{
name: 'plan',
value: '6 months ago',
},
{
name: 'test',
value: null,
},
],
});
});
mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, {
...cycleAnalyticsData,
summary: [{ value: 0, title: 'New Issues' }, { value: 0, title: 'Deploys' }],
});
it('will set each summary item with a value of 0 to "-"', () => {
expect(state.summary).toEqual([
{ value: '-', title: 'New Issues' },
{ value: '-', title: 'Deploys' },
]);
});
expect(state.summary).toEqual([
{ value: '-', title: 'New Issues' },
{ value: '-', title: 'Deploys' },
]);
});
it('will set the median value for each stage', () => {
expect(state.stages).toEqual([
{ slug: 'plan', value: '6 months ago' },
{ slug: 'issue', value: '1 day ago' },
{ slug: 'test', value: null },
]);
});
});
......
ee/spec/frontend/analytics/cycle_analytics/utils_spec.js
View file @ 82ed9302
......@@ -5,6 +5,7 @@ import {
eventToOption,
eventsByIdentifier,
getLabelEventsIdentifiers,
nestQueryStringKeys,
} from 'ee/analytics/cycle_analytics/utils';
import {
customStageEvents as events,
......@@ -103,4 +104,30 @@ describe('Cycle analytics utils', () => {
expect(eventsByIdentifier([], labelEvents)).toEqual([]);
});
});
describe('nestQueryStringKeys', () => {
const targetKey = 'foo';
const obj = { bar: 10, baz: 'awesome', qux: false, boo: ['lol', 'something'] };
it('will return an object with each key nested under the targetKey', () => {
expect(nestQueryStringKeys(obj, targetKey)).toEqual({
'foo[bar]': 10,
'foo[baz]': 'awesome',
'foo[qux]': false,
'foo[boo]': ['lol', 'something'],
});
});
it('returns an empty object if the targetKey is not a valid string', () => {
['', null, {}, []].forEach(badStr => {
expect(nestQueryStringKeys(obj, badStr)).toEqual({});
});
});
it('will return an empty object if given an empty object', () => {
[{}, null, [], ''].forEach(tarObj => {
expect(nestQueryStringKeys(tarObj, targetKey)).toEqual({});
});
});
});
});
locale/gitlab.pot
View file @ 82ed9302
......@@ -16967,6 +16967,12 @@ msgstr ""
msgid "There was an error fetching configuration for charts"
msgstr ""
msgid "There was an error fetching cycle analytics stages."
msgstr ""
msgid "There was an error fetching data for the selected stage"
msgstr ""
msgid "There was an error fetching label data for the selected group"
msgstr ""
......@@ -17009,6 +17015,9 @@ msgstr ""
msgid "There was an error while fetching cycle analytics data."
msgstr ""
msgid "There was an error while fetching cycle analytics summary data."
msgstr ""
msgid "There was an error with the reCAPTCHA. Please solve the reCAPTCHA again."
msgstr ""
......
spec/frontend/lib/utils/text_utility_spec.js
View file @ 82ed9302
......@@ -90,6 +90,19 @@ describe('text_utility', () => {
});
});
describe('convertToSnakeCase', () => {
it.each`
txt | result
${'snakeCase'} | ${'snake_case'}
${'snake Case'} | ${'snake_case'}
${'snake case'} | ${'snake_case'}
${'snake_case'} | ${'snake_case'}
${'snakeCasesnake Case'} | ${'snake_casesnake_case'}
`('converts string $txt to $result string', ({ txt, result }) => {
expect(textUtils.convertToSnakeCase(txt)).toEqual(result);
});
});
describe('convertToSentenceCase', () => {
it('converts Sentence Case to Sentence case', () => {
expect(textUtils.convertToSentenceCase('Hello World')).toBe('Hello world');
......
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