diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components/job_log_controllers.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/job_log_controllers.vue | 76 |
1 files changed, 43 insertions, 33 deletions
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue index 2cbf0f85266..3e62ababea3 100644 --- a/app/assets/javascripts/jobs/components/job_log_controllers.vue +++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue @@ -1,8 +1,9 @@ <script> + import { polyfillSticky } from '~/lib/utils/sticky'; import Icon from '~/vue_shared/components/icon.vue'; import tooltip from '~/vue_shared/directives/tooltip'; import { numberToHumanSize } from '~/lib/utils/number_utils'; - import { s__, sprintf } from '~/locale'; + import { sprintf } from '~/locale'; export default { components: { @@ -12,44 +13,48 @@ tooltip, }, props: { - canEraseJob: { - type: Boolean, - required: true, + erasePath: { + type: String, + required: false, + default: null, }, size: { type: Number, required: true, }, - rawTracePath: { + rawPath: { type: String, required: false, default: null, }, - canScrollToTop: { + isScrollTopDisabled: { + type: Boolean, + required: true, + }, + isScrollBottomDisabled: { + type: Boolean, + required: true, + }, + isScrollingDown: { type: Boolean, required: true, }, - canScrollToBottom: { + isTraceSizeVisible: { type: Boolean, required: true, }, }, computed: { jobLogSize() { - return sprintf('Showing last %{startSpanTag} %{size} %{endSpanTag} of log -', { - startSpanTag: '<span class="s-truncated-info-size truncated-info-size">', - endSpanTag: '</span>', + return sprintf('Showing last %{size} of log -', { size: numberToHumanSize(this.size), }); }, }, + mounted() { + polyfillSticky(this.$el); + }, methods: { - handleEraseJobClick() { - // eslint-disable-next-line no-alert - if (window.confirm(s__('Job|Are you sure you want to erase this job?'))) { - this.$emit('eraseJob'); - } - }, handleScrollToTop() { this.$emit('scrollJobLogTop'); }, @@ -57,48 +62,52 @@ this.$emit('scrollJobLogBottom'); }, }, + }; </script> <template> <div class="top-bar"> <!-- truncate information --> <div class="js-truncated-info truncated-info d-none d-sm-block float-left"> - <p v-html="jobLogSize"></p> + <template v-if="isTraceSizeVisible"> + {{ jobLogSize }} - <a - v-if="rawTracePath" - :href="rawTracePath" - class="js-raw-link raw-link" - > - {{ s__("Job|Complete Raw") }} - </a> + <a + v-if="rawPath" + :href="rawPath" + class="js-raw-link raw-link" + > + {{ s__("Job|Complete Raw") }} + </a> + </template> </div> <!-- eo truncate information --> <div class="controllers float-right"> <!-- links --> <a - v-if="rawTracePath" + v-if="rawPath" v-tooltip :title="s__('Job|Show complete raw')" - :href="rawTracePath" + :href="rawPath" class="js-raw-link-controller controllers-buttons" data-container="body" > <icon name="doc-text" /> </a> - <button - v-if="canEraseJob" + <a + v-if="erasePath" v-tooltip :title="s__('Job|Erase job log')" - type="button" + :href="erasePath" + data-confirm="__('Are you sure you want to erase this build?')" class="js-erase-link controllers-buttons" data-container="body" - @click="handleEraseJobClick" + data-method="post" > <icon name="remove" /> - </button> + </a> <!-- eo links --> <!-- scroll buttons --> @@ -109,7 +118,7 @@ data-container="body" > <button - :disabled="!canScrollToTop" + :disabled="isScrollTopDisabled" type="button" class="js-scroll-top btn-scroll btn-transparent btn-blank" @click="handleScrollToTop" @@ -125,9 +134,10 @@ data-container="body" > <button - :disabled="!canScrollToBottom" + :disabled="isScrollBottomDisabled" type="button" class="js-scroll-bottom btn-scroll btn-transparent btn-blank" + :class="{ animate: isScrollingDown }" @click="handleScrollToBottom" > <icon name="scroll_down"/> |