summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/jobs
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-07-20 12:26:25 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-07-20 12:26:25 +0000
commita09983ae35713f5a2bbb100981116d31ce99826e (patch)
tree2ee2af7bd104d57086db360a7e6d8c9d5d43667a /app/assets/javascripts/jobs
parent18c5ab32b738c0b6ecb4d0df3994000482f34bd8 (diff)
downloadgitlab-ce-a09983ae35713f5a2bbb100981116d31ce99826e.tar.gz
Add latest changes from gitlab-org/gitlab@13-2-stable-ee
Diffstat (limited to 'app/assets/javascripts/jobs')
-rw-r--r--app/assets/javascripts/jobs/components/commit_block.vue2
-rw-r--r--app/assets/javascripts/jobs/components/environments_block.vue2
-rw-r--r--app/assets/javascripts/jobs/components/erased_block.vue2
-rw-r--r--app/assets/javascripts/jobs/components/job_app.vue8
-rw-r--r--app/assets/javascripts/jobs/components/job_log.vue59
-rw-r--r--app/assets/javascripts/jobs/components/job_log_controllers.vue2
-rw-r--r--app/assets/javascripts/jobs/components/log/collapsible_section.vue2
-rw-r--r--app/assets/javascripts/jobs/components/log/line.vue40
-rw-r--r--app/assets/javascripts/jobs/components/log/line_number.vue57
-rw-r--r--app/assets/javascripts/jobs/components/log/log.vue6
-rw-r--r--app/assets/javascripts/jobs/components/manual_variables_form.vue10
-rw-r--r--app/assets/javascripts/jobs/components/stuck_block.vue2
-rw-r--r--app/assets/javascripts/jobs/components/trigger_block.vue2
-rw-r--r--app/assets/javascripts/jobs/store/actions.js2
-rw-r--r--app/assets/javascripts/jobs/store/mutations.js16
-rw-r--r--app/assets/javascripts/jobs/store/state.js4
-rw-r--r--app/assets/javascripts/jobs/store/utils.js6
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;