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

119 lines
3.2 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2021-12-11 22:18:48 +05:30
import { GlTooltipDirective, GlButton, GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { throttle } from 'lodash';
import { mapActions, mapState } from 'vuex';
2018-11-08 19:23:39 +05:30
import { __ } from '../../../locale';
import JobDescription from './detail/description.vue';
2021-03-11 19:13:27 +05:30
import ScrollButton from './detail/scroll_button.vue';
2018-11-08 19:23:39 +05:30
const scrollPositions = {
top: 0,
bottom: 1,
};
export default {
directives: {
2021-01-03 14:25:43 +05:30
GlTooltip: GlTooltipDirective,
2021-12-11 22:18:48 +05:30
SafeHtml: GlSafeHtmlDirective,
2018-11-08 19:23:39 +05:30
},
components: {
2021-01-29 00:20:46 +05:30
GlButton,
2020-11-24 15:15:51 +05:30
GlIcon,
2018-11-08 19:23:39 +05:30
ScrollButton,
JobDescription,
},
data() {
return {
scrollPos: scrollPositions.top,
};
},
computed: {
...mapState('pipelines', ['detailJob']),
isScrolledToBottom() {
return this.scrollPos === scrollPositions.bottom;
},
isScrolledToTop() {
return this.scrollPos === scrollPositions.top;
},
jobOutput() {
return this.detailJob.output || __('No messages were logged');
},
},
mounted() {
2020-11-24 15:15:51 +05:30
this.getLogs();
2018-11-08 19:23:39 +05:30
},
methods: {
2020-11-24 15:15:51 +05:30
...mapActions('pipelines', ['fetchJobLogs', 'setDetailJob']),
2018-11-08 19:23:39 +05:30
scrollDown() {
2021-11-18 22:05:49 +05:30
if (this.$refs.buildJobLog) {
this.$refs.buildJobLog.scrollTo(0, this.$refs.buildJobLog.scrollHeight);
2018-11-08 19:23:39 +05:30
}
},
scrollUp() {
2021-11-18 22:05:49 +05:30
if (this.$refs.buildJobLog) {
this.$refs.buildJobLog.scrollTo(0, 0);
2018-11-08 19:23:39 +05:30
}
},
2020-04-22 19:07:51 +05:30
scrollBuildLog: throttle(function buildLogScrollDebounce() {
2021-11-18 22:05:49 +05:30
const { scrollTop } = this.$refs.buildJobLog;
const { offsetHeight, scrollHeight } = this.$refs.buildJobLog;
2018-11-08 19:23:39 +05:30
if (scrollTop + offsetHeight === scrollHeight) {
this.scrollPos = scrollPositions.bottom;
} else if (scrollTop === 0) {
this.scrollPos = scrollPositions.top;
} else {
this.scrollPos = '';
}
}),
2020-11-24 15:15:51 +05:30
getLogs() {
return this.fetchJobLogs().then(() => this.scrollDown());
2018-11-08 19:23:39 +05:30
},
},
};
</script>
<template>
<div class="ide-pipeline build-page d-flex flex-column flex-fill">
<header class="ide-job-header d-flex align-items-center">
2021-01-29 00:20:46 +05:30
<gl-button category="secondary" icon="chevron-left" size="small" @click="setDetailJob(null)">
{{ __('View jobs') }}
</gl-button>
2018-11-08 19:23:39 +05:30
</header>
2020-05-24 23:13:21 +05:30
<div class="top-bar d-flex border-left-0 mr-3">
2019-02-15 15:39:39 +05:30
<job-description :job="detailJob" />
2018-11-08 19:23:39 +05:30
<div class="controllers ml-auto">
<a
2021-01-03 14:25:43 +05:30
v-gl-tooltip
2018-11-08 19:23:39 +05:30
:title="__('Show complete raw log')"
:href="detailJob.rawPath"
data-placement="top"
data-container="body"
class="controllers-buttons"
target="_blank"
>
2021-02-22 17:27:13 +05:30
<gl-icon name="doc-text" />
2018-11-08 19:23:39 +05:30
</a>
2019-02-15 15:39:39 +05:30
<scroll-button :disabled="isScrolledToTop" direction="up" @click="scrollUp" />
<scroll-button :disabled="isScrolledToBottom" direction="down" @click="scrollDown" />
2018-11-08 19:23:39 +05:30
</div>
</div>
2021-11-18 22:05:49 +05:30
<pre ref="buildJobLog" class="build-log mb-0 h-100 mr-3" @scroll="scrollBuildLog">
2018-11-08 19:23:39 +05:30
<code
v-show="!detailJob.isLoading"
2021-12-11 22:18:48 +05:30
v-safe-html="jobOutput"
2018-11-08 19:23:39 +05:30
class="bash"
>
</code>
<div
v-show="detailJob.isLoading"
class="build-loader-animation"
>
2018-11-18 11:00:15 +05:30
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
2018-11-08 19:23:39 +05:30
</div>
</pre>
</div>
</template>