Merge branch '334487-fix-vsa-display-too-much-data-error' into 'master'

Fix displaying query timeout errors for VSA

See merge request gitlab-org/gitlab!64774

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -54,7 +54,7 @@ export default {
       'selectedProjects',
       'selectedStage',
       'stages',
-      'currentStageEvents',
+      'selectedStageEvents',
       'errorCode',
       'startDate',
       'endDate',
@@ -239,7 +239,7 @@ export default {
         <stage-table
           v-else
           :is-loading="isLoading || isLoadingStage"
-          :stage-events="currentStageEvents"
+          :stage-events="selectedStageEvents"
           :selected-stage="selectedStage"
           :stage-count="selectedStageCount"
           :empty-state-message="selectedStageError"

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_table.vue

@@ -269,7 +269,7 @@ export default {
       </template>
     </gl-table>
     <gl-pagination
-      v-if="!isLoading"
+      v-if="!isLoading && !isEmptyStage"
       :value="pagination.page"
       :prev-page="prevPage"
       :next-page="nextPage"

ee/app/assets/javascripts/analytics/cycle_analytics/store/mutations.js

@@ -35,9 +35,11 @@ export default {
   [types.REQUEST_STAGE_DATA](state) {
     state.isLoadingStage = true;
     state.selectedStageError = '';
+    state.selectedStageEvents = [];
+    state.pagination = {};
   },
   [types.RECEIVE_STAGE_DATA_SUCCESS](state, events = []) {
-    state.currentStageEvents = events.map((fields) =>
+    state.selectedStageEvents = events.map((fields) =>
       convertObjectPropsToCamelCase(fields, { deep: true }),
     );
     state.isLoadingStage = false;
@@ -46,6 +48,8 @@ export default {
   [types.RECEIVE_STAGE_DATA_ERROR](state, message) {
     state.isLoadingStage = false;
     state.selectedStageError = message;
+    state.selectedStageEvents = [];
+    state.pagination = {};
   },
   [types.REQUEST_STAGE_MEDIANS](state) {
     state.medians = {};

ee/app/assets/javascripts/analytics/cycle_analytics/store/state.js

@@ -17,7 +17,7 @@ export default () => ({
   selectedStage: null,
   selectedValueStream: null,
 
-  currentStageEvents: [],
+  selectedStageEvents: [],
 
   isLoadingValueStreams: false,
   isCreatingValueStream: false,

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -156,6 +156,9 @@ describe('EE Value Stream Analytics component', () => {
     return comp;
   }
 
+  const findPathNavigation = () => wrapper.findComponent(PathNavigation);
+  const findStageTable = () => wrapper.findComponent(StageTable);
+
   const displaysProjectsDropdownFilter = (flag) => {
     expect(wrapper.findComponent(ProjectsDropdownFilter).exists()).toBe(flag);
   };
@@ -169,7 +172,7 @@ describe('EE Value Stream Analytics component', () => {
   };
 
   const displaysStageTable = (flag) => {
-    expect(wrapper.findComponent(StageTable).exists()).toBe(flag);
+    expect(findStageTable().exists()).toBe(flag);
   };
 
   const displaysDurationChart = (flag) => {
@@ -180,8 +183,6 @@ describe('EE Value Stream Analytics component', () => {
     expect(wrapper.findComponent(TypeOfWorkCharts).exists()).toBe(flag);
   };
 
-  const findPathNavigation = () => wrapper.findComponent(PathNavigation);
-
   const displaysPathNavigation = (flag) => {
     expect(findPathNavigation().exists()).toBe(flag);
   };
@@ -368,7 +369,6 @@ describe('EE Value Stream Analytics component', () => {
     beforeEach(async () => {
       mock = new MockAdapter(axios);
       mockRequiredRoutes(mock);
-      wrapper = await createComponent();
     });
 
     afterEach(() => {
@@ -397,7 +397,7 @@ describe('EE Value Stream Analytics component', () => {
         .onGet(mockData.endpoints.stageData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
 
-      await createComponent({ selectedStage: mockData.issueStage });
+      wrapper = await createComponent({ selectedStage: mockData.issueStage });
 
       expect(createFlash).toHaveBeenCalledWith({
         message: 'There was an error fetching data for the selected stage',
@@ -410,7 +410,7 @@ describe('EE Value Stream Analytics component', () => {
       mock
         .onGet(mockData.endpoints.tasksByTypeTopLabelsData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
-      await createComponent();
+      wrapper = await createComponent();
       await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({
@@ -424,7 +424,7 @@ describe('EE Value Stream Analytics component', () => {
       mock
         .onGet(mockData.endpoints.tasksByTypeData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
-      await createComponent();
+      wrapper = await createComponent();
       await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({
@@ -438,13 +438,26 @@ describe('EE Value Stream Analytics component', () => {
       mock
         .onGet(mockData.endpoints.stageMedian)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
-      await createComponent();
+      wrapper = await createComponent();
 
-      await waitForPromises();
       expect(createFlash).toHaveBeenCalledWith({
         message: 'There was an error fetching median data for stages',
       });
     });
+
+    it('will display an error if the fetchStageData request is successful but has an embedded error', async () => {
+      const tooMuchDataError = 'There is too much data to calculate. Please change your selection.';
+      mock
+        .onGet(mockData.endpoints.stageData)
+        .reply(httpStatusCodes.OK, { error: tooMuchDataError });
+
+      wrapper = await createComponent({ selectedStage: mockData.issueStage });
+
+      displaysStageTable(true);
+      expect(findStageTable().props('emptyStateMessage')).toBe(tooMuchDataError);
+      expect(findStageTable().props('stageEvents')).toEqual([]);
+      expect(findStageTable().props('pagination')).toEqual({});
+    });
   });
 
   describe('Path navigation', () => {

ee/spec/frontend/analytics/cycle_analytics/components/stage_table_spec.js

@@ -267,6 +267,10 @@ describe('StageTable', () => {
     it('will display the default no data message', () => {
       expect(wrapper.html()).toContain(notEnoughDataError);
     });
+
+    it('will not display the pagination component', () => {
+      expect(findPagination().exists()).toBe(false);
+    });
   });
 
   describe('emptyStateMessage set', () => {

ee/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js

@@ -39,7 +39,11 @@ describe('Value Stream Analytics mutations', () => {
     ${types.REQUEST_VALUE_STREAMS}               | ${'isLoadingValueStreams'}   | ${true}
     ${types.RECEIVE_VALUE_STREAMS_ERROR}         | ${'isLoadingValueStreams'}   | ${false}
     ${types.REQUEST_STAGE_DATA}                  | ${'isLoadingStage'}          | ${true}
+    ${types.REQUEST_STAGE_DATA}                  | ${'selectedStageEvents'}     | ${[]}
+    ${types.REQUEST_STAGE_DATA}                  | ${'pagination'}              | ${{}}
     ${types.RECEIVE_STAGE_DATA_ERROR}            | ${'isLoadingStage'}          | ${false}
+    ${types.RECEIVE_STAGE_DATA_ERROR}            | ${'selectedStageEvents'}     | ${[]}
+    ${types.RECEIVE_STAGE_DATA_ERROR}            | ${'pagination'}              | ${{}}
     ${types.REQUEST_VALUE_STREAM_DATA}           | ${'isLoading'}               | ${true}
     ${types.RECEIVE_GROUP_STAGES_ERROR}          | ${'stages'}                  | ${[]}
     ${types.REQUEST_GROUP_STAGES}                | ${'stages'}                  | ${[]}