BigW Consortium Gitlab

cycle_analytics_bundle.js 4.45 KB
Newer Older
1 2
/* global Flash */

3
import Vue from 'vue';
4
import Cookies from 'js-cookie';
5
import Translate from '../vue_shared/translate';
6
import LimitWarningComponent from './components/limit_warning_component';
7 8 9 10 11 12 13 14 15 16
import './components/stage_code_component';
import './components/stage_issue_component';
import './components/stage_plan_component';
import './components/stage_production_component';
import './components/stage_review_component';
import './components/stage_staging_component';
import './components/stage_test_component';
import './components/total_time_component';
import './cycle_analytics_service';
import './cycle_analytics_store';
17

18 19
Vue.use(Translate);

20
$(() => {
21
  const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
22 23 24
  const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
  const cycleAnalyticsStore = gl.cycleAnalytics.CycleAnalyticsStore;
  const cycleAnalyticsService = new gl.cycleAnalytics.CycleAnalyticsService({
25 26
    requestPath: cycleAnalyticsEl.dataset.requestPath,
  });
27 28 29 30

  gl.cycleAnalyticsApp = new Vue({
    el: '#cycle-analytics',
    name: 'CycleAnalytics',
31 32 33 34 35
    data: {
      state: cycleAnalyticsStore.state,
      isLoading: false,
      isLoadingStage: false,
      isEmptyStage: false,
36
      hasError: false,
37 38 39 40 41 42 43 44 45 46 47
      startDate: 30,
      isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
    },
    computed: {
      currentStage() {
        return cycleAnalyticsStore.currentActiveStage();
      },
    },
    components: {
      'stage-issue-component': gl.cycleAnalytics.StageIssueComponent,
      'stage-plan-component': gl.cycleAnalytics.StagePlanComponent,
48
      'stage-code-component': gl.cycleAnalytics.StageCodeComponent,
49 50 51 52 53
      'stage-test-component': gl.cycleAnalytics.StageTestComponent,
      'stage-review-component': gl.cycleAnalytics.StageReviewComponent,
      'stage-staging-component': gl.cycleAnalytics.StageStagingComponent,
      'stage-production-component': gl.cycleAnalytics.StageProductionComponent,
    },
54 55 56 57
    created() {
      this.fetchCycleAnalyticsData();
    },
    methods: {
58
      handleError() {
59
        cycleAnalyticsStore.setErrorState(true);
60
        return new Flash('There was an error while fetching cycle analytics data.');
61 62 63 64 65 66 67 68
      },
      initDropdown() {
        const $dropdown = $('.js-ca-dropdown');
        const $label = $dropdown.find('.dropdown-label');

        $dropdown.find('li a').off('click').on('click', (e) => {
          e.preventDefault();
          const $target = $(e.currentTarget);
69
          this.startDate = $target.data('value');
70 71

          $label.text($target.text().trim());
72
          this.fetchCycleAnalyticsData({ startDate: this.startDate });
73 74 75
        });
      },
      fetchCycleAnalyticsData(options) {
76
        const fetchOptions = options || { startDate: this.startDate };
77

78
        this.isLoading = true;
79 80

        cycleAnalyticsService
81 82
          .fetchCycleAnalyticsData(fetchOptions)
          .done((response) => {
83
            cycleAnalyticsStore.setCycleAnalyticsData(response);
84
            this.selectDefaultStage();
85 86
            this.initDropdown();
          })
87 88 89 90 91 92 93 94
          .error(() => {
            this.handleError();
          })
          .always(() => {
            this.isLoading = false;
          });
      },
      selectDefaultStage() {
95 96
        const stage = this.state.stages.first();
        this.selectStage(stage);
97 98 99 100 101
      },
      selectStage(stage) {
        if (this.isLoadingStage) return;
        if (this.currentStage === stage) return;

102 103 104 105 106
        if (!stage.isUserAllowed) {
          cycleAnalyticsStore.setActiveStage(stage);
          return;
        }

107
        this.isLoadingStage = true;
108
        cycleAnalyticsStore.setStageEvents([], stage);
109 110 111 112 113 114 115 116
        cycleAnalyticsStore.setActiveStage(stage);

        cycleAnalyticsService
          .fetchStageData({
            stage,
            startDate: this.startDate,
          })
          .done((response) => {
117
            this.isEmptyStage = !response.events.length;
118
            cycleAnalyticsStore.setStageEvents(response.events, stage);
119 120 121
          })
          .error(() => {
            this.isEmptyStage = true;
122 123
          })
          .always(() => {
124
            this.isLoadingStage = false;
125
          });
126 127 128
      },
      dismissOverviewDialog() {
        this.isOverviewDialogDismissed = true;
129
        Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
130 131
      },
    },
132
  });
133 134

  // Register global components
135
  Vue.component('limit-warning', LimitWarningComponent);
136
  Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
137
});