Commit b3c9f8c7 authored by Filipa Lacerda's avatar Filipa Lacerda

Adjust to route change

Adjust toggle status
Add confirmation box
Adds permissions checks
parent c2df22a7
Pipeline #12409592 failed with stages
in 91 minutes and 22 seconds
...@@ -4,6 +4,7 @@ import axios from 'axios'; ...@@ -4,6 +4,7 @@ import axios from 'axios';
import Poll from './lib/utils/poll'; import Poll from './lib/utils/poll';
import { s__ } from './locale'; import { s__ } from './locale';
import './flash'; import './flash';
import { convertPermissionToBoolean } from './lib/utils/common_utils';
class ClusterService { class ClusterService {
constructor(options = {}) { constructor(options = {}) {
...@@ -25,8 +26,16 @@ class ClusterService { ...@@ -25,8 +26,16 @@ class ClusterService {
} }
} }
/** /**
* Handles visibily toggle * Cluster page has 2 separate parts:
* Polls the state * - 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
*
* - Polling status while creating or scheduled
* -- Update status area with the response result
*
*/ */
export default class ClusterEdit { export default class ClusterEdit {
constructor() { constructor() {
...@@ -37,8 +46,9 @@ export default class ClusterEdit { ...@@ -37,8 +46,9 @@ export default class ClusterEdit {
checkStatus: dataset.checkStatus, checkStatus: dataset.checkStatus,
editPath: dataset.editPath, editPath: dataset.editPath,
}, },
canUpdate: dataset.canUpdate, canUpdate: convertPermissionToBoolean(dataset.canUpdate),
clusterStatus: dataset.clusterStatus, clusterStatus: dataset.clusterStatus,
toggleStatus: dataset.toggleStatus,
}; };
this.service = new ClusterService({ endpoints: this.state.endpoints }); this.service = new ClusterService({ endpoints: this.state.endpoints });
...@@ -46,42 +56,29 @@ export default class ClusterEdit { ...@@ -46,42 +56,29 @@ export default class ClusterEdit {
this.errorContainer = document.querySelector('.js-cluster-error'); this.errorContainer = document.querySelector('.js-cluster-error');
this.successContainer = document.querySelector('.js-cluster-success'); this.successContainer = document.querySelector('.js-cluster-success');
this.creatingContainer = document.querySelector('.js-cluster-creating'); this.creatingContainer = document.querySelector('.js-cluster-creating');
this.bindEvents();
}
bindEvents() { this.initEditForm();
if (!this.canUpdate) {
this.disableToggle();
}
if (this.clusterStatus) { if (this.clusterStatus === 'scheduled' || this.clusterStatus === 'creating') {
// update to enable or disabled! this.initPoling();
} }
}
initEditForm() {
this.toggleButton.addEventListener('click', this.toggle.bind(this)); this.toggleButton.addEventListener('click', this.toggle.bind(this));
document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this)); document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this));
this.initPoling();
} }
toggle() { toggle() {
this.toggleButton.classList.toggle('checked'); this.toggleButton.classList.toggle('checked');
this.toggleStatus = this.toggleButton.classList.contains('checked').toString(); this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString();
} }
updateData() { updateData() {
this.service.updateData(this.state.toggleStatus); this.service.updateData(this.state.toggleStatus);
} }
disableToggle(disable = true) {
this.toggleButton.classList.toggle('disabled', disable);
this.toggleButton.setAttribute('disabled', disable);
}
initPoling() { initPoling() {
if (this.state.clusterStatus === 'created') return;
this.poll = new Poll({ this.poll = new Poll({
resource: this.service, resource: this.service,
method: 'fetchData', method: 'fetchData',
...@@ -89,8 +86,8 @@ export default class ClusterEdit { ...@@ -89,8 +86,8 @@ export default class ClusterEdit {
const { status } = data.data; const { status } = data.data;
this.updateContainer(status); this.updateContainer(status);
}, },
errorCallback: () => { errorCallback: (error) => {
this.updateContainer('error'); this.updateContainer('error', error);
Flash(s__('ClusterIntegration|Something went wrong on our end.')); Flash(s__('ClusterIntegration|Something went wrong on our end.'));
}, },
}); });
...@@ -116,7 +113,7 @@ export default class ClusterEdit { ...@@ -116,7 +113,7 @@ export default class ClusterEdit {
this.creatingContainer.classList.add('hidden'); this.creatingContainer.classList.add('hidden');
} }
updateContainer(status) { updateContainer(status, error) {
this.hideAll(); this.hideAll();
switch (status) { switch (status) {
case 'created': case 'created':
...@@ -124,6 +121,7 @@ export default class ClusterEdit { ...@@ -124,6 +121,7 @@ export default class ClusterEdit {
break; break;
case 'error': case 'error':
this.errorContainer.classList.remove('hidden'); this.errorContainer.classList.remove('hidden');
this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason;
break; break;
case 'creating': case 'creating':
this.creatingContainer.classList.add('hidden'); this.creatingContainer.classList.add('hidden');
......
...@@ -524,7 +524,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils'; ...@@ -524,7 +524,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
case 'admin:impersonation_tokens:index': case 'admin:impersonation_tokens:index':
new gl.DueDateSelectors(); new gl.DueDateSelectors();
break; break;
case 'projects:clusters:edit': case 'projects:clusters:show':
import(/* webpackChunkName: "clusters" */ './clusters') import(/* webpackChunkName: "clusters" */ './clusters')
.then(cluster => new cluster.default()) // eslint-disable-line new-cap .then(cluster => new cluster.default()) // eslint-disable-line new-cap
.catch(() => {}); .catch(() => {});
......
.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), .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), edit_path: namespace_project_cluster_path(@project.namespace, @project, @cluster.id, format: :json),
can_update: 'true', can_update: can?(current_user, :update_cluster, @cluster),
cluster_status: '' }} toggle_status: @cluster.enabled? ? 'true': 'false',
cluster_status: @cluster.status }}
= render 'sidebar' = render 'sidebar'
.col-lg-8 .col-lg-8
%h4.prepend-top-0 %h4.prepend-top-0
= s_('ClusterIntegration|Enable cluster integration') = s_('ClusterIntegration|Enable cluster integration')
%p %p
-#TODO: if can?(current_user, :update_cluster, @cluster) - if @cluster.enabled?
-# if :enabled - if can?(current_user, :update_cluster, @cluster)
= s_('ClusterIntegration|Disabling cluster integration will not affect your cluster. It will only temporarily turn off GitLab\'s conection to it.') = s_('ClusterIntegration|Cluster integration is enabled for this project. Disabling this integration will not affect your cluster, it will only temporarily turn off GitLab\'s connection to it.')
-# else - else
= s_('ClusterIntegration|Missing test/state in mockups.') = s_('ClusterIntegration|Cluster integration is enabled for this project.')
-# else !can?(current_user, :update_cluster, @cluster) - else
-# if :enabled = s_('ClusterIntegration|Cluster integration is disabled for this project.')
= s_('ClusterIntegration|Cluster integration is enabled for this project.')
-# else
= s_('ClusterIntegration|Cluster integration is disabled for this project.')
%label.toggle-wrapper %label.toggle-wrapper
%button{ type: 'button', class: 'js-toggle-cluster project-feature-toggle', 'aria-label': 'Toggle', data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } } %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) - if can?(current_user, :update_cluster, @cluster)
.form-group .form-group
%button{ type: 'button', class: 'js-edit-cluster-button btn btn-success'} %button{ type: 'button', class: 'js-edit-cluster-button btn btn-success'}
= s_('ClusterIntegration|Save changes') = s_('ClusterIntegration|Save changes')
-# if can?(current_user, :update_cluster, @cluster) - if can?(current_user, :update_cluster, @cluster) && @cluster.scheduled? || @cluster.creating?
.form_group .form_group
%label %label
= s_('ClusterIntegration|Google container engine') = 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 }
- link_gke = link_to(s_('ClusterIntegration|Manage your cluster on GKE'), '', target: '_blank', rel: 'noopener noreferrer') .hidden.js-cluster-error.alert.alert-danger{ role: 'alert' }
.hidden.js-cluster-error = s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine.')
%p %code.js-error-reason
= s_('ClusterIntegration|This cluster was set up on Google Container Engine. %{link_gke}').html_safe % { link_gke: link_gke }
.alert.alert-info{ role: 'alert' }
= s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine.')
.hidden.js-cluster-success .hidden.js-cluster-success.alert.alert-info{ role: 'alert' }
%p = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine.')
= s_('ClusterIntegration|This cluster was set up on Google Container Engine. %{link_gke}').html_safe % { link_gke: link_gke }
.alert.alert-info{ role: 'alert' }
= s_('ClusterIntegration|Cluster was successfully created on Google Container Engine.')
.hidden.js-cluster-creating .hidden.js-cluster-creating.alert.alert-info{ role: 'alert' }
%p
= s_('ClusterIntegration|This cluster was set up on Google Container Engine. %{link_gke}').html_safe % { link_gke: link_gke }
.alert.alert-info{ role: 'alert' }
= s_('ClusterIntegration|Cluster is being created on Google Container Engine...') = s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
.form_group .form_group
...@@ -60,17 +56,10 @@ ...@@ -60,17 +56,10 @@
= clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name')) = clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name'))
%br %br
-# - if can?(current_user, :admin_cluster, @cluster) - if can?(current_user, :admin_cluster, @cluster)
.well.form_group .well.form_group
%label.text-danger %label.text-danger
= s_('ClusterIntegration|Remove cluster integration') = s_('ClusterIntegration|Remove cluster integration')
%p %p
= s_('ClusterIntegration|Removing cluster integration will remove the cluster configuration you have added to this project. It will not delete your project.') = s_('ClusterIntegration|Removing cluster integration will remove the cluster configuration you have added to this project. It will not delete your project.')
= link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger') = link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger', data: { confirm: "Are you sure you want to remove cluster integration from this project? This will not delete your cluster on Google Container Engine"})
%br
= link_to "Enable", namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :put
%br
= link_to "Disable", namespace_project_cluster_path(@project.namespace, @project, @cluster.id, cluster: {enabled: 'false'}), method: :put
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