From 84b434e31215ebadf33019769acefc9b11e05a36 Mon Sep 17 00:00:00 2001 From: Daan Hoogland Date: Mon, 24 Jul 2023 11:52:03 +0200 Subject: [PATCH 1/3] domain specific change handler --- ui/src/components/view/SearchView.vue | 34 +++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue index 680d5521d49e..477d378aa8a0 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)"> item.name === 'domainid') + this.fields[domainIndex].loading = true + promises.push(await this.fetchDomains(value)) + } + Promise.all(promises).then(response => { + if (domainIndex > -1) { + const domain = response.filter(item => item.type === 'domainid') + if (domain && domain.length > 0) { + this.fields[domainIndex].opts = this.sortArray(domain[0].data, 'path') + } + } + }).finally(() => { + if (domainIndex > -1) { + this.fields[domainIndex].loading = false + } + this.fillFormFieldValues() + }) + }, onVisibleForm () { this.visibleFilter = !this.visibleFilter if (!this.visibleFilter) return @@ -331,7 +355,7 @@ export default { 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('')) } if (arrayField.includes('podid')) { @@ -460,9 +484,11 @@ export default { }) }) }, - fetchDomains () { + fetchDomains (name) { return new Promise((resolve, reject) => { - api('listDomains', { listAll: true, showicon: true }).then(json => { + const pagesize = 100 + const page = 1 + api('listDomains', { listAll: true, showicon: true, pagesize: pagesize, page: page, keyword: name }).then(json => { const domain = json.listdomainsresponse.domain resolve({ type: 'domainid', From 3466e381a63e7e955cbfe24f9c8c9c63ea94e248 Mon Sep 17 00:00:00 2001 From: Daan Hoogland Date: Mon, 24 Jul 2023 14:38:14 +0200 Subject: [PATCH 2/3] refactor to be more generic --- ui/src/components/view/SearchView.vue | 128 ++++++++++++-------------- 1 file changed, 58 insertions(+), 70 deletions(-) diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue index 477d378aa8a0..2d63490d29f2 100644 --- a/ui/src/components/view/SearchView.vue +++ b/ui/src/components/view/SearchView.vue @@ -238,27 +238,7 @@ export default { }, methods: { onchange: async function (event, fieldname) { - const promises = [] - const value = event.target.value - let domainIndex = -1 - if (fieldname.includes('domainid')) { - domainIndex = this.fields.findIndex(item => item.name === 'domainid') - this.fields[domainIndex].loading = true - promises.push(await this.fetchDomains(value)) - } - Promise.all(promises).then(response => { - if (domainIndex > -1) { - const domain = response.filter(item => item.type === 'domainid') - if (domain && domain.length > 0) { - this.fields[domainIndex].opts = this.sortArray(domain[0].data, 'path') - } - } - }).finally(() => { - if (domainIndex > -1) { - this.fields[domainIndex].loading = false - } - this.fillFormFieldValues() - }) + this.fetchDynamicFieldData(fieldname, event.target.value) }, onVisibleForm () { this.visibleFilter = !this.visibleFilter @@ -278,7 +258,7 @@ export default { } return this.$t('label.' + fieldName) }, - async initFormFieldData () { + initFields () { const arrayField = [] this.fields = [] this.searchFilters.forEach(item => { @@ -315,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') @@ -346,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 => { @@ -449,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 } @@ -471,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, keyyword: searchKeyword }).then(json => { const zones = json.listzonesresponse.zone resolve({ type: 'zoneid', @@ -484,11 +474,9 @@ export default { }) }) }, - fetchDomains (name) { + fetchDomains (searchKeyword) { return new Promise((resolve, reject) => { - const pagesize = 100 - const page = 1 - api('listDomains', { listAll: true, showicon: true, pagesize: pagesize, page: page, keyword: name }).then(json => { + api('listDomains', { listAll: true, showicon: true, keyword: searchKeyword }).then(json => { const domain = json.listdomainsresponse.domain resolve({ type: 'domainid', @@ -499,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', @@ -512,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', @@ -525,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', From 9e934bc43384f48c1bd50a992ffb3c062fe53446 Mon Sep 17 00:00:00 2001 From: dahn Date: Tue, 25 Jul 2023 10:40:45 +0200 Subject: [PATCH 3/3] typo Co-authored-by: Pearl Dsilva --- ui/src/components/view/SearchView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue index 2d63490d29f2..190db440fd10 100644 --- a/ui/src/components/view/SearchView.vue +++ b/ui/src/components/view/SearchView.vue @@ -463,7 +463,7 @@ export default { }, fetchZones (searchKeyword) { return new Promise((resolve, reject) => { - api('listZones', { showicon: true, keyyword: searchKeyword }).then(json => { + api('listZones', { showicon: true, keyword: searchKeyword }).then(json => { const zones = json.listzonesresponse.zone resolve({ type: 'zoneid',