pipelines.js 3.6 KB
Newer Older
1
import Visibility from 'visibilityjs';
2
import { __ } from '../../locale';
Phil Hughes's avatar
Phil Hughes committed
3
import Flash from '../../flash';
4
import Poll from '../../lib/utils/poll';
5 6 7 8
import EmptyState from '../components/empty_state.vue';
import SvgBlankState from '../components/blank_state.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import PipelinesTableComponent from '../components/pipelines_table.vue';
9
import eventHub from '../event_hub';
Filipa Lacerda's avatar
Filipa Lacerda committed
10
import { CANCEL_REQUEST } from '../constants';
11 12 13

export default {
  components: {
14 15 16 17
    PipelinesTableComponent,
    SvgBlankState,
    EmptyState,
    LoadingIcon,
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
  },
  data() {
    return {
      isLoading: false,
      hasError: false,
      isMakingRequest: false,
      updateGraphDropdown: false,
      hasMadeRequest: false,
    };
  },
  beforeMount() {
    this.poll = new Poll({
      resource: this.service,
      method: 'getPipelines',
      data: this.requestData ? this.requestData : undefined,
      successCallback: this.successCallback,
      errorCallback: this.errorCallback,
      notificationCallback: this.setIsMakingRequest,
    });

    if (!Visibility.hidden()) {
      this.isLoading = true;
      this.poll.makeRequest();
    } else {
      // If tab is not visible we need to make the first request so we don't show the empty
      // state without knowing if there are any pipelines
      this.fetchPipelines();
    }

    Visibility.change(() => {
      if (!Visibility.hidden()) {
        this.poll.restart();
      } else {
        this.poll.stop();
      }
    });

    eventHub.$on('postAction', this.postAction);
56
    eventHub.$on('retryPipeline', this.postAction);
57
    eventHub.$on('clickedDropdown', this.updateTable);
58
    eventHub.$on('refreshPipelinesTable', this.fetchPipelines);
59 60
  },
  beforeDestroy() {
61
    eventHub.$off('postAction', this.postAction);
62
    eventHub.$off('retryPipeline', this.postAction);
63
    eventHub.$off('clickedDropdown', this.updateTable);
64
    eventHub.$off('refreshPipelinesTable', this.fetchPipelines);
65 66 67 68 69
  },
  destroyed() {
    this.poll.stop();
  },
  methods: {
70 71 72
    updateTable() {
      // Cancel ongoing request
      if (this.isMakingRequest) {
Filipa Lacerda's avatar
Filipa Lacerda committed
73
        this.service.cancelationSource.cancel(CANCEL_REQUEST);
74 75 76
      }
      // Stop polling
      this.poll.stop();
Filipa Lacerda's avatar
Filipa Lacerda committed
77 78 79
      // Update the table
      return this.getPipelines()
        .then(() => this.poll.restart());
80
    },
81 82 83 84
    fetchPipelines() {
      if (!this.isMakingRequest) {
        this.isLoading = true;

85
        this.getPipelines();
86 87
      }
    },
88
    getPipelines() {
Filipa Lacerda's avatar
Filipa Lacerda committed
89
      return this.service.getPipelines(this.requestData)
90
        .then(response => this.successCallback(response))
Filipa Lacerda's avatar
Filipa Lacerda committed
91
        .catch((error) => this.errorCallback(error));
92
    },
93 94 95 96 97
    setCommonData(pipelines) {
      this.store.storePipelines(pipelines);
      this.isLoading = false;
      this.updateGraphDropdown = true;
      this.hasMadeRequest = true;
Filipa Lacerda's avatar
Filipa Lacerda committed
98 99 100 101 102

      // In case the previous polling request returned an error, we need to reset it
      if (this.hasError) {
        this.hasError = false;
      }
103
    },
Filipa Lacerda's avatar
Filipa Lacerda committed
104
    errorCallback(error) {
105
      this.hasMadeRequest = true;
Filipa Lacerda's avatar
Filipa Lacerda committed
106 107 108 109 110 111
      this.isLoading = false;

      if (error && error.message && error.message !== CANCEL_REQUEST) {
        this.hasError = true;
        this.updateGraphDropdown = false;
      }
112 113 114 115 116 117 118 119 120 121
    },
    setIsMakingRequest(isMakingRequest) {
      this.isMakingRequest = isMakingRequest;

      if (isMakingRequest) {
        this.updateGraphDropdown = false;
      }
    },
    postAction(endpoint) {
      this.service.postAction(endpoint)
122
        .then(() => this.fetchPipelines())
123
        .catch(() => Flash(__('An error occurred while making the request.')));
124 125 126
    },
  },
};