diff options
Diffstat (limited to 'app/assets/javascripts/projects')
5 files changed, 103 insertions, 93 deletions
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue index ff67cf848d2..b55e7bb2d5d 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue @@ -1,7 +1,8 @@ <script> +import _ from 'underscore'; import Flash from '~/flash'; -import { s__ } from '~/locale'; -import { mapActions } from 'vuex'; +import { s__, sprintf } from '~/locale'; +import { mapState, mapGetters, mapActions } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; @@ -10,7 +11,6 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde import eventHub from '../eventhub'; import store from '../stores'; import DropdownButton from './dropdown_button.vue'; -// TODO: Fall back to default us-central1-a or first option export default { name: 'GkeMachineTypeDropdown', @@ -35,40 +35,43 @@ export default { type: String, required: true, }, + inputValue: { + type: String, + required: false, + default: '', + }, }, data() { return { isLoading: false, hasErrors: false, searchQuery: '', - selectedItem: '', items: [], }; }, computed: { + ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']), + ...mapGetters(['hasProject', 'hasZone']), isDisabled() { - return ( - this.$store.state.selectedProject.length === 0 || - this.$store.state.selectedZone.length === 0 - ); + return !this.selectedProject || !this.selectedZone; }, - results() { + searchResults() { return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); }, toggleText() { - if (this.$store.state.selectedMachineType) { - return this.$store.state.selectedMachineType; - } - if (this.isLoading) { return s__('ClusterIntegration|Fetching machine types'); } - if (!this.$store.state.selectedProject) { + if (this.selectedMachineType) { + return this.selectedMachineType; + } + + if (!this.hasProject && !this.hasZone) { return s__('ClusterIntegration|Select project and zone to choose machine type.'); } - return this.$store.state.selectedZone + return this.hasZone ? s__('ClusterIntegration|Select machine type') : s__('ClusterIntegration|Select zone to choose machine type'); }, @@ -85,34 +88,22 @@ export default { fetchItems() { this.isLoading = true; const request = this.service.machineTypes.list({ - project: this.$store.state.selectedProject.projectId, - zone: this.$store.state.selectedZone, + project: this.selectedProject.projectId, + zone: this.selectedZone, }); return request.then( resp => { + let machineTypeToSelect; this.items = resp.result.items; - // Cause error - // this.items = data; - - // Single state - // this.items = [ - // { - // create_time: '2018-01-16T15:55:02.992Z', - // lifecycle_state: 'ACTIVE', - // name: 'NaturalInterface', - // item_id: 'naturalinterface-192315', - // item_number: 840816084083, - // }, - // ]; - - if (this.items.length === 1) { - this.isDisabled = true; - this.setMachineType(this.items[0].name); + if (this.inputValue) { + machineTypeToSelect = _.find(this.items, item => item.name === this.inputValue); + this.setMachineType(machineTypeToSelect.name); } this.isLoading = false; + this.hasErrors = false; }, () => { this.isLoading = false; @@ -120,9 +111,10 @@ export default { if (resp.result.error) { Flash( - `${s__( - 'ClusterIntegration|An error occured while trying to fetch zone machine types:', - )} ${resp.result.error.message}`, + sprintf( + 'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}', + { error: resp.result.error.message }, + ), ); } }, @@ -130,7 +122,7 @@ export default { ); }, enableSubmit() { - document.querySelector('input[type=submit]').removeAttribute('disabled'); + document.querySelector('.js-gke-cluster-creation-submit').removeAttribute('disabled'); }, }, }; @@ -143,7 +135,7 @@ export default { > <dropdown-hidden-input :name="fieldName" - :value="$store.state.selectedMachineType" + :value="selectedMachineType" /> <dropdown-button :class="{ 'gl-field-error-outline': hasErrors }" @@ -159,7 +151,7 @@ export default { <div class="dropdown-content"> <ul> <li - v-for="result in results" + v-for="result in searchResults" :key="result.id" > <a diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue index 1bc826477dc..7efb038566d 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue @@ -2,7 +2,7 @@ import _ from 'underscore'; import Flash from '~/flash'; import { s__, sprintf } from '~/locale'; -import { mapActions } from 'vuex'; +import { mapState, mapGetters, mapActions } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; @@ -39,32 +39,38 @@ export default { type: String, required: true, }, + inputValue: { + type: String, + required: false, + default: '', + }, }, data() { return { isLoading: true, hasErrors: false, searchQuery: '', - selectedItem: '', items: [], }; }, computed: { + ...mapState(['selectedProject']), + ...mapGetters(['hasProject']), isDisabled() { return this.items.length < 2; }, - results() { + searchResults() { return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); }, toggleText() { - if (this.$store.state.selectedProject.name) { - return this.$store.state.selectedProject.name; - } - if (this.isLoading) { return s__('ClusterIntegration|Fetching projects'); } + if (this.hasProject) { + return this.selectedProject.name; + } + return this.items.length ? s__('ClusterIntegration|Select project') : s__('ClusterIntegration|No projects found'); @@ -105,24 +111,34 @@ export default { return request.then( resp => { + let projectToSelect; this.items = resp.result.projects; - this.isLoading = false; - if (this.items.length === 1) { - this.setProject(this.items[0]); + if (this.inputValue) { + projectToSelect = _.find(this.items, item => item.projectId === this.inputValue); + this.setProject(projectToSelect); + } else if (this.items.length === 1) { + projectToSelect = this.items[0]; + this.setProject(projectToSelect); } + + this.isLoading = false; + this.hasErrors = false; }, resp => { - this.isLoading = false; - this.hasErrors = true; - if (resp.result.error) { Flash( - `${s__('ClusterIntegration|An error occured while trying to fetch your projects:')} ${ - resp.result.error.message - }`, + sprintf( + 'ClusterIntegration|An error occured while trying to fetch your projects: %{error}', + { + error: resp.result.error.message, + }, + ), ); } + + this.isLoading = false; + this.hasErrors = true; }, this, ); @@ -139,7 +155,7 @@ export default { > <dropdown-hidden-input :name="fieldName" - :value="$store.state.selectedProject.projectId" + :value="selectedProject.projectId" /> <dropdown-button :class="{ 'gl-field-error-outline': hasErrors }" @@ -155,7 +171,7 @@ export default { <div class="dropdown-content"> <ul> <li - v-for="result in results" + v-for="result in searchResults" :key="result.project_number" > <a diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue index fdfdfb20046..801e8dbdfda 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue @@ -1,7 +1,8 @@ <script> +import _ from 'underscore'; import Flash from '~/flash'; -import { s__ } from '~/locale'; -import { mapActions } from 'vuex'; +import { s__, sprintf } from '~/locale'; +import { mapState, mapGetters, mapActions } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; @@ -10,7 +11,6 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde import eventHub from '../eventhub'; import store from '../stores'; import DropdownButton from './dropdown_button.vue'; -// TODO: Fall back to default us-central1-a or first option export default { name: 'GkeZoneDropdown', @@ -35,33 +35,39 @@ export default { type: String, required: true, }, + inputValue: { + type: String, + required: false, + default: '', + }, }, data() { return { isLoading: false, hasErrors: false, searchQuery: '', - selectedItem: '', items: [], }; }, computed: { + ...mapState(['selectedProject', 'selectedZone']), + ...mapGetters(['hasProject']), isDisabled() { - return this.$store.state.selectedProject.projectId.length === 0; + return !this.hasProject; }, - results() { + searchResults() { return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); }, toggleText() { - if (this.$store.state.selectedZone) { - return this.$store.state.selectedZone; - } - if (this.isLoading) { return s__('ClusterIntegration|Fetching zones'); } - return this.$store.state.selectedProject + if (this.selectedZone) { + return this.selectedZone; + } + + return this.$store.state.selectedProject.projectId.length ? s__('ClusterIntegration|Select zone') : s__('ClusterIntegration|Select project to choose zone'); }, @@ -77,33 +83,21 @@ export default { fetchItems() { this.isLoading = true; const request = this.service.zones.list({ - project: this.$store.state.selectedProject.projectId, + project: this.selectedProject.projectId, }); return request.then( resp => { + let zoneToSelect; this.items = resp.result.items; - // Cause error - // this.items = data; - - // Single state - // this.items = [ - // { - // create_time: '2018-01-16T15:55:02.992Z', - // lifecycle_state: 'ACTIVE', - // name: 'NaturalInterface', - // item_id: 'naturalinterface-192315', - // item_number: 840816084083, - // }, - // ]; - - if (this.items.length === 1) { - this.isDisabled = true; - this.setZone(this.items[0].name); + if (this.inputValue) { + zoneToSelect = _.find(this.items, item => item.name === this.inputValue); + this.setZone(zoneToSelect.name); } this.isLoading = false; + this.hasErrors = false; }, resp => { this.isLoading = false; @@ -111,9 +105,10 @@ export default { if (resp.result.error) { Flash( - `${s__('ClusterIntegration|An error occured while trying to fetch project zones:')} ${ - resp.result.error.message - }`, + sprintf( + 'ClusterIntegration|An error occured while trying to fetch project zones: %{error}', + { error: resp.result.error.message }, + ), ); } }, @@ -131,7 +126,7 @@ export default { > <dropdown-hidden-input :name="fieldName" - :value="$store.state.selectedZone" + :value="selectedZone" /> <dropdown-button :class="{ 'gl-field-error-outline': hasErrors }" @@ -147,7 +142,7 @@ export default { <div class="dropdown-content"> <ul> <li - v-for="result in results" + v-for="result in searchResults" :key="result.id" > <a diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js index 0ff705b0879..f933d32edee 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js @@ -24,6 +24,7 @@ const mountGkeProjectIdDropdown = () => { service: gapi.client.cloudresourcemanager, fieldName: hiddenInput.getAttribute('name'), fieldId: hiddenInput.getAttribute('id'), + inputValue: hiddenInput.value, }, }), }); @@ -46,6 +47,7 @@ const mountGkeZoneDropdown = () => { service: gapi.client.compute, fieldName: hiddenInput.getAttribute('name'), fieldId: hiddenInput.getAttribute('id'), + inputValue: hiddenInput.value, }, }), }); @@ -68,6 +70,7 @@ const mountGkeMachineTypeDropdown = () => { service: gapi.client.compute, fieldName: hiddenInput.getAttribute('name'), fieldId: hiddenInput.getAttribute('id'), + inputValue: hiddenInput.value, }, }), }); @@ -78,9 +81,10 @@ const gkeDropdownErrorHandler = () => { }; const initializeGapiClient = () => { - const el = document.getElementById('new_cluster'); + const el = document.querySelector('.js-gke-cluster-creation'); gapi.client.setToken({ access_token: el.dataset.token }); + delete el.dataset.token; gapi.client .load(CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT) diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/getters.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/getters.js index e69de29bb2d..e39f02d0894 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/getters.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/getters.js @@ -0,0 +1,3 @@ +export const hasProject = state => !!state.selectedProject.projectId; +export const hasZone = state => !!state.selectedZone; +export const hasMachineType = state => !!state.selectedMachineType; |