Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

12 files changed, 146 insertions, 122 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 059772e8cb9..fe4158a1bd1 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -80,13 +80,13 @@ export default {
       'isLoading',
       'job',
       'isSidebarOpen',
-      'trace',
-      'isTraceComplete',
-      'traceSize',
-      'isTraceSizeVisible',
+      'jobLog',
+      'isJobLogComplete',
+      'jobLogSize',
+      'isJobLogSizeVisible',
       'isScrollBottomDisabled',
       'isScrollTopDisabled',
-      'isScrolledToBottomBeforeReceivingTrace',
+      'isScrolledToBottomBeforeReceivingJobLog',
       'hasError',
       'selectedStage',
     ]),
@@ -97,7 +97,7 @@ export default {
       'shouldRenderTriggeredLabel',
       'hasEnvironment',
       'shouldRenderSharedRunnerLimitWarning',
-      'hasTrace',
+      'hasJobLog',
       'emptyStateIllustration',
       'isScrollingDown',
       'emptyStateAction',
@@ -155,7 +155,7 @@ export default {
     this.updateSidebar();
   },
   beforeDestroy() {
-    this.stopPollingTrace();
+    this.stopPollingJobLog();
     this.stopPolling();
     window.removeEventListener('resize', this.onResize);
     window.removeEventListener('scroll', this.updateScroll);
@@ -168,7 +168,7 @@ export default {
       'toggleSidebar',
       'scrollBottom',
       'scrollTop',
-      'stopPollingTrace',
+      'stopPollingJobLog',
       'stopPolling',
       'toggleScrollButtons',
       'toggleScrollAnimation',
@@ -270,7 +270,7 @@ export default {
         <div
           v-if="job.archived"
           class="gl-mt-3 gl-py-2 gl-px-3 gl-align-items-center gl-z-index-1 gl-m-auto archived-job"
-          :class="{ 'sticky-top gl-border-bottom-0': hasTrace }"
+          :class="{ 'sticky-top gl-border-bottom-0': hasJobLog }"
           data-testid="archived-job"
         >
           <gl-icon name="lock" class="gl-vertical-align-bottom" />
@@ -278,8 +278,8 @@ export default {
         </div>
         <!-- job log -->
         <div
-          v-if="hasTrace"
-          class="build-trace-container gl-relative"
+          v-if="hasJobLog"
+          class="build-log-container gl-relative"
           :class="{ 'gl-mt-3': !job.archived }"
         >
           <log-top-bar
@@ -289,22 +289,22 @@ export default {
               'has-archived-block': job.archived,
             }"
             :erase-path="job.erase_path"
-            :size="traceSize"
+            :size="jobLogSize"
             :raw-path="job.raw_path"
             :is-scroll-bottom-disabled="isScrollBottomDisabled"
             :is-scroll-top-disabled="isScrollTopDisabled"
-            :is-trace-size-visible="isTraceSizeVisible"
+            :is-job-log-size-visible="isJobLogSizeVisible"
             :is-scrolling-down="isScrollingDown"
             @scrollJobLogTop="scrollTop"
             @scrollJobLogBottom="scrollBottom"
           />
-          <log :trace="trace" :is-complete="isTraceComplete" />
+          <log :job-log="jobLog" :is-complete="isJobLogComplete" />
         </div>
         <!-- EO job log -->
 
         <!-- empty state -->
         <empty-state
-          v-if="!hasTrace"
+          v-if="!hasJobLog"
           :illustration-path="emptyStateIllustration.image"
           :illustration-size-class="emptyStateIllustration.size"
           :title="emptyStateTitle"
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 957e8243f33..6105299e15c 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -44,7 +44,7 @@ export default {
       type: Boolean,
       required: true,
     },
-    isTraceSizeVisible: {
+    isJobLogSizeVisible: {
       type: Boolean,
       required: true,
     },
@@ -73,7 +73,7 @@ export default {
       class="truncated-info gl-display-none gl-sm-display-block gl-float-left"
       data-testid="log-truncated-info"
     >
-      <template v-if="isTraceSizeVisible">
+      <template v-if="isJobLogSizeVisible">
         {{ jobLogSize }}
         <gl-link
           v-if="rawPath"
diff --git a/app/assets/javascripts/jobs/components/log/collapsible_section.vue b/app/assets/javascripts/jobs/components/log/collapsible_section.vue
index c0d5fac0e8d..757b2e458e9 100644
--- a/app/assets/javascripts/jobs/components/log/collapsible_section.vue
+++ b/app/assets/javascripts/jobs/components/log/collapsible_section.vue
@@ -17,7 +17,7 @@ export default {
       type: Object,
       required: true,
     },
-    traceEndpoint: {
+    jobLogEndpoint: {
       type: String,
       required: true,
     },
@@ -42,7 +42,7 @@ export default {
     <log-line-header
       :line="section.line"
       :duration="badgeDuration"
-      :path="traceEndpoint"
+      :path="jobLogEndpoint"
       :is-closed="section.isClosed"
       @toggleLine="handleOnClickCollapsibleLine(section)"
     />
@@ -53,10 +53,10 @@ export default {
             v-if="line.isHeader"
             :key="line.line.offset"
             :section="line"
-            :trace-endpoint="traceEndpoint"
+            :job-log-endpoint="jobLogEndpoint"
             @onClickCollapsibleLine="handleOnClickCollapsibleLine"
           />
-          <log-line v-else :key="line.offset" :line="line" :path="traceEndpoint" />
+          <log-line v-else :key="line.offset" :line="line" :path="jobLogEndpoint" />
         </template>
       </template>
       <template v-else>
@@ -64,7 +64,7 @@ export default {
           v-for="line in section.lines"
           :key="line.offset"
           :line="line"
-          :path="traceEndpoint"
+          :path="jobLogEndpoint"
         />
       </template>
     </template>
diff --git a/app/assets/javascripts/jobs/components/log/log.vue b/app/assets/javascripts/jobs/components/log/log.vue
index 0134e5dafe8..ef95d79b8ab 100644
--- a/app/assets/javascripts/jobs/components/log/log.vue
+++ b/app/assets/javascripts/jobs/components/log/log.vue
@@ -10,10 +10,10 @@ export default {
   },
   computed: {
     ...mapState([
-      'traceEndpoint',
-      'trace',
-      'isTraceComplete',
-      'isScrolledToBottomBeforeReceivingTrace',
+      'jobLogEndpoint',
+      'jobLog',
+      'isJobLogComplete',
+      'isScrolledToBottomBeforeReceivingJobLog',
     ]),
   },
   updated() {
@@ -39,7 +39,7 @@ export default {
      * In order to scroll the page down after `v-html` has finished, we need to use setTimeout
      */
     handleScrollDown() {
-      if (this.isScrolledToBottomBeforeReceivingTrace) {
+      if (this.isScrolledToBottomBeforeReceivingJobLog) {
         setTimeout(() => {
           this.scrollBottom();
         }, 0);
@@ -50,18 +50,18 @@ export default {
 </script>
 <template>
   <code class="job-log d-block" data-qa-selector="job_log_content">
-    <template v-for="(section, index) in trace">
+    <template v-for="(section, index) in jobLog">
       <collapsible-log-section
         v-if="section.isHeader"
         :key="`collapsible-${index}`"
         :section="section"
-        :trace-endpoint="traceEndpoint"
+        :job-log-endpoint="jobLogEndpoint"
         @onClickCollapsibleLine="handleOnClickCollapsibleLine"
       />
-      <log-line v-else :key="section.offset" :line="section" :path="traceEndpoint" />
+      <log-line v-else :key="section.offset" :line="section" :path="jobLogEndpoint" />
     </template>
 
-    <div v-if="!isTraceComplete" class="js-log-animation loader-animation pt-3 pl-3">
+    <div v-if="!isJobLogComplete" class="js-log-animation loader-animation pt-3 pl-3">
       <div class="dot"></div>
       <div class="dot"></div>
       <div class="dot"></div>
diff --git a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
index 6b3a4424a5b..51251c0cacc 100644
--- a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
+++ b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
@@ -18,6 +18,7 @@ import cancelJobMutation from '../graphql/mutations/job_cancel.mutation.graphql'
 import playJobMutation from '../graphql/mutations/job_play.mutation.graphql';
 import retryJobMutation from '../graphql/mutations/job_retry.mutation.graphql';
 import unscheduleJobMutation from '../graphql/mutations/job_unschedule.mutation.graphql';
+import { reportMessageToSentry } from '../../../utils';
 
 export default {
   ACTIONS_DOWNLOAD_ARTIFACTS,
@@ -34,6 +35,7 @@ export default {
   jobPlay: 'jobPlay',
   jobUnschedule: 'jobUnschedule',
   playJobModalId: 'play-job-modal',
+  name: 'JobActionsCell',
   components: {
     GlButton,
     GlButtonGroup,
@@ -99,15 +101,17 @@ export default {
           variables: { id: this.job.id },
         });
         if (errors.length > 0) {
-          this.reportFailure();
+          reportMessageToSentry(this.$options.name, errors.join(', '), {});
+          this.showToastMessage();
         } else {
           eventHub.$emit('jobActionPerformed');
         }
-      } catch {
-        this.reportFailure();
+      } catch (failure) {
+        reportMessageToSentry(this.$options.name, failure, {});
+        this.showToastMessage();
       }
     },
-    reportFailure() {
+    showToastMessage() {
       const toastProps = {
         text: this.$options.GENERIC_ERROR,
         variant: 'danger',
@@ -136,7 +140,13 @@ export default {
 <template>
   <gl-button-group>
     <template v-if="canReadJob">
-      <gl-button v-if="isActive" icon="cancel" :title="$options.CANCEL" @click="cancelJob()" />
+      <gl-button
+        v-if="isActive"
+        data-testid="cancel-button"
+        icon="cancel"
+        :title="$options.CANCEL"
+        @click="cancelJob()"
+      />
       <template v-else-if="isScheduled">
         <gl-button icon="planning" disabled data-testid="countdown">
           <gl-countdown :end-date-string="scheduledAt" />
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index 53e3dbbad0d..927ba7c7e1e 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -18,16 +18,16 @@ import * as types from './mutation_types';
 
 export const init = ({ dispatch }, { endpoint, logState, pagePath }) => {
   dispatch('setJobEndpoint', endpoint);
-  dispatch('setTraceOptions', {
+  dispatch('setJobLogOptions', {
     logState,
     pagePath,
   });
 
-  return Promise.all([dispatch('fetchJob'), dispatch('fetchTrace')]);
+  return Promise.all([dispatch('fetchJob'), dispatch('fetchJobLog')]);
 };
 
 export const setJobEndpoint = ({ commit }, endpoint) => commit(types.SET_JOB_ENDPOINT, endpoint);
-export const setTraceOptions = ({ commit }, options) => commit(types.SET_TRACE_OPTIONS, options);
+export const setJobLogOptions = ({ commit }, options) => commit(types.SET_JOB_LOG_OPTIONS, options);
 
 export const hideSidebar = ({ commit }) => commit(types.HIDE_SIDEBAR);
 export const showSidebar = ({ commit }) => commit(types.SHOW_SIDEBAR);
@@ -107,7 +107,7 @@ export const receiveJobError = ({ commit }) => {
 };
 
 /**
- * Job's Trace
+ * Job Log
  */
 export const scrollTop = ({ dispatch }) => {
   scrollUp();
@@ -156,59 +156,62 @@ export const toggleScrollAnimation = ({ commit }, toggle) =>
  * Responsible to handle automatic scroll
  */
 export const toggleScrollisInBottom = ({ commit }, toggle) => {
-  commit(types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE, toggle);
+  commit(types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_JOB_LOG, toggle);
 };
 
-export const requestTrace = ({ commit }) => commit(types.REQUEST_TRACE);
+export const requestJobLog = ({ commit }) => commit(types.REQUEST_JOB_LOG);
 
-export const fetchTrace = ({ dispatch, state }) =>
+export const fetchJobLog = ({ dispatch, state }) =>
+  // update trace endpoint once BE compeletes trace re-naming in #340626
   axios
-    .get(`${state.traceEndpoint}/trace.json`, {
-      params: { state: state.traceState },
+    .get(`${state.jobLogEndpoint}/trace.json`, {
+      params: { state: state.jobLogState },
     })
     .then(({ data }) => {
       dispatch('toggleScrollisInBottom', isScrolledToBottom());
-      dispatch('receiveTraceSuccess', data);
+      dispatch('receiveJobLogSuccess', data);
 
       if (data.complete) {
-        dispatch('stopPollingTrace');
-      } else if (!state.traceTimeout) {
-        dispatch('startPollingTrace');
+        dispatch('stopPollingJobLog');
+      } else if (!state.jobLogTimeout) {
+        dispatch('startPollingJobLog');
       }
     })
     .catch((e) => {
       if (e.response.status === httpStatusCodes.FORBIDDEN) {
-        dispatch('receiveTraceUnauthorizedError');
+        dispatch('receiveJobLogUnauthorizedError');
       } else {
         reportToSentry('job_actions', e);
-        dispatch('receiveTraceError');
+        dispatch('receiveJobLogError');
       }
     });
 
-export const startPollingTrace = ({ dispatch, commit }) => {
-  const traceTimeout = setTimeout(() => {
-    commit(types.SET_TRACE_TIMEOUT, 0);
-    dispatch('fetchTrace');
+export const startPollingJobLog = ({ dispatch, commit }) => {
+  const jobLogTimeout = setTimeout(() => {
+    commit(types.SET_JOB_LOG_TIMEOUT, 0);
+    dispatch('fetchJobLog');
   }, 4000);
 
-  commit(types.SET_TRACE_TIMEOUT, traceTimeout);
+  commit(types.SET_JOB_LOG_TIMEOUT, jobLogTimeout);
 };
 
-export const stopPollingTrace = ({ state, commit }) => {
-  clearTimeout(state.traceTimeout);
-  commit(types.SET_TRACE_TIMEOUT, 0);
-  commit(types.STOP_POLLING_TRACE);
+export const stopPollingJobLog = ({ state, commit }) => {
+  clearTimeout(state.jobLogTimeout);
+  commit(types.SET_JOB_LOG_TIMEOUT, 0);
+  commit(types.STOP_POLLING_JOB_LOG);
 };
 
-export const receiveTraceSuccess = ({ commit }, log) => commit(types.RECEIVE_TRACE_SUCCESS, log);
-export const receiveTraceError = ({ dispatch }) => {
-  dispatch('stopPollingTrace');
+export const receiveJobLogSuccess = ({ commit }, log) => commit(types.RECEIVE_JOB_LOG_SUCCESS, log);
+
+export const receiveJobLogError = ({ dispatch }) => {
+  dispatch('stopPollingJobLog');
   createFlash({
     message: __('An error occurred while fetching the job log.'),
   });
 };
-export const receiveTraceUnauthorizedError = ({ dispatch }) => {
-  dispatch('stopPollingTrace');
+
+export const receiveJobLogUnauthorizedError = ({ dispatch }) => {
+  dispatch('stopPollingJobLog');
   createFlash({
     message: __('The current user is not authorized to access the job log.'),
   });
@@ -248,6 +251,7 @@ export const fetchJobsForStage = ({ dispatch }, stage = {}) => {
 };
 export const receiveJobsForStageSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_JOBS_FOR_STAGE_SUCCESS, data);
+
 export const receiveJobsForStageError = ({ commit }) => {
   commit(types.RECEIVE_JOBS_FOR_STAGE_ERROR);
   createFlash({
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index 6cb96bee07d..9d255822250 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -21,11 +21,12 @@ export const shouldRenderTriggeredLabel = (state) => isString(state.job.started)
 export const hasEnvironment = (state) => !isEmpty(state.job.deployment_status);
 
 /**
- * Checks if it the job has trace.
+ * Checks if it the job has a log.
  * Used to check if it should render the job log or the empty state
  * @returns {Boolean}
  */
-export const hasTrace = (state) =>
+export const hasJobLog = (state) =>
+  // update has_trace once BE compeletes trace re-naming in #340626
   state.job.has_trace || (!isEmpty(state.job.status) && state.job.status.group === 'running');
 
 export const emptyStateIllustration = (state) => state?.job?.status?.illustration || {};
@@ -43,7 +44,7 @@ export const shouldRenderSharedRunnerLimitWarning = (state) =>
   !isEmpty(state.job.runners.quota) &&
   state.job.runners.quota.used >= state.job.runners.quota.limit;
 
-export const isScrollingDown = (state) => isScrolledToBottom() && !state.isTraceComplete;
+export const isScrollingDown = (state) => isScrolledToBottom() && !state.isJobLogComplete;
 
 export const hasRunnersForProject = (state) =>
   state?.job?.runners?.available && !state?.job?.runners?.online;
diff --git a/app/assets/javascripts/jobs/store/mutation_types.js b/app/assets/javascripts/jobs/store/mutation_types.js
index 6c4f1b5a191..4915a826b84 100644
--- a/app/assets/javascripts/jobs/store/mutation_types.js
+++ b/app/assets/javascripts/jobs/store/mutation_types.js
@@ -1,5 +1,5 @@
 export const SET_JOB_ENDPOINT = 'SET_JOB_ENDPOINT';
-export const SET_TRACE_OPTIONS = 'SET_TRACE_OPTIONS';
+export const SET_JOB_LOG_OPTIONS = 'SET_JOB_LOG_OPTIONS';
 
 export const HIDE_SIDEBAR = 'HIDE_SIDEBAR';
 export const SHOW_SIDEBAR = 'SHOW_SIDEBAR';
@@ -12,17 +12,17 @@ export const ENABLE_SCROLL_BOTTOM = 'ENABLE_SCROLL_BOTTOM';
 export const ENABLE_SCROLL_TOP = 'ENABLE_SCROLL_TOP';
 export const TOGGLE_SCROLL_ANIMATION = 'TOGGLE_SCROLL_ANIMATION';
 
-export const TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE = 'TOGGLE_IS_SCROLL_IN_BOTTOM';
+export const TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_JOB_LOG = 'TOGGLE_IS_SCROLL_IN_BOTTOM';
 
 export const REQUEST_JOB = 'REQUEST_JOB';
 export const RECEIVE_JOB_SUCCESS = 'RECEIVE_JOB_SUCCESS';
 export const RECEIVE_JOB_ERROR = 'RECEIVE_JOB_ERROR';
 
-export const REQUEST_TRACE = 'REQUEST_TRACE';
-export const SET_TRACE_TIMEOUT = 'SET_TRACE_TIMEOUT';
-export const STOP_POLLING_TRACE = 'STOP_POLLING_TRACE';
-export const RECEIVE_TRACE_SUCCESS = 'RECEIVE_TRACE_SUCCESS';
-export const RECEIVE_TRACE_ERROR = 'RECEIVE_TRACE_ERROR';
+export const REQUEST_JOB_LOG = 'REQUEST_JOB_LOG';
+export const SET_JOB_LOG_TIMEOUT = 'SET_JOB_LOG_TIMEOUT';
+export const STOP_POLLING_JOB_LOG = 'STOP_POLLING_JOB_LOG';
+export const RECEIVE_JOB_LOG_SUCCESS = 'RECEIVE_JOB_LOG_SUCCESS';
+export const RECEIVE_JOB_LOG_ERROR = 'RECEIVE_JOB_LOG_ERROR';
 export const TOGGLE_COLLAPSIBLE_LINE = 'TOGGLE_COLLAPSIBLE_LINE';
 
 export const SET_SELECTED_STAGE = 'SET_SELECTED_STAGE';
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index 4045d8a0c16..eda2ee0349a 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -1,16 +1,16 @@
 import Vue from 'vue';
 import { INFINITELY_NESTED_COLLAPSIBLE_SECTIONS_FF } from '../constants';
 import * as types from './mutation_types';
-import { logLinesParser, logLinesParserLegacy, updateIncrementalTrace } from './utils';
+import { logLinesParser, logLinesParserLegacy, updateIncrementalJobLog } from './utils';
 
 export default {
   [types.SET_JOB_ENDPOINT](state, endpoint) {
     state.jobEndpoint = endpoint;
   },
 
-  [types.SET_TRACE_OPTIONS](state, options = {}) {
-    state.traceEndpoint = options.pagePath;
-    state.traceState = options.logState;
+  [types.SET_JOB_LOG_OPTIONS](state, options = {}) {
+    state.jobLogEndpoint = options.pagePath;
+    state.jobLogState = options.logState;
   },
 
   [types.HIDE_SIDEBAR](state) {
@@ -20,11 +20,11 @@ export default {
     state.isSidebarOpen = true;
   },
 
-  [types.RECEIVE_TRACE_SUCCESS](state, log = {}) {
+  [types.RECEIVE_JOB_LOG_SUCCESS](state, log = {}) {
     const infinitelyCollapsibleSectionsFlag =
       gon.features?.[INFINITELY_NESTED_COLLAPSIBLE_SECTIONS_FF];
     if (log.state) {
-      state.traceState = log.state;
+      state.jobLogState = log.state;
     }
 
     if (log.append) {
@@ -32,52 +32,52 @@ export default {
         if (log.lines) {
           const parsedResult = logLinesParser(
             log.lines,
-            state.auxiliaryPartialTraceHelpers,
-            state.trace,
+            state.auxiliaryPartialJobLogHelpers,
+            state.jobLog,
           );
-          state.trace = parsedResult.parsedLines;
-          state.auxiliaryPartialTraceHelpers = parsedResult.auxiliaryPartialTraceHelpers;
+          state.jobLog = parsedResult.parsedLines;
+          state.auxiliaryPartialJobLogHelpers = parsedResult.auxiliaryPartialJobLogHelpers;
         }
       } else {
-        state.trace = log.lines ? updateIncrementalTrace(log.lines, state.trace) : state.trace;
+        state.jobLog = log.lines ? updateIncrementalJobLog(log.lines, state.jobLog) : state.jobLog;
       }
 
-      state.traceSize += log.size;
+      state.jobLogSize += log.size;
     } else {
-      // When the job still does not have a trace
-      // the trace response will not have a defined
+      // When the job still does not have a log
+      // the job log response will not have a defined
       // html or size. We keep the old value otherwise these
       // will be set to `null`
 
       if (infinitelyCollapsibleSectionsFlag) {
         const parsedResult = logLinesParser(log.lines);
-        state.trace = parsedResult.parsedLines;
-        state.auxiliaryPartialTraceHelpers = parsedResult.auxiliaryPartialTraceHelpers;
+        state.jobLog = parsedResult.parsedLines;
+        state.auxiliaryPartialJobLogHelpers = parsedResult.auxiliaryPartialJobLogHelpers;
       } else {
-        state.trace = log.lines ? logLinesParserLegacy(log.lines) : state.trace;
+        state.jobLog = log.lines ? logLinesParserLegacy(log.lines) : state.jobLog;
       }
 
-      state.traceSize = log.size || state.traceSize;
+      state.jobLogSize = log.size || state.jobLogSize;
     }
 
-    if (state.traceSize < log.total) {
-      state.isTraceSizeVisible = true;
+    if (state.jobLogSize < log.total) {
+      state.isJobLogSizeVisible = true;
     } else {
-      state.isTraceSizeVisible = false;
+      state.isJobLogSizeVisible = false;
     }
 
-    state.isTraceComplete = log.complete || state.isTraceComplete;
+    state.isJobLogComplete = log.complete || state.isJobLogComplete;
   },
 
-  [types.SET_TRACE_TIMEOUT](state, id) {
-    state.traceTimeout = id;
+  [types.SET_JOB_LOG_TIMEOUT](state, id) {
+    state.jobLogTimeout = id;
   },
 
   /**
    * Will remove loading animation
    */
-  [types.STOP_POLLING_TRACE](state) {
-    state.isTraceComplete = true;
+  [types.STOP_POLLING_JOB_LOG](state) {
+    state.isJobLogComplete = true;
   },
 
   /**
@@ -137,8 +137,8 @@ export default {
     state.isScrollingDown = toggle;
   },
 
-  [types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE](state, toggle) {
-    state.isScrolledToBottomBeforeReceivingTrace = toggle;
+  [types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_JOB_LOG](state, toggle) {
+    state.isScrolledToBottomBeforeReceivingJobLog = toggle;
   },
 
   [types.REQUEST_JOBS_FOR_STAGE](state, stage = {}) {
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index 718324c8bad..a1ba64aa71e 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -1,6 +1,6 @@
 export default () => ({
   jobEndpoint: null,
-  traceEndpoint: null,
+  jobLogEndpoint: null,
 
   // sidebar
   isSidebarOpen: true,
@@ -14,16 +14,16 @@ export default () => ({
   isScrollTopDisabled: true,
 
   // Used to check if we should keep the automatic scroll
-  isScrolledToBottomBeforeReceivingTrace: true,
+  isScrolledToBottomBeforeReceivingJobLog: true,
 
-  trace: [],
-  isTraceComplete: false,
-  traceSize: 0,
-  isTraceSizeVisible: false,
-  traceTimeout: 0,
+  jobLog: [],
+  isJobLogComplete: false,
+  jobLogSize: 0,
+  isJobLogSizeVisible: false,
+  jobLogTimeout: 0,
 
-  // used as a query parameter to fetch the trace
-  traceState: null,
+  // used as a query parameter to fetch the job log
+  jobLogState: null,
 
   // sidebar dropdown & list of jobs
   isLoadingJobs: false,
@@ -32,5 +32,5 @@ export default () => ({
   jobs: [],
 
   // to parse partial logs
-  auxiliaryPartialTraceHelpers: {},
+  auxiliaryPartialJobLogHelpers: {},
 });
diff --git a/app/assets/javascripts/jobs/store/utils.js b/app/assets/javascripts/jobs/store/utils.js
index b64734e29f6..8bca448ee11 100644
--- a/app/assets/javascripts/jobs/store/utils.js
+++ b/app/assets/javascripts/jobs/store/utils.js
@@ -131,17 +131,17 @@ export const logLinesParserLegacy = (lines = [], accumulator = []) =>
     [...accumulator],
   );
 
-export const logLinesParser = (lines = [], previousTraceState = {}, prevParsedLines = []) => {
-  let currentLineCount = previousTraceState?.prevLineCount ?? 0;
-  let currentHeader = previousTraceState?.currentHeader;
-  let isPreviousLineHeader = previousTraceState?.isPreviousLineHeader ?? false;
+export const logLinesParser = (lines = [], previousJobLogState = {}, prevParsedLines = []) => {
+  let currentLineCount = previousJobLogState?.prevLineCount ?? 0;
+  let currentHeader = previousJobLogState?.currentHeader;
+  let isPreviousLineHeader = previousJobLogState?.isPreviousLineHeader ?? false;
   const parsedLines = prevParsedLines.length > 0 ? prevParsedLines : [];
-  const sectionsQueue = previousTraceState?.sectionsQueue ?? [];
+  const sectionsQueue = previousJobLogState?.sectionsQueue ?? [];
 
   for (let i = 0; i < lines.length; i += 1) {
     const line = lines[i];
     // First run we can use the current index, later runs we have to retrieve the last number of lines
-    currentLineCount = previousTraceState?.prevLineCount ? currentLineCount + 1 : i + 1;
+    currentLineCount = previousJobLogState?.prevLineCount ? currentLineCount + 1 : i + 1;
 
     if (line.section_header && !isPreviousLineHeader) {
       // If there's no previous line header that means we're at the root of the log
@@ -198,7 +198,7 @@ export const logLinesParser = (lines = [], previousTraceState = {}, prevParsedLi
 
   return {
     parsedLines,
-    auxiliaryPartialTraceHelpers: {
+    auxiliaryPartialJobLogHelpers: {
       isPreviousLineHeader,
       currentHeader,
       sectionsQueue,
@@ -241,7 +241,7 @@ export const findOffsetAndRemove = (newLog = [], oldParsed = []) => {
 };
 
 /**
- * When the trace is not complete, backend may send the last received line
+ * When the job log is not complete, backend may send the last received line
  * in the new response.
  *
  * We need to check if that is the case by looking for the offset property
@@ -250,7 +250,7 @@ export const findOffsetAndRemove = (newLog = [], oldParsed = []) => {
  * @param array oldLog
  * @param array newLog
  */
-export const updateIncrementalTrace = (newLog = [], oldParsed = []) => {
+export const updateIncrementalJobLog = (newLog = [], oldParsed = []) => {
   const parsedLog = findOffsetAndRemove(newLog, oldParsed);
 
   return logLinesParserLegacy(newLog, parsedLog);
diff --git a/app/assets/javascripts/jobs/utils.js b/app/assets/javascripts/jobs/utils.js
index bb27658369f..a4e695518f1 100644
--- a/app/assets/javascripts/jobs/utils.js
+++ b/app/assets/javascripts/jobs/utils.js
@@ -19,3 +19,12 @@ export const reportToSentry = (component, failureType) => {
     Sentry.captureException(failureType);
   });
 };
+
+export const reportMessageToSentry = (component, message, context) => {
+  Sentry.withScope((scope) => {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    scope.setContext('Vue data', context);
+    scope.setTag('component', component);
+    Sentry.captureMessage(message);
+  });
+};