diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue index 680d5521d49..190db440fd1 100644 --- a/ui/src/components/view/SearchView.vue +++ b/ui/src/components/view/SearchView.vue @@ -65,7 +65,8 @@ :filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }" - :loading="field.loading"> + :loading="field.loading" + @input="onchange($event, field.name)"> { @@ -291,14 +295,9 @@ export default { }) arrayField.push(item) }) - - const promises = [] - let zoneIndex = -1 - let domainIndex = -1 - let podIndex = -1 - let clusterIndex = -1 - let groupIndex = -1 - + return arrayField + }, + fetchStaticFieldData (arrayField) { if (arrayField.includes('type')) { if (this.$route.path === '/guestnetwork' || this.$route.path.includes('/guestnetwork/')) { const typeIndex = this.fields.findIndex(item => item.name === 'type') @@ -322,36 +321,6 @@ export default { this.fields[levelIndex].loading = false } - if (arrayField.includes('zoneid')) { - zoneIndex = this.fields.findIndex(item => item.name === 'zoneid') - this.fields[zoneIndex].loading = true - promises.push(await this.fetchZones()) - } - - if (arrayField.includes('domainid')) { - domainIndex = this.fields.findIndex(item => item.name === 'domainid') - this.fields[domainIndex].loading = true - promises.push(await this.fetchDomains()) - } - - if (arrayField.includes('podid')) { - podIndex = this.fields.findIndex(item => item.name === 'podid') - this.fields[podIndex].loading = true - promises.push(await this.fetchPods()) - } - - if (arrayField.includes('clusterid')) { - clusterIndex = this.fields.findIndex(item => item.name === 'clusterid') - this.fields[clusterIndex].loading = true - promises.push(await this.fetchClusters()) - } - - if (arrayField.includes('groupid')) { - groupIndex = this.fields.findIndex(item => item.name === 'groupid') - this.fields[groupIndex].loading = true - promises.push(await this.fetchInstanceGroups()) - } - if (arrayField.includes('entitytype')) { const entityTypeIndex = this.fields.findIndex(item => item.name === 'entitytype') this.fields[entityTypeIndex].loading = true @@ -374,6 +343,44 @@ export default { ] this.fields[resourceTypeIndex].loading = false } + }, + async fetchDynamicFieldData (arrayField, searchKeyword) { + const promises = [] + let zoneIndex = -1 + let domainIndex = -1 + let podIndex = -1 + let clusterIndex = -1 + let groupIndex = -1 + + if (arrayField.includes('zoneid')) { + zoneIndex = this.fields.findIndex(item => item.name === 'zoneid') + this.fields[zoneIndex].loading = true + promises.push(await this.fetchZones(searchKeyword)) + } + + if (arrayField.includes('domainid')) { + domainIndex = this.fields.findIndex(item => item.name === 'domainid') + this.fields[domainIndex].loading = true + promises.push(await this.fetchDomains(searchKeyword)) + } + + if (arrayField.includes('podid')) { + podIndex = this.fields.findIndex(item => item.name === 'podid') + this.fields[podIndex].loading = true + promises.push(await this.fetchPods(searchKeyword)) + } + + if (arrayField.includes('clusterid')) { + clusterIndex = this.fields.findIndex(item => item.name === 'clusterid') + this.fields[clusterIndex].loading = true + promises.push(await this.fetchClusters(searchKeyword)) + } + + if (arrayField.includes('groupid')) { + groupIndex = this.fields.findIndex(item => item.name === 'groupid') + this.fields[groupIndex].loading = true + promises.push(await this.fetchInstanceGroups(searchKeyword)) + } Promise.all(promises).then(response => { if (zoneIndex > -1) { @@ -425,6 +432,13 @@ export default { this.fillFormFieldValues() }) }, + initFormFieldData () { + const arrayField = this.initFields() + + this.fetchStaticFieldData(arrayField) + + this.fetchDynamicFieldData(arrayField) + }, sortArray (data, key = 'name') { return data.sort(function (a, b) { if (a[key] < b[key]) { return -1 } @@ -447,9 +461,9 @@ export default { this.inputKey = this.fieldValues['tags[0].key'] || null this.inputValue = this.fieldValues['tags[0].value'] || null }, - fetchZones () { + fetchZones (searchKeyword) { return new Promise((resolve, reject) => { - api('listZones', { showicon: true }).then(json => { + api('listZones', { showicon: true, keyword: searchKeyword }).then(json => { const zones = json.listzonesresponse.zone resolve({ type: 'zoneid', @@ -460,9 +474,9 @@ export default { }) }) }, - fetchDomains () { + fetchDomains (searchKeyword) { return new Promise((resolve, reject) => { - api('listDomains', { listAll: true, showicon: true }).then(json => { + api('listDomains', { listAll: true, showicon: true, keyword: searchKeyword }).then(json => { const domain = json.listdomainsresponse.domain resolve({ type: 'domainid', @@ -473,9 +487,9 @@ export default { }) }) }, - fetchPods () { + fetchPods (searchKeyword) { return new Promise((resolve, reject) => { - api('listPods').then(json => { + api('listPods', { keyword: searchKeyword }).then(json => { const pods = json.listpodsresponse.pod resolve({ type: 'podid', @@ -486,9 +500,9 @@ export default { }) }) }, - fetchClusters () { + fetchClusters (searchKeyword) { return new Promise((resolve, reject) => { - api('listClusters').then(json => { + api('listClusters', { keyword: searchKeyword }).then(json => { const clusters = json.listclustersresponse.cluster resolve({ type: 'clusterid', @@ -499,9 +513,9 @@ export default { }) }) }, - fetchInstanceGroups () { + fetchInstanceGroups (searchKeyword) { return new Promise((resolve, reject) => { - api('listInstanceGroups', { listAll: true }).then(json => { + api('listInstanceGroups', { listAll: true, keyword: searchKeyword }).then(json => { const instancegroups = json.listinstancegroupsresponse.instancegroup resolve({ type: 'groupid',