diff options
-rw-r--r-- | app/assets/javascripts/build.js | 170 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/builds.scss | 37 | ||||
-rw-r--r-- | app/views/projects/builds/show.html.haml | 2 |
3 files changed, 135 insertions, 74 deletions
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js index ece9af5c455..d3187e34e8d 100644 --- a/app/assets/javascripts/build.js +++ b/app/assets/javascripts/build.js @@ -1,23 +1,23 @@ /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-param-reassign, quotes, yoda, no-else-return, consistent-return, comma-dangle, object-shorthand, prefer-template, one-var, one-var-declaration-per-line, no-unused-vars, max-len, vars-on-top */ /* global Breakpoints */ - -(function() { +$(() => { var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; }; var AUTO_SCROLL_OFFSET = 75; var DOWN_BUILD_TRACE = '#down-build-trace'; - this.Build = (function() { + window.Build = (function() { Build.timeout = null; Build.state = null; function Build(options) { - options = options || $('.js-build-options').data(); - this.pageUrl = options.pageUrl; - this.buildUrl = options.buildUrl; - this.buildStatus = options.buildStatus; - this.state = options.logState; - this.buildStage = options.buildStage; + this.options = options || $('.js-build-options').data(); + + this.pageUrl = this.options.pageUrl; + this.buildUrl = this.options.buildUrl; + this.buildStatus = this.options.buildStatus; + this.state = this.options.logState; + this.buildStage = this.options.buildStage; this.updateDropdown = bind(this.updateDropdown, this); this.$document = $(document); this.$body = $('body'); @@ -37,21 +37,32 @@ this.initSidebar(); this.$buildScroll = $('#js-build-scroll'); + this.$truncatedInfo = $('.js-truncated-info'); 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); + 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); + this.$document.on('scroll', this.initScrollMonitor.bind(this)); - $(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this)); - $('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace); + + $(window) + .off('resize.build') + .on('resize.build', this.sidebarOnResize.bind(this)); + + $('a', this.$buildScroll) + .off('click.stepTrace') + .on('click.stepTrace', this.stepTrace); + this.updateArtifactRemoveDate(); - if ($('#build-trace').length) { - this.getInitialBuildTrace(); - this.initScrollButtonAffix(); - } + this.initScrollButtonAffix(); this.invokeBuildTrace(); } @@ -66,69 +77,59 @@ }; Build.prototype.invokeBuildTrace = function() { - var continueRefreshStatuses = ['running', 'pending']; - // Continue to update build trace when build is running or pending - if (continueRefreshStatuses.indexOf(this.buildStatus) !== -1) { - // Check for new build output if user still watching build page - // Only valid for runnig build when output changes during time - Build.timeout = setTimeout((function(_this) { - return function() { - if (_this.location() === _this.pageUrl) { - return _this.getBuildTrace(); - } - }; - })(this), 4000); + if (this.location() === this.pageUrl) { + return this.getBuildTrace(); } }; - Build.prototype.getInitialBuildTrace = function() { - var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped']; - + Build.prototype.getBuildTrace = function() { return $.ajax({ - url: this.pageUrl + "/trace.json", + url: this.pageUrl + '/trace.json', dataType: 'json', - success: function(buildData) { - $('.js-build-output').html(buildData.html); - if (window.location.hash === DOWN_BUILD_TRACE) { - $("html,body").scrollTop(this.$buildTrace.height()); + data: { + state: this.state + }, + success: ((log) => { + const $buildContainer = $('.js-build-output'); + + if (log.state) { + this.state = log.state; } - if (removeRefreshStatuses.indexOf(buildData.status) !== -1) { - this.$buildRefreshAnimation.remove(); - return this.initScrollMonitor(); + + if (log.append) { + $buildContainer.append(log.html); + } else { + $buildContainer.html(log.html); } - }.bind(this) - }); - }; - Build.prototype.getBuildTrace = function() { - return $.ajax({ - url: this.pageUrl + "/trace.json?state=" + (encodeURIComponent(this.state)), - dataType: "json", - success: (function(_this) { - return function(log) { - var pageUrl; - - if (log.state) { - _this.state = log.state; - } - _this.invokeBuildTrace(); - if (log.status === "running") { - if (log.append) { - $('.js-build-output').append(log.html); - } else { - $('.js-build-output').html(log.html); - } - return _this.checkAutoscroll(); - } else if (log.status !== _this.buildStatus) { - pageUrl = _this.pageUrl; - if (_this.$autoScrollStatus.data('state') === 'enabled') { - pageUrl += DOWN_BUILD_TRACE; - } - - return gl.utils.visitUrl(pageUrl); + this.$truncatedInfo.toggleClass('hidden', !log.truncated); + + if (log.status !== this.buildStatus) { + let pageUrl = this.pageUrl; + + if (this.$autoScrollStatus.data('state') === 'enabled') { + pageUrl += DOWN_BUILD_TRACE; } - }; - })(this) + + return gl.utils.visitUrl(pageUrl); + } else { + this.checkAutoscroll(); + } + + if (!log.complete) { + Build.timeout = setTimeout(() => { + this.invokeBuildTrace(); + }, 4000); + } else { + this.$buildRefreshAnimation.remove(); + } + + return this.initScrollMonitor(); + }), + error: () => { + this.$buildRefreshAnimation.remove(); + return this.initScrollMonitor(); + } }); }; @@ -168,10 +169,12 @@ // - Show Bottom Arrow button // - Disable Autoscroll and hide indicator (when build is running) Build.prototype.initScrollMonitor = function() { - if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) { + if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && + !gl.utils.isInViewport(this.$downBuildTrace.get(0))) { // User is somewhere in middle of Build Log this.$scrollTopBtn.show(); + this.fixTruncatedInfo(); if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed this.$scrollBottomBtn.show(); @@ -189,11 +192,13 @@ this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show(); this.$autoScrollStatusText.addClass('animate'); } - } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) { + } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && + !gl.utils.isInViewport(this.$downBuildTrace.get(0))) { // User is at Top of Build Log this.$scrollTopBtn.hide(); this.$scrollBottomBtn.show(); + this.unFixTruncatedInfo(); this.$autoScrollContainer.hide(); this.$autoScrollStatusText.removeClass('animate'); @@ -203,6 +208,7 @@ this.$scrollTopBtn.show(); this.$scrollBottomBtn.hide(); + this.fixTruncatedInfo(); // Show and Reposition Autoscroll Status Indicator this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show(); @@ -212,6 +218,7 @@ this.$scrollTopBtn.hide(); this.$scrollBottomBtn.hide(); + this.unFixTruncatedInfo(); // Hide Autoscroll Status Indicator this.$autoScrollContainer.hide(); @@ -234,6 +241,8 @@ var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined; this.$buildScroll.toggleClass('sidebar-expanded', shouldShow) .toggleClass('sidebar-collapsed', shouldHide); + this.$truncatedInfo.toggleClass('sidebar-expanded', shouldShow) + .toggleClass('sidebar-collapsed', shouldHide); this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow) .toggleClass('right-sidebar-collapsed', shouldHide); }; @@ -280,6 +289,19 @@ }); }; + Build.prototype.fixTruncatedInfo = () => { + $('.js-truncated-info') + .removeClass('truncated-info-absolute') + .addClass('truncated-info-fixed'); + }; + + Build.prototype.unFixTruncatedInfo = () => { + $('.js-truncated-info') + .removeClass('truncated-info-fixed') + .addClass('truncated-info-absolute'); + }; + return Build; })(); -}).call(window); + +}); diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index a24292a7c8c..c1200a2fd67 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -57,6 +57,42 @@ margin-right: 5px; } } + + .truncated-info { + text-align: center; + border-bottom: 1px solid; + background: rgba(0, 0, 0, 0.75); + + p { + margin: 0; + } + + // with sidebar + &-fixed.sidebar-expanded { + position: fixed; + top: 0; + right: 312px; + left: 22px; + } + + // without sidebar + &-fixed.sidebar-collapsed { + position: fixed; + top: 0; + margin: 0; + right: 20px; + left: 20px; + } + + &-absolute { + position: absolute; + top: 0; + margin: 0 auto; + right: 5px; + left: 5px; + } + } + } .scroll-controls { @@ -186,6 +222,7 @@ white-space: pre; overflow-x: auto; font-size: 12px; + position: relative; .fa-refresh { font-size: 24px; diff --git a/app/views/projects/builds/show.html.haml b/app/views/projects/builds/show.html.haml index 307010edb58..3724a80d4d5 100644 --- a/app/views/projects/builds/show.html.haml +++ b/app/views/projects/builds/show.html.haml @@ -71,6 +71,8 @@ = custom_icon('scroll_down_hover_active') #up-build-trace %pre.build-trace#build-trace + .js-truncated-info.truncated-info.hidden + %p Showing last 50 Kb of log %code.bash.js-build-output .build-loader-animation.js-build-refresh |