This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch 4.18
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.18 by this push:
new 01e5c25523a search in (too) large result sets (#7766)
01e5c25523a is described below
commit 01e5c25523abae42727294c299b41d20a99e71ec
Author: dahn <[email protected]>
AuthorDate: Thu Jul 27 15:03:12 2023 +0200
search in (too) large result sets (#7766)
Co-authored-by: Pearl Dsilva <[email protected]>
---
ui/src/components/view/SearchView.vue | 110 +++++++++++++++++++---------------
1 file changed, 62 insertions(+), 48 deletions(-)
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)">
<a-select-option
v-for="(opt, idx) in field.opts"
:key="idx"
@@ -236,6 +237,9 @@ export default {
}
},
methods: {
+ onchange: async function (event, fieldname) {
+ this.fetchDynamicFieldData(fieldname, event.target.value)
+ },
onVisibleForm () {
this.visibleFilter = !this.visibleFilter
if (!this.visibleFilter) return
@@ -254,7 +258,7 @@ export default {
}
return this.$t('label.' + fieldName)
},
- async initFormFieldData () {
+ initFields () {
const arrayField = []
this.fields = []
this.searchFilters.forEach(item => {
@@ -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,57 +321,65 @@ export default {
this.fields[levelIndex].loading = false
}
+ if (arrayField.includes('entitytype')) {
+ const entityTypeIndex = this.fields.findIndex(item => item.name ===
'entitytype')
+ this.fields[entityTypeIndex].loading = true
+ this.fields[entityTypeIndex].opts = this.fetchEntityType()
+ this.fields[entityTypeIndex].loading = false
+ }
+
+ if (arrayField.includes('resourcetype')) {
+ const resourceTypeIndex = this.fields.findIndex(item => item.name ===
'resourcetype')
+ this.fields[resourceTypeIndex].loading = true
+ this.fields[resourceTypeIndex].opts = [
+ { value: 'Account' },
+ { value: 'Domain' },
+ { value: 'Iso' },
+ { value: 'Network' },
+ { value: 'Template' },
+ { value: 'User' },
+ { value: 'VirtualMachine' },
+ { value: 'Volume' }
+ ]
+ 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())
+ 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())
+ 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())
+ 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())
+ 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())
- }
-
- if (arrayField.includes('entitytype')) {
- const entityTypeIndex = this.fields.findIndex(item => item.name ===
'entitytype')
- this.fields[entityTypeIndex].loading = true
- this.fields[entityTypeIndex].opts = this.fetchEntityType()
- this.fields[entityTypeIndex].loading = false
- }
-
- if (arrayField.includes('resourcetype')) {
- const resourceTypeIndex = this.fields.findIndex(item => item.name ===
'resourcetype')
- this.fields[resourceTypeIndex].loading = true
- this.fields[resourceTypeIndex].opts = [
- { value: 'Account' },
- { value: 'Domain' },
- { value: 'Iso' },
- { value: 'Network' },
- { value: 'Template' },
- { value: 'User' },
- { value: 'VirtualMachine' },
- { value: 'Volume' }
- ]
- this.fields[resourceTypeIndex].loading = false
+ promises.push(await this.fetchInstanceGroups(searchKeyword))
}
Promise.all(promises).then(response => {
@@ -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',
