saurabhkushwaha438 opened a new pull request, #13227:
URL: https://github.com/apache/cloudstack/pull/13227
# UI: Implement Event Auto-Suggestion in Webhook Filter Tab
## Problem & Requirement
When adding filters to a webhook, users are required to specify system event
types (e.g., `USER.LOGIN`, `VM.CREATE`). Manually typing these names is prone
to typos, resulting in invalid filters.
To improve the user experience and prevent configuration errors, the UI
should provide an auto-suggestion / autocomplete dropdown list populated with
actual system event types fetched from the running CloudStack management server.
## Proposed Solution
1. **Ant Design Vue Autocomplete integration**: Replaced the standard text
input component (`a-input`) in the Webhook Filters tab with an autocomplete
component (`a-auto-complete`).
2. **API Data Integration**: Integrated the `listEventTypes` API call inside
`WebhookFiltersTab.vue` to fetch the complete list of system-wide event types
on component initialization.
3. **Priority Search Filtering**: Implemented a search algorithm
(`onSearch`) that processes user input and sorts suggestions by relevance:
- **Prefix Matches**: Event types that start with the user's typed search
text are positioned first.
- **Substring Matches**: Event types that contain the search text but do
not start with it are appended next.
- Case-insensitive comparisons are used to match inputs.
4. **Compilation and Memory Tuning**:
- Configured `parallel: false` inside `ui/vue.config.js` to ensure the
compilation executes reliably in resource-constrained containerized or virtual
environments (e.g., WSL, CI/CD runners).
- Added `NODE_OPTIONS=--openssl-legacy-provider` and
`--max-old-space-size=4096` to the UI package build scripts to support
compiling under modern Node.js environments.
---
## Detailed Changes
### UI & Component Level
* **`ui/src/components/view/WebhookFiltersTab.vue`**:
- Replaced `<a-input v-model:value="addFilterForm.value" />` with
`<a-auto-complete>`.
- Added data properties: `eventTypes` (cache for raw API records) and
`filteredEventTypes` (records currently displayed in the autocomplete dropdown).
- Added method `fetchEventTypes()` to query the `listEventTypes` API, sort
them alphabetically, and store them in the local component cache.
- Added method `onSearch()` to prioritize prefix matches over contains
matches during user input.
### Environment & Build Level
* **`ui/package.json`** & **`ui/package-lock.json`**:
- Configured `NODE_OPTIONS` variables in the `start`, `serve`, and `build`
scripts to allow modern Node.js runtimes to build successfully.
* **`ui/vue.config.js`**:
- Set `parallel: false` in compilation settings and UglifyJS options to
improve compilation stability and prevent thread/heap crashes in resource-bound
systems.
---
## Verification & Testing Plan
### Automated Build Check
* Ran the production UI compiler command successfully:
```bash
npm run build
<img width="1894" height="874" alt="Screenshot 2026-05-24 161725"
src="https://github.com/user-attachments/assets/5898c211-5907-4319-88a2-175ead0bf166";
/>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
