debian-mirror-gitlab/app/assets/javascripts/create_cluster/gke_cluster/index.js

96 lines
2.6 KiB
JavaScript
Raw Normal View History

2018-11-08 19:23:39 +05:30
import Vue from 'vue';
2021-09-30 23:02:18 +05:30
import createFlash from '~/flash';
2018-11-08 19:23:39 +05:30
import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue';
2021-03-11 19:13:27 +05:30
import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue';
2020-03-13 15:44:24 +05:30
import GkeSubmitButton from './components/gke_submit_button.vue';
2021-03-11 19:13:27 +05:30
import GkeZoneDropdown from './components/gke_zone_dropdown.vue';
import * as CONSTANTS from './constants';
2021-03-08 18:12:59 +05:30
import gapiLoader from './gapi_loader';
2020-03-13 15:44:24 +05:30
import store from './store';
2018-11-08 19:23:39 +05:30
const mountComponent = (entryPoint, component, componentName, extraProps = {}) => {
const el = document.querySelector(entryPoint);
if (!el) return false;
const hiddenInput = el.querySelector('input');
return new Vue({
el,
2020-03-13 15:44:24 +05:30
store,
2018-11-08 19:23:39 +05:30
components: {
[componentName]: component,
},
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2018-11-08 19:23:39 +05:30
createElement(componentName, {
props: {
fieldName: hiddenInput.getAttribute('name'),
fieldId: hiddenInput.getAttribute('id'),
defaultValue: hiddenInput.value,
...extraProps,
},
}),
});
};
const mountGkeProjectIdDropdown = () => {
const entryPoint = '.js-gcp-project-id-dropdown-entry-point';
const el = document.querySelector(entryPoint);
mountComponent(entryPoint, GkeProjectIdDropdown, 'gke-project-id-dropdown', {
docsUrl: el.dataset.docsurl,
});
};
const mountGkeZoneDropdown = () => {
mountComponent('.js-gcp-zone-dropdown-entry-point', GkeZoneDropdown, 'gke-zone-dropdown');
};
const mountGkeMachineTypeDropdown = () => {
mountComponent(
'.js-gcp-machine-type-dropdown-entry-point',
GkeMachineTypeDropdown,
'gke-machine-type-dropdown',
);
};
2020-03-13 15:44:24 +05:30
const mountGkeSubmitButton = () => {
mountComponent('.js-gke-cluster-creation-submit-container', GkeSubmitButton, 'gke-submit-button');
};
2018-11-08 19:23:39 +05:30
const gkeDropdownErrorHandler = () => {
2021-09-30 23:02:18 +05:30
createFlash({
message: CONSTANTS.GCP_API_ERROR,
});
2018-11-08 19:23:39 +05:30
};
2021-03-08 18:12:59 +05:30
const initializeGapiClient = (gapi) => () => {
2018-11-08 19:23:39 +05:30
const el = document.querySelector('.js-gke-cluster-creation');
if (!el) return false;
return gapi.client
.init({
discoveryDocs: [
CONSTANTS.GCP_API_CLOUD_BILLING_ENDPOINT,
CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT,
CONSTANTS.GCP_API_COMPUTE_ENDPOINT,
],
})
.then(() => {
gapi.client.setToken({ access_token: el.dataset.token });
mountGkeProjectIdDropdown();
mountGkeZoneDropdown();
mountGkeMachineTypeDropdown();
2020-03-13 15:44:24 +05:30
mountGkeSubmitButton();
2018-11-08 19:23:39 +05:30
})
.catch(gkeDropdownErrorHandler);
};
2021-03-08 18:12:59 +05:30
const initGkeDropdowns = () =>
gapiLoader()
.then((gapi) => gapi.load('client', initializeGapiClient(gapi)))
.catch(gkeDropdownErrorHandler);
2018-11-08 19:23:39 +05:30
export default initGkeDropdowns;