BigW Consortium Gitlab

build.js 8.58 KB
Newer Older
1 2
/* eslint-disable func-names, wrap-iife, no-use-before-define,
consistent-return, prefer-rest-params */
3 4
/* global Breakpoints */

Filipa Lacerda committed
5
import _ from 'underscore';
6 7
import { bytesToKiB } from './lib/utils/number_utils';

8
window.Build = (function () {
9 10 11 12
  Build.timeout = null;
  Build.state = null;

  function Build(options) {
13 14 15 16 17 18
    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;
19
    this.$document = $(document);
20
    this.logBytes = 0;
21
    this.hasBeenScrolled = false;
22

Filipa Lacerda committed
23 24
    this.updateDropdown = this.updateDropdown.bind(this);
    this.getBuildTrace = this.getBuildTrace.bind(this);
25

26 27
    this.$buildTrace = $('#build-trace');
    this.$buildRefreshAnimation = $('.js-build-refresh');
28
    this.$truncatedInfo = $('.js-truncated-info');
Filipa Lacerda committed
29
    this.$buildTraceOutput = $('.js-build-output');
30
    this.$topBar = $('.js-top-bar');
Filipa Lacerda committed
31 32 33 34

    // Scroll controllers
    this.$scrollTopBtn = $('.js-scroll-up');
    this.$scrollBottomBtn = $('.js-scroll-down');
35 36 37 38 39 40 41 42 43 44

    clearTimeout(Build.timeout);
    // Init breakpoint checker
    this.bp = Breakpoints.get();

    this.initSidebar();
    this.populateJobs(this.buildStage);
    this.updateStageDropdownText(this.buildStage);
    this.sidebarOnResize();

45 46 47 48 49 50 51 52
    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);

Filipa Lacerda committed
53 54 55 56 57 58 59 60
    // 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));
61

62
    this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
63

64
    $(window)
65 66
      .off('scroll')
      .on('scroll', () => {
67 68 69 70 71 72 73 74 75 76 77
        const contentHeight = this.$buildTraceOutput.prop('scrollHeight');
        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();
78 79
      });

80 81
    $(window)
      .off('resize.build')
82
      .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
83

84
    this.updateArtifactRemoveDate();
85
    this.initAffixTopArea();
Filipa Lacerda committed
86

87
    this.getBuildTrace();
88 89
  }

90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
  Build.prototype.initAffixTopArea = function () {
    /**
      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,
      },
    });
  };

Filipa Lacerda committed
107
  Build.prototype.canScroll = function () {
108
    return document.body.scrollHeight > window.innerHeight;
Filipa Lacerda committed
109 110 111
  };

  Build.prototype.toggleScroll = function () {
112 113
    const currentPosition = document.body.scrollTop;
    const windowHeight = window.innerHeight;
Filipa Lacerda committed
114 115

    if (this.canScroll()) {
116 117 118 119 120 121 122 123 124
      if (currentPosition > 0 &&
        (document.body.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 Build Log

Filipa Lacerda committed
125 126
        this.toggleDisableButton(this.$scrollTopBtn, true);
        this.toggleDisableButton(this.$scrollBottomBtn, false);
127 128 129
      } else if (document.body.scrollHeight - currentPosition === windowHeight) {
        // User is at the bottom of the build log.

Filipa Lacerda committed
130 131 132
        this.toggleDisableButton(this.$scrollTopBtn, false);
        this.toggleDisableButton(this.$scrollBottomBtn, true);
      }
133 134 135
    } else {
      this.toggleDisableButton(this.$scrollTopBtn, true);
      this.toggleDisableButton(this.$scrollBottomBtn, true);
Filipa Lacerda committed
136 137 138
    }
  };

139 140 141 142 143 144
  Build.prototype.scrollDown = function () {
    document.body.scrollTop = document.body.scrollHeight;
  };

  Build.prototype.scrollToBottom = function () {
    this.scrollDown();
145
    this.hasBeenScrolled = true;
Filipa Lacerda committed
146 147 148
    this.toggleScroll();
  };

149 150
  Build.prototype.scrollToTop = function () {
    document.body.scrollTop = 0;
151
    this.hasBeenScrolled = true;
Filipa Lacerda committed
152 153 154 155 156 157 158 159 160 161 162 163
    this.toggleScroll();
  };

  Build.prototype.toggleDisableButton = function ($button, disable) {
    if (disable && $button.prop('disabled')) return;
    $button.prop('disabled', disable);
  };

  Build.prototype.toggleScrollAnimation = function (toggle) {
    this.$scrollBottomBtn.toggleClass('animate', toggle);
  };

164
  Build.prototype.initSidebar = function () {
165 166 167 168
    this.$sidebar = $('.js-build-sidebar');
    this.$sidebar.niceScroll();
  };

169
  Build.prototype.getBuildTrace = function () {
170
    return $.ajax({
171
      url: `${this.pageUrl}/trace.json`,
Filipa Lacerda committed
172 173 174
      data: this.state,
    })
      .done((log) => {
175
        gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`);
176

177 178
        if (log.state) {
          this.state = log.state;
179
        }
180

181 182
        this.windowSize = this.$buildTraceOutput.prop('scrollHeight');

183
        if (log.append) {
Filipa Lacerda committed
184
          this.$buildTraceOutput.append(log.html);
185
          this.logBytes += log.size;
186
        } else {
Filipa Lacerda committed
187
          this.$buildTraceOutput.html(log.html);
188 189 190 191 192 193 194 195 196 197 198 199
          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');
200 201 202
        }

        if (!log.complete) {
203 204 205 206 207
          if (!this.hasBeenScrolled) {
            this.toggleScrollAnimation(true);
          } else {
            this.toggleScrollAnimation(false);
          }
Filipa Lacerda committed
208

209
          Build.timeout = setTimeout(() => {
210
            this.getBuildTrace();
211 212
          }, 4000);
        } else {
213
          this.$buildRefreshAnimation.remove();
Filipa Lacerda committed
214
          this.toggleScrollAnimation(false);
215 216
        }

217
        if (log.status !== this.buildStatus) {
Filipa Lacerda committed
218
          gl.utils.visitUrl(this.pageUrl);
219
        }
Filipa Lacerda committed
220 221
      })
      .fail(() => {
222
        this.$buildRefreshAnimation.remove();
223 224 225 226 227 228 229
      })
      .then(() => {
        if (!this.hasBeenScrolled) {
          this.scrollDown();
        }
      })
      .then(() => this.toggleScroll());
230 231
  };

232 233
  Build.prototype.shouldHideSidebarForViewport = function () {
    const bootstrapBreakpoint = this.bp.getBreakpointSize();
234 235 236
    return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
  };

237
  Build.prototype.toggleSidebar = function (shouldHide) {
238
    const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
239
    const $toggleButton = $('.js-sidebar-build-toggle-header');
240

Filipa Lacerda committed
241 242
    this.$sidebar
      .toggleClass('right-sidebar-expanded', shouldShow)
243
      .toggleClass('right-sidebar-collapsed', shouldHide);
244

245
    this.$topBar
246 247 248 249 250 251 252 253
      .toggleClass('sidebar-expanded', shouldShow)
      .toggleClass('sidebar-collapsed', shouldHide);

    if (this.$sidebar.hasClass('right-sidebar-expanded')) {
      $toggleButton.addClass('hidden');
    } else {
      $toggleButton.removeClass('hidden');
    }
254 255
  };

256
  Build.prototype.sidebarOnResize = function () {
257 258 259
    this.toggleSidebar(this.shouldHideSidebarForViewport());
  };

260
  Build.prototype.sidebarOnClick = function () {
261 262 263
    if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
  };

264 265
  Build.prototype.updateArtifactRemoveDate = function () {
    const $date = $('.js-artifacts-remove');
266
    if ($date.length) {
267 268 269 270
      const date = $date.text();
      return $date.text(
        gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
      );
271 272 273
    }
  };

274
  Build.prototype.populateJobs = function (stage) {
275
    $('.build-job').hide();
276
    $(`.build-job[data-stage="${stage}"]`).show();
277 278
  };

279
  Build.prototype.updateStageDropdownText = function (stage) {
280 281 282
    $('.stage-selection').text(stage);
  };

283
  Build.prototype.updateDropdown = function (e) {
284
    e.preventDefault();
285
    const stage = e.currentTarget.text;
286 287 288 289 290 291
    this.updateStageDropdownText(stage);
    this.populateJobs(stage);
  };

  return Build;
})();