This is an automated email from the ASF dual-hosted git repository.
sureshanaparti pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/main by this push:
new 76b285bcd6d ui: implement event auto-suggestion in webhook filter tab
(#13227)
76b285bcd6d is described below
commit 76b285bcd6d1561f3ea62a6e6e0f3740e1fe5e22
Author: Saurabh Kushwaha <[email protected]>
AuthorDate: Thu Sep 10 11:19:54 2026 +0530
ui: implement event auto-suggestion in webhook filter tab (#13227)
---
ui/src/components/view/WebhookFiltersTab.vue | 48 ++++++++++++++++++++++++++--
1 file changed, 46 insertions(+), 2 deletions(-)
diff --git a/ui/src/components/view/WebhookFiltersTab.vue
b/ui/src/components/view/WebhookFiltersTab.vue
index 513720a8625..e7d5343bfef 100644
--- a/ui/src/components/view/WebhookFiltersTab.vue
+++ b/ui/src/components/view/WebhookFiltersTab.vue
@@ -64,7 +64,12 @@
<template #label>
<tooltip-label :title="$t('label.value')"
:tooltip="addFilterApiParams.value.description"/>
</template>
- <a-input v-model:value="addFilterForm.value" placeholder="Enter
filter value" />
+ <a-auto-complete
+ v-model:value="addFilterForm.value"
+ :options="filteredEventTypes"
+ :filterOption="false"
+ @search="onSearch"
+ placeholder="Enter filter value" />
</a-form-item>
</a-col>
</a-row>
@@ -168,7 +173,9 @@ export default {
],
page: 1,
pageSize: 20,
- totalCount: 0
+ totalCount: 0,
+ eventTypes: [],
+ filteredEventTypes: []
}
},
computed: {
@@ -190,6 +197,7 @@ export default {
this.pageSize = this.pageSizeOptions[0] * 1
this.initAddFilterForm()
this.fetchData()
+ this.fetchEventTypes()
},
watch: {
resource: {
@@ -199,6 +207,41 @@ export default {
}
},
methods: {
+ onSearch (searchText) {
+ if (!searchText) {
+ this.filteredEventTypes = this.eventTypes
+ return
+ }
+ const searchLower = searchText.toLowerCase()
+ const prefixMatches = []
+ const otherMatches = []
+ for (const option of this.eventTypes) {
+ const valLower = option.value.toLowerCase()
+ if (valLower.startsWith(searchLower)) {
+ prefixMatches.push(option)
+ } else if (valLower.includes(searchLower)) {
+ otherMatches.push(option)
+ }
+ }
+ this.filteredEventTypes = [...prefixMatches, ...otherMatches]
+ },
+ fetchEventTypes () {
+ this.eventTypes = []
+ this.filteredEventTypes = []
+ if (!('listEventTypes' in this.$store.getters.apis)) {
+ return
+ }
+ getAPI('listEventTypes').then(json => {
+ const eventTypesObj = json?.listeventtypesresponse?.eventtype || []
+ this.eventTypes = eventTypesObj
+ .map(x => x.name)
+ .sort((a, b) => a.localeCompare(b))
+ .map(value => { return { value: value } })
+ this.filteredEventTypes = this.eventTypes
+ }).catch(error => {
+ console.error('Failed to load event types:', error)
+ })
+ },
fetchData () {
if ('listview' in this.$refs && this.$refs.listview) {
this.$refs.listview.resetSelection()
@@ -269,6 +312,7 @@ export default {
if (this.addFormRef.value) {
this.addFormRef.value.resetFields()
}
+ this.filteredEventTypes = this.eventTypes
},
addFilter (e) {
e.preventDefault()
