refactoring!
This commit is contained in:
parent
28a45b0218
commit
2ea263ea43
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
export const hasProject = state => !!state.selectedProject.projectId;
|
||||
export const hasZone = state => !!state.selectedZone;
|
||||
export const hasMachineType = state => !!state.selectedMachineType;
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#new_cluster {
|
||||
.js-gke-cluster-creation {
|
||||
.dropdown-menu-toggle {
|
||||
.loading-container {
|
||||
.fa {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
- link_to_help_page = link_to(s_('ClusterIntegration|help page'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
|
||||
= s_('ClusterIntegration|Read our %{link_to_help_page} on Kubernetes cluster integration.').html_safe % { link_to_help_page: link_to_help_page}
|
||||
|
||||
= form_for @cluster, html: { class: 'prepend-top-20', data: { token: @token_in_session } }, url: gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
|
||||
= form_for @cluster, html: { class: 'js-gke-cluster-creation prepend-top-20', data: { token: @token_in_session } }, url: gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
|
||||
= form_errors(@cluster)
|
||||
.form-group
|
||||
= field.label :name, s_('ClusterIntegration|Kubernetes cluster name')
|
||||
|
@ -51,4 +51,4 @@
|
|||
= icon('chevron-down')
|
||||
|
||||
.form-group
|
||||
= field.submit s_('ClusterIntegration|Create Kubernetes cluster'), class: 'btn btn-success', disabled: true
|
||||
= field.submit s_('ClusterIntegration|Create Kubernetes cluster'), class: 'js-gke-cluster-creation-submit btn btn-success', disabled: true
|
||||
|
|
Loading…
Reference in New Issue