Merge remote-tracking branch 'upstream/master' into 27377-preload-pipeline-entity27377-preload-pipeline-entity

* upstream/master: (2534 commits)
  Update VERSION to 9.3.0-pre
  Update CHANGELOG.md for 9.2.0
  removes unnecessary redundacy in usage ping doc
  Respect the typo as rubocop said
  Add a test to ensure this works on MySQL
  Change pipelines schedules help page path
  change domain to hostname in usage ping doc
  Fixes broken MySQL migration for retried
  Show password field mask while editing service settings
  Add notes for supported schedulers and cloud providers
  Move environment monitoring to environments doc
  Add docs for change of Cache/Artifact restore order"
  Avoid resource intensive login checks if password is not provided
  Change translation for 'coding' by 'desarrollo' for Spanish
  Add to docs: issues multiple assignees
  rename "Add emoji" and "Award emoji" to "Add reaction" where appropriate
  Add project and group notification settings info
  32570 Fix border-bottom for project activity tab
  Add users endpoint to frontend API class
  Rename users on mysql
  ...

1 files changed, 160 insertions, 119 deletions

diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 6efd26ccc37..97f279e4be4 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -1,24 +1,31 @@
-/* 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 */
+/* eslint-disable func-names, wrap-iife, no-use-before-define,
+consistent-return, prefer-rest-params */
 /* global Breakpoints */
 
-var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-var AUTO_SCROLL_OFFSET = 75;
-var DOWN_BUILD_TRACE = '#down-build-trace';
+import { bytesToKiB } from './lib/utils/number_utils';
 
-window.Build = (function() {
+const bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
+const AUTO_SCROLL_OFFSET = 75;
+const DOWN_BUILD_TRACE = '#down-build-trace';
+
+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.updateDropdown = bind(this.updateDropdown, this);
+    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.$document = $(document);
+    this.logBytes = 0;
+
+    this.updateDropdown = bind(this.updateDropdown, this);
+
     this.$body = $('body');
     this.$buildTrace = $('#build-trace');
     this.$autoScrollContainer = $('.autoscroll-container');
@@ -29,111 +36,119 @@ window.Build = (function() {
     this.$scrollTopBtn = $('#scroll-top');
     this.$scrollBottomBtn = $('#scroll-bottom');
     this.$buildRefreshAnimation = $('.js-build-refresh');
+    this.$buildScroll = $('#js-build-scroll');
+    this.$truncatedInfo = $('.js-truncated-info');
 
     clearTimeout(Build.timeout);
     // Init breakpoint checker
     this.bp = Breakpoints.get();
 
     this.initSidebar();
-    this.$buildScroll = $('#js-build-scroll');
-
     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();
   }
 
-  Build.prototype.initSidebar = function() {
+  Build.prototype.initSidebar = function () {
     this.$sidebar = $('.js-build-sidebar');
     this.$sidebar.niceScroll();
-    this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
-  };
-
-  Build.prototype.location = function() {
-    return window.location.href.split("#")[0];
+    this.$document
+      .off('click', '.js-sidebar-build-toggle')
+      .on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
   };
 
-  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);
-    }
+  Build.prototype.invokeBuildTrace = function () {
+    return this.getBuildTrace();
   };
 
-  Build.prototype.getInitialBuildTrace = function() {
-    var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped'];
-
+  Build.prototype.getBuildTrace = function () {
     return $.ajax({
-      url: this.buildUrl,
+      url: `${this.pageUrl}/trace.json`,
       dataType: 'json',
-      success: function(buildData) {
-        $('.js-build-output').html(buildData.trace_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');
+
+        gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`);
+
+        if (log.state) {
+          this.state = log.state;
+        }
+
+        if (log.append) {
+          $buildContainer.append(log.html);
+          this.logBytes += log.size;
+        } else {
+          $buildContainer.html(log.html);
+          this.logBytes = log.size;
         }
-        if (removeRefreshStatuses.indexOf(buildData.status) !== -1) {
+
+        // 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');
+          this.initAffixTruncatedInfo();
+        } else {
+          this.$truncatedInfo.addClass('hidden');
+        }
+
+        this.checkAutoscroll();
+
+        if (!log.complete) {
+          Build.timeout = setTimeout(() => {
+            this.invokeBuildTrace();
+          }, 4000);
+        } else {
           this.$buildRefreshAnimation.remove();
-          return this.initScrollMonitor();
         }
-      }.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);
+        if (log.status !== this.buildStatus) {
+          let pageUrl = this.pageUrl;
+
+          if (this.$autoScrollStatus.data('state') === 'enabled') {
+            pageUrl += DOWN_BUILD_TRACE;
           }
-        };
-      })(this)
+
+          gl.utils.visitUrl(pageUrl);
+        }
+      }),
+      error: () => {
+        this.$buildRefreshAnimation.remove();
+        return this.initScrollMonitor();
+      },
     });
   };
 
-  Build.prototype.checkAutoscroll = function() {
-    if (this.$autoScrollStatus.data("state") === "enabled") {
-      return $("html,body").scrollTop(this.$buildTrace.height());
+  Build.prototype.checkAutoscroll = function () {
+    if (this.$autoScrollStatus.data('state') === 'enabled') {
+      return $('html,body').scrollTop(this.$buildTrace.height());
     }
 
     // Handle a situation where user started new build
@@ -145,7 +160,7 @@ window.Build = (function() {
     }
   };
 
-  Build.prototype.initScrollButtonAffix = function() {
+  Build.prototype.initScrollButtonAffix = function () {
     // Hide everything initially
     this.$scrollTopBtn.hide();
     this.$scrollBottomBtn.hide();
@@ -166,15 +181,17 @@ window.Build = (function() {
   //      - Show Top Arrow button
   //      - 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))) {
+  Build.prototype.initScrollMonitor = function () {
+    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();
 
       if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
         this.$scrollBottomBtn.show();
-      } else if (this.$buildRefreshAnimation.is(':visible') && !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
+      } else if (this.$buildRefreshAnimation.is(':visible') &&
+        !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
         this.$scrollBottomBtn.show();
       } else {
         this.$scrollBottomBtn.hide();
@@ -185,10 +202,13 @@ window.Build = (function() {
         this.$autoScrollContainer.hide();
         this.$autoScrollStatusText.removeClass('animate');
       } else {
-        this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+        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();
@@ -196,17 +216,22 @@ window.Build = (function() {
 
       this.$autoScrollContainer.hide();
       this.$autoScrollStatusText.removeClass('animate');
-    } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
-               (this.$buildRefreshAnimation.is(':visible') && gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
+    } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
+      gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
+      (this.$buildRefreshAnimation.is(':visible') &&
+      gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
       // User is at Bottom of Build Log
 
       this.$scrollTopBtn.show();
       this.$scrollBottomBtn.hide();
 
       // Show and Reposition Autoscroll Status Indicator
-      this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+      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))) {
       // Build Log height is small
 
       this.$scrollTopBtn.hide();
@@ -217,65 +242,81 @@ window.Build = (function() {
       this.$autoScrollStatusText.removeClass('animate');
     }
 
-    if (this.buildStatus === "running" || this.buildStatus === "pending") {
+    if (this.buildStatus === 'running' || this.buildStatus === 'pending') {
       // Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
-      this.$autoScrollStatus.data("state", gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled');
+      this.$autoScrollStatus.data(
+        'state',
+        gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled',
+      );
     }
   };
 
-  Build.prototype.shouldHideSidebarForViewport = function() {
-    var bootstrapBreakpoint;
-    bootstrapBreakpoint = this.bp.getBreakpointSize();
+  Build.prototype.shouldHideSidebarForViewport = function () {
+    const bootstrapBreakpoint = this.bp.getBreakpointSize();
     return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
   };
 
-  Build.prototype.toggleSidebar = function(shouldHide) {
-    var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+  Build.prototype.toggleSidebar = function (shouldHide) {
+    const 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);
   };
 
-  Build.prototype.sidebarOnResize = function() {
+  Build.prototype.sidebarOnResize = function () {
     this.toggleSidebar(this.shouldHideSidebarForViewport());
   };
 
-  Build.prototype.sidebarOnClick = function() {
+  Build.prototype.sidebarOnClick = function () {
     if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
   };
 
-  Build.prototype.updateArtifactRemoveDate = function() {
-    var $date, date;
-    $date = $('.js-artifacts-remove');
+  Build.prototype.updateArtifactRemoveDate = function () {
+    const $date = $('.js-artifacts-remove');
     if ($date.length) {
-      date = $date.text();
-      return $date.text(gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '));
+      const date = $date.text();
+      return $date.text(
+        gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
+      );
     }
   };
 
-  Build.prototype.populateJobs = function(stage) {
+  Build.prototype.populateJobs = function (stage) {
     $('.build-job').hide();
-    $('.build-job[data-stage="' + stage + '"]').show();
+    $(`.build-job[data-stage="${stage}"]`).show();
   };
 
-  Build.prototype.updateStageDropdownText = function(stage) {
+  Build.prototype.updateStageDropdownText = function (stage) {
     $('.stage-selection').text(stage);
   };
 
-  Build.prototype.updateDropdown = function(e) {
+  Build.prototype.updateDropdown = function (e) {
     e.preventDefault();
-    var stage = e.currentTarget.text;
+    const stage = e.currentTarget.text;
     this.updateStageDropdownText(stage);
     this.populateJobs(stage);
   };
 
-  Build.prototype.stepTrace = function(e) {
-    var $currentTarget;
+  Build.prototype.stepTrace = function (e) {
     e.preventDefault();
-    $currentTarget = $(e.currentTarget);
+
+    const $currentTarget = $(e.currentTarget);
     $.scrollTo($currentTarget.attr('href'), {
-      offset: 0
+      offset: 0,
+    });
+  };
+
+  Build.prototype.initAffixTruncatedInfo = function () {
+    const offsetTop = this.$buildTrace.offset().top;
+
+    this.$truncatedInfo.affix({
+      offset: {
+        top: offsetTop,
+      },
     });
   };