diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-05-06 23:28:07 +0300 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-05-06 23:28:07 +0300 |
commit | 1e4c2a2e8d029ce21fac9a41b4f0ed5e1457749d (patch) | |
tree | 673724e5c63d35e29b43153d5ffc9d66b2537eb0 /app/assets/javascripts/projects | |
parent | 41f2c1d564cc0fabae12d6743819f51a49963a1d (diff) |
complete vuex implementation + refactoring
Diffstat (limited to 'app/assets/javascripts/projects')
8 files changed, 182 insertions, 132 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 b55e7bb2d5d..3ab6ec24f3e 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,6 @@ <script> import _ from 'underscore'; -import Flash from '~/flash'; -import { s__, sprintf } from '~/locale'; +import { s__ } 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'; @@ -23,10 +22,6 @@ export default { DropdownHiddenInput, }, props: { - service: { - type: Object, - required: true, - }, fieldId: { type: String, required: true, @@ -35,7 +30,7 @@ export default { type: String, required: true, }, - inputValue: { + defaultValue: { type: String, required: false, default: '', @@ -46,17 +41,19 @@ export default { isLoading: false, hasErrors: false, searchQuery: '', - items: [], }; }, computed: { ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']), - ...mapGetters(['hasProject', 'hasZone']), + ...mapState({ machineTypes: 'fetchedMachineTypes' }), + ...mapGetters(['hasProject', 'hasZone', 'hasMachineType']), isDisabled() { return !this.selectedProject || !this.selectedZone; }, searchResults() { - return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); + return this.machineTypes.filter( + item => item.name.toLowerCase().indexOf(this.searchQuery) > -1, + ); }, toggleText() { if (this.isLoading) { @@ -75,54 +72,44 @@ export default { ? s__('ClusterIntegration|Select machine type') : s__('ClusterIntegration|Select zone to choose machine type'); }, - placeholderText() { + searchPlaceholderText() { return s__('ClusterIntegration|Search machine types'); }, }, created() { - eventHub.$on('zoneSelected', this.fetchItems); + eventHub.$on('zoneSelected', this.fetchMachineTypes); eventHub.$on('machineTypeSelected', this.enableSubmit); }, methods: { - ...mapActions(['setMachineType']), - fetchItems() { + ...mapActions(['setMachineType', 'getMachineTypes']), + fetchMachineTypes() { this.isLoading = true; - const request = this.service.machineTypes.list({ - project: this.selectedProject.projectId, - zone: this.selectedZone, - }); - return request.then( - resp => { - let machineTypeToSelect; - this.items = resp.result.items; + this.getMachineTypes() + .then(() => { + if (this.defaultValue) { + const machineTypeToSelect = _.find( + this.machineTypes, + item => item.name === this.defaultValue, + ); - if (this.inputValue) { - machineTypeToSelect = _.find(this.items, item => item.name === this.inputValue); - this.setMachineType(machineTypeToSelect.name); + if (machineTypeToSelect) { + this.setMachineType(machineTypeToSelect.name); + } } this.isLoading = false; this.hasErrors = false; - }, - () => { + }) + .catch(() => { this.isLoading = false; this.hasErrors = true; - - if (resp.result.error) { - Flash( - sprintf( - 'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}', - { error: resp.result.error.message }, - ), - ); - } - }, - this, - ); + }); }, enableSubmit() { - document.querySelector('.js-gke-cluster-creation-submit').removeAttribute('disabled'); + if (this.hasProject && this.hasZone && this.hasMachineType) { + document.querySelector('.js-gke-cluster-creation-submit').removeAttribute('disabled'); + } }, }, }; @@ -146,7 +133,7 @@ export default { <div class="dropdown-menu dropdown-select"> <dropdown-search-input v-model="searchQuery" - :placeholder-text="placeholderText" + :placeholder-text="searchPlaceholderText" /> <div class="dropdown-content"> <ul> 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 bd63bfbd5ba..668f1d7d2d7 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 @@ -1,6 +1,5 @@ <script> import _ from 'underscore'; -import Flash from '~/flash'; import { s__, sprintf } from '~/locale'; import { mapState, mapGetters, mapActions } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; @@ -10,7 +9,6 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde import store from '../stores'; import DropdownButton from './dropdown_button.vue'; -// TODO: Consolidate dropdown code export default { name: 'GkeProjectIdDropdown', @@ -27,10 +25,6 @@ export default { type: String, required: true, }, - service: { - type: Object, - required: true, - }, fieldId: { type: String, required: true, @@ -39,7 +33,7 @@ export default { type: String, required: true, }, - inputValue: { + defaultValue: { type: String, required: false, default: '', @@ -50,20 +44,20 @@ export default { isLoading: true, hasErrors: false, searchQuery: '', - items: [], }; }, computed: { ...mapState(['selectedProject']), + ...mapState({ projects: 'fetchedProjects' }), ...mapGetters(['hasProject']), hasOneProject() { - return this.items.length === 1; + return this.projects.length === 1; }, isDisabled() { - return this.items.length < 2; + return this.projects.length < 2; }, searchResults() { - return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); + return this.projects.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); }, toggleText() { if (this.isLoading) { @@ -74,11 +68,11 @@ export default { return this.selectedProject.name; } - return this.items.length + return this.projects.length ? s__('ClusterIntegration|Select project') : s__('ClusterIntegration|No projects found'); }, - placeholderText() { + searchPlaceholderText() { return s__('ClusterIntegration|Search projects'); }, helpText() { @@ -88,7 +82,7 @@ export default { 'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'; } - message = this.items.length + message = this.projects.length ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.' : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'; @@ -105,46 +99,33 @@ export default { }, }, created() { - this.fetchItems(); + this.fetchProjects(); }, methods: { - ...mapActions(['setProject']), - fetchItems() { - const request = this.service.projects.list(); - - return request.then( - resp => { - let projectToSelect; - this.items = resp.result.projects; + ...mapActions(['setProject', 'getProjects']), + fetchProjects() { + this.getProjects() + .then(() => { + if (this.defaultValue) { + const projectToSelect = _.find( + this.projects, + item => item.projectId === this.defaultValue, + ); - 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); + if (projectToSelect) { + this.setProject(projectToSelect); + } + } else if (this.projects.length === 1) { + this.setProject(this.projects[0]); } this.isLoading = false; this.hasErrors = false; - }, - resp => { - if (resp.result.error) { - Flash( - sprintf( - 'ClusterIntegration|An error occured while trying to fetch your projects: %{error}', - { - error: resp.result.error.message, - }, - ), - ); - } - + }) + .catch(() => { this.isLoading = false; this.hasErrors = true; - }, - this, - ); + }); }, }, }; @@ -161,7 +142,10 @@ export default { :value="selectedProject.projectId" /> <dropdown-button - :class="{ 'gl-field-error-outline': hasErrors, 'read-only': hasOneProject }" + :class="{ + 'gl-field-error-outline': hasErrors, + 'read-only': hasOneProject + }" :is-disabled="isDisabled" :is-loading="isLoading" :toggle-text="toggleText" @@ -169,7 +153,7 @@ export default { <div class="dropdown-menu dropdown-select"> <dropdown-search-input v-model="searchQuery" - :placeholder-text="placeholderText" + :placeholder-text="searchPlaceholderText" /> <div class="dropdown-content"> <ul> 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 801e8dbdfda..36fd467a633 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,6 @@ <script> import _ from 'underscore'; -import Flash from '~/flash'; -import { s__, sprintf } from '~/locale'; +import { s__ } 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'; @@ -23,10 +22,6 @@ export default { DropdownHiddenInput, }, props: { - service: { - type: Object, - required: true, - }, fieldId: { type: String, required: true, @@ -35,7 +30,7 @@ export default { type: String, required: true, }, - inputValue: { + defaultValue: { type: String, required: false, default: '', @@ -46,17 +41,17 @@ export default { isLoading: false, hasErrors: false, searchQuery: '', - items: [], }; }, computed: { ...mapState(['selectedProject', 'selectedZone']), + ...mapState({ zones: 'fetchedZones' }), ...mapGetters(['hasProject']), isDisabled() { return !this.hasProject; }, searchResults() { - return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); + return this.zones.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); }, toggleText() { if (this.isLoading) { @@ -71,49 +66,35 @@ export default { ? s__('ClusterIntegration|Select zone') : s__('ClusterIntegration|Select project to choose zone'); }, - placeholderText() { + searchPlaceholderText() { return s__('ClusterIntegration|Search zones'); }, }, created() { - eventHub.$on('projectSelected', this.fetchItems); + eventHub.$on('projectSelected', this.fetchZones); }, methods: { - ...mapActions(['setZone']), - fetchItems() { + ...mapActions(['setZone', 'getZones']), + fetchZones() { this.isLoading = true; - const request = this.service.zones.list({ - project: this.selectedProject.projectId, - }); - return request.then( - resp => { - let zoneToSelect; - this.items = resp.result.items; + this.getZones() + .then(() => { + if (this.defaultValue) { + const zoneToSelect = _.find(this.zones, item => item.name === this.defaultValue); - if (this.inputValue) { - zoneToSelect = _.find(this.items, item => item.name === this.inputValue); - this.setZone(zoneToSelect.name); + if (zoneToSelect) { + this.setZone(zoneToSelect.name); + } } this.isLoading = false; this.hasErrors = false; - }, - resp => { + }) + .catch(() => { this.isLoading = false; this.hasErrors = true; - - if (resp.result.error) { - Flash( - sprintf( - 'ClusterIntegration|An error occured while trying to fetch project zones: %{error}', - { error: resp.result.error.message }, - ), - ); - } - }, - this, - ); + }); }, }, }; @@ -137,7 +118,7 @@ export default { <div class="dropdown-menu dropdown-select"> <dropdown-search-input v-model="searchQuery" - :placeholder-text="placeholderText" + :placeholder-text="searchPlaceholderText" /> <div class="dropdown-content"> <ul> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js index f933d32edee..236d5945c6d 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js @@ -21,10 +21,9 @@ const mountGkeProjectIdDropdown = () => { createElement('gke-project-id-dropdown', { props: { docsUrl: el.dataset.docsurl, - service: gapi.client.cloudresourcemanager, fieldName: hiddenInput.getAttribute('name'), fieldId: hiddenInput.getAttribute('id'), - inputValue: hiddenInput.value, + defaultValue: hiddenInput.value, }, }), }); @@ -44,10 +43,9 @@ const mountGkeZoneDropdown = () => { render: createElement => createElement('gke-zone-dropdown', { props: { - service: gapi.client.compute, fieldName: hiddenInput.getAttribute('name'), fieldId: hiddenInput.getAttribute('id'), - inputValue: hiddenInput.value, + defaultValue: hiddenInput.value, }, }), }); @@ -67,10 +65,9 @@ const mountGkeMachineTypeDropdown = () => { render: createElement => createElement('gke-machine-type-dropdown', { props: { - service: gapi.client.compute, fieldName: hiddenInput.getAttribute('name'), fieldId: hiddenInput.getAttribute('id'), - inputValue: hiddenInput.value, + defaultValue: hiddenInput.value, }, }), }); diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js index 45a8c19e638..8ad15b2e923 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js @@ -1,3 +1,7 @@ +/* global gapi */ +import Flash from '~/flash'; +import { sprintf } from '~/locale'; + import * as types from './mutation_types'; import eventHub from '../eventhub'; @@ -18,3 +22,85 @@ export const setMachineType = ({ commit }, selectedMachineType) => { eventHub.$emit('machineTypeSelected'); }; + +export const getProjects = ({ commit }) => + new Promise((resolve, reject) => { + const request = gapi.client.cloudresourcemanager.projects.list(); + + return request.then( + resp => { + commit(types.SET_FETCHED_PROJECTS, resp.result.projects); + + resolve(); + }, + resp => { + if (resp.result.error) { + Flash( + sprintf( + 'ClusterIntegration|An error occured while trying to fetch your projects: %{error}', + { + error: resp.result.error.message, + }, + ), + ); + } + + reject(); + }, + ); + }); + +export const getZones = ({ commit, state }) => + new Promise((resolve, reject) => { + const request = gapi.client.compute.zones.list({ + project: state.selectedProject.projectId, + }); + + return request.then( + resp => { + commit(types.SET_FETCHED_ZONES, resp.result.items); + + resolve(); + }, + resp => { + if (resp.result.error) { + Flash( + sprintf( + 'ClusterIntegration|An error occured while trying to fetch project zones: %{error}', + { error: resp.result.error.message }, + ), + ); + } + + reject(); + }, + ); + }); + +export const getMachineTypes = ({ commit, state }) => + new Promise((resolve, reject) => { + const request = gapi.client.compute.machineTypes.list({ + project: state.selectedProject.projectId, + zone: state.selectedZone, + }); + + return request.then( + resp => { + commit(types.SET_FETCHED_MACHINE_TYPES, resp.result.items); + + resolve(); + }, + resp => { + if (resp.result.error) { + Flash( + sprintf( + 'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}', + { error: resp.result.error.message }, + ), + ); + } + + reject(); + }, + ); + }); diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js index 9d4b8d572b5..af6d89f5966 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js @@ -17,5 +17,8 @@ export default new Vuex.Store({ }, selectedZone: '', selectedMachineType: '', + fetchedProjects: [], + fetchedZones: [], + fetchedMachineTypes: [], }, }); diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutation_types.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutation_types.js index 865dc918f82..47f61a178ca 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutation_types.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutation_types.js @@ -1,3 +1,6 @@ export const SET_PROJECT = 'SET_PROJECT'; export const SET_ZONE = 'SET_ZONE'; export const SET_MACHINE_TYPE = 'SET_MACHINE_TYPE'; +export const SET_FETCHED_PROJECTS = 'SET_FETCHED_PROJECTS'; +export const SET_FETCHED_ZONES = 'SET_FETCHED_ZONES'; +export const SET_FETCHED_MACHINE_TYPES = 'SET_FETCHED_MACHINE_TYPES'; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutations.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutations.js index e00645b2005..5ae2170115f 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutations.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/mutations.js @@ -10,4 +10,13 @@ export default { [types.SET_MACHINE_TYPE](state, selectedMachineType) { Object.assign(state, { selectedMachineType }); }, + [types.SET_FETCHED_PROJECTS](state, fetchedProjects) { + Object.assign(state, { fetchedProjects }); + }, + [types.SET_FETCHED_ZONES](state, fetchedZones) { + Object.assign(state, { fetchedZones }); + }, + [types.SET_FETCHED_MACHINE_TYPES](state, fetchedMachineTypes) { + Object.assign(state, { fetchedMachineTypes }); + }, }; |