ui: implement event auto-suggestion in webhook filter tab

[saurabhkushwaha438]

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:

  npm run build

[boring-cyborg]

Congratulations on your first Pull Request and welcome to the Apache CloudStack community! If you have any issues or are unsure about any anything please check our Contribution Guide (https://github.com/apache/cloudstack/blob/main/CONTRIBUTING.md)
Here are some useful points:

• In case of a new feature add useful documentation (raise doc PR at https://github.com/apache/cloudstack-documentation)
• Be patient and persistent. It might take some time to get a review or get the final approval from the committers.
• Pay attention to the quality of your code, ensure tests are passing and your PR doesn't have conflicts.
• Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Issues, Mailing list and Slack.
• Be sure to read the CloudStack Coding Conventions.
  Apache CloudStack is a community-driven project and together we are making it better 🚀.
  In case of doubts contact the developers at:
  Mailing List: dev@cloudstack.apache.org (https://cloudstack.apache.org/mailing-lists.html)
  Slack: https://apachecloudstack.slack.com/

[bernardodemarco]

@saurabhkushwaha438, thanks for the PR!

I believe that only the changes in the WebhookFiltersTab.vue are required, right?

[saurabhkushwaha438]

Hi, yes, you are correct. Only the changes in WebhookFiltersTab.vue are required for this feature.

The changes in package.json, package-lock.json, and vue.config.js were local build optimizations to bypass memory limit issues during compilation on WSL.

I have just reverted these files and pushed the updates to keep the PR clean. The PR now contains only the changes in WebhookFiltersTab.vue. Thank you for the review!