From e754fafad6b8faf06c8154cdd8170cb4567b6835 Mon Sep 17 00:00:00 2001 From: Dennis Tang Date: Sun, 6 May 2018 14:42:51 +0200 Subject: [PATCH] revisions --- .../pages/projects/clusters/gcp/new/index.js | 116 +----------------- .../components/dropdown_button.vue | 1 - .../gke_cluster_dropdowns/constants.js | 9 ++ .../projects/gke_cluster_dropdowns/index.js | 110 +++++++++++++++++ 4 files changed, 121 insertions(+), 115 deletions(-) create mode 100644 app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js create mode 100644 app/assets/javascripts/projects/gke_cluster_dropdowns/index.js diff --git a/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js b/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js index d3f22538068..d4f34e32a48 100644 --- a/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js +++ b/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js @@ -1,117 +1,5 @@ -/* global gapi */ -import Vue from 'vue'; -import Flash from '~/flash'; -import { s__ } from '~/locale'; -import GkeProjectIdDropdown from '~/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue'; -import GkeZoneDropdown from '~/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue'; -import GkeMachineTypeDropdown from '~/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue'; - -const GCP_API_ERROR = - 'ClusterIntegration|An error occurred when trying to contact the Google Cloud API. Please try again later.'; - -function mountGkeProjectIdDropdown() { - const el = document.getElementById('js-gcp-project-id-dropdown-entry-point'); - const hiddenInput = el.querySelector('input'); - - if (!el) return; - // debugger; - - // eslint-disable-next-line no-new - new Vue({ - el, - components: { - GkeProjectIdDropdown, - }, - render: createElement => - createElement('gke-project-id-dropdown', { - props: { - docsUrl: el.dataset.docsurl, - service: gapi.client.cloudresourcemanager, - fieldName: hiddenInput.getAttribute('name'), - fieldId: hiddenInput.getAttribute('id'), - }, - }), - }); -} - -function mountGkeZoneDropdown() { - const el = document.getElementById('js-gcp-zone-dropdown-entry-point'); - const hiddenInput = el.querySelector('input'); - - if (!el) return; - // debugger; - - // eslint-disable-next-line no-new - new Vue({ - el, - components: { - GkeZoneDropdown, - }, - render: createElement => - createElement('gke-zone-dropdown', { - props: { - service: gapi.client.compute, - fieldName: hiddenInput.getAttribute('name'), - fieldId: hiddenInput.getAttribute('id'), - }, - }), - }); -} - -function mountGkeMachineTypeDropdown() { - const el = document.getElementById('js-gcp-machine-type-dropdown-entry-point'); - const hiddenInput = el.querySelector('input'); - - if (!el) return; - // debugger; - - // eslint-disable-next-line no-new - new Vue({ - el, - components: { - GkeMachineTypeDropdown, - }, - render: createElement => - createElement('gke-machine-type-dropdown', { - props: { - service: gapi.client.compute, - fieldName: hiddenInput.getAttribute('name'), - fieldId: hiddenInput.getAttribute('id'), - }, - }), - }); -} - -function initializeGapiClient() { - const el = document.getElementById('new_cluster'); - - gapi.client.setToken({ access_token: el.dataset.token }); - - gapi.client - .load('https://www.googleapis.com/discovery/v1/apis/cloudresourcemanager/v1/rest') - .then(() => { - mountGkeProjectIdDropdown(); - }) - .catch(() => { - Flash(s__(GCP_API_ERROR)); - }); - - gapi.client - .load('https://www.googleapis.com/discovery/v1/apis/compute/v1/rest') - .then(() => { - mountGkeZoneDropdown(); - mountGkeMachineTypeDropdown(); - }) - .catch(() => { - Flash(s__(GCP_API_ERROR)); - }); -} +import initGkeDropdowns from '~/projects/gke_cluster_dropdowns'; document.addEventListener('DOMContentLoaded', () => { - if (typeof gapi === 'undefined') { - Flash(s__(GCP_API_ERROR)); - return false; - } - - gapi.load('client', initializeGapiClient); + initGkeDropdowns(); }); diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue index 48819f8aa4c..ff0aba89d20 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue @@ -23,7 +23,6 @@ export default { default: __('Select'), }, }, - computed: {}, }; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js new file mode 100644 index 00000000000..100331df819 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js @@ -0,0 +1,9 @@ +import { s__ } from '~/locale'; + +export const GCP_API_ERROR = s__( + 'ClusterIntegration|An error occurred when trying to contact the Google Cloud API. Please try again later.', +); +export const GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT = + 'https://www.googleapis.com/discovery/v1/apis/cloudresourcemanager/v1/rest'; +export const GCP_API_COMPUTE_ENDPOINT = + 'https://www.googleapis.com/discovery/v1/apis/compute/v1/rest'; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js new file mode 100644 index 00000000000..0ff705b0879 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js @@ -0,0 +1,110 @@ +/* global gapi */ +import Vue from 'vue'; +import Flash from '~/flash'; +import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue'; +import GkeZoneDropdown from './components/gke_zone_dropdown.vue'; +import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue'; +import * as CONSTANTS from './constants'; + +const mountGkeProjectIdDropdown = () => { + const el = document.querySelector('.js-gcp-project-id-dropdown-entry-point'); + const hiddenInput = el.querySelector('input'); + + if (!el) return false; + + return new Vue({ + el, + components: { + GkeProjectIdDropdown, + }, + render: createElement => + createElement('gke-project-id-dropdown', { + props: { + docsUrl: el.dataset.docsurl, + service: gapi.client.cloudresourcemanager, + fieldName: hiddenInput.getAttribute('name'), + fieldId: hiddenInput.getAttribute('id'), + }, + }), + }); +}; + +const mountGkeZoneDropdown = () => { + const el = document.querySelector('.js-gcp-zone-dropdown-entry-point'); + const hiddenInput = el.querySelector('input'); + + if (!el) return false; + + return new Vue({ + el, + components: { + GkeZoneDropdown, + }, + render: createElement => + createElement('gke-zone-dropdown', { + props: { + service: gapi.client.compute, + fieldName: hiddenInput.getAttribute('name'), + fieldId: hiddenInput.getAttribute('id'), + }, + }), + }); +}; + +const mountGkeMachineTypeDropdown = () => { + const el = document.querySelector('.js-gcp-machine-type-dropdown-entry-point'); + const hiddenInput = el.querySelector('input'); + + if (!el) return false; + + return new Vue({ + el, + components: { + GkeMachineTypeDropdown, + }, + render: createElement => + createElement('gke-machine-type-dropdown', { + props: { + service: gapi.client.compute, + fieldName: hiddenInput.getAttribute('name'), + fieldId: hiddenInput.getAttribute('id'), + }, + }), + }); +}; + +const gkeDropdownErrorHandler = () => { + Flash(CONSTANTS.GCP_API_ERROR); +}; + +const initializeGapiClient = () => { + const el = document.getElementById('new_cluster'); + + gapi.client.setToken({ access_token: el.dataset.token }); + + gapi.client + .load(CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT) + .then(() => { + mountGkeProjectIdDropdown(); + }) + .catch(gkeDropdownErrorHandler); + + gapi.client + .load(CONSTANTS.GCP_API_COMPUTE_ENDPOINT) + .then(() => { + mountGkeZoneDropdown(); + mountGkeMachineTypeDropdown(); + }) + .catch(gkeDropdownErrorHandler); +}; + +const initGkeDropdowns = () => { + if (typeof gapi === 'undefined') { + gkeDropdownErrorHandler(); + return false; + } + + return gapi.load('client', initializeGapiClient); +}; + +export default initGkeDropdowns;