diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 15:26:25 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 15:26:25 +0300 |
commit | a09983ae35713f5a2bbb100981116d31ce99826e (patch) | |
tree | 2ee2af7bd104d57086db360a7e6d8c9d5d43667a /app/assets/javascripts/jobs | |
parent | 18c5ab32b738c0b6ecb4d0df3994000482f34bd8 (diff) |
Add latest changes from gitlab-org/gitlab@13-2-stable-ee
Diffstat (limited to 'app/assets/javascripts/jobs')
17 files changed, 70 insertions, 152 deletions
diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue index 72a5ff01672..c4f180f200c 100644 --- a/app/assets/javascripts/jobs/components/commit_block.vue +++ b/app/assets/javascripts/jobs/components/commit_block.vue @@ -32,7 +32,7 @@ export default { block: !isLastBlock, }" > - <p class="append-bottom-5"> + <p class="gl-mb-2"> <span class="font-weight-bold">{{ __('Commit') }}</span> <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit"> diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue index c34a3488dbd..c78738221f1 100644 --- a/app/assets/javascripts/jobs/components/environments_block.vue +++ b/app/assets/javascripts/jobs/components/environments_block.vue @@ -274,7 +274,7 @@ export default { }; </script> <template> - <div class="prepend-top-default append-bottom-default js-environment-container"> + <div class="gl-mt-3 gl-mb-3 js-environment-container"> <div class="environment-information"> <ci-icon :status="iconStatus" /> <p class="inline gl-mb-0" v-html="environment"></p> diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue index fc5e022f44a..a6d1b41c275 100644 --- a/app/assets/javascripts/jobs/components/erased_block.vue +++ b/app/assets/javascripts/jobs/components/erased_block.vue @@ -27,7 +27,7 @@ export default { }; </script> <template> - <div class="prepend-top-default js-build-erased"> + <div class="gl-mt-3 js-build-erased"> <div class="erased alert alert-warning"> <template v-if="isErasedByUser"> {{ s__('Job|Job has been erased by') }} diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue index 0783d1157be..f43a058b5f8 100644 --- a/app/assets/javascripts/jobs/components/job_app.vue +++ b/app/assets/javascripts/jobs/components/job_app.vue @@ -17,7 +17,7 @@ import UnmetPrerequisitesBlock from './unmet_prerequisites_block.vue'; import Sidebar from './sidebar.vue'; import { sprintf } from '~/locale'; import delayedJobMixin from '../mixins/delayed_job_mixin'; -import { isNewJobLogActive } from '../store/utils'; +import Log from './log/log.vue'; export default { name: 'JobPageApp', @@ -28,7 +28,7 @@ export default { EnvironmentsBlock, ErasedBlock, Icon, - Log: () => (isNewJobLogActive() ? import('./log/log.vue') : import('./job_log.vue')), + Log, LogTopBar, StuckBlock, UnmetPrerequisitesBlock, @@ -270,7 +270,7 @@ export default { <div v-if="job.archived" ref="sticky" - class="js-archived-job prepend-top-default archived-job" + class="js-archived-job gl-mt-3 archived-job" :class="{ 'sticky-top border-bottom-0': hasTrace }" > <icon name="lock" class="align-text-bottom" /> @@ -280,7 +280,7 @@ export default { <div v-if="hasTrace" class="build-trace-container position-relative" - :class="{ 'prepend-top-default': !job.archived }" + :class="{ 'gl-mt-3': !job.archived }" > <log-top-bar :class="{ diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue deleted file mode 100644 index 20888c0af42..00000000000 --- a/app/assets/javascripts/jobs/components/job_log.vue +++ /dev/null @@ -1,59 +0,0 @@ -<script> -import { mapState, mapActions } from 'vuex'; - -export default { - name: 'JobLog', - props: { - trace: { - type: String, - required: true, - }, - isComplete: { - type: Boolean, - required: true, - }, - }, - computed: { - ...mapState(['isScrolledToBottomBeforeReceivingTrace']), - }, - updated() { - this.$nextTick(() => { - this.handleScrollDown(); - }); - }, - mounted() { - this.$nextTick(() => { - this.handleScrollDown(); - }); - }, - methods: { - ...mapActions(['scrollBottom']), - /** - * The job log is sent in HTML, which means we need to use `v-html` to render it - * Using the updated hook with $nextTick is not enough to wait for the DOM to be updated - * in this case because it runs before `v-html` has finished running, since there's no - * Vue binding. - * In order to scroll the page down after `v-html` has finished, we need to use setTimeout - */ - handleScrollDown() { - if (this.isScrolledToBottomBeforeReceivingTrace) { - setTimeout(() => { - this.scrollBottom(); - }, 0); - } - }, - }, -}; -</script> -<template> - <pre class="js-build-trace build-trace qa-build-trace"> - <code class="bash" v-html="trace"> - </code> - - <div v-if="!isComplete" class="js-log-animation build-loader-animation"> - <div class="dot"></div> - <div class="dot"></div> - <div class="dot"></div> - </div> - </pre> -</template> diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue index bcec83a7aee..a68174d8e1d 100644 --- a/app/assets/javascripts/jobs/components/job_log_controllers.vue +++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue @@ -77,7 +77,7 @@ export default { <gl-link v-if="rawPath" :href="rawPath" - class="js-raw-link text-plain text-underline prepend-left-5" + class="js-raw-link text-plain text-underline gl-ml-2" >{{ s__('Job|Complete Raw') }}</gl-link > </template> diff --git a/app/assets/javascripts/jobs/components/log/collapsible_section.vue b/app/assets/javascripts/jobs/components/log/collapsible_section.vue index 0c7b78a3da7..55cdfb691f4 100644 --- a/app/assets/javascripts/jobs/components/log/collapsible_section.vue +++ b/app/assets/javascripts/jobs/components/log/collapsible_section.vue @@ -3,7 +3,7 @@ import LogLine from './line.vue'; import LogLineHeader from './line_header.vue'; export default { - name: 'CollpasibleLogSection', + name: 'CollapsibleLogSection', components: { LogLine, LogLineHeader, diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue index 33ee84bd4ee..48f669ae8ed 100644 --- a/app/assets/javascripts/jobs/components/log/line.vue +++ b/app/assets/javascripts/jobs/components/log/line.vue @@ -2,9 +2,7 @@ import LineNumber from './line_number.vue'; export default { - components: { - LineNumber, - }, + functional: true, props: { line: { type: Object, @@ -15,18 +13,28 @@ export default { required: true, }, }, + render(h, { props }) { + const { line, path } = props; + + const chars = line.content.map(content => { + return h( + 'span', + { + class: ['ws-pre-wrap', content.style], + }, + content.text, + ); + }); + + return h('div', { class: 'js-line log-line' }, [ + h(LineNumber, { + props: { + lineNumber: line.lineNumber, + path, + }, + }), + ...chars, + ]); + }, }; </script> - -<template> - <div class="js-line log-line"> - <line-number :line-number="line.lineNumber" :path="path" /> - <span - v-for="(content, i) in line.content" - :key="i" - :class="content.style" - class="ws-pre-wrap" - >{{ content.text }}</span - > - </div> -</template> diff --git a/app/assets/javascripts/jobs/components/log/line_number.vue b/app/assets/javascripts/jobs/components/log/line_number.vue index ae96c32874b..7ca9154d2fe 100644 --- a/app/assets/javascripts/jobs/components/log/line_number.vue +++ b/app/assets/javascripts/jobs/components/log/line_number.vue @@ -1,10 +1,6 @@ <script> -import { GlLink } from '@gitlab/ui'; - export default { - components: { - GlLink, - }, + functional: true, props: { lineNumber: { type: Number, @@ -15,41 +11,24 @@ export default { required: true, }, }, - computed: { - /** - * Builds the url for each line number - * - * @returns {String} - */ - buildLineNumber() { - return `${this.path}#${this.lineNumberId}`; - }, - /** - * Array indexes start with 0, so we add 1 - * to create the line number - * - * @returns {Number} the line number - */ - parsedLineNumber() { - return this.lineNumber + 1; - }, + render(h, { props }) { + const { lineNumber, path } = props; - /** - * Creates the anchor for each link - * - * @returns {String} - */ - lineNumberId() { - return `L${this.parsedLineNumber}`; - }, + const parsedLineNumber = lineNumber + 1; + const lineId = `L${parsedLineNumber}`; + const lineHref = `${path}#${lineId}`; + + return h( + 'a', + { + class: 'gl-link d-inline-block text-right line-number flex-shrink-0', + attrs: { + id: lineId, + href: lineHref, + }, + }, + parsedLineNumber, + ); }, }; </script> -<template> - <gl-link - :id="lineNumberId" - class="d-inline-block text-right line-number flex-shrink-0" - :href="buildLineNumber" - >{{ parsedLineNumber }}</gl-link - > -</template> diff --git a/app/assets/javascripts/jobs/components/log/log.vue b/app/assets/javascripts/jobs/components/log/log.vue index f0bdbde0602..0134e5dafe8 100644 --- a/app/assets/javascripts/jobs/components/log/log.vue +++ b/app/assets/javascripts/jobs/components/log/log.vue @@ -1,11 +1,11 @@ <script> import { mapState, mapActions } from 'vuex'; -import CollpasibleLogSection from './collapsible_section.vue'; +import CollapsibleLogSection from './collapsible_section.vue'; import LogLine from './line.vue'; export default { components: { - CollpasibleLogSection, + CollapsibleLogSection, LogLine, }, computed: { @@ -51,7 +51,7 @@ export default { <template> <code class="job-log d-block" data-qa-selector="job_log_content"> <template v-for="(section, index) in trace"> - <collpasible-log-section + <collapsible-log-section v-if="section.isHeader" :key="`collapsible-${index}`" :section="section" diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue index d4aab5c7faf..d83c598dd48 100644 --- a/app/assets/javascripts/jobs/components/manual_variables_form.vue +++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue @@ -112,7 +112,7 @@ export default { <div v-for="variable in variables" :key="variable.id" class="gl-responsive-table-row"> <div class="table-section section-50"> <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div> - <div class="table-mobile-content append-right-10"> + <div class="table-mobile-content gl-mr-3"> <input :ref="`${$options.inputTypes.key}-${variable.id}`" v-model="variable.key" @@ -124,7 +124,7 @@ export default { <div class="table-section section-50"> <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div> - <div class="table-mobile-content append-right-10"> + <div class="table-mobile-content gl-mr-3"> <input :ref="`${$options.inputTypes.value}-${variable.id}`" v-model="variable.secret_value" @@ -149,7 +149,7 @@ export default { <div class="gl-responsive-table-row"> <div class="table-section section-50"> <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div> - <div class="table-mobile-content append-right-10"> + <div class="table-mobile-content gl-mr-3"> <input ref="inputKey" v-model="key" @@ -161,7 +161,7 @@ export default { <div class="table-section section-50"> <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div> - <div class="table-mobile-content append-right-10"> + <div class="table-mobile-content gl-mr-3"> <input ref="inputSecretValue" v-model="secretValue" @@ -172,7 +172,7 @@ export default { </div> </div> </div> - <div class="d-flex prepend-top-default justify-content-center"> + <div class="d-flex gl-mt-3 justify-content-center"> <p class="text-muted" v-html="helpText"></p> </div> <div class="d-flex justify-content-center"> diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue index da01269a50c..b69e6f9686f 100644 --- a/app/assets/javascripts/jobs/components/stuck_block.vue +++ b/app/assets/javascripts/jobs/components/stuck_block.vue @@ -31,7 +31,7 @@ export default { s__(`This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:`) }} - <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary append-right-4"> + <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary gl-mr-2"> {{ tag }} </span> </p> diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue index 1a076249fe7..f55429ecdae 100644 --- a/app/assets/javascripts/jobs/components/trigger_block.vue +++ b/app/assets/javascripts/jobs/components/trigger_block.vue @@ -46,7 +46,7 @@ export default { <p v-if="trigger.short_token" class="js-short-token" - :class="{ 'append-bottom-5': hasVariables, 'gl-mb-0': !hasVariables }" + :class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }" > <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }} </p> diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js index 0ce8dfe4442..4bd8d6f58a6 100644 --- a/app/assets/javascripts/jobs/store/actions.js +++ b/app/assets/javascripts/jobs/store/actions.js @@ -195,7 +195,7 @@ export const receiveTraceError = ({ dispatch }) => { flash(__('An error occurred while fetching the job log.')); }; /** - * When the user clicks a collpasible line in the job + * When the user clicks a collapsible line in the job * log, we commit a mutation to update the state * * @param {Object} section diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js index 6193d8d34ab..924b811d0d6 100644 --- a/app/assets/javascripts/jobs/store/mutations.js +++ b/app/assets/javascripts/jobs/store/mutations.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import * as types from './mutation_types'; -import { logLinesParser, updateIncrementalTrace, isNewJobLogActive } from './utils'; +import { logLinesParser, updateIncrementalTrace } from './utils'; export default { [types.SET_JOB_ENDPOINT](state, endpoint) { @@ -25,22 +25,16 @@ export default { } if (log.append) { - if (isNewJobLogActive()) { - state.trace = log.lines ? updateIncrementalTrace(log.lines, state.trace) : state.trace; - } else { - state.trace += log.html; - } + state.trace = log.lines ? updateIncrementalTrace(log.lines, state.trace) : state.trace; + state.traceSize += log.size; } else { // When the job still does not have a trace // the trace response will not have a defined // html or size. We keep the old value otherwise these // will be set to `null` - if (isNewJobLogActive()) { - state.trace = log.lines ? logLinesParser(log.lines) : state.trace; - } else { - state.trace = log.html || state.trace; - } + state.trace = log.lines ? logLinesParser(log.lines) : state.trace; + state.traceSize = log.size || state.traceSize; } diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js index d76828ad19b..2fe945b2985 100644 --- a/app/assets/javascripts/jobs/store/state.js +++ b/app/assets/javascripts/jobs/store/state.js @@ -1,5 +1,3 @@ -import { isNewJobLogActive } from './utils'; - export default () => ({ jobEndpoint: null, traceEndpoint: null, @@ -18,7 +16,7 @@ export default () => ({ // Used to check if we should keep the automatic scroll isScrolledToBottomBeforeReceivingTrace: true, - trace: isNewJobLogActive() ? [] : '', + trace: [], isTraceComplete: false, traceSize: 0, isTraceSizeVisible: false, diff --git a/app/assets/javascripts/jobs/store/utils.js b/app/assets/javascripts/jobs/store/utils.js index 0b28c52a78f..8d6e5aac566 100644 --- a/app/assets/javascripts/jobs/store/utils.js +++ b/app/assets/javascripts/jobs/store/utils.js @@ -11,7 +11,7 @@ export const parseLine = (line = {}, lineNumber) => ({ /** * When a line has `section_header` set to true, we create a new * structure to allow to nest the lines that belong to the - * collpasible section + * collapsible section * * @param Object line * @param Number lineNumber @@ -91,7 +91,7 @@ export const getIncrementalLineNumber = acc => { * Parses the job log content into a structure usable by the template * * For collaspible lines (section_header = true): - * - creates a new array to hold the lines that are collpasible, + * - creates a new array to hold the lines that are collapsible, * - adds a isClosed property to handle toggle * - adds a isHeader property to handle template logic * - adds the section_duration @@ -177,5 +177,3 @@ export const updateIncrementalTrace = (newLog = [], oldParsed = []) => { return logLinesParser(newLog, parsedLog); }; - -export const isNewJobLogActive = () => gon && gon.features && gon.features.jobLogJson; |