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

142 lines
3.6 KiB
Vue
Raw Normal View History

2018-11-20 20:47:30 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import { numberToHumanSize } from '~/lib/utils/number_utils';
2021-04-29 21:17:54 +05:30
import { __, s__, sprintf } from '~/locale';
2018-11-20 20:47:30 +05:30
2018-12-13 13:39:08 +05:30
export default {
2021-04-29 21:17:54 +05:30
i18n: {
eraseLogButtonLabel: s__('Job|Erase job log'),
scrollToBottomButtonLabel: s__('Job|Scroll to bottom'),
scrollToTopButtonLabel: s__('Job|Scroll to top'),
showRawButtonLabel: s__('Job|Show complete raw'),
},
2018-12-13 13:39:08 +05:30
components: {
GlLink,
2020-11-24 15:15:51 +05:30
GlButton,
2018-12-13 13:39:08 +05:30
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
erasePath: {
type: String,
required: false,
default: null,
2018-11-20 20:47:30 +05:30
},
2018-12-13 13:39:08 +05:30
size: {
type: Number,
required: true,
2018-11-20 20:47:30 +05:30
},
2018-12-13 13:39:08 +05:30
rawPath: {
type: String,
required: false,
default: null,
2018-11-20 20:47:30 +05:30
},
2018-12-13 13:39:08 +05:30
isScrollTopDisabled: {
type: Boolean,
required: true,
2018-11-20 20:47:30 +05:30
},
2018-12-13 13:39:08 +05:30
isScrollBottomDisabled: {
type: Boolean,
required: true,
2018-12-05 23:21:45 +05:30
},
2018-12-13 13:39:08 +05:30
isScrollingDown: {
type: Boolean,
required: true,
2018-11-20 20:47:30 +05:30
},
2018-12-13 13:39:08 +05:30
isTraceSizeVisible: {
type: Boolean,
required: true,
},
},
computed: {
jobLogSize() {
2019-09-30 21:07:59 +05:30
return sprintf(__('Showing last %{size} of log -'), {
2018-12-13 13:39:08 +05:30
size: numberToHumanSize(this.size),
});
},
},
methods: {
handleScrollToTop() {
this.$emit('scrollJobLogTop');
},
handleScrollToBottom() {
this.$emit('scrollJobLogBottom');
},
},
};
2018-11-20 20:47:30 +05:30
</script>
<template>
2018-12-13 13:39:08 +05:30
<div class="top-bar">
2018-11-20 20:47:30 +05:30
<!-- truncate information -->
2021-06-08 01:23:25 +05:30
<div
class="truncated-info gl-display-none gl-sm-display-block gl-float-left"
data-testid="log-truncated-info"
>
2018-12-05 23:21:45 +05:30
<template v-if="isTraceSizeVisible">
{{ jobLogSize }}
2019-07-31 22:56:46 +05:30
<gl-link
v-if="rawPath"
:href="rawPath"
2020-10-24 23:57:45 +05:30
class="text-plain text-underline gl-ml-2"
data-testid="raw-link"
2019-09-30 21:07:59 +05:30
>{{ s__('Job|Complete Raw') }}</gl-link
2019-07-31 22:56:46 +05:30
>
2018-12-05 23:21:45 +05:30
</template>
2018-11-20 20:47:30 +05:30
</div>
<!-- eo truncate information -->
2021-06-08 01:23:25 +05:30
<div class="controllers gl-float-right">
2018-11-20 20:47:30 +05:30
<!-- links -->
2020-11-24 15:15:51 +05:30
<gl-button
2018-12-05 23:21:45 +05:30
v-if="rawPath"
2018-12-13 13:39:08 +05:30
v-gl-tooltip.body
2021-04-29 21:17:54 +05:30
:title="$options.i18n.showRawButtonLabel"
:aria-label="$options.i18n.showRawButtonLabel"
2018-12-05 23:21:45 +05:30
:href="rawPath"
2020-10-24 23:57:45 +05:30
data-testid="job-raw-link-controller"
2020-11-24 15:15:51 +05:30
icon="doc-text"
/>
2018-11-20 20:47:30 +05:30
2020-11-24 15:15:51 +05:30
<gl-button
2018-12-05 23:21:45 +05:30
v-if="erasePath"
2018-12-13 13:39:08 +05:30
v-gl-tooltip.body
2021-04-29 21:17:54 +05:30
:title="$options.i18n.eraseLogButtonLabel"
:aria-label="$options.i18n.eraseLogButtonLabel"
2018-12-05 23:21:45 +05:30
:href="erasePath"
2018-12-13 13:39:08 +05:30
:data-confirm="__('Are you sure you want to erase this build?')"
2021-04-17 20:07:23 +05:30
class="gl-ml-3"
2020-10-24 23:57:45 +05:30
data-testid="job-log-erase-link"
2018-12-05 23:21:45 +05:30
data-method="post"
2020-11-24 15:15:51 +05:30
icon="remove"
/>
2018-11-20 20:47:30 +05:30
<!-- eo links -->
<!-- scroll buttons -->
2021-04-29 21:17:54 +05:30
<div v-gl-tooltip :title="$options.i18n.scrollToTopButtonLabel" class="gl-ml-3">
2020-11-24 15:15:51 +05:30
<gl-button
2018-12-05 23:21:45 +05:30
:disabled="isScrollTopDisabled"
2021-04-17 20:07:23 +05:30
class="btn-scroll"
2020-10-24 23:57:45 +05:30
data-testid="job-controller-scroll-top"
2020-11-24 15:15:51 +05:30
icon="scroll_up"
2021-04-29 21:17:54 +05:30
:aria-label="$options.i18n.scrollToTopButtonLabel"
2018-11-20 20:47:30 +05:30
@click="handleScrollToTop"
2020-11-24 15:15:51 +05:30
/>
2018-11-20 20:47:30 +05:30
</div>
2021-04-29 21:17:54 +05:30
<div v-gl-tooltip :title="$options.i18n.scrollToBottomButtonLabel" class="gl-ml-3">
2020-11-24 15:15:51 +05:30
<gl-button
2018-12-05 23:21:45 +05:30
:disabled="isScrollBottomDisabled"
2021-04-17 20:07:23 +05:30
class="js-scroll-bottom btn-scroll"
2020-10-24 23:57:45 +05:30
data-testid="job-controller-scroll-bottom"
2020-11-24 15:15:51 +05:30
icon="scroll_down"
:class="{ animate: isScrollingDown }"
2021-04-29 21:17:54 +05:30
:aria-label="$options.i18n.scrollToBottomButtonLabel"
2018-11-20 20:47:30 +05:30
@click="handleScrollToBottom"
2018-12-13 13:39:08 +05:30
/>
2018-11-20 20:47:30 +05:30
</div>
<!-- eo scroll buttons -->
</div>
</div>
</template>