diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-10-03 18:23:25 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-10-03 18:23:25 +0100 |
commit | b3c9f8c7248574154d2c04c1756d534672d6063f (patch) | |
tree | 8e2bff2ae14fe1ad41a564983fa9f029e7dbcad5 | |
parent | c2df22a7d3ae715539ef1e4de9b40452ed180bdf (diff) | |
download | gitlab-ce-b3c9f8c7248574154d2c04c1756d534672d6063f.tar.gz |
Adjust to route change
Adjust toggle status
Add confirmation box
Adds permissions checks
-rw-r--r-- | app/assets/javascripts/clusters.js | 48 | ||||
-rw-r--r-- | app/assets/javascripts/dispatcher.js | 2 | ||||
-rw-r--r-- | app/views/projects/clusters/show.html.haml | 89 |
3 files changed, 63 insertions, 76 deletions
diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js index 63ff676486b..81daa97a938 100644 --- a/app/assets/javascripts/clusters.js +++ b/app/assets/javascripts/clusters.js @@ -4,6 +4,7 @@ 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 = {}) { @@ -25,8 +26,16 @@ class ClusterService { } } /** - * Handles visibily toggle - * Polls the state + * 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 + * + * - Polling status while creating or scheduled + * -- Update status area with the response result + * */ export default class ClusterEdit { constructor() { @@ -37,8 +46,9 @@ export default class ClusterEdit { checkStatus: dataset.checkStatus, editPath: dataset.editPath, }, - canUpdate: dataset.canUpdate, + canUpdate: convertPermissionToBoolean(dataset.canUpdate), clusterStatus: dataset.clusterStatus, + toggleStatus: dataset.toggleStatus, }; this.service = new ClusterService({ endpoints: this.state.endpoints }); @@ -46,42 +56,29 @@ export default class ClusterEdit { this.errorContainer = document.querySelector('.js-cluster-error'); this.successContainer = document.querySelector('.js-cluster-success'); this.creatingContainer = document.querySelector('.js-cluster-creating'); - this.bindEvents(); - } - bindEvents() { - if (!this.canUpdate) { - this.disableToggle(); - } + this.initEditForm(); - if (this.clusterStatus) { - // update to enable or disabled! + if (this.clusterStatus === 'scheduled' || this.clusterStatus === 'creating') { + this.initPoling(); } + } + initEditForm() { this.toggleButton.addEventListener('click', this.toggle.bind(this)); - document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this)); - - this.initPoling(); } toggle() { this.toggleButton.classList.toggle('checked'); - this.toggleStatus = this.toggleButton.classList.contains('checked').toString(); + this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString(); } updateData() { this.service.updateData(this.state.toggleStatus); } - disableToggle(disable = true) { - this.toggleButton.classList.toggle('disabled', disable); - this.toggleButton.setAttribute('disabled', disable); - } - initPoling() { - if (this.state.clusterStatus === 'created') return; - this.poll = new Poll({ resource: this.service, method: 'fetchData', @@ -89,8 +86,8 @@ export default class ClusterEdit { const { status } = data.data; this.updateContainer(status); }, - errorCallback: () => { - this.updateContainer('error'); + errorCallback: (error) => { + this.updateContainer('error', error); Flash(s__('ClusterIntegration|Something went wrong on our end.')); }, }); @@ -116,7 +113,7 @@ export default class ClusterEdit { this.creatingContainer.classList.add('hidden'); } - updateContainer(status) { + updateContainer(status, error) { this.hideAll(); switch (status) { case 'created': @@ -124,6 +121,7 @@ export default class ClusterEdit { break; case 'error': this.errorContainer.classList.remove('hidden'); + this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason; break; case 'creating': this.creatingContainer.classList.add('hidden'); diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index 7131889a0a0..29f9f9710ae 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -524,7 +524,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils'; case 'admin:impersonation_tokens:index': new gl.DueDateSelectors(); break; - case 'projects:clusters:edit': + case 'projects:clusters:show': import(/* webpackChunkName: "clusters" */ './clusters') .then(cluster => new cluster.default()) // eslint-disable-line new-cap .catch(() => {}); diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml index 7d09c9e8934..ec1eabe5c57 100644 --- a/app/views/projects/clusters/show.html.haml +++ b/app/views/projects/clusters/show.html.haml @@ -1,54 +1,50 @@ .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: 'true', - cluster_status: '' }} + can_update: can?(current_user, :update_cluster, @cluster), + toggle_status: @cluster.enabled? ? 'true': 'false', + cluster_status: @cluster.status }} = render 'sidebar' .col-lg-8 %h4.prepend-top-0 = s_('ClusterIntegration|Enable cluster integration') %p - -#TODO: if can?(current_user, :update_cluster, @cluster) - -# if :enabled - = s_('ClusterIntegration|Disabling cluster integration will not affect your cluster. It will only temporarily turn off GitLab\'s conection to it.') - -# else - = s_('ClusterIntegration|Missing test/state in mockups.') - -# else !can?(current_user, :update_cluster, @cluster) - -# if :enabled - = s_('ClusterIntegration|Cluster integration is enabled for this project.') - -# else - = s_('ClusterIntegration|Cluster integration is disabled for this project.') + - if @cluster.enabled? + - if can?(current_user, :update_cluster, @cluster) + = 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 + = s_('ClusterIntegration|Cluster integration is enabled for this project.') + - else + = s_('ClusterIntegration|Cluster integration is disabled for this project.') %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) - .form-group - %button{ type: 'button', class: 'js-edit-cluster-button btn btn-success'} - = s_('ClusterIntegration|Save changes') + - if can?(current_user, :update_cluster, @cluster) + .form-group + %button{ type: 'button', class: 'js-edit-cluster-button btn btn-success'} + = s_('ClusterIntegration|Save changes') - -# if can?(current_user, :update_cluster, @cluster) - .form_group - %label - = s_('ClusterIntegration|Google container engine') + - if can?(current_user, :update_cluster, @cluster) && @cluster.scheduled? || @cluster.creating? + .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 } - - link_gke = link_to(s_('ClusterIntegration|Manage your cluster on GKE'), '', target: '_blank', rel: 'noopener noreferrer') - .hidden.js-cluster-error - %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|Something went wrong while creating your cluster on Google Container Engine.') + .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 - .hidden.js-cluster-success - %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 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.') - .hidden.js-cluster-creating - %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' } + .hidden.js-cluster-creating.alert.alert-info{ role: 'alert' } = s_('ClusterIntegration|Cluster is being created on Google Container Engine...') .form_group @@ -60,17 +56,10 @@ = clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name')) %br - -# - if can?(current_user, :admin_cluster, @cluster) - .well.form_group - %label.text-danger - = s_('ClusterIntegration|Remove cluster integration') - %p - = 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') - - - -%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 + - if can?(current_user, :admin_cluster, @cluster) + .well.form_group + %label.text-danger + = s_('ClusterIntegration|Remove cluster integration') + %p + = 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', data: { confirm: "Are you sure you want to remove cluster integration from this project? This will not delete your cluster on Google Container Engine"}) |