285 lines
8.2 KiB
JavaScript
285 lines
8.2 KiB
JavaScript
import _ from 'underscore';
|
|
import bp from './breakpoints';
|
|
import { bytesToKiB } 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.options = options || $('.js-build-options').data();
|
|
|
|
this.pageUrl = this.options.pageUrl;
|
|
this.buildStatus = this.options.buildStatus;
|
|
this.state = this.options.logState;
|
|
this.buildStage = this.options.buildStage;
|
|
this.$document = $(document);
|
|
this.logBytes = 0;
|
|
this.hasBeenScrolled = false;
|
|
this.updateDropdown = this.updateDropdown.bind(this);
|
|
|
|
this.$buildTrace = $('#build-trace');
|
|
this.$buildRefreshAnimation = $('.js-build-refresh');
|
|
this.$truncatedInfo = $('.js-truncated-info');
|
|
this.$buildTraceOutput = $('.js-build-output');
|
|
this.$topBar = $('.js-top-bar');
|
|
|
|
// Scroll controllers
|
|
this.$scrollTopBtn = $('.js-scroll-up');
|
|
this.$scrollBottomBtn = $('.js-scroll-down');
|
|
|
|
clearTimeout(this.timeout);
|
|
|
|
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);
|
|
|
|
// 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);
|
|
|
|
$(window)
|
|
.off('scroll')
|
|
.on('scroll', () => {
|
|
const contentHeight = this.$buildTraceOutput.height();
|
|
if (contentHeight > this.windowSize) {
|
|
// means the user did not scroll, the content was updated.
|
|
this.windowSize = contentHeight;
|
|
} else {
|
|
// User scrolled
|
|
this.hasBeenScrolled = true;
|
|
this.toggleScrollAnimation(false);
|
|
}
|
|
|
|
this.scrollThrottled();
|
|
});
|
|
|
|
$(window)
|
|
.off('resize.build')
|
|
.on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
|
|
|
|
this.updateArtifactRemoveDate();
|
|
this.initAffixTopArea();
|
|
|
|
this.getBuildTrace();
|
|
}
|
|
|
|
initAffixTopArea() {
|
|
/**
|
|
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,
|
|
},
|
|
});
|
|
}
|
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
canScroll() {
|
|
return $(document).height() > $(window).height();
|
|
}
|
|
|
|
toggleScroll() {
|
|
const currentPosition = $(document).scrollTop();
|
|
const scrollHeight = $(document).height();
|
|
|
|
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) {
|
|
// User is at Top of Log
|
|
|
|
this.toggleDisableButton(this.$scrollTopBtn, true);
|
|
this.toggleDisableButton(this.$scrollBottomBtn, false);
|
|
} else if (scrollHeight - currentPosition === windowHeight) {
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
scrollDown() {
|
|
$(document).scrollTop($(document).height());
|
|
}
|
|
|
|
scrollToBottom() {
|
|
this.scrollDown();
|
|
this.hasBeenScrolled = true;
|
|
this.toggleScroll();
|
|
}
|
|
|
|
scrollToTop() {
|
|
$(document).scrollTop(0);
|
|
this.hasBeenScrolled = true;
|
|
this.toggleScroll();
|
|
}
|
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
toggleDisableButton($button, disable) {
|
|
if (disable && $button.prop('disabled')) return;
|
|
$button.prop('disabled', disable);
|
|
}
|
|
|
|
toggleScrollAnimation(toggle) {
|
|
this.$scrollBottomBtn.toggleClass('animate', toggle);
|
|
}
|
|
|
|
initSidebar() {
|
|
this.$sidebar = $('.js-build-sidebar');
|
|
}
|
|
|
|
getBuildTrace() {
|
|
return $.ajax({
|
|
url: `${this.pageUrl}/trace.json`,
|
|
data: { state: this.state },
|
|
})
|
|
.done((log) => {
|
|
setCiStatusFavicon(`${this.pageUrl}/status.json`);
|
|
|
|
if (log.state) {
|
|
this.state = log.state;
|
|
}
|
|
|
|
this.windowSize = this.$buildTraceOutput.height();
|
|
|
|
if (log.append) {
|
|
this.$buildTraceOutput.append(log.html);
|
|
this.logBytes += log.size;
|
|
} else {
|
|
this.$buildTraceOutput.html(log.html);
|
|
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
|
|
const size = bytesToKiB(this.logBytes);
|
|
$('.js-truncated-info-size').html(`${size}`);
|
|
this.$truncatedInfo.removeClass('hidden');
|
|
} else {
|
|
this.$truncatedInfo.addClass('hidden');
|
|
}
|
|
|
|
if (!log.complete) {
|
|
if (!this.hasBeenScrolled) {
|
|
this.toggleScrollAnimation(true);
|
|
} else {
|
|
this.toggleScrollAnimation(false);
|
|
}
|
|
|
|
this.timeout = setTimeout(() => {
|
|
this.getBuildTrace();
|
|
}, 4000);
|
|
} else {
|
|
this.$buildRefreshAnimation.remove();
|
|
this.toggleScrollAnimation(false);
|
|
}
|
|
|
|
if (log.status !== this.buildStatus) {
|
|
gl.utils.visitUrl(this.pageUrl);
|
|
}
|
|
})
|
|
.fail(() => {
|
|
this.$buildRefreshAnimation.remove();
|
|
})
|
|
.then(() => {
|
|
if (!this.hasBeenScrolled) {
|
|
this.scrollDown();
|
|
}
|
|
})
|
|
.then(() => this.toggleScroll());
|
|
}
|
|
// eslint-disable-next-line class-methods-use-this
|
|
shouldHideSidebarForViewport() {
|
|
const bootstrapBreakpoint = bp.getBreakpointSize();
|
|
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
|
|
}
|
|
|
|
toggleSidebar(shouldHide) {
|
|
const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
|
|
const $toggleButton = $('.js-sidebar-build-toggle-header');
|
|
|
|
this.$sidebar
|
|
.toggleClass('right-sidebar-expanded', shouldShow)
|
|
.toggleClass('right-sidebar-collapsed', shouldHide);
|
|
|
|
this.$topBar
|
|
.toggleClass('sidebar-expanded', shouldShow)
|
|
.toggleClass('sidebar-collapsed', shouldHide);
|
|
|
|
if (this.$sidebar.hasClass('right-sidebar-expanded')) {
|
|
$toggleButton.addClass('hidden');
|
|
} else {
|
|
$toggleButton.removeClass('hidden');
|
|
}
|
|
}
|
|
|
|
sidebarOnResize() {
|
|
this.toggleSidebar(this.shouldHideSidebarForViewport());
|
|
}
|
|
|
|
sidebarOnClick() {
|
|
if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
|
|
}
|
|
// eslint-disable-next-line class-methods-use-this, consistent-return
|
|
updateArtifactRemoveDate() {
|
|
const $date = $('.js-artifacts-remove');
|
|
if ($date.length) {
|
|
const date = $date.text();
|
|
return $date.text(
|
|
gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
|
|
);
|
|
}
|
|
}
|
|
// eslint-disable-next-line class-methods-use-this
|
|
populateJobs(stage) {
|
|
$('.build-job').hide();
|
|
$(`.build-job[data-stage="${stage}"]`).show();
|
|
}
|
|
// eslint-disable-next-line class-methods-use-this
|
|
updateStageDropdownText(stage) {
|
|
$('.stage-selection').text(stage);
|
|
}
|
|
|
|
updateDropdown(e) {
|
|
e.preventDefault();
|
|
const stage = e.currentTarget.text;
|
|
this.updateStageDropdownText(stage);
|
|
this.populateJobs(stage);
|
|
}
|
|
}
|