Skip to content

G
gitlab-ce
Commit 2ea263ea authored by Dennis Tang's avatar Dennis Tang
Browse files
Options

refactoring!

parent 28a45b02
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 96 deletions
app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
View file @ 2ea263ea
<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
......
app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
View file @ 2ea263ea
......@@ -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
......
app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
View file @ 2ea263ea
<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
......
app/assets/javascripts/projects/gke_cluster_dropdowns/index.js
View file @ 2ea263ea
......@@ -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)
......
app/assets/javascripts/projects/gke_cluster_dropdowns/stores/getters.js
View file @ 2ea263ea
export const hasProject = state => !!state.selectedProject.projectId;
export const hasZone = state => !!state.selectedZone;
export const hasMachineType = state => !!state.selectedMachineType;
app/assets/stylesheets/pages/clusters.scss
View file @ 2ea263ea
......@@ -27,7 +27,7 @@
}
}
#new_cluster {
.js-gke-cluster-creation {
.dropdown-menu-toggle {
.loading-container {
.fa {
......
app/views/projects/clusters/gcp/_form.html.haml
View file @ 2ea263ea
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7