clusters.js 3.05 KB
Newer Older
Filipa Lacerda's avatar
Filipa Lacerda committed
1 2 3 4 5 6 7 8
/* globals Flash */
import Visibility from 'visibilityjs';
import axios from 'axios';
import Poll from './lib/utils/poll';
import { s__ } from './locale';
import './flash';

/**
Filipa Lacerda's avatar
Filipa Lacerda committed
9
 * Cluster page has 2 separate parts:
10
 *   Toggle button
Filipa Lacerda's avatar
Filipa Lacerda committed
11 12 13
 *
 * - Polling status while creating or scheduled
 * -- Update status area with the response result
Filipa Lacerda's avatar
Filipa Lacerda committed
14
 */
15 16 17 18 19 20 21 22 23 24

class ClusterService {
  constructor(options = {}) {
    this.options = options;
  }
  fetchData() {
    return axios.get(this.options.endpoint);
  }
}

Filipa Lacerda's avatar
Filipa Lacerda committed
25
export default class Clusters {
Filipa Lacerda's avatar
Filipa Lacerda committed
26 27 28 29
  constructor() {
    const dataset = document.querySelector('.js-edit-cluster-form').dataset;

    this.state = {
30
      statusPath: dataset.statusPath,
Filipa Lacerda's avatar
Filipa Lacerda committed
31
      clusterStatus: dataset.clusterStatus,
32
      clusterStatusReason: dataset.clusterStatusReason,
Filipa Lacerda's avatar
Filipa Lacerda committed
33
      toggleStatus: dataset.toggleStatus,
Filipa Lacerda's avatar
Filipa Lacerda committed
34 35
    };

36
    this.service = new ClusterService({ endpoint: this.state.statusPath });
Filipa Lacerda's avatar
Filipa Lacerda committed
37
    this.toggleButton = document.querySelector('.js-toggle-cluster');
38
    this.toggleInput = document.querySelector('.js-toggle-input');
Filipa Lacerda's avatar
Filipa Lacerda committed
39 40 41
    this.errorContainer = document.querySelector('.js-cluster-error');
    this.successContainer = document.querySelector('.js-cluster-success');
    this.creatingContainer = document.querySelector('.js-cluster-creating');
Filipa Lacerda's avatar
Filipa Lacerda committed
42
    this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason');
Filipa Lacerda's avatar
Filipa Lacerda committed
43

44
    this.toggleButton.addEventListener('click', this.toggle.bind(this));
Filipa Lacerda's avatar
Filipa Lacerda committed
45

46 47
    if (this.state.clusterStatus !== 'created') {
      this.updateContainer(this.state.clusterStatus, this.state.clusterStatusReason);
Filipa Lacerda's avatar
Filipa Lacerda committed
48 49
    }

50
    if (this.state.statusPath) {
Filipa Lacerda's avatar
Filipa Lacerda committed
51
      this.initPolling();
52
    }
Filipa Lacerda's avatar
Filipa Lacerda committed
53 54 55 56
  }

  toggle() {
    this.toggleButton.classList.toggle('checked');
Filipa Lacerda's avatar
Filipa Lacerda committed
57
    this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
Filipa Lacerda's avatar
Filipa Lacerda committed
58 59
  }

Filipa Lacerda's avatar
Filipa Lacerda committed
60
  initPolling() {
Filipa Lacerda's avatar
Filipa Lacerda committed
61 62 63 64
    this.poll = new Poll({
      resource: this.service,
      method: 'fetchData',
      successCallback: (data) => {
65 66
        const { status, status_reason } = data.data;
        this.updateContainer(status, status_reason);
Filipa Lacerda's avatar
Filipa Lacerda committed
67
      },
68
      errorCallback: () => {
Filipa Lacerda's avatar
Filipa Lacerda committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
        Flash(s__('ClusterIntegration|Something went wrong on our end.'));
      },
    });

    if (!Visibility.hidden()) {
      this.poll.makeRequest();
    } else {
      this.service.fetchData();
    }

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

  hideAll() {
    this.errorContainer.classList.add('hidden');
    this.successContainer.classList.add('hidden');
    this.creatingContainer.classList.add('hidden');
  }

Filipa Lacerda's avatar
Filipa Lacerda committed
94
  updateContainer(status, error) {
Filipa Lacerda's avatar
Filipa Lacerda committed
95 96 97 98 99
    this.hideAll();
    switch (status) {
      case 'created':
        this.successContainer.classList.remove('hidden');
        break;
100
      case 'errored':
Filipa Lacerda's avatar
Filipa Lacerda committed
101
        this.errorContainer.classList.remove('hidden');
Filipa Lacerda's avatar
Filipa Lacerda committed
102
        this.errorReasonContainer.textContent = error;
Filipa Lacerda's avatar
Filipa Lacerda committed
103
        break;
104
      case 'scheduled':
Filipa Lacerda's avatar
Filipa Lacerda committed
105
      case 'creating':
106
        this.creatingContainer.classList.remove('hidden');
Filipa Lacerda's avatar
Filipa Lacerda committed
107 108 109 110 111 112
        break;
      default:
        this.hideAll();
    }
  }
}