GITALY_SERVER_VERSION

-f8946a7c774dc0a2cffec5ec3456024fca6d808c
+a47a975ef7d4ef51e0d68c5662d5cb3bb5b83b76

app/assets/javascripts/ide/stores/modules/pipelines/actions.js

@@ -139,6 +139,7 @@ export const receiveJobLogsSuccess = ({ commit }, data) =>
 export const fetchJobLogs = ({ dispatch, state }) => {
   dispatch('requestJobLogs');
 
+  // update trace endpoint once BE compeletes trace re-naming in #340626
   return axios
     .get(`${state.detailJob.path}/trace`, { params: { format: 'json' } })
     .then(({ data }) => dispatch('receiveJobLogsSuccess', data))

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,7 +278,7 @@ export default {
         </div>
         <!-- job log -->
         <div
-          v-if="hasTrace"
+          v-if="hasJobLog"
           class="build-trace-container gl-relative"
           :class="{ 'gl-mt-3': !job.archived }"
         >
@@ -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"

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"

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>

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>

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({

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;

app/assets/javascripts/jobs/store/mutation_types.js

 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';

app/assets/javascripts/jobs/store/mutations.js

 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 = {}) {

app/assets/javascripts/jobs/store/state.js

 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: {},
 });

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);

app/assets/javascripts/lib/utils/common_utils.js

@@ -6,6 +6,7 @@ import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/util
 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import { isFunction, defer } from 'lodash';
+import { SCOPED_LABEL_DELIMITER } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import { convertToCamelCase, convertToSnakeCase } from './text_utility';
 import { isObject } from './type_utility';
 import { getLocationHash } from './url_utility';
@@ -685,7 +686,7 @@ export const searchBy = (query = '', searchSpace = {}) => {
  * @param {Object} label
  * @returns Boolean
  */
-export const isScopedLabel = ({ title = '' } = {}) => title.indexOf('::') !== -1;
+export const isScopedLabel = ({ title = '' } = {}) => title.includes(SCOPED_LABEL_DELIMITER);
 
 /**
  * Returns the base value of the scoped label
@@ -696,7 +697,8 @@ export const isScopedLabel = ({ title = '' } = {}) => title.indexOf('::') !== -1
  * @param {Object} label
  * @returns String
  */
-export const scopedLabelKey = ({ title = '' }) => isScopedLabel({ title }) && title.split('::')[0];
+export const scopedLabelKey = ({ title = '' }) =>
+  isScopedLabel({ title }) && title.split(SCOPED_LABEL_DELIMITER)[0];
 
 // Methods to set and get Cookie
 export const setCookie = (name, value) => Cookies.set(name, value, { expires: 365 });

app/assets/javascripts/lib/utils/datetime_range.js

@@ -26,7 +26,17 @@ const isValidDateString = (dateString) => {
     return false;
   }
 
-  return !Number.isNaN(Date.parse(dateformat(dateString, 'isoUtcDateTime')));
+  let isoFormatted;
+  try {
+    isoFormatted = dateformat(dateString, 'isoUtcDateTime');
+  } catch (e) {
+    if (e instanceof TypeError) {
+      // not a valid date string
+      return false;
+    }
+    throw e;
+  }
+  return !Number.isNaN(Date.parse(isoFormatted));
 };
 
 const handleRangeDirection = ({ direction = DEFAULT_DIRECTION, anchorDate, minDate, maxDate }) => {

app/assets/javascripts/logs/stores/state.js

@@ -31,7 +31,7 @@ export default () => ({
   },
 
   /**
-   * Logs including trace
+   * Jobs with logs
    */
   logs: {
     lines: [],

app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list_app.vue → app/assets/javascripts/packages_and_registries/package_registry/components/list/app.vue

 <script>
-import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
+/*
+ * The following component has several commented lines, this is because we are refactoring them piece by piece on several mrs
+ * For a complete overview of the plan please check: https://gitlab.com/gitlab-org/gitlab/-/issues/330846
+ * This work is behind feature flag: https://gitlab.com/gitlab-org/gitlab/-/issues/341136
+ */
+// import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
@@ -8,84 +12,54 @@ import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
-import PackageList from './packages_list.vue';
+import PackageTitle from './package_title.vue';
+// import PackageSearch from './package_search.vue';
+// import PackageList from './packages_list.vue';
 
 export default {
   components: {
-    GlEmptyState,
-    GlLink,
-    GlSprintf,
-    PackageList,
-    PackageTitle: () =>
-      import(/* webpackChunkName: 'package_registry_components' */ './package_title.vue'),
-    PackageSearch: () =>
-      import(/* webpackChunkName: 'package_registry_components' */ './package_search.vue'),
-    InfrastructureTitle: () =>
-      import(
-        /* webpackChunkName: 'infrastructure_registry_components' */ '~/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue'
-      ),
-    InfrastructureSearch: () =>
-      import(
-        /* webpackChunkName: 'infrastructure_registry_components' */ '~/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue'
-      ),
+    // GlEmptyState,
+    // GlLink,
+    // GlSprintf,
+    // PackageList,
+    PackageTitle,
+    // PackageSearch,
   },
-  inject: {
-    titleComponent: {
-      from: 'titleComponent',
-      default: 'PackageTitle',
-    },
-    searchComponent: {
-      from: 'searchComponent',
-      default: 'PackageSearch',
-    },
-    emptyPageTitle: {
-      from: 'emptyPageTitle',
-      default: s__('PackageRegistry|There are no packages yet'),
-    },
-    noResultsText: {
-      from: 'noResultsText',
-      default: s__(
-        'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
-      ),
-    },
+  inject: ['packageHelpUrl', 'emptyListIllustration', 'emptyListHelpUrl'],
+  data() {
+    return {
+      filter: [],
+      sorting: {
+        sort: 'desc',
+        orderBy: 'created_at',
+      },
+      selectedType: '',
+      pagination: {},
+    };
   },
   computed: {
-    ...mapState({
-      emptyListIllustration: (state) => state.config.emptyListIllustration,
-      emptyListHelpUrl: (state) => state.config.emptyListHelpUrl,
-      filter: (state) => state.filter,
-      selectedType: (state) => state.selectedType,
-      packageHelpUrl: (state) => state.config.packageHelpUrl,
-      packagesCount: (state) => state.pagination?.total,
-    }),
+    packagesCount() {
+      return 0;
+    },
     emptySearch() {
       return (
         this.filter.filter((f) => f.type !== FILTERED_SEARCH_TERM || f.value?.data).length === 0
       );
     },
-
     emptyStateTitle() {
       return this.emptySearch
-        ? this.emptyPageTitle
-        : s__('PackageRegistry|Sorry, your filter produced no results');
+        ? this.$options.i18n.emptyPageTitle
+        : this.$options.i18n.noResultsTitle;
     },
   },
   mounted() {
     const queryParams = getQueryParams(window.document.location.search);
     const { sorting, filters } = extractFilterAndSorting(queryParams);
-    this.setSorting(sorting);
-    this.setFilter(filters);
-    this.requestPackagesList();
+    this.sorting = { ...sorting };
+    this.filter = [...filters];
     this.checkDeleteAlert();
   },
   methods: {
-    ...mapActions([
-      'requestPackagesList',
-      'requestDeletePackage',
-      'setSelectedType',
-      'setSorting',
-      'setFilter',
-    ]),
     onPageChanged(page) {
       return this.requestPackagesList({ page });
     },
@@ -105,21 +79,26 @@ export default {
   },
   i18n: {
     widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'),
+    emptyPageTitle: s__('PackageRegistry|There are no packages yet'),
+    noResultsTitle: s__('PackageRegistry|Sorry, your filter produced no results'),
+    noResultsText: s__(
+      'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
+    ),
   },
 };
 </script>
 
 <template>
   <div>
-    <component :is="titleComponent" :help-url="packageHelpUrl" :count="packagesCount" />
-    <component :is="searchComponent" @update="requestPackagesList" />
+    <package-title :help-url="packageHelpUrl" :count="packagesCount" />
+    <!-- <package-search @update="requestPackagesList" />
 
     <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
       <template #empty-state>
         <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration">
           <template #description>
             <gl-sprintf v-if="!emptySearch" :message="$options.i18n.widenFilters" />
-            <gl-sprintf v-else :message="noResultsText">
+            <gl-sprintf v-else :message="$options.i18n.noResultsText">
               <template #noPackagesLink="{ content }">
                 <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
               </template>
@@ -127,6 +106,6 @@ export default {
           </template>
         </gl-empty-state>
       </template>
-    </package-list>
+    </package-list> -->
   </div>
 </template>

app/assets/javascripts/packages_and_registries/package_registry/pages/list.js

 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
-import PackagesListApp from '../components/list/packages_list_app.vue';
+import PackagesListApp from '../components/list/app.vue';
 
 Vue.use(Translate);
 
@@ -9,6 +9,9 @@ export default () => {
 
   return new Vue({
     el,
+    provide: {
+      ...el.dataset,
+    },
     render(createElement) {
       return createElement(PackagesListApp);
     },

app/assets/javascripts/pages/groups/packages/index/index.js

-import initPackageList from '~/packages/list/packages_list_app_bundle';
+(async function packageApp() {
+  if (window.gon.features.packageListApollo) {
+    const newPackageList = await import('~/packages_and_registries/package_registry/pages/list');
 
-if (document.getElementById('js-vue-packages-list')) {
-  initPackageList();
-}
+    newPackageList.default();
+  } else {
+    const packageList = await import('~/packages/list/packages_list_app_bundle');
+    packageList.default();
+  }
+})();

app/assets/javascripts/pages/projects/packages/packages/index/index.js

-import initPackageList from '~/packages/list/packages_list_app_bundle';
+(async function packageApp() {
+  if (window.gon.features.packageListApollo) {
+    const newPackageList = await import('~/packages_and_registries/package_registry/pages/list');
 
-initPackageList();
+    newPackageList.default();
+  } else {
+    const packageList = await import('~/packages/list/packages_list_app_bundle');
+    packageList.default();
+  }
+})();

app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue

@@ -33,17 +33,20 @@ export default {
     issueName() {
       return `${this.severityLabel} - ${this.issue.name}`;
     },
+    issueSeverity() {
+      return this.issue.severity.toLowerCase();
+    },
     isStatusSuccess() {
       return this.status === STATUS_SUCCESS;
     },
     severityClass() {
-      return SEVERITY_CLASSES[this.issue.severity] || SEVERITY_CLASSES.unknown;
+      return SEVERITY_CLASSES[this.issueSeverity] || SEVERITY_CLASSES.unknown;
     },
     severityIcon() {
-      return SEVERITY_ICONS[this.issue.severity] || SEVERITY_ICONS.unknown;
+      return SEVERITY_ICONS[this.issueSeverity] || SEVERITY_ICONS.unknown;
     },
     severityLabel() {
-      return this.$options.severityText[this.issue.severity] || this.$options.severityText.unknown;
+      return this.$options.severityText[this.issueSeverity] || this.$options.severityText.unknown;
     },
   },
   severityText: {