This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch 4.20
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.20 by this push:
new d0e21a7dba8 UI: Prevent extra API calls in search filter on scrolling
(#12553)
d0e21a7dba8 is described below
commit d0e21a7dba866c4a363a5dfe05d079295626fefc
Author: Vishesh <[email protected]>
AuthorDate: Fri Jan 30 14:23:28 2026 +0530
UI: Prevent extra API calls in search filter on scrolling (#12553)
---
ui/src/components/view/SearchFilter.vue | 13 ++++----
ui/src/views/AutogenView.vue | 55 +++++++++++++++++----------------
2 files changed, 36 insertions(+), 32 deletions(-)
diff --git a/ui/src/components/view/SearchFilter.vue
b/ui/src/components/view/SearchFilter.vue
index 9849ba8de44..34ca438b5c5 100644
--- a/ui/src/components/view/SearchFilter.vue
+++ b/ui/src/components/view/SearchFilter.vue
@@ -1,17 +1,17 @@
// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements. See the NOTICE file
+// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
-// regarding copyright ownership. The ASF licenses this file
+// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
-// with the License. You may obtain a copy of the License at
+// with the License. You may obtain a copy of the License at
//
-// http://www.apache.org/licenses/LICENSE-2.0
+// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied. See the License for the
+// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.
@@ -189,9 +189,10 @@ export default {
resolve()
} else {
this.getSearchFilters(filter.key, filter.value).then((value) => {
+ const displayValue = (value !== undefined && value !== null &&
value !== '') ? value : filter.value
clonedFilters[idx] = {
key: filter.key,
- value: value,
+ value: displayValue,
isTag: filter.isTag
}
resolve()
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 6c146875ece..325df769dee 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -114,7 +114,7 @@
style="min-height: 36px; padding-top: 12px; padding-left: 12px;"
>
<search-filter
- :filters="getActiveFilters()"
+ :filters="activeFiltersList"
:apiName="apiName"
@removeFilter="removeFilter"
/>
@@ -690,9 +690,36 @@ export default {
}
},
computed: {
+ activeFiltersList () {
+ const queryParams = Object.assign({}, this.$route.query)
+ const activeFilters = []
+ for (const filter in queryParams) {
+ if (this.$route.name === 'host' && filter === 'type') {
+ continue
+ }
+ if (!filter.startsWith('tags[')) {
+ activeFilters.push({
+ key: filter,
+ value: queryParams[filter],
+ isTag: false
+ })
+ } else if (filter.endsWith('].key')) {
+ const tagIdx = filter.split('[')[1].split(']')[0]
+ const tagKey = queryParams[`tags[${tagIdx}].key`]
+ const tagValue = queryParams[`tags[${tagIdx}].value`]
+ activeFilters.push({
+ key: tagKey,
+ value: tagValue,
+ isTag: true,
+ tagIdx: tagIdx
+ })
+ }
+ }
+ return activeFilters
+ },
showSearchFilters () {
const excludedKeys = ['page', 'pagesize', 'q', 'keyword', 'tags',
'projectid']
- return !this.dataView && this.$config.showSearchFilters &&
this.getActiveFilters().some(f => !excludedKeys.includes(f.key))
+ return !this.dataView && this.$config.showSearchFilters &&
this.activeFiltersList.some(f => !excludedKeys.includes(f.key))
},
hasSelected () {
return this.selectedRowKeys.length > 0
@@ -1145,30 +1172,6 @@ export default {
eventBus.emit('action-closing', { action: this.currentAction })
this.closeAction()
},
- getActiveFilters () {
- const queryParams = Object.assign({}, this.$route.query)
- const activeFilters = []
- for (const filter in queryParams) {
- if (!filter.startsWith('tags[')) {
- activeFilters.push({
- key: filter,
- value: queryParams[filter],
- isTag: false
- })
- } else if (filter.endsWith('].key')) {
- const tagIdx = filter.split('[')[1].split(']')[0]
- const tagKey = queryParams[`tags[${tagIdx}].key`]
- const tagValue = queryParams[`tags[${tagIdx}].value`]
- activeFilters.push({
- key: tagKey,
- value: tagValue,
- isTag: true,
- tagIdx: tagIdx
- })
- }
- }
- return activeFilters
- },
removeFilter (filter) {
const queryParams = Object.assign({}, this.$route.query)
if (filter.isTag) {
