debian-mirror-gitlab/app/assets/javascripts/job.js

293 lines
8.4 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
import _ from 'underscore';
2018-03-17 18:26:18 +05:30
import axios from './lib/utils/axios_utils';
import { visitUrl } from './lib/utils/url_utility';
2017-09-10 17:25:29 +05:30
import bp from './breakpoints';
2018-03-17 18:26:18 +05:30
import { numberToHumanSize } from './lib/utils/number_utils';
import { setCiStatusFavicon } from './lib/utils/common_utils';
export default class Job {
constructor(options) {
this.timeout = null;
this.state = null;
this.fetchingStatusFavicon = false;
2017-08-17 22:00:37 +05:30
this.options = options || $('.js-build-options').data();
2018-03-17 18:26:18 +05:30
this.pagePath = this.options.pagePath;
2017-08-17 22:00:37 +05:30
this.buildStatus = this.options.buildStatus;
this.state = this.options.logState;
this.buildStage = this.options.buildStage;
this.$document = $(document);
2018-03-17 18:26:18 +05:30
this.$window = $(window);
2017-08-17 22:00:37 +05:30
this.logBytes = 0;
2017-09-10 17:25:29 +05:30
this.updateDropdown = this.updateDropdown.bind(this);
2017-08-17 22:00:37 +05:30
this.$buildTrace = $('#build-trace');
this.$buildRefreshAnimation = $('.js-build-refresh');
this.$truncatedInfo = $('.js-truncated-info');
2017-09-10 17:25:29 +05:30
this.$buildTraceOutput = $('.js-build-output');
this.$topBar = $('.js-top-bar');
// Scroll controllers
this.$scrollTopBtn = $('.js-scroll-up');
this.$scrollBottomBtn = $('.js-scroll-down');
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
clearTimeout(this.timeout);
2017-08-17 22:00:37 +05:30
this.initSidebar();
this.populateJobs(this.buildStage);
this.updateStageDropdownText(this.buildStage);
this.sidebarOnResize();
this.$document
.off('click', '.js-sidebar-build-toggle')
.on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
this.$document
.off('click', '.stage-item')
.on('click', '.stage-item', this.updateDropdown);
2017-09-10 17:25:29 +05:30
// add event listeners to the scroll buttons
this.$scrollTopBtn
.off('click')
.on('click', this.scrollToTop.bind(this));
this.$scrollBottomBtn
.off('click')
.on('click', this.scrollToBottom.bind(this));
this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
this.$window
2017-09-10 17:25:29 +05:30
.off('scroll')
.on('scroll', () => {
2018-03-17 18:26:18 +05:30
if (!this.isScrolledToBottom()) {
2017-09-10 17:25:29 +05:30
this.toggleScrollAnimation(false);
2018-03-17 18:26:18 +05:30
} else if (this.isScrolledToBottom() && !this.isLogComplete) {
this.toggleScrollAnimation(true);
2017-09-10 17:25:29 +05:30
}
this.scrollThrottled();
});
2018-03-17 18:26:18 +05:30
this.$window
2017-09-10 17:25:29 +05:30
.off('resize.build')
.on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
this.initAffixTopArea();
this.getBuildTrace();
2017-08-17 22:00:37 +05:30
}
2018-03-17 18:26:18 +05:30
initAffixTopArea() {
2017-09-10 17:25:29 +05:30
/**
If the browser does not support position sticky, it returns the position as static.
If the browser does support sticky, then we allow the browser to handle it, if not
then we default back to Bootstraps affix
**/
if (this.$topBar.css('position') !== 'static') return;
const offsetTop = this.$buildTrace.offset().top;
this.$topBar.affix({
offset: {
top: offsetTop,
},
});
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
// eslint-disable-next-line class-methods-use-this
canScroll() {
2017-09-10 17:25:29 +05:30
return $(document).height() > $(window).height();
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
toggleScroll() {
const $document = $(document);
const currentPosition = $document.scrollTop();
const scrollHeight = $document.height();
2017-09-10 17:25:29 +05:30
const windowHeight = $(window).height();
if (this.canScroll()) {
if (currentPosition > 0 &&
(scrollHeight - currentPosition !== windowHeight)) {
// User is in the middle of the log
this.toggleDisableButton(this.$scrollTopBtn, false);
this.toggleDisableButton(this.$scrollBottomBtn, false);
} else if (currentPosition === 0) {
2018-03-17 18:26:18 +05:30
// User is at Top of Log
2017-09-10 17:25:29 +05:30
this.toggleDisableButton(this.$scrollTopBtn, true);
this.toggleDisableButton(this.$scrollBottomBtn, false);
2018-03-17 18:26:18 +05:30
} else if (this.isScrolledToBottom()) {
2017-09-10 17:25:29 +05:30
// User is at the bottom of the build log.
this.toggleDisableButton(this.$scrollTopBtn, false);
this.toggleDisableButton(this.$scrollBottomBtn, true);
}
} else {
this.toggleDisableButton(this.$scrollTopBtn, true);
this.toggleDisableButton(this.$scrollBottomBtn, true);
}
2018-03-17 18:26:18 +05:30
}
// eslint-disable-next-line class-methods-use-this
isScrolledToBottom() {
const $document = $(document);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
const currentPosition = $document.scrollTop();
const scrollHeight = $document.height();
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
const windowHeight = $(window).height();
return scrollHeight - currentPosition === windowHeight;
}
// eslint-disable-next-line class-methods-use-this
scrollDown() {
const $document = $(document);
$document.scrollTop($document.height());
}
scrollToBottom() {
2017-09-10 17:25:29 +05:30
this.scrollDown();
this.hasBeenScrolled = true;
this.toggleScroll();
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
scrollToTop() {
2017-09-10 17:25:29 +05:30
$(document).scrollTop(0);
this.hasBeenScrolled = true;
this.toggleScroll();
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
// eslint-disable-next-line class-methods-use-this
toggleDisableButton($button, disable) {
2017-09-10 17:25:29 +05:30
if (disable && $button.prop('disabled')) return;
$button.prop('disabled', disable);
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
toggleScrollAnimation(toggle) {
2017-09-10 17:25:29 +05:30
this.$scrollBottomBtn.toggleClass('animate', toggle);
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
initSidebar() {
2017-09-10 17:25:29 +05:30
this.$sidebar = $('.js-build-sidebar');
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
getBuildTrace() {
return axios.get(`${this.pagePath}/trace.json`, {
params: { state: this.state },
2017-09-10 17:25:29 +05:30
})
2018-03-17 18:26:18 +05:30
.then((res) => {
const log = res.data;
if (!this.fetchingStatusFavicon) {
this.fetchingStatusFavicon = true;
setCiStatusFavicon(`${this.pagePath}/status.json`)
.then(() => {
this.fetchingStatusFavicon = false;
})
.catch(() => {
this.fetchingStatusFavicon = false;
});
}
2017-08-17 22:00:37 +05:30
if (log.state) {
this.state = log.state;
2016-09-13 17:45:13 +05:30
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
this.isScrollInBottom = this.isScrolledToBottom();
2017-09-10 17:25:29 +05:30
2017-08-17 22:00:37 +05:30
if (log.append) {
2017-09-10 17:25:29 +05:30
this.$buildTraceOutput.append(log.html);
2017-08-17 22:00:37 +05:30
this.logBytes += log.size;
} else {
2017-09-10 17:25:29 +05:30
this.$buildTraceOutput.html(log.html);
2017-08-17 22:00:37 +05:30
this.logBytes = log.size;
}
// if the incremental sum of logBytes we received is less than the total
// we need to show a message warning the user about that.
if (this.logBytes < log.total) {
// size is in bytes, we need to calculate KiB
2018-03-17 18:26:18 +05:30
const size = numberToHumanSize(this.logBytes);
2017-08-17 22:00:37 +05:30
$('.js-truncated-info-size').html(`${size}`);
this.$truncatedInfo.removeClass('hidden');
} else {
this.$truncatedInfo.addClass('hidden');
}
2018-03-17 18:26:18 +05:30
this.isLogComplete = log.complete;
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
if (log.complete === false) {
this.timeout = setTimeout(() => {
2017-09-10 17:25:29 +05:30
this.getBuildTrace();
2017-08-17 22:00:37 +05:30
}, 4000);
} else {
this.$buildRefreshAnimation.remove();
2017-09-10 17:25:29 +05:30
this.toggleScrollAnimation(false);
2017-08-17 22:00:37 +05:30
}
if (log.status !== this.buildStatus) {
2018-03-17 18:26:18 +05:30
visitUrl(this.pagePath);
2016-09-13 17:45:13 +05:30
}
2017-09-10 17:25:29 +05:30
})
2018-03-17 18:26:18 +05:30
.catch(() => {
2017-08-17 22:00:37 +05:30
this.$buildRefreshAnimation.remove();
2017-09-10 17:25:29 +05:30
})
.then(() => {
2018-03-17 18:26:18 +05:30
if (this.isScrollInBottom) {
2017-09-10 17:25:29 +05:30
this.scrollDown();
}
})
.then(() => this.toggleScroll());
2018-03-17 18:26:18 +05:30
}
// eslint-disable-next-line class-methods-use-this
shouldHideSidebarForViewport() {
2017-09-10 17:25:29 +05:30
const bootstrapBreakpoint = bp.getBreakpointSize();
2017-08-17 22:00:37 +05:30
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
toggleSidebar(shouldHide) {
2017-08-17 22:00:37 +05:30
const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
2017-09-10 17:25:29 +05:30
const $toggleButton = $('.js-sidebar-build-toggle-header');
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
this.$sidebar
.toggleClass('right-sidebar-expanded', shouldShow)
2017-08-17 22:00:37 +05:30
.toggleClass('right-sidebar-collapsed', shouldHide);
2017-09-10 17:25:29 +05:30
this.$topBar
.toggleClass('sidebar-expanded', shouldShow)
.toggleClass('sidebar-collapsed', shouldHide);
if (this.$sidebar.hasClass('right-sidebar-expanded')) {
$toggleButton.addClass('hidden');
} else {
$toggleButton.removeClass('hidden');
}
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
sidebarOnResize() {
2017-08-17 22:00:37 +05:30
this.toggleSidebar(this.shouldHideSidebarForViewport());
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
sidebarOnClick() {
2017-08-17 22:00:37 +05:30
if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
2018-03-17 18:26:18 +05:30
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
// eslint-disable-next-line class-methods-use-this
populateJobs(stage) {
2017-08-17 22:00:37 +05:30
$('.build-job').hide();
$(`.build-job[data-stage="${stage}"]`).show();
2018-03-17 18:26:18 +05:30
}
// eslint-disable-next-line class-methods-use-this
updateStageDropdownText(stage) {
2017-08-17 22:00:37 +05:30
$('.stage-selection').text(stage);
2018-03-17 18:26:18 +05:30
}
2016-09-13 17:45:13 +05:30
2018-03-17 18:26:18 +05:30
updateDropdown(e) {
2017-08-17 22:00:37 +05:30
e.preventDefault();
const stage = e.currentTarget.text;
this.updateStageDropdownText(stage);
this.populateJobs(stage);
2018-03-17 18:26:18 +05:30
}
}