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

137 lines
3.4 KiB
Vue
Raw Normal View History

2018-11-20 20:47:30 +05:30
<script>
2020-04-22 19:07:51 +05:30
import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import { polyfillSticky } from '~/lib/utils/sticky';
import Icon from '~/vue_shared/components/icon.vue';
import { numberToHumanSize } from '~/lib/utils/number_utils';
2019-09-30 21:07:59 +05:30
import { __, sprintf } from '~/locale';
2018-12-13 13:39:08 +05:30
import scrollDown from '../svg/scroll_down.svg';
2018-11-20 20:47:30 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
Icon,
GlLink,
2020-04-22 19:07:51 +05:30
GlDeprecatedButton,
2018-12-13 13:39:08 +05:30
},
directives: {
GlTooltip: GlTooltipDirective,
},
scrollDown,
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),
});
},
},
mounted() {
polyfillSticky(this.$el);
},
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 -->
<div class="js-truncated-info truncated-info d-none d-sm-block float-left">
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-07-28 23:09:34 +05:30
class="js-raw-link text-plain text-underline gl-ml-2"
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 -->
<div class="controllers float-right">
<!-- links -->
2018-12-13 13:39:08 +05:30
<gl-link
2018-12-05 23:21:45 +05:30
v-if="rawPath"
2018-12-13 13:39:08 +05:30
v-gl-tooltip.body
2018-11-20 20:47:30 +05:30
:title="s__('Job|Show complete raw')"
2018-12-05 23:21:45 +05:30
:href="rawPath"
2018-11-20 20:47:30 +05:30
class="js-raw-link-controller controllers-buttons"
>
<icon name="doc-text" />
2018-12-13 13:39:08 +05:30
</gl-link>
2018-11-20 20:47:30 +05:30
2018-12-13 13:39:08 +05:30
<gl-link
2018-12-05 23:21:45 +05:30
v-if="erasePath"
2018-12-13 13:39:08 +05:30
v-gl-tooltip.body
2018-11-20 20:47:30 +05:30
:title="s__('Job|Erase job log')"
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?')"
2018-11-20 20:47:30 +05:30
class="js-erase-link controllers-buttons"
2018-12-05 23:21:45 +05:30
data-method="post"
2018-11-20 20:47:30 +05:30
>
<icon name="remove" />
2018-12-13 13:39:08 +05:30
</gl-link>
2018-11-20 20:47:30 +05:30
<!-- eo links -->
<!-- scroll buttons -->
2019-02-15 15:39:39 +05:30
<div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
2020-04-22 19:07:51 +05:30
<gl-deprecated-button
2018-12-05 23:21:45 +05:30
:disabled="isScrollTopDisabled"
2018-11-20 20:47:30 +05:30
type="button"
class="js-scroll-top btn-scroll btn-transparent btn-blank"
@click="handleScrollToTop"
>
2018-12-13 13:39:08 +05:30
<icon name="scroll_up" />
2020-04-22 19:07:51 +05:30
</gl-deprecated-button>
2018-11-20 20:47:30 +05:30
</div>
2019-02-15 15:39:39 +05:30
<div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
2020-04-22 19:07:51 +05:30
<gl-deprecated-button
2018-12-05 23:21:45 +05:30
:disabled="isScrollBottomDisabled"
2018-11-20 20:47:30 +05:30
class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
2018-12-05 23:21:45 +05:30
:class="{ animate: isScrollingDown }"
2018-11-20 20:47:30 +05:30
@click="handleScrollToBottom"
2018-12-13 13:39:08 +05:30
v-html="$options.scrollDown"
/>
2018-11-20 20:47:30 +05:30
</div>
<!-- eo scroll buttons -->
</div>
</div>
</template>