diff options
author | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
commit | 6438df3a1e0fb944485cebf07976160184697d72 (patch) | |
tree | 00b09bfd170e77ae9391b1a2f5a93ef6839f2597 /app/assets/javascripts/create_cluster | |
parent | 42bcd54d971da7ef2854b896a7b34f4ef8601067 (diff) | |
download | gitlab-ce-6438df3a1e0fb944485cebf07976160184697d72.tar.gz |
Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42
Diffstat (limited to 'app/assets/javascripts/create_cluster')
16 files changed, 109 insertions, 90 deletions
diff --git a/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue b/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue index 1e3a19b9da1..7f4c3635119 100644 --- a/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue +++ b/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue @@ -6,9 +6,9 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; -const toArray = value => (isNil(value) ? [] : [].concat(value)); -const itemsProp = (items, prop) => items.map(item => item[prop]); -const defaultSearchFn = (searchQuery, labelProp) => item => +const toArray = (value) => (isNil(value) ? [] : [].concat(value)); +const itemsProp = (items, prop) => items.map((item) => item[prop]); +const defaultSearchFn = (searchQuery, labelProp) => (item) => item[labelProp].toLowerCase().indexOf(searchQuery) > -1; export default { @@ -135,7 +135,7 @@ export default { const valueList = toArray(this.value); const items = this.getItemsOrEmptyList(); - return items.filter(item => valueList.some(value => item[valueProp] === value)); + return items.filter((item) => valueList.some((value) => item[valueProp] === value)); }, selectedItemsLabels() { return itemsProp(this.selectedItems, this.labelProperty).join(', '); diff --git a/app/assets/javascripts/create_cluster/eks_cluster/index.js b/app/assets/javascripts/create_cluster/eks_cluster/index.js index 6d1034b4a72..38b7eefd15b 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/index.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/index.js @@ -6,7 +6,7 @@ import createStore from './store'; Vue.use(Vuex); -export default el => { +export default (el) => { const { gitlabManagedClusterHelpPath, namespacePerEnvironmentHelpPath, diff --git a/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js b/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js index 58568b5dedb..c2b59191997 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js @@ -37,7 +37,7 @@ export const fetchVpcs = ({ region }) => { .describeVpcs() .promise() .then(({ Vpcs: vpcs }) => - vpcs.map(vpc => ({ + vpcs.map((vpc) => ({ value: vpc.VpcId, name: lookupVpcName(vpc), })), diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js index b182d4dff13..55576efd3b8 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js @@ -5,7 +5,7 @@ import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; -const getErrorMessage = data => { +const getErrorMessage = (data) => { const errorKey = Object.keys(data)[0]; return data[errorKey][0]; @@ -42,7 +42,7 @@ export const createRole = ({ dispatch, state: { createRolePath } }, payload) => dispatch('createRoleSuccess', awsData); }) - .catch(error => { + .catch((error) => { let message = error; if (error?.response?.data?.message) { message = error.response.data.message; diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js index c957eca1f7a..c906ddf9011 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js @@ -1,6 +1,6 @@ import { KUBERNETES_VERSIONS } from '../constants'; -const kubernetesVersion = KUBERNETES_VERSIONS.find(version => version.default).value; +const kubernetesVersion = KUBERNETES_VERSIONS.find((version) => version.default).value; export default () => ({ createRolePath: null, 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; diff --git a/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js b/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js index 0ec4d8807b0..2b3dfb99328 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js +++ b/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js @@ -12,7 +12,7 @@ const setDisabled = (el, isDisabled) => { } }; -const setState = glManagedCheckbox => { +const setState = (glManagedCheckbox) => { const glManaged = document.querySelector('.js-namespace-prefixed'); const selfManaged = document.querySelector('.js-namespace'); diff --git a/app/assets/javascripts/create_cluster/init_create_cluster.js b/app/assets/javascripts/create_cluster/init_create_cluster.js index 2b09771d772..f97da3d55db 100644 --- a/app/assets/javascripts/create_cluster/init_create_cluster.js +++ b/app/assets/javascripts/create_cluster/init_create_cluster.js @@ -4,11 +4,11 @@ import PersistentUserCallout from '~/persistent_user_callout'; const newClusterViews = [':clusters:new', ':clusters:create_gcp', ':clusters:create_user']; -const isProjectLevelCluster = page => page.startsWith('project:clusters'); +const isProjectLevelCluster = (page) => page.startsWith('project:clusters'); -export default document => { +export default (document) => { const { page } = document.body.dataset; - const isNewClusterView = newClusterViews.some(view => page.endsWith(view)); + const isNewClusterView = newClusterViews.some((view) => page.endsWith(view)); if (!isNewClusterView) { return; @@ -19,6 +19,10 @@ export default document => { initGkeDropdowns(); + if (isProjectLevelCluster(page)) { + initGkeNamespace(); + } + import(/* webpackChunkName: 'eks_cluster' */ '~/create_cluster/eks_cluster') .then(({ default: initCreateEKSCluster }) => { const el = document.querySelector('.js-create-eks-cluster-form-container'); @@ -28,8 +32,4 @@ export default document => { } }) .catch(() => {}); - - if (isProjectLevelCluster(page)) { - initGkeNamespace(); - } }; diff --git a/app/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js b/app/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js index 5d250b2e29e..669b0dcc732 100644 --- a/app/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js +++ b/app/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js @@ -1,6 +1,6 @@ import * as types from './mutation_types'; -export default fetchItems => ({ +export default (fetchItems) => ({ requestItems: ({ commit }) => commit(types.REQUEST_ITEMS), receiveItemsSuccess: ({ commit }, payload) => commit(types.RECEIVE_ITEMS_SUCCESS, payload), receiveItemsError: ({ commit }, payload) => commit(types.RECEIVE_ITEMS_ERROR, payload), @@ -8,7 +8,7 @@ export default fetchItems => ({ dispatch('requestItems'); return fetchItems(payload) - .then(items => dispatch('receiveItemsSuccess', { items })) - .catch(error => dispatch('receiveItemsError', { error })); + .then((items) => dispatch('receiveItemsSuccess', { items })) + .catch((error) => dispatch('receiveItemsError', { error })); }, }); |