Skip to content

G
gitlab-ce
Commit 5f046532 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo Committed by Martin Wortschack
Browse files
Options

[VSA][FE] Replace project level VSA store and service with vuex

parent 339e55b4
Show whitespace changes
Inline Side-by-side
Showing with 56 additions and 242 deletions
app/assets/javascripts/cycle_analytics/components/base.vue
View file @ 5f046532
<script> <script>
import { GlIcon, GlEmptyState, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; import { GlIcon, GlEmptyState, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { deprecatedCreateFlash as Flash } from '~/flash'; import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale'; import { __ } from '~/locale';
import banner from './banner.vue'; import banner from './banner.vue';
import stageCodeComponent from './stage_code_component.vue'; import stageCodeComponent from './stage_code_component.vue';
...@@ -39,94 +39,59 @@ export default { ...@@ -39,94 +39,59 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
store: {
type: Object,
required: true,
},
service: {
type: Object,
required: true,
},
}, },
data() { data() {
return { return {
state: this.store.state,
isLoading: false,
isLoadingStage: false,
isEmptyStage: false,
hasError: true,
startDate: 30,
isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE), isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
}; };
}, },
computed: { computed: {
currentStage() { ...mapState([
return this.store.currentActiveStage(); 'isLoading',
'isLoadingStage',
'isEmptyStage',
'selectedStage',
'selectedStageEvents',
'stages',
'summary',
'startDate',
]),
displayStageEvents() {
const { selectedStageEvents, isLoadingStage, isEmptyStage } = this;
return selectedStageEvents.length && !isLoadingStage && !isEmptyStage;
},
displayNotEnoughData() {
const { selectedStage, isEmptyStage, isLoadingStage } = this;
return selectedStage && isEmptyStage && !isLoadingStage;
},
displayNoAccess() {
const { selectedStage } = this;
return selectedStage && !selectedStage.isUserAllowed;
}, },
}, },
created() {
this.fetchCycleAnalyticsData();
},
methods: { methods: {
handleError() { ...mapActions([
this.store.setErrorState(true); 'fetchCycleAnalyticsData',
return new Flash(__('There was an error while fetching value stream analytics data.')); 'fetchStageData',
}, 'setSelectedStage',
'setDateRange',
]),
handleDateSelect(startDate) { handleDateSelect(startDate) {
this.startDate = startDate; this.setDateRange({ startDate });
this.fetchCycleAnalyticsData({ startDate: this.startDate }); this.fetchCycleAnalyticsData();
},
fetchCycleAnalyticsData(options) {
const fetchOptions = options || { startDate: this.startDate };
this.isLoading = true;
this.service
.fetchCycleAnalyticsData(fetchOptions)
.then((response) => {
this.store.setCycleAnalyticsData(response);
this.selectDefaultStage();
})
.catch(() => {
this.handleError();
})
.finally(() => {
this.isLoading = false;
});
}, },
selectDefaultStage() { isActiveStage(stage) {
const stage = this.state.stages[0]; return stage.slug === this.selectedStage.slug;
this.selectStage(stage);
}, },
selectStage(stage) { selectStage(stage) {
if (this.isLoadingStage) return; if (this.selectedStage === stage) return;
if (this.currentStage === stage) return;
this.setSelectedStage(stage);
if (!stage.isUserAllowed) { if (!stage.isUserAllowed) {
this.store.setActiveStage(stage);
return; return;
} }
this.isLoadingStage = true; this.fetchStageData();
this.store.setStageEvents([], stage);
this.store.setActiveStage(stage);
this.service
.fetchStageData({
stage,
startDate: this.startDate,
projectIds: this.selectedProjectIds,
})
.then((response) => {
this.isEmptyStage = !response.events.length;
this.store.setStageEvents(response.events, stage);
})
.catch(() => {
this.isEmptyStage = true;
})
.finally(() => {
this.isLoadingStage = false;
});
}, },
dismissOverviewDialog() { dismissOverviewDialog() {
this.isOverviewDialogDismissed = true; this.isOverviewDialogDismissed = true;
...@@ -146,7 +111,7 @@ export default { ...@@ -146,7 +111,7 @@ export default {
<div class="card"> <div class="card">
<div class="card-header">{{ __('Recent Project Activity') }}</div> <div class="card-header">{{ __('Recent Project Activity') }}</div>
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<div v-for="item in state.summary" :key="item.title" class="flex-grow text-center"> <div v-for="item in summary" :key="item.title" class="gl-flex-grow-1 gl-text-center">
<h3 class="header">{{ item.value }}</h3> <h3 class="header">{{ item.value }}</h3>
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</div> </div>
...@@ -207,11 +172,9 @@ export default { ...@@ -207,11 +172,9 @@ export default {
</span> </span>
</li> </li>
<li class="event-header pl-3"> <li class="event-header pl-3">
<span <span v-if="selectedStage" class="stage-name font-weight-bold">{{
v-if="currentStage && currentStage.legend" selectedStage.legend ? __(selectedStage.legend) : __('Related Issues')
class="stage-name font-weight-bold" }}</span>
>{{ currentStage ? __(currentStage.legend) : __('Related Issues') }}</span
>
<span <span
class="has-tooltip" class="has-tooltip"
data-placement="top" data-placement="top"
...@@ -242,19 +205,19 @@ export default { ...@@ -242,19 +205,19 @@ export default {
<nav class="stage-nav"> <nav class="stage-nav">
<ul> <ul>
<stage-nav-item <stage-nav-item
v-for="stage in state.stages" v-for="stage in stages"
:key="stage.title" :key="stage.title"
:title="stage.title" :title="stage.title"
:is-user-allowed="stage.isUserAllowed" :is-user-allowed="stage.isUserAllowed"
:value="stage.value" :value="stage.value"
:is-active="stage.active" :is-active="isActiveStage(stage)"
@select="selectStage(stage)" @select="selectStage(stage)"
/> />
</ul> </ul>
</nav> </nav>
<section class="stage-events overflow-auto"> <section class="stage-events overflow-auto">
<gl-loading-icon v-show="isLoadingStage" size="lg" /> <gl-loading-icon v-show="isLoadingStage" size="lg" />
<template v-if="currentStage && !currentStage.isUserAllowed"> <template v-if="displayNoAccess">
<gl-empty-state <gl-empty-state
class="js-empty-state" class="js-empty-state"
:title="__('You need permission.')" :title="__('You need permission.')"
...@@ -263,19 +226,19 @@ export default { ...@@ -263,19 +226,19 @@ export default {
/> />
</template> </template>
<template v-else> <template v-else>
<template v-if="currentStage && isEmptyStage && !isLoadingStage"> <template v-if="displayNotEnoughData">
<gl-empty-state <gl-empty-state
class="js-empty-state" class="js-empty-state"
:description="currentStage.emptyStageText" :description="selectedStage.emptyStageText"
:svg-path="noDataSvgPath" :svg-path="noDataSvgPath"
:title="__('We don\'t have enough data to show this stage.')" :title="__('We don\'t have enough data to show this stage.')"
/> />
</template> </template>
<template v-if="state.events.length && !isLoadingStage && !isEmptyStage"> <template v-if="displayStageEvents">
<component <component
:is="currentStage.component" :is="selectedStage.component"
:stage="currentStage" :stage="selectedStage"
:items="state.events" :items="selectedStageEvents"
/> />
</template> </template>
</template> </template>
......
app/assets/javascripts/cycle_analytics/cycle_analytics_service.js deleted 100644 → 0
View file @ 339e55b4
import axios from '~/lib/utils/axios_utils';
export default class CycleAnalyticsService {
constructor(options) {
this.axios = axios.create({
baseURL: options.requestPath,
});
}
fetchCycleAnalyticsData(options = { startDate: 30 }) {
const { startDate, projectIds } = options;
return this.axios
.get('', {
params: {
'cycle_analytics[start_date]': startDate,
'cycle_analytics[project_ids]': projectIds,
},
})
.then((x) => x.data);
}
fetchStageData(options) {
const { stage, startDate, projectIds } = options;
return this.axios
.get(`events/${stage.name}.json`, {
params: {
'cycle_analytics[start_date]': startDate,
'cycle_analytics[project_ids]': projectIds,
},
})
.then((x) => x.data);
}
}
app/assets/javascripts/cycle_analytics/cycle_analytics_store.js deleted 100644 → 0
View file @ 339e55b4
/* eslint-disable no-param-reassign */
import { dasherize } from '../lib/utils/text_utility';
import { __ } from '../locale';
import DEFAULT_EVENT_OBJECTS from './default_event_objects';
const EMPTY_STAGE_TEXTS = {
issue: __(
'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.',
),
plan: __(
'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
),
code: __(
'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
),
test: __(
'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
),
review: __(
'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
),
staging: __(
'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
),
};
export default {
state: {
summary: '',
stats: '',
analytics: '',
events: [],
stages: [],
},
setCycleAnalyticsData(data) {
this.state = Object.assign(this.state, this.decorateData(data));
},
decorateData(data) {
const newData = {};
newData.stages = data.stats || [];
newData.summary = data.summary || [];
newData.summary.forEach((item) => {
item.value = item.value || '-';
});
newData.stages.forEach((item) => {
const stageSlug = dasherize(item.name.toLowerCase());
item.active = false;
item.isUserAllowed = data.permissions[stageSlug];
item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
item.component = `stage-${stageSlug}-component`;
item.slug = stageSlug;
});
newData.analytics = data;
return newData;
},
setLoadingState(state) {
this.state.isLoading = state;
},
setErrorState(state) {
this.state.hasError = state;
},
deactivateAllStages() {
this.state.stages.forEach((stage) => {
stage.active = false;
});
},
setActiveStage(stage) {
this.deactivateAllStages();
stage.active = true;
},
setStageEvents(events, stage) {
this.state.events = this.decorateEvents(events, stage);
},
decorateEvents(events, stage) {
const newEvents = [];
events.forEach((item) => {
if (!item) return;
const eventItem = { ...DEFAULT_EVENT_OBJECTS[stage.slug], ...item };
eventItem.totalTime = eventItem.total_time;
if (eventItem.author) {
eventItem.author.webUrl = eventItem.author.web_url;
eventItem.author.avatarUrl = eventItem.author.avatar_url;
}
if (eventItem.created_at) eventItem.createdAt = eventItem.created_at;
if (eventItem.short_sha) eventItem.shortSha = eventItem.short_sha;
if (eventItem.commit_url) eventItem.commitUrl = eventItem.commit_url;
delete eventItem.author.web_url;
delete eventItem.author.avatar_url;
delete eventItem.total_time;
delete eventItem.created_at;
delete eventItem.short_sha;
delete eventItem.commit_url;
newEvents.push(eventItem);
});
return newEvents;
},
currentActiveStage() {
return this.state.stages.find((stage) => stage.active);
},
};
app/assets/javascripts/cycle_analytics/index.js
View file @ 5f046532
import Vue from 'vue'; import Vue from 'vue';
import Translate from '../vue_shared/translate'; import Translate from '../vue_shared/translate';
import CycleAnalytics from './components/base.vue'; import CycleAnalytics from './components/base.vue';
import CycleAnalyticsService from './cycle_analytics_service'; import createStore from './store';
import CycleAnalyticsStore from './cycle_analytics_store';
Vue.use(Translate); Vue.use(Translate);
const createCycleAnalyticsService = (requestPath) =>
new CycleAnalyticsService({
requestPath,
});
export default () => { export default () => {
const store = createStore();
const el = document.querySelector('#js-cycle-analytics'); const el = document.querySelector('#js-cycle-analytics');
const { noAccessSvgPath, noDataSvgPath } = el.dataset; const { noAccessSvgPath, noDataSvgPath, requestPath } = el.dataset;
store.dispatch('initializeVsa', {
requestPath,
});
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el, el,
name: 'CycleAnalytics', name: 'CycleAnalytics',
store,
render: (createElement) => render: (createElement) =>
createElement(CycleAnalytics, { createElement(CycleAnalytics, {
props: { props: {
noDataSvgPath, noDataSvgPath,
noAccessSvgPath, noAccessSvgPath,
store: CycleAnalyticsStore,
service: createCycleAnalyticsService(el.dataset.requestPath),
}, },
}), }),
}); });
......
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