kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Add dynamic timer for delayed jobs in pipeline graph

Browse source
This commit is contained in:
Winnie Hellmann 2018-10-26 11:04:25 +02:00
parent ff72bba12c
commit 53a28e80e3
2 changed files with 43 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/javascripts/pipelines/components/graph/job_item.vue
View file

@ -2,6 +2,8 @@
import ActionComponent from './action_component.vue'; import ActionComponent from './action_component.vue';
import JobNameComponent from './job_name_component.vue'; import JobNameComponent from './job_name_component.vue';
import tooltip from '../../../vue_shared/directives/tooltip'; import tooltip from '../../../vue_shared/directives/tooltip';
import { sprintf } from '~/locale';
import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
/** /**
* Renders the badge for the pipeline graph and the job's dropdown. * Renders the badge for the pipeline graph and the job's dropdown.
@ -36,6 +38,7 @@ export default {
directives: { directives: {
tooltip, tooltip,
}, },
mixins: [delayedJobMixin],
props: { props: {
job: { job: {
type: Object, type: Object,
@ -52,6 +55,7 @@ export default {
default: Infinity, default: Infinity,
}, },
}, },
computed: { computed: {
status() { status() {
return this.job && this.job.status ? this.job.status : {}; return this.job && this.job.status ? this.job.status : {};
@ -59,17 +63,23 @@ export default {
tooltipText() { tooltipText() {
const textBuilder = []; const textBuilder = [];
const { name: jobName } = this.job;
if (this.job.name) { if (jobName) {
textBuilder.push(this.job.name); textBuilder.push(jobName);
} }
if (this.job.name && this.status.tooltip) { const { tooltip: statusTooltip } = this.status;
if (jobName && statusTooltip) {
textBuilder.push('-'); textBuilder.push('-');
} }
if (this.status.tooltip) { if (statusTooltip) {
textBuilder.push(this.job.status.tooltip); if (this.isDelayedJob) {
textBuilder.push(sprintf(statusTooltip, { remainingTime: this.remainingTime }));
} else {
textBuilder.push(statusTooltip);
}
} }
return textBuilder.join(' '); return textBuilder.join(' ');
@ -88,6 +98,7 @@ export default {
return this.job.status && this.job.status.action && this.job.status.action.path; return this.job.status && this.job.status.action && this.job.status.action.path;
}, },
}, },
methods: { methods: {
pipelineActionRequestComplete() { pipelineActionRequestComplete() {
this.$emit('pipelineActionRequestComplete'); this.$emit('pipelineActionRequestComplete');

27
spec/javascripts/pipelines/graph/job_item_spec.js
View file

@ -6,6 +6,7 @@ describe('pipeline graph job item', () => {
const JobComponent = Vue.extend(JobItem); const JobComponent = Vue.extend(JobItem);
let component; let component;
const delayedJobFixture = getJSONFixture('jobs/delayed.json');
const mockJob = { const mockJob = {
id: 4256, id: 4256,
name: 'test', name: 'test',
@ -167,4 +168,30 @@ describe('pipeline graph job item', () => {
expect(component.$el.querySelector(tooltipBoundary)).toBeNull(); expect(component.$el.querySelector(tooltipBoundary)).toBeNull();
}); });
}); });
describe('for delayed job', () => {
beforeEach(() => {
const fifteenMinutesInMilliseconds = 900000;
spyOn(Date, 'now').and.callFake(
() => new Date(delayedJobFixture.scheduled_at).getTime() - fifteenMinutesInMilliseconds,
);
});
it('displays remaining time in tooltip', done => {
component = mountComponent(JobComponent, {
job: delayedJobFixture,
});
Vue.nextTick()
.then(() => {
expect(
component.$el
.querySelector('.js-pipeline-graph-job-link')
.getAttribute('data-original-title'),
).toEqual('delayed job - delayed manual action (00:15:00)');
})
.then(done)
.catch(done.fail);
});
});
}); });