Commit 322dfb45 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Creates a vue component for the top bar with controllers in job log view

parent 682c6ad9
<script>
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';
export default {
components: {
Icon,
},
directives: {
tooltip,
},
props: {
canEraseJob: {
type: Boolean,
required: true,
},
size: {
type: Number,
required: true,
},
rawTracePath: {
type: String,
required: false,
default: null,
},
canScrollToTop: {
type: Boolean,
required: true,
},
canScrollToBottom: {
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>',
size: numberToHumanSize(this.size),
});
},
},
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');
},
handleScrollToBottom() {
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>
<a
v-if="rawTracePath"
:href="rawTracePath"
class="js-raw-link raw-link"
>
{{ s__("Job|Complete Raw") }}
</a>
</div>
<!-- eo truncate information -->
<div class="controllers float-right">
<!-- links -->
<a
v-tooltip
v-if="rawTracePath"
:title="s__('Job|Show complete raw')"
:href="rawTracePath"
class="js-raw-link-controller controllers-buttons"
data-container="body"
>
<icon name="doc-text" />
</a>
<button
v-tooltip
v-if="canEraseJob"
:title="s__('Job|Erase job log')"
type="button"
class="js-erase-link controllers-buttons"
data-container="body"
@click="handleEraseJobClick"
>
<icon name="remove" />
</button>
<!-- eo links -->
<!-- scroll buttons -->
<div
v-tooltip
:title="s__('Job|Scroll to top')"
class="controllers-buttons"
data-container="body"
>
<button
:disabled="!canScrollToTop"
type="button"
class="js-scroll-top btn-scroll btn-transparent btn-blank"
@click="handleScrollToTop"
>
<icon name="scroll_up"/>
</button>
</div>
<div
v-tooltip
:title="s__('Job|Scroll to bottom')"
class="controllers-buttons"
data-container="body"
>
<button
:disabled="!canScrollToBottom"
type="button"
class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
@click="handleScrollToBottom"
>
<icon name="scroll_down"/>
</button>
</div>
<!-- eo scroll buttons -->
</div>
</div>
</template>
---
title: Creates vue component for job log top bar with controllers
merge_request:
author:
type: other
...@@ -3139,12 +3139,21 @@ msgstr "" ...@@ -3139,12 +3139,21 @@ msgstr ""
msgid "Jobs" msgid "Jobs"
msgstr "" msgstr ""
msgid "Job|Are you sure you want to erase this job?"
msgstr ""
msgid "Job|Browse" msgid "Job|Browse"
msgstr "" msgstr ""
msgid "Job|Complete Raw"
msgstr ""
msgid "Job|Download" msgid "Job|Download"
msgstr "" msgstr ""
msgid "Job|Erase job log"
msgstr ""
msgid "Job|Job artifacts" msgid "Job|Job artifacts"
msgstr "" msgstr ""
...@@ -3157,6 +3166,15 @@ msgstr "" ...@@ -3157,6 +3166,15 @@ msgstr ""
msgid "Job|Keep" msgid "Job|Keep"
msgstr "" msgstr ""
msgid "Job|Scroll to bottom"
msgstr ""
msgid "Job|Scroll to top"
msgstr ""
msgid "Job|Show complete raw"
msgstr ""
msgid "Job|The artifacts were removed" msgid "Job|The artifacts were removed"
msgstr "" msgstr ""
......
import Vue from 'vue';
import component from '~/jobs/components/job_log_controllers.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('Job log controllers', () => {
const Component = Vue.extend(component);
let vm;
afterEach(() => {
vm.$destroy();
});
describe('Truncate information', () => {
beforeEach(() => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: true,
size: 511952,
canScrollToTop: true,
canScrollToBottom: true,
});
});
it('renders size information', () => {
expect(vm.$el.querySelector('.js-truncated-info').textContent).toContain('499.95 KiB');
});
it('renders link to raw trace', () => {
expect(vm.$el.querySelector('.js-raw-link').getAttribute('href')).toEqual('/raw');
});
});
describe('links section', () => {
describe('with raw trace path', () => {
it('renders raw trace link', () => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: true,
size: 511952,
canScrollToTop: true,
canScrollToBottom: true,
});
expect(vm.$el.querySelector('.js-raw-link-controller').getAttribute('href')).toEqual('/raw');
});
});
describe('without raw trace path', () => {
it('does not render raw trace link', () => {
vm = mountComponent(Component, {
canEraseJob: true,
size: 511952,
canScrollToTop: true,
canScrollToBottom: true,
});
expect(vm.$el.querySelector('.js-raw-link-controller')).toBeNull();
});
});
describe('when is erasable', () => {
beforeEach(() => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: true,
size: 511952,
canScrollToTop: true,
canScrollToBottom: true,
});
});
it('renders erase job button', () => {
expect(vm.$el.querySelector('.js-erase-link')).not.toBeNull();
});
describe('on click', () => {
describe('when user confirms action', () => {
it('emits eraseJob event', () => {
spyOn(window, 'confirm').and.returnValue(true);
spyOn(vm, '$emit');
vm.$el.querySelector('.js-erase-link').click();
expect(vm.$emit).toHaveBeenCalledWith('eraseJob');
});
});
describe('when user does not confirm action', () => {
it('does not emit eraseJob event', () => {
spyOn(window, 'confirm').and.returnValue(false);
spyOn(vm, '$emit');
vm.$el.querySelector('.js-erase-link').click();
expect(vm.$emit).not.toHaveBeenCalledWith('eraseJob');
});
});
});
});
describe('when it is not erasable', () => {
it('does not render erase button', () => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: false,
size: 511952,
canScrollToTop: true,
canScrollToBottom: true,
});
expect(vm.$el.querySelector('.js-erase-link')).toBeNull();
});
});
});
describe('scroll buttons', () => {
describe('scroll top button', () => {
describe('when user can scroll top', () => {
beforeEach(() => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: true,
size: 511952,
canScrollToTop: true,
canScrollToBottom: true,
});
});
it('renders enabled scroll top button', () => {
expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toBeNull();
});
it('emits scrollJobLogTop event on click', () => {
spyOn(vm, '$emit');
vm.$el.querySelector('.js-scroll-top').click();
expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogTop');
});
});
describe('when user can not scroll top', () => {
beforeEach(() => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: true,
size: 511952,
canScrollToTop: false,
canScrollToBottom: true,
});
});
it('renders disabled scroll top button', () => {
expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual('disabled');
});
it('does not emit scrollJobLogTop event on click', () => {
spyOn(vm, '$emit');
vm.$el.querySelector('.js-scroll-top').click();
expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogTop');
});
});
});
describe('scroll bottom button', () => {
describe('when user can scroll bottom', () => {
beforeEach(() => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: true,
size: 511952,
canScrollToTop: true,
canScrollToBottom: true,
});
});
it('renders enabled scroll bottom button', () => {
expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toBeNull();
});
it('emits scrollJobLogBottom event on click', () => {
spyOn(vm, '$emit');
vm.$el.querySelector('.js-scroll-bottom').click();
expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogBottom');
});
});
describe('when user can not scroll bottom', () => {
beforeEach(() => {
vm = mountComponent(Component, {
rawTracePath: '/raw',
canEraseJob: true,
size: 511952,
canScrollToTop: true,
canScrollToBottom: false,
});
});
it('renders disabled scroll bottom button', () => {
expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual('disabled');
});
it('does not emit scrollJobLogBottom event on click', () => {
spyOn(vm, '$emit');
vm.$el.querySelector('.js-scroll-bottom').click();
expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogBottom');
});
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment