Merge branch '52618-incorrect-stage-being-shown-in-side-bar-of-job-view-api' into 'master'

Add stage name in job.json response

Closes #52618

See merge request gitlab-org/gitlab-ce!22317

6 files changed, 78 insertions, 5 deletions

diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 22bcd402e72..bc21f87af99 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -35,6 +35,7 @@
         default: null,
       },
     },
+<<<<<<< HEAD
     computed: {
       ...mapState(['job', 'isLoading', 'stages', 'jobs']),
       coverage() {
@@ -63,6 +64,37 @@
         if (this.job.metadata == null) {
           return '';
         }
+=======
+  },
+  computed: {
+    ...mapState(['job', 'isLoading', 'stages', 'jobs', 'selectedStage']),
+    coverage() {
+      return `${this.job.coverage}%`;
+    },
+    duration() {
+      return timeIntervalInWords(this.job.duration);
+    },
+    queued() {
+      return timeIntervalInWords(this.job.queued);
+    },
+    runnerId() {
+      return `${this.job.runner.description} (#${this.job.runner.id})`;
+    },
+    retryButtonClass() {
+      let className =
+        'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
+      className +=
+        this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
+      return className;
+    },
+    hasTimeout() {
+      return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null;
+    },
+    timeout() {
+      if (this.job.metadata == null) {
+        return '';
+      }
+>>>>>>> 7e342757e28... Merge branch '52618-incorrect-stage-being-shown-in-side-bar-of-job-view-api' into 'master'
 
         let t = this.job.metadata.timeout_human_readable;
         if (this.job.metadata.timeout_source !== '') {
@@ -276,6 +308,7 @@
           <stages-dropdown
             :stages="stages"
             :pipeline="job.pipeline"
+            :selected-stage="selectedStage"
             @requestSidebarStageDropdown="fetchJobsForStage"
           />
 
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 1c15af55a8b..a29bd6ec780 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -1,8 +1,14 @@
 <script>
+<<<<<<< HEAD
   import _ from 'underscore';
   import CiIcon from '~/vue_shared/components/ci_icon.vue';
   import Icon from '~/vue_shared/components/icon.vue';
   import { __ } from '~/locale';
+=======
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+>>>>>>> 7e342757e28... Merge branch '52618-incorrect-stage-being-shown-in-side-bar-of-job-view-api' into 'master'
 
   export default {
     components: {
@@ -19,6 +25,7 @@
         required: true,
       },
     },
+<<<<<<< HEAD
     data() {
       return {
         selectedStage: this.stages.length > 0 ? this.stages[0].name : __('More'),
@@ -37,6 +44,22 @@
           this.selectedStage = newVal[0].name;
         }
       },
+=======
+    selectedStage: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    hasRef() {
+      return !_.isEmpty(this.pipeline.ref);
+    },
+  },
+  methods: {
+    onStageClick(stage) {
+      this.$emit('requestSidebarStageDropdown', stage);
+>>>>>>> 7e342757e28... Merge branch '52618-incorrect-stage-being-shown-in-side-bar-of-job-view-api' into 'master'
     },
     methods: {
       onStageClick(stage) {
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index c8e1090bcc5..d0040161dc3 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -141,8 +141,10 @@ export const fetchStages = ({ state, dispatch }) => {
   axios
     .get(`${state.job.pipeline.path}.json`)
     .then(({ data }) => {
+      // Set selected stage
       dispatch('receiveStagesSuccess', data.details.stages);
-      dispatch('fetchJobsForStage', data.details.stages[0]);
+      const selectedStage = data.details.stages.find(stage => stage.name === state.selectedStage);
+      dispatch('fetchJobsForStage', selectedStage);
     })
     .catch(() => dispatch('receiveStagesError'));
 };
@@ -156,11 +158,12 @@ export const receiveStagesError = ({ commit }) => {
 /**
  * Jobs list on sidebar - depend on stages dropdown
  */
-export const requestJobsForStage = ({ commit }) => commit(types.REQUEST_JOBS_FOR_STAGE);
+export const requestJobsForStage = ({ commit }, stage) =>
+  commit(types.REQUEST_JOBS_FOR_STAGE, stage);
 
 // On stage click, set selected stage + fetch job
 export const fetchJobsForStage = ({ dispatch }, stage) => {
-  dispatch('requestJobsForStage');
+  dispatch('requestJobsForStage', stage);
 
   axios
     .get(stage.dropdown_path, {
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index c3f2359fa4d..f00e06e1a6c 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -53,6 +53,16 @@ export default {
     state.isLoading = false;
     state.hasError = false;
     state.job = job;
+
+    /**
+     * We only update it on the first request
+     * The dropdown can be changed by the user
+     * after the first request,
+     * and we do not want to hijack that
+     */
+    if (state.selectedStage === 'More' && job.stage) {
+      state.selectedStage = job.stage;
+    }
   },
   [types.RECEIVE_JOB_ERROR](state) {
     state.isLoading = false;
@@ -81,8 +91,9 @@ export default {
     state.stages = [];
   },
 
-  [types.REQUEST_JOBS_FOR_STAGE](state) {
+  [types.REQUEST_JOBS_FOR_STAGE](state, stage) {
     state.isLoadingJobs = true;
+    state.selectedStage = stage.name;
   },
   [types.RECEIVE_JOBS_FOR_STAGE_SUCCESS](state, jobs) {
     state.isLoadingJobs = false;
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index 509cb69a5d3..afbc959bb71 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -1,3 +1,5 @@
+import { __ } from '~/locale';
+
 export default () => ({
   jobEndpoint: null,
   traceEndpoint: null,
@@ -34,7 +36,7 @@ export default () => ({
   // sidebar dropdown
   isLoadingStages: false,
   isLoadingJobs: false,
-  selectedStage: null,
+  selectedStage: __('More'),
   stages: [],
   jobs: [],
 });
diff --git a/app/serializers/build_details_entity.rb b/app/serializers/build_details_entity.rb
index 3d508a9a407..7bdcfcc38f7 100644
--- a/app/serializers/build_details_entity.rb
+++ b/app/serializers/build_details_entity.rb
@@ -4,6 +4,7 @@ class BuildDetailsEntity < JobEntity
   expose :coverage, :erased_at, :duration
   expose :tag_list, as: :tags
   expose :has_trace?, as: :has_trace
+  expose :stage
   expose :user, using: UserEntity
   expose :runner, using: RunnerEntity
   expose :pipeline, using: PipelineEntity