debian-mirror-gitlab/app/assets/javascripts/jobs/components/job_log.vue

62 lines
1.4 KiB
Vue
Raw Normal View History

2018-11-20 20:47:30 +05:30
<script>
2018-12-13 13:39:08 +05:30
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);
}
2018-11-20 20:47:30 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-11-20 20:47:30 +05:30
</script>
<template>
2018-12-13 13:39:08 +05:30
<pre class="js-build-trace build-trace qa-build-trace">
2018-11-20 20:47:30 +05:30
<code
class="bash"
v-html="trace"
>
</code>
<div
2018-12-13 13:39:08 +05:30
v-if="!isComplete"
2018-11-20 20:47:30 +05:30
class="js-log-animation build-loader-animation"
>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</pre>
</template>