UI fix api in project view #11191

vishesh92 · 2025-07-14T08:35:53Z

Description

This PR fixes the project views for different resources. This bug was introduced in #10899

Generated Summary

This pull request introduces several changes aimed at improving API request handling and refactoring the codebase for better readability and maintainability. The most significant updates include adjustments to how parameters are handled in API requests, the introduction of helper functions for GET and POST request parameters, and the replacement of the api function with getAPI across multiple components.

Improvements to API request handling:

ui/src/api/index.js: Simplified the parameter-checking logic in the postAPI function by removing checks for null and empty strings, ensuring only undefined values are excluded.
ui/src/utils/request.js: Added helper functions handleGetRequestParams and handlePostRequestParams to streamline the processing of GET and POST request parameters. These functions ensure proper handling of project-related parameters and clean up unnecessary fields like ignoreproject. [1] [2]

Codebase refactoring:

Replaced the api function with getAPI across multiple components, including ImageDeployInstanceButton.vue, KubernetesAddNodes.vue, and KubernetesRemoveNodes.vue, to improve consistency and readability:
- ui/src/components/view/ImageDeployInstanceButton.vue: Updated API calls for fetching image zones and zone details. [1] [2] [3]
- ui/src/views/compute/KubernetesAddNodes.vue: Updated API calls for listing virtual machines and adding nodes to Kubernetes clusters. [1] [2] [3]
- ui/src/views/compute/KubernetesRemoveNodes.vue: Updated API calls for removing nodes from Kubernetes clusters. [1] [2]

Types of changes

Breaking change (fix or feature that would cause existing functionality to change)
New feature (non-breaking change which adds functionality)
Bug fix (non-breaking change which fixes an issue)
Enhancement (improves an existing feature and functionality)
Cleanup (Code refactoring and cleanup, that may add test cases)
build/CI
test (unit or integration test code)

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

Major
Minor

Bug Severity

Screenshots (if appropriate):

How Has This Been Tested?

How did you try to break this feature and the system with this change?

vishesh92 · 2025-07-14T08:36:12Z

@blueorangutan ui

ui/src/utils/request.js

codecov · 2025-07-14T08:43:53Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 16.58%. Comparing base (fb6adac) to head (37d9db4).
Report is 2 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #11191      +/-   ##
============================================
+ Coverage     16.56%   16.58%   +0.01%     
- Complexity    14010    14038      +28     
============================================
  Files          5758     5758              
  Lines        511578   511733     +155     
  Branches      62192    62216      +24     
============================================
+ Hits          84756    84869     +113     
- Misses       417350   417390      +40     
- Partials       9472     9474       +2

Flag	Coverage Δ
uitests	`3.90% <ø> (-0.01%)`	⬇️
unittests	`17.48% <ø> (+0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

vishesh92 · 2025-07-14T09:35:45Z

@blueorangutan ui

blueorangutan · 2025-07-14T09:36:04Z

@vishesh92 a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-07-14T09:54:07Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/11191 (QA-JID-663)

DaanHoogland

code looks good and reviewed the deploy instance from image dropdown. To be clear @vishesh92 this is a regression on 4.21-HEAD only right? none of the functionality existed in 4.20?

ui/src/utils/request.js

vishesh92 · 2025-07-14T10:55:10Z

@blueorangutan package

blueorangutan · 2025-07-14T10:56:04Z

@vishesh92 a [SL] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress.

blueorangutan · 2025-07-14T15:06:57Z

Packaging result [SF]: ✔️ el8 ✔️ el9 ✔️ debian ✔️ suse15. SL-JID 14168

ui/src/views/compute/KubernetesAddNodes.vue

ui/src/views/compute/KubernetesRemoveNodes.vue

ui/src/views/compute/KubernetesAddNodes.vue

vishesh92 · 2025-07-15T08:05:16Z

@blueorangutan ui

blueorangutan · 2025-07-15T08:06:03Z

@vishesh92 a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-07-15T08:24:03Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/11191 (QA-JID-665)

Copilot

Pull Request Overview

This PR corrects API usage in several project-related views and centralizes request parameter handling.

Replaces generic api calls with getAPI for GET requests and postAPI for POST requests in multiple Vue components.
Introduces handleGetRequestParams and handlePostRequestParams in the request interceptor to automatically manage project and ignoreproject parameters.
Simplifies postAPI to only exclude undefined values when appending parameters.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
ui/src/views/compute/KubernetesRemoveNodes.vue	Swapped `api` import/usage for `postAPI` in the remove-nodes API
ui/src/views/compute/KubernetesAddNodes.vue	Updated imports and replaced `api` calls with `getAPI`/`postAPI`
ui/src/utils/request.js	Added `handleGetRequestParams` and `handlePostRequestParams`
ui/src/components/view/ImageDeployInstanceButton.vue	Replaced `api` calls with `getAPI`
ui/src/api/index.js	Adjusted `postAPI` to filter out only `undefined` values

Comments suppressed due to low confidence (1)

ui/src/utils/request.js:153

Consider adding unit tests for handleGetRequestParams and handlePostRequestParams to verify that project IDs and ignoreproject flags are correctly added or removed under different scenarios.

  handleGetRequestParams(config)

Copilot · 2025-07-15T08:33:17Z

ui/src/views/compute/KubernetesRemoveNodes.vue

    removeNodesFromKubernetesCluster (params) {
      return new Promise((resolve, reject) => {
-        api('removeNodesFromKubernetesCluster', params).then(json => {
+        postAPI('removeNodesFromKubernetesCluster', params).then(json => {


Avoid wrapping postAPI in a new Promise. Instead, return the promise directly and chain .then() to extract the job ID, which simplifies the code and ensures errors propagate correctly.

Copilot · 2025-07-15T08:33:17Z

ui/src/views/compute/KubernetesAddNodes.vue

    addNodesToKubernetesCluster (params) {
      return new Promise((resolve, reject) => {
-        api('addNodesToKubernetesCluster', params).then(json => {
+        postAPI('addNodesToKubernetesCluster', params).then(json => {


You can simplify this method by returning postAPI(...).then(json => json.addnodestokubernetesclusterresponse.jobid) directly, removing the explicit new Promise wrapper and reducing boilerplate.

ui/src/api/index.js

Copilot · 2025-07-15T08:33:18Z

ui/src/utils/request.js

+      if (command === 'listTags') {
+        config.data.append('projectid', '-1')
+      } else if (command !== 'assignVirtualMachine') {


[nitpick] Hardcoding command names like 'listTags' and 'assignVirtualMachine' can be brittle. Consider centralizing these exceptions into a configuration constant or lookup table to improve maintainability.

Suggested change

if (command === 'listTags') {

config.data.append('projectid', '-1')

} else if (command !== 'assignVirtualMachine') {

if (command === COMMANDS.LIST_TAGS) {

config.data.append('projectid', '-1')

} else if (command !== COMMANDS.ASSIGN_VM) {

vishesh92 · 2025-07-15T08:33:36Z

@blueorangutan ui

blueorangutan · 2025-07-15T08:34:04Z

@vishesh92 a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-07-15T08:51:51Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/11191 (QA-JID-666)

…ring

Co-authored-by: Suresh Kumar Anaparti <[email protected]>

vishesh92 · 2025-07-15T10:57:05Z

@blueorangutan ui

blueorangutan · 2025-07-15T10:58:04Z

@vishesh92 a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-07-15T11:16:30Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/11191 (QA-JID-667)

vishesh92 · 2025-07-15T11:24:18Z

@blueorangutan ui

blueorangutan · 2025-07-15T11:25:04Z

@vishesh92 a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2025-07-15T11:42:56Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/11191 (QA-JID-669)

vishesh92 · 2025-07-15T12:03:24Z

code looks good and reviewed the deploy instance from image dropdown. To be clear @vishesh92 this is a regression on 4.21-HEAD only right? none of the functionality existed in 4.20?

Yes. This is in main branch only as of now and didn't exist in 4.20.
Also, we will need to fix the api calls after forward merging UI related changes from previous versions.

Some of the bugs @rosi-shapeblue shared with me were:

Cannot Remove Host Tag from UI Once Set
Instances are not visible when deployed in project

sureshanaparti · 2025-07-15T12:49:28Z

verified the ui build, and some calls from ui in simulator env.

* Add project id for post requests as well in the params * Replace leftover api calls to getAPI calls * ui: don't remove values from request if the value is null or empty string * Address comments * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: Suresh Kumar Anaparti <[email protected]> * fixup * Return null if guiTheme requests fails --------- Co-authored-by: Suresh Kumar Anaparti <[email protected]>

boring-cyborg bot added the component:UI label Jul 14, 2025

vishesh92 requested review from Copilot and sureshanaparti July 14, 2025 08:36

This comment was marked as outdated.

Sign in to view

sureshanaparti reviewed Jul 14, 2025

View reviewed changes

ui/src/utils/request.js Show resolved Hide resolved

sureshanaparti added this to the 4.21.0 milestone Jul 14, 2025

sureshanaparti added this to Apache CloudStack 4.21.0 Jul 14, 2025

sureshanaparti moved this to In Progress in Apache CloudStack 4.21.0 Jul 14, 2025

vishesh92 requested a review from Copilot July 14, 2025 09:35

This comment was marked as outdated.

Sign in to view

DaanHoogland approved these changes Jul 14, 2025

View reviewed changes

vishesh92 commented Jul 14, 2025

View reviewed changes

ui/src/utils/request.js Outdated Show resolved Hide resolved

sureshanaparti reviewed Jul 14, 2025

View reviewed changes

ui/src/views/compute/KubernetesAddNodes.vue Outdated Show resolved Hide resolved

sureshanaparti reviewed Jul 14, 2025

View reviewed changes

ui/src/views/compute/KubernetesRemoveNodes.vue Outdated Show resolved Hide resolved

sureshanaparti reviewed Jul 14, 2025

View reviewed changes

ui/src/views/compute/KubernetesRemoveNodes.vue Outdated Show resolved Hide resolved

sureshanaparti reviewed Jul 14, 2025

View reviewed changes

ui/src/views/compute/KubernetesAddNodes.vue Outdated Show resolved Hide resolved

sureshanaparti requested a review from Copilot July 15, 2025 08:31

Copilot AI reviewed Jul 15, 2025

View reviewed changes

vishesh92 and others added 7 commits July 15, 2025 16:22

Add project id for post requests as well in the params

d58d605

Replace leftover api calls to getAPI calls

70cc55d

ui: don't remove values from request if the value is null or empty st…

4c55cc2

…ring

Address comments

f8fa89b

Apply suggestions from code review

1247a1b

Apply suggestions from code review

7323321

Co-authored-by: Suresh Kumar Anaparti <[email protected]>

fixup

3908815

vishesh92 force-pushed the ui-fix-api-in-project-view branch from e3abc5d to 3908815 Compare July 15, 2025 10:56

Return null if guiTheme requests fails

37d9db4

rohityadavcloud approved these changes Jul 15, 2025

View reviewed changes

rohityadavcloud requested a review from sureshanaparti July 15, 2025 11:43

sureshanaparti approved these changes Jul 15, 2025

View reviewed changes

sureshanaparti added the type:regression label Jul 15, 2025

sureshanaparti merged commit f52e058 into apache:main Jul 15, 2025
24 of 26 checks passed

github-project-automation bot moved this from In Progress to Done in Apache CloudStack 4.21.0 Jul 15, 2025

vishesh92 deleted the ui-fix-api-in-project-view branch July 15, 2025 12:51

DaanHoogland mentioned this pull request Jul 15, 2025

UI: Fixes front-end API calls #11205

Closed

12 tasks

UI fix api in project view #11191

UI fix api in project view #11191

Uh oh!

Conversation

vishesh92 commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Improvements to API request handling:

Codebase refactoring:

Types of changes

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

Bug Severity

Screenshots (if appropriate):

How Has This Been Tested?

How did you try to break this feature and the system with this change?

Uh oh!

vishesh92 commented Jul 14, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

codecov bot commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

This comment was marked as outdated.

Uh oh!

vishesh92 commented Jul 14, 2025

Uh oh!

blueorangutan commented Jul 14, 2025

Uh oh!

blueorangutan commented Jul 14, 2025

Uh oh!

DaanHoogland left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vishesh92 commented Jul 14, 2025

Uh oh!

blueorangutan commented Jul 14, 2025

Uh oh!

blueorangutan commented Jul 14, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vishesh92 commented Jul 15, 2025

Uh oh!

blueorangutan commented Jul 15, 2025

Uh oh!

blueorangutan commented Jul 15, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

vishesh92 commented Jul 15, 2025

Uh oh!

blueorangutan commented Jul 15, 2025

Uh oh!

blueorangutan commented Jul 15, 2025

Uh oh!

vishesh92 commented Jul 15, 2025

Uh oh!

blueorangutan commented Jul 15, 2025

Uh oh!

blueorangutan commented Jul 15, 2025

vishesh92 commented Jul 14, 2025 •

edited

Loading

codecov bot commented Jul 14, 2025 •

edited

Loading