diff options
Diffstat (limited to 'app/assets/javascripts/create_cluster/gke_cluster')
8 files changed, 89 insertions, 70 deletions
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js index 3b91ce63744..f9d0d86e381 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js @@ -42,13 +42,13 @@ export default { return []; } - return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); + return this.items.filter((item) => item.name.toLowerCase().indexOf(this.searchQuery) > -1); }, }, methods: { fetchSuccessHandler() { if (this.defaultValue) { - const itemToSelect = this.items.find(item => item.name === this.defaultValue); + const itemToSelect = this.items.find((item) => item.name === this.defaultValue); if (itemToSelect) { this.setItem(itemToSelect.name); diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue index d6deda25752..6b18455bfcc 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue +++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue @@ -57,9 +57,7 @@ export default { if (this.hasZone) { this.isLoading = true; - this.fetchMachineTypes() - .then(this.fetchSuccessHandler) - .catch(this.fetchFailureHandler); + this.fetchMachineTypes().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler); } }, }, diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue index 522fef423af..acbc4d1b3bc 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue +++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue @@ -99,16 +99,14 @@ export default { created() { this.isLoading = true; - this.fetchProjects() - .then(this.fetchSuccessHandler) - .catch(this.fetchFailureHandler); + this.fetchProjects().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler); }, methods: { ...mapActions(['fetchProjects', 'setIsValidatingProjectBilling', 'validateProjectBilling']), ...mapActions({ setItem: 'setProject' }), fetchSuccessHandler() { if (this.defaultValue) { - const projectToSelect = this.items.find(item => item.projectId === this.defaultValue); + const projectToSelect = this.items.find((item) => item.projectId === this.defaultValue); if (projectToSelect) { this.setItem(projectToSelect); @@ -175,9 +173,7 @@ export default { <gl-sprintf :message="helpText"> <template #linkToBilling="{ content }"> <gl-link - :href=" - 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral' - " + :href="'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral'" target="_blank" >{{ content }} <gl-icon name="external-link" /></gl-link> diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue index b60a5be2e63..daab42c7e60 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue +++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue @@ -46,9 +46,7 @@ export default { if (!isValidating && this.projectHasBillingEnabled) { this.isLoading = true; - this.fetchZones() - .then(this.fetchSuccessHandler) - .catch(this.fetchFailureHandler); + this.fetchZones().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler); } }, }, diff --git a/app/assets/javascripts/create_cluster/gke_cluster/gapi_loader.js b/app/assets/javascripts/create_cluster/gke_cluster/gapi_loader.js new file mode 100644 index 00000000000..b5f92fed8eb --- /dev/null +++ b/app/assets/javascripts/create_cluster/gke_cluster/gapi_loader.js @@ -0,0 +1,24 @@ +// This is a helper module to lazily import the google APIs for the GKE cluster +// integration without introducing an indirect global dependency on an +// initialized window.gapi object. +export default () => { + if (window.gapiPromise === undefined) { + // first time loading the module + window.gapiPromise = new Promise((resolve, reject) => { + // this callback is set as a query param to script.src URL + window.onGapiLoad = () => { + resolve(window.gapi); + }; + + const script = document.createElement('script'); + // do not use script.onload, because gapi continues to load after the initial script load + script.type = 'text/javascript'; + script.async = true; + script.src = 'https://apis.google.com/js/api.js?onload=onGapiLoad'; + script.onerror = reject; + document.head.appendChild(script); + }); + } + + return window.gapiPromise; +}; diff --git a/app/assets/javascripts/create_cluster/gke_cluster/index.js b/app/assets/javascripts/create_cluster/gke_cluster/index.js index b9316353072..c02173fc510 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/index.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/index.js @@ -1,10 +1,10 @@ -/* global gapi */ import Vue from 'vue'; import { deprecatedCreateFlash as 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 GkeSubmitButton from './components/gke_submit_button.vue'; +import gapiLoader from './gapi_loader'; import store from './store'; @@ -22,7 +22,7 @@ const mountComponent = (entryPoint, component, componentName, extraProps = {}) = components: { [componentName]: component, }, - render: createElement => + render: (createElement) => createElement(componentName, { props: { fieldName: hiddenInput.getAttribute('name'), @@ -63,7 +63,7 @@ const gkeDropdownErrorHandler = () => { Flash(CONSTANTS.GCP_API_ERROR); }; -const initializeGapiClient = () => { +const initializeGapiClient = (gapi) => () => { const el = document.querySelector('.js-gke-cluster-creation'); if (!el) return false; @@ -86,13 +86,9 @@ const initializeGapiClient = () => { .catch(gkeDropdownErrorHandler); }; -const initGkeDropdowns = () => { - if (!gapi) { - gkeDropdownErrorHandler(); - return false; - } - - return gapi.load('client', initializeGapiClient); -}; +const initGkeDropdowns = () => + gapiLoader() + .then((gapi) => gapi.load('client', initializeGapiClient(gapi))) + .catch(gkeDropdownErrorHandler); export default initGkeDropdowns; diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js index f0c41d1d230..8977053297a 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js @@ -1,19 +1,19 @@ -/* global gapi */ import * as types from './mutation_types'; +import gapiLoader from '../gapi_loader'; const gapiResourceListRequest = ({ resource, params, commit, mutation, payloadKey }) => new Promise((resolve, reject) => { const request = resource.list(params); return request.then( - resp => { + (resp) => { const { result } = resp; commit(mutation, result[payloadKey]); resolve(); }, - resp => { + (resp) => { reject(resp); }, ); @@ -36,57 +36,64 @@ export const setIsValidatingProjectBilling = ({ commit }, isValidatingProjectBil }; export const fetchProjects = ({ commit }) => - gapiResourceListRequest({ - resource: gapi.client.cloudresourcemanager.projects, - params: {}, - commit, - mutation: types.SET_PROJECTS, - payloadKey: 'projects', - }); + gapiLoader().then((gapi) => + gapiResourceListRequest({ + resource: gapi.client.cloudresourcemanager.projects, + params: {}, + commit, + mutation: types.SET_PROJECTS, + payloadKey: 'projects', + }), + ); export const validateProjectBilling = ({ dispatch, commit, state }) => - new Promise((resolve, reject) => { - const request = gapi.client.cloudbilling.projects.getBillingInfo({ - name: `projects/${state.selectedProject.projectId}`, - }); + gapiLoader() + .then((gapi) => { + const request = gapi.client.cloudbilling.projects.getBillingInfo({ + name: `projects/${state.selectedProject.projectId}`, + }); - commit(types.SET_ZONE, ''); - commit(types.SET_MACHINE_TYPE, ''); + commit(types.SET_ZONE, ''); + commit(types.SET_MACHINE_TYPE, ''); - return request.then( - resp => { + return request; + }) + .then( + (resp) => { const { billingEnabled } = resp.result; commit(types.SET_PROJECT_BILLING_STATUS, Boolean(billingEnabled)); dispatch('setIsValidatingProjectBilling', false); - resolve(); }, - resp => { + (errorResp) => { dispatch('setIsValidatingProjectBilling', false); - reject(resp); + return errorResp; }, ); - }); export const fetchZones = ({ commit, state }) => - gapiResourceListRequest({ - resource: gapi.client.compute.zones, - params: { - project: state.selectedProject.projectId, - }, - commit, - mutation: types.SET_ZONES, - payloadKey: 'items', - }); + gapiLoader().then((gapi) => + gapiResourceListRequest({ + resource: gapi.client.compute.zones, + params: { + project: state.selectedProject.projectId, + }, + commit, + mutation: types.SET_ZONES, + payloadKey: 'items', + }), + ); export const fetchMachineTypes = ({ commit, state }) => - gapiResourceListRequest({ - resource: gapi.client.compute.machineTypes, - params: { - project: state.selectedProject.projectId, - zone: state.selectedZone, - }, - commit, - mutation: types.SET_MACHINE_TYPES, - payloadKey: 'items', - }); + gapiLoader().then((gapi) => + gapiResourceListRequest({ + resource: gapi.client.compute.machineTypes, + params: { + project: state.selectedProject.projectId, + zone: state.selectedZone, + }, + commit, + mutation: types.SET_MACHINE_TYPES, + payloadKey: 'items', + }), + ); diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js index 4d4cd223832..99f8393ffdb 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js @@ -1,5 +1,5 @@ -export const hasProject = state => Boolean(state.selectedProject.projectId); -export const hasZone = state => Boolean(state.selectedZone); -export const hasMachineType = state => Boolean(state.selectedMachineType); +export const hasProject = (state) => Boolean(state.selectedProject.projectId); +export const hasZone = (state) => Boolean(state.selectedZone); +export const hasMachineType = (state) => Boolean(state.selectedMachineType); export const hasValidData = (state, getters) => Boolean(state.projectHasBillingEnabled) && getters.hasZone && getters.hasMachineType; |