diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components')
3 files changed, 125 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue new file mode 100644 index 00000000000..86d0fcc3b74 --- /dev/null +++ b/app/assets/javascripts/jobs/components/log/line.vue @@ -0,0 +1,28 @@ +<script> +import LineNumber from './line_number.vue'; + +export default { + components: { + LineNumber, + }, + props: { + line: { + type: Object, + required: true, + }, + path: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="line"> + <line-number :line-number="line.lineNumber" :path="path" /> + <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{ + content.text + }}</span> + </div> +</template> diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue new file mode 100644 index 00000000000..4ec212d2333 --- /dev/null +++ b/app/assets/javascripts/jobs/components/log/line_header.vue @@ -0,0 +1,45 @@ +<script> +import Icon from '~/vue_shared/components/icon.vue'; +import LineNumber from './line_number.vue'; + +export default { + components: { + Icon, + LineNumber, + }, + props: { + line: { + type: Object, + required: true, + }, + isClosed: { + type: Boolean, + required: true, + }, + path: { + type: String, + required: true, + }, + }, + computed: { + iconName() { + return this.isClosed ? 'angle-right' : 'angle-down'; + }, + }, + methods: { + handleOnClick() { + this.$emit('toggleLine'); + }, + }, +}; +</script> + +<template> + <div class="line collapsible-line" role="button" @click="handleOnClick"> + <icon :name="iconName" class="arrow" /> + <line-number :line-number="line.lineNumber" :path="path" /> + <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{ + 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 new file mode 100644 index 00000000000..e06836e2e97 --- /dev/null +++ b/app/assets/javascripts/jobs/components/log/line_number.vue @@ -0,0 +1,52 @@ +<script> +import { GlLink } from '@gitlab/ui'; + +export default { + components: { + GlLink, + }, + props: { + lineNumber: { + type: Number, + required: true, + }, + path: { + type: String, + 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; + }, + + /** + * Creates the anchor for each link + * + * @returns {String} + */ + lineNumberId() { + return `L${this.parsedLineNumber}`; + }, + }, +}; +</script> +<template> + <gl-link :id="lineNumberId" class="line-number" :href="buildLineNumber">{{ + parsedLineNumber + }}</gl-link> +</template> |