Adjustments to polling & forms

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();

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.submit s_('ClusterIntegration|Create cluster'), class: 'btn btn-save'
+          = field.label :project_namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
+          = field.text_field :project_namespace, class: 'form-control', placeholder: @cluster.project_namespace_placeholder
 
-          -# 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
+        .form-group
+          = field.submit s_('ClusterIntegration|Create cluster'), class: 'btn btn-save'

app/views/projects/clusters/show.html.haml

-.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,7 +16,12 @@
       - else
         = s_('ClusterIntegration|Cluster integration is disabled for this project.')
 
+    = form_for [@project.namespace.becomes(Namespace), @project, @cluster] do |field|
+      = form_errors(@cluster)
+      .form-group
         %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',
@@ -25,29 +30,23 @@
 
         - if can?(current_user, :update_cluster, @cluster)
           .form-group
-        %button{ type: 'button', class: 'js-edit-cluster-button btn btn-success'}
-          = s_('ClusterIntegration|Save changes')
-
+            = 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 }
 
-      - if @cluster.errored?
-        .js-cluster-error.alert.alert-danger{ role: 'alert' }
+      .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' }
+      .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' }
+      .hidden.js-cluster-success.alert.alert-info{ role: 'alert' }
         = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine.')
 
     .form_group