Add latest changes from gitlab-org/gitlab@master

6 files changed, 66 insertions, 9 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/base.vue b/app/assets/javascripts/cycle_analytics/components/base.vue
index 0dc221abb61..3763b228470 100644
--- a/app/assets/javascripts/cycle_analytics/components/base.vue
+++ b/app/assets/javascripts/cycle_analytics/components/base.vue
@@ -44,6 +44,7 @@ export default {
       'summary',
       'daysInPast',
       'permissions',
+      'stageCounts',
     ]),
     ...mapGetters(['pathNavigationData']),
     displayStageEvents() {
@@ -77,6 +78,16 @@ export default {
         ? this.selectedStage?.emptyStageText
         : '';
     },
+    selectedStageCount() {
+      if (this.selectedStage) {
+        const {
+          stageCounts,
+          selectedStage: { id },
+        } = this;
+        return stageCounts[id];
+      }
+      return 0;
+    },
   },
   methods: {
     ...mapActions([
@@ -117,7 +128,6 @@ export default {
       :loading="isLoading || isLoadingStage"
       :stages="pathNavigationData"
       :selected-stage="selectedStage"
-      :with-stage-counts="false"
       @selected="onSelectStage"
     />
     <gl-loading-icon v-if="isLoading" size="lg" />
@@ -162,7 +172,7 @@ export default {
         :is-loading="isLoading || isLoadingStage"
         :stage-events="selectedStageEvents"
         :selected-stage="selectedStage"
-        :stage-count="null"
+        :stage-count="selectedStageCount"
         :empty-state-title="emptyStageTitle"
         :empty-state-message="emptyStageText"
         :no-data-svg-path="noDataSvgPath"
diff --git a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue
index 5ae2e979308..f8f89772fd6 100644
--- a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue
+++ b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue
@@ -36,11 +36,6 @@ export default {
       required: false,
       default: () => ({}),
     },
-    withStageCounts: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
   },
   methods: {
     showPopover({ id }) {
@@ -81,7 +76,7 @@ export default {
             <div class="gl-pb-4 gl-font-weight-bold">{{ pathItem.metric }}</div>
           </div>
         </div>
-        <div v-if="withStageCounts" class="gl-px-4">
+        <div class="gl-px-4">
           <div class="gl-display-flex gl-justify-content-space-between">
             <div class="gl-pr-4 gl-pb-4">
               {{ s__('ValueStreamEvent|Items in stage') }}
diff --git a/app/assets/javascripts/cycle_analytics/store/actions.js b/app/assets/javascripts/cycle_analytics/store/actions.js
index fd606109151..a7a2c8ea9d3 100644
--- a/app/assets/javascripts/cycle_analytics/store/actions.js
+++ b/app/assets/javascripts/cycle_analytics/store/actions.js
@@ -4,6 +4,7 @@ import {
   getProjectValueStreamMetrics,
   getValueStreamStageMedian,
   getValueStreamStageRecords,
+  getValueStreamStageCounts,
 } from '~/api/analytics_api';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
@@ -44,7 +45,7 @@ export const fetchValueStreams = ({ commit, dispatch, state }) => {
   } = state;
   commit(types.REQUEST_VALUE_STREAMS);
 
-  const stageRequests = ['setSelectedStage', 'fetchStageMedians'];
+  const stageRequests = ['setSelectedStage', 'fetchStageMedians', 'fetchStageCountValues'];
   return getProjectValueStreams(fullPath)
     .then(({ data }) => dispatch('receiveValueStreamsSuccess', data))
     .then(() => Promise.all(stageRequests.map((r) => dispatch(r))))
@@ -115,6 +116,37 @@ export const fetchStageMedians = ({
     });
 };
 
+const getStageCounts = ({ stageId, vsaParams, filterParams = {} }) => {
+  return getValueStreamStageCounts({ ...vsaParams, stageId }, filterParams).then(({ data }) => ({
+    id: stageId,
+    ...data,
+  }));
+};
+
+export const fetchStageCountValues = ({
+  state: { stages },
+  getters: { requestParams: vsaParams, filterParams },
+  commit,
+}) => {
+  commit(types.REQUEST_STAGE_COUNTS);
+  return Promise.all(
+    stages.map(({ id: stageId }) =>
+      getStageCounts({
+        vsaParams,
+        stageId,
+        filterParams,
+      }),
+    ),
+  )
+    .then((data) => commit(types.RECEIVE_STAGE_COUNTS_SUCCESS, data))
+    .catch((error) => {
+      commit(types.RECEIVE_STAGE_COUNTS_ERROR, error);
+      createFlash({
+        message: __('There was an error fetching stage total counts'),
+      });
+    });
+};
+
 export const setSelectedStage = ({ dispatch, commit, state: { stages } }, selectedStage = null) => {
   const stage = selectedStage || stages[0];
   commit(types.SET_SELECTED_STAGE, stage);
diff --git a/app/assets/javascripts/cycle_analytics/store/mutation_types.js b/app/assets/javascripts/cycle_analytics/store/mutation_types.js
index 11ed62a4081..0d94aad2ca5 100644
--- a/app/assets/javascripts/cycle_analytics/store/mutation_types.js
+++ b/app/assets/javascripts/cycle_analytics/store/mutation_types.js
@@ -24,3 +24,7 @@ export const RECEIVE_STAGE_DATA_ERROR = 'RECEIVE_STAGE_DATA_ERROR';
 export const REQUEST_STAGE_MEDIANS = 'REQUEST_STAGE_MEDIANS';
 export const RECEIVE_STAGE_MEDIANS_SUCCESS = 'RECEIVE_STAGE_MEDIANS_SUCCESS';
 export const RECEIVE_STAGE_MEDIANS_ERROR = 'RECEIVE_STAGE_MEDIANS_ERROR';
+
+export const REQUEST_STAGE_COUNTS = 'REQUEST_STAGE_COUNTS';
+export const RECEIVE_STAGE_COUNTS_SUCCESS = 'RECEIVE_STAGE_COUNTS_SUCCESS';
+export const RECEIVE_STAGE_COUNTS_ERROR = 'RECEIVE_STAGE_COUNTS_ERROR';
diff --git a/app/assets/javascripts/cycle_analytics/store/mutations.js b/app/assets/javascripts/cycle_analytics/store/mutations.js
index 65035c0ebb8..2d49af947fa 100644
--- a/app/assets/javascripts/cycle_analytics/store/mutations.js
+++ b/app/assets/javascripts/cycle_analytics/store/mutations.js
@@ -87,4 +87,19 @@ export default {
   [types.RECEIVE_STAGE_MEDIANS_ERROR](state) {
     state.medians = {};
   },
+  [types.REQUEST_STAGE_COUNTS](state) {
+    state.stageCounts = {};
+  },
+  [types.RECEIVE_STAGE_COUNTS_SUCCESS](state, stageCounts = []) {
+    state.stageCounts = stageCounts.reduce(
+      (acc, { id, count }) => ({
+        ...acc,
+        [id]: count,
+      }),
+      {},
+    );
+  },
+  [types.RECEIVE_STAGE_COUNTS_ERROR](state) {
+    state.stageCounts = {};
+  },
 };
diff --git a/app/assets/javascripts/cycle_analytics/store/state.js b/app/assets/javascripts/cycle_analytics/store/state.js
index 562b5d0a743..b1b26039d41 100644
--- a/app/assets/javascripts/cycle_analytics/store/state.js
+++ b/app/assets/javascripts/cycle_analytics/store/state.js
@@ -16,6 +16,7 @@ export default () => ({
   selectedStageEvents: [],
   selectedStageError: '',
   medians: {},
+  stageCounts: {},
   hasError: false,
   isLoading: false,
   isLoadingStage: false,