diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-05-06 15:42:51 +0300 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-05-06 15:42:51 +0300 |
commit | e754fafad6b8faf06c8154cdd8170cb4567b6835 (patch) | |
tree | 13db02f60befaa7822b66a0785c263b51a11bb85 /app/assets/javascripts/projects | |
parent | eece2a1c6f735d757fdd11eed04cd661fee125fc (diff) |
revisions
Diffstat (limited to 'app/assets/javascripts/projects')
3 files changed, 119 insertions, 1 deletions
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: {}, }; </script> 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; |