diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-10-04 12:48:34 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-10-04 12:49:04 +0100 |
commit | 5a2b43fcc6490847fae39a1dce38ce13d5860da3 (patch) | |
tree | a559397938e09ae131d1475b8244e78b5b5d5f09 | |
parent | 8cff79bc1dd8802843f977177b433838f0ba76b0 (diff) | |
download | gitlab-ce-5a2b43fcc6490847fae39a1dce38ce13d5860da3.tar.gz |
Adjustments to polling & forms
-rw-r--r-- | app/assets/javascripts/clusters.js | 72 | ||||
-rw-r--r-- | app/views/projects/clusters/_form.html.haml | 21 | ||||
-rw-r--r-- | app/views/projects/clusters/show.html.haml | 59 |
3 files changed, 66 insertions, 86 deletions
diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js index 81daa97a938..5a381a5322a 100644 --- a/app/assets/javascripts/clusters.js +++ b/app/assets/javascripts/clusters.js @@ -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(); diff --git a/app/views/projects/clusters/_form.html.haml b/app/views/projects/clusters/_form.html.haml index c9ec25d2072..b5c4942f528 100644 --- a/app/views/projects/clusters/_form.html.haml +++ b/app/views/projects/clusters/_form.html.haml @@ -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 diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml index d7839504f32..9746df76365 100644 --- a/app/views/projects/clusters/show.html.haml +++ b/app/views/projects/clusters/show.html.haml @@ -1,8 +1,8 @@ -.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 |