Commit 5a2b43fc authored by Filipa Lacerda's avatar Filipa Lacerda

Adjustments to polling & forms

parent 8cff79bc
......@@ -4,74 +4,58 @@ import axios from 'axios';
import Poll from './lib/utils/poll';
import { s__ } from './locale';
import './flash';
import { convertPermissionToBoolean } from './lib/utils/common_utils';
class ClusterService {
constructor(options = {}) {
this.options = options;
}
fetchData() {
return axios.get(this.options.endpoints.checkStatus);
}
updateData(value) {
return axios.put(this.options.endpoints.editPath,
{
cluster: {
enabled: value,
},
},
);
}
}
/**
* Cluster page has 2 separate parts:
* - Update form with toggle button
* -- Check initial state and set the toggle button
* -- Listen to changes
* -- Check permissions in order to disable
* -- Update cluster based on toggle status
* Toggle button
*
* - Polling status while creating or scheduled
* -- Update status area with the response result
*
*/
class ClusterService {
constructor(options = {}) {
this.options = options;
}
fetchData() {
return axios.get(this.options.endpoint);
}
}
export default class ClusterEdit {
constructor() {
const dataset = document.querySelector('.js-edit-cluster-form').dataset;
this.state = {
endpoints: {
checkStatus: dataset.checkStatus,
editPath: dataset.editPath,
},
canUpdate: convertPermissionToBoolean(dataset.canUpdate),
statusPath: dataset.statusPath,
clusterStatus: dataset.clusterStatus,
clusterStatusReason: dataset.clusterStatusReason,
toggleStatus: dataset.toggleStatus,
};
this.service = new ClusterService({ endpoints: this.state.endpoints });
this.service = new ClusterService({ endpoint: this.state.statusPath });
this.toggleButton = document.querySelector('.js-toggle-cluster');
this.toggleInput = document.querySelector('.js-toggle-input');
this.errorContainer = document.querySelector('.js-cluster-error');
this.successContainer = document.querySelector('.js-cluster-success');
this.creatingContainer = document.querySelector('.js-cluster-creating');
this.initEditForm();
this.toggleButton.addEventListener('click', this.toggle.bind(this));
if (this.clusterStatus === 'scheduled' || this.clusterStatus === 'creating') {
this.initPoling();
if (this.state.clusterStatus !== 'created') {
this.updateContainer(this.state.clusterStatus, this.state.clusterStatusReason);
}
}
initEditForm() {
this.toggleButton.addEventListener('click', this.toggle.bind(this));
document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this));
if (this.state.statusPath) {
this.initPoling();
}
}
toggle() {
this.toggleButton.classList.toggle('checked');
this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString();
this.toggleInput.setAttribute('value', this.state.toggleStatus);
}
updateData() {
......@@ -83,11 +67,10 @@ export default class ClusterEdit {
resource: this.service,
method: 'fetchData',
successCallback: (data) => {
const { status } = data.data;
this.updateContainer(status);
const { status, status_reason } = data.data;
this.updateContainer(status, status_reason);
},
errorCallback: (error) => {
this.updateContainer('error', error);
errorCallback: () => {
Flash(s__('ClusterIntegration|Something went wrong on our end.'));
},
});
......@@ -119,12 +102,13 @@ export default class ClusterEdit {
case 'created':
this.successContainer.classList.remove('hidden');
break;
case 'error':
case 'errored':
this.errorContainer.classList.remove('hidden');
this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason;
break;
case 'scheduled':
case 'creating':
this.creatingContainer.classList.add('hidden');
this.creatingContainer.classList.remove('hidden');
break;
default:
this.hideAll();
......
......@@ -7,34 +7,31 @@
= form_for [@project.namespace.becomes(Namespace), @project, @cluster] do |field|
= form_errors(@cluster)
.form-group
= field.label :gcp_cluster_name
= field.label :gcp_cluster_name, s_('ClusterIntegration|Cluster name')
= field.text_field :gcp_cluster_name, class: 'form-control'
.form-group
= field.label :gcp_project_id
= field.label :gcp_project_id, s_('ClusterIntegration|Google Cloud Platform project ID')
= link_to(s_('ClusterIntegration|See your projects'), 'https://console.cloud.google.com/home/dashboard', target: '_blank', rel: 'noopener noreferrer')
= field.text_field :gcp_project_id, class: 'form-control'
.form-group
= field.label :gcp_cluster_zone
= field.label :gcp_cluster_zone, s_('ClusterIntegration|Zone')
= link_to(s_('ClusterIntegration|See zones'), 'https://cloud.google.com/compute/docs/regions-zones/regions-zones', target: '_blank', rel: 'noopener noreferrer')
= field.text_field :gcp_cluster_zone, class: 'form-control'
.form-group
= field.label :gcp_cluster_size
= field.label :gcp_cluster_size, s_('ClusterIntegration|Number of nodes')
= field.text_field :gcp_cluster_size, class: 'form-control'
.form-group
= field.label :project_namespace
= field.text_field :project_namespace, class: 'form-control', placeholder: @cluster.project_namespace_placeholder
.form-group
= field.label :gcp_machine_type
= field.label :gcp_machine_type, s_('ClusterIntegration|Machine type')
= link_to(s_('ClusterIntegration|Machine type'), 'https://cloud.google.com/compute/docs/machine-types', target: '_blank', rel: 'noopener noreferrer')
= field.text_field :gcp_machine_type, class: 'form-control'
.form-group
= field.label :project_namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
= field.text_field :project_namespace, class: 'form-control', placeholder: @cluster.project_namespace_placeholder
.form-group
= field.submit s_('ClusterIntegration|Create cluster'), class: 'btn btn-save'
-# TODO: Remove before merge
= link_to "Create on Google Container Engine", namespace_project_clusters_path(@project.namespace, @project, cluster: {gcp_cluster_name: "gke-test-creation#{Random.rand(100)}", gcp_project_id: 'gitlab-internal-153318', gcp_cluster_zone: 'us-central1-a', gcp_cluster_size: '1', project_namespace: 'aaa', gcp_machine_type: 'n1-standard-1'}), method: :post
.row.prepend-top-default.edit-cluster-form.js-edit-cluster-form{ data: { check_status: status_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster.id, format: :json),
edit_path: namespace_project_cluster_path(@project.namespace, @project, @cluster.id, format: :json),
can_update: can?(current_user, :update_cluster, @cluster),
- status_path = status_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster.id, format: :json) if can?(current_user, :admin_cluster, @cluster) && @cluster.on_creation?
.row.prepend-top-default.edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path,
toggle_status: @cluster.enabled? ? 'true': 'false',
cluster_status: @cluster.status }}
cluster_status: @cluster.status,
cluster_status_reason: @cluster.status_reason }}
= render 'sidebar'
.col-lg-8
%h4.prepend-top-0
......@@ -16,39 +16,38 @@
- else
= s_('ClusterIntegration|Cluster integration is disabled for this project.')
%label.toggle-wrapper
%button{ type: 'button',
class: "js-toggle-cluster project-feature-toggle #{'checked' unless !@cluster.enabled?} #{'disabled' unless can?(current_user, :update_cluster, @cluster)}",
'aria-label': 'Toggle',
disabled: !can?(current_user, :update_cluster, @cluster),
data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } }
- if can?(current_user, :update_cluster, @cluster)
= form_for [@project.namespace.becomes(Namespace), @project, @cluster] do |field|
= form_errors(@cluster)
.form-group
%button{ type: 'button', class: 'js-edit-cluster-button btn btn-success'}
= s_('ClusterIntegration|Save changes')
%label.toggle-wrapper
= field.hidden_field :enabled, { class: 'js-toggle-input'}
%button{ type: 'button',
class: "js-toggle-cluster project-feature-toggle #{'checked' unless !@cluster.enabled?} #{'disabled' unless can?(current_user, :update_cluster, @cluster)}",
'aria-label': 'Toggle',
disabled: !can?(current_user, :update_cluster, @cluster),
data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } }
- if can?(current_user, :update_cluster, @cluster)
.form-group
= field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-success'
- if can?(current_user, :admin_cluster, @cluster)
.form_group
%label
= s_('ClusterIntegration|Google container engine')
%p
- link_gke = link_to(s_('ClusterIntegration|Google Container Engine'), '', target: '_blank', rel: 'noopener noreferrer')
= s_('ClusterIntegration|Manage your cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke }
%label
= s_('ClusterIntegration|Google container engine')
%p
- link_gke = link_to(s_('ClusterIntegration|Google Container Engine'), '', target: '_blank', rel: 'noopener noreferrer')
= s_('ClusterIntegration|Manage your cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke }
- if @cluster.errored?
.js-cluster-error.alert.alert-danger{ role: 'alert' }
= s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine.')
%code.js-error-reason
.hidden.js-cluster-error.alert.alert-danger{ role: 'alert' }
= s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine.')
%code.js-error-reason
- if @cluster.on_creation?
.js-cluster-creating.alert.alert-info{ role: 'alert' }
= s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
.hidden.js-cluster-creating.alert.alert-info{ role: 'alert' }
= s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
- if @cluster.created?
.js-cluster-success.alert.alert-info{ role: 'alert' }
= s_('ClusterIntegration|Cluster was successfully created on Google Container Engine.')
.hidden.js-cluster-success.alert.alert-info{ role: 'alert' }
= s_('ClusterIntegration|Cluster was successfully created on Google Container Engine.')
.form_group
%label
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment