1<script> 2import { mapState, mapGetters, mapActions } from 'vuex'; 3import { sprintf, s__ } from '~/locale'; 4 5import gkeDropdownMixin from './gke_dropdown_mixin'; 6 7export default { 8 name: 'GkeMachineTypeDropdown', 9 mixins: [gkeDropdownMixin], 10 computed: { 11 ...mapState([ 12 'isValidatingProjectBilling', 13 'projectHasBillingEnabled', 14 'selectedZone', 15 'selectedMachineType', 16 ]), 17 ...mapState({ items: 'machineTypes' }), 18 ...mapGetters(['hasZone', 'hasMachineType']), 19 isDisabled() { 20 return ( 21 this.isLoading || 22 this.isValidatingProjectBilling || 23 !this.projectHasBillingEnabled || 24 !this.hasZone 25 ); 26 }, 27 toggleText() { 28 if (this.isLoading) { 29 return s__('ClusterIntegration|Fetching machine types'); 30 } 31 32 if (this.selectedMachineType) { 33 return this.selectedMachineType; 34 } 35 36 if (!this.projectHasBillingEnabled && !this.hasZone) { 37 return s__('ClusterIntegration|Select project and zone to choose machine type'); 38 } 39 40 return !this.hasZone 41 ? s__('ClusterIntegration|Select zone to choose machine type') 42 : s__('ClusterIntegration|Select machine type'); 43 }, 44 errorMessage() { 45 return sprintf( 46 s__( 47 'ClusterIntegration|An error occurred while trying to fetch zone machine types: %{error}', 48 ), 49 { error: this.gapiError }, 50 ); 51 }, 52 }, 53 watch: { 54 selectedZone() { 55 this.hasErrors = false; 56 57 if (this.hasZone) { 58 this.isLoading = true; 59 60 this.fetchMachineTypes().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler); 61 } 62 }, 63 }, 64 methods: { 65 ...mapActions(['fetchMachineTypes']), 66 ...mapActions({ setItem: 'setMachineType' }), 67 }, 68}; 69</script> 70 71<template> 72 <div> 73 <div class="js-gcp-machine-type-dropdown dropdown"> 74 <dropdown-hidden-input :name="fieldName" :value="selectedMachineType" /> 75 <dropdown-button 76 :class="{ 'border-danger': hasErrors }" 77 :is-disabled="isDisabled" 78 :is-loading="isLoading" 79 :toggle-text="toggleText" 80 /> 81 <div class="dropdown-menu dropdown-select"> 82 <dropdown-search-input 83 v-model="searchQuery" 84 :placeholder-text="s__('ClusterIntegration|Search machine types')" 85 /> 86 <div class="dropdown-content"> 87 <ul> 88 <li v-show="!results.length"> 89 <span class="menu-item"> 90 {{ s__('ClusterIntegration|No machine types matched your search') }} 91 </span> 92 </li> 93 <li v-for="result in results" :key="result.id"> 94 <button type="button" @click.prevent="setItem(result.name)">{{ result.name }}</button> 95 </li> 96 </ul> 97 </div> 98 <div class="dropdown-loading"><gl-loading-icon size="sm" /></div> 99 </div> 100 </div> 101 <span 102 v-if="hasErrors" 103 :class="{ 104 'text-danger': hasErrors, 105 'text-muted': !hasErrors, 106 }" 107 class="form-text" 108 > 109 {{ errorMessage }} 110 </span> 111 </div> 112</template> 113