ui: speed up compute instance listing #7911

yadvr · 2023-08-25T07:23:35Z

The default listVirtualMachinesMetrics APIs assumings details=all which isn't really used in the list view. By changing this to a subset of details, we can see gains upto 10x in listing speed in the UI. When moving to the resource/detail view of the UI, don't pass state or details so all the details of the instance are returned.

Possibly fixes #7910

In the screenshot below, we can see passing details=min, and other combinations show significant reduction in network time (from 300-400ms to 20-40ms)

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)

The default listVirtualMachinesMetrics APIs assumings details=all which isn't really used in the list view. By changing this to a subset of details, we can see gains upto 10x in listing speed in the UI. When moving to the resource/detail view of the UI, don't pass state or details so `all` the details of the instance are returned. Signed-off-by: Rohit Yadav <[email protected]>

yadvr · 2023-08-25T07:24:23Z

@blueorangutan ui

blueorangutan · 2023-08-25T07:25:03Z

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

yadvr · 2023-08-25T07:25:10Z

ui/src/config/section/compute.js

-        var params = {}
+        var params = { details: 'servoff,tmpl,nics' }
        if (store.getters.metrics) {
-          params = { state: 'running' }


I've removed running as otherwise metrics doesn't return all VMs in the list. One can select VM state explicitly in the compute/instance page if they want.

just realised I can remove state from the params

yadvr · 2023-08-25T07:25:16Z

ui/src/store/mutation-types.js

 export const DARK_MODE = 'DARK_MODE'
 export const VUE_VERSION = 'VUE_VERSION'
 export const CUSTOM_COLUMNS = 'CUSTOM_COLUMNS'
+export const RELOAD_ALL_PROJECTS = 'RELOAD_ALL_PROJECTS'


This fixes a warning

yadvr · 2023-08-25T07:25:47Z

ui/src/config/section/compute.js

+        var params = { details: 'servoff,tmpl,nics' }
        if (store.getters.metrics) {
-          params = { state: 'running' }
+          params = { details: 'servoff,tmpl,nics,stats' }


VM stats in the API response can cause 5-10x delay compared to normal list API response

is tmpl needed in the details? or stats?

my concern is opposite to @DaanHoogland :-D
is 'servoff,tmpl,nics' or servoff,tmpl,nics,stats enough for UI ?

Yes, these are enough just for list view (table view); the stats are only needed when the metrics button is clicked. For the resource view, we delete the params.details, so by default details=all is used when listing a single VM.

@weizhouapache @DaanHoogland
I tested this again both as root admin and normal user account; for VMs and templates with and without resource icons; these are enough details to render the list view (table); when the user clicks any VM/instance, then we call the API remove the details and all details are listed/used in the resource view. While not ideal, this speeds up the listing.

great, thanks @rohityadavcloud
I will test it

blueorangutan · 2023-08-25T07:37:56Z

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

weizhouapache · 2023-08-25T07:41:45Z

ui/src/views/AutogenView.vue

+      if (['listVirtualMachinesMetrics'].includes(this.apiName) && this.dataView) {
+        delete params.state
+        delete params.details
+      }


@rohityadavcloud
can you explain why state and details are removed ?

all others look good

These are added by the router config, I'll ping you on that code; so we must remove if the keys exists for dataView (or resource view, when only one item is being listed such as the VM)

DaanHoogland

code looks good. I can't judge the performance gain in qa, but am relying on the author in this case.

DaanHoogland · 2023-08-25T07:43:55Z

ui/src/config/section/compute.js

+        var params = { details: 'servoff,tmpl,nics' }
        if (store.getters.metrics) {
-          params = { state: 'running' }
+          params = { details: 'servoff,tmpl,nics,stats' }


is tmpl needed in the details? or stats?

yadvr · 2023-08-25T11:32:13Z

ui/src/config/section/compute.js

      resourceType: 'UserVm',
      params: () => {
-        var params = {}
+        var params = { details: 'servoff,tmpl,nics' }


@weizhouapache because of these params, details and state...

yadvr · 2023-08-25T11:34:20Z

ui/src/views/AutogenView.vue

      }

+      if (['listVirtualMachinesMetrics'].includes(this.apiName) && this.dataView) {
+        delete params.details


we remove the details as it may not be all, and set for the list view (tabular view)

codecov · 2023-08-25T11:35:38Z

Codecov Report

Merging #7911 (b4629ad) into 4.18 (3c38ed7) will decrease coverage by 0.01%.
Report is 4 commits behind head on 4.18.
The diff coverage is n/a.

❗ Current head b4629ad differs from pull request most recent head c10873e. Consider uploading reports for the commit c10873e to get more accurate results

@@             Coverage Diff              @@
##               4.18    #7911      +/-   ##
============================================
- Coverage     13.06%   13.06%   -0.01%     
- Complexity     9088     9091       +3     
============================================
  Files          2720     2720              
  Lines        257391   257415      +24     
  Branches      40130    40136       +6     
============================================
  Hits          33621    33621              
- Misses       219548   219569      +21     
- Partials       4222     4225       +3

see 6 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

yadvr · 2023-08-25T11:43:29Z

@blueorangutan ui

blueorangutan · 2023-08-25T11:44:03Z

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

blueorangutan · 2023-08-25T11:56:25Z

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

weizhouapache

code lgtm

the display is almost identical to the original page

without this PR

with this PR

dseralathan · 2024-02-12T23:35:02Z

the VM search give exact VM and is not changing to the first VM in list after we exclude state,IP of VM at filter in field

boring-cyborg bot added the component:UI label Aug 25, 2023

yadvr added this to the 4.18.1.0 milestone Aug 25, 2023

yadvr requested review from DaanHoogland, Pearl1594, shwstppr and weizhouapache August 25, 2023 07:23

yadvr commented Aug 25, 2023

View reviewed changes

weizhouapache reviewed Aug 25, 2023

View reviewed changes

DaanHoogland approved these changes Aug 25, 2023

View reviewed changes

weizhouapache linked an issue Aug 25, 2023 that may be closed by this pull request

GUI - search instance always give the first VM name and GUI is very slow #7910

Closed

Pearl1594 approved these changes Aug 25, 2023

View reviewed changes

yadvr commented Aug 25, 2023

View reviewed changes

Update AutogenView.vue

c10873e

yadvr commented Aug 25, 2023

View reviewed changes

yadvr requested a review from weizhouapache August 25, 2023 11:40

weizhouapache approved these changes Aug 25, 2023

View reviewed changes

weizhouapache merged commit 93bd5b7 into apache:4.18 Aug 25, 2023

weizhouapache mentioned this pull request Aug 25, 2023

GUI - search instance always give the first VM name and GUI is very slow #7910

Closed

DaanHoogland deleted the list-vm-speedup branch August 25, 2023 12:04

ui: speed up compute instance listing #7911

ui: speed up compute instance listing #7911

Uh oh!

Conversation

yadvr commented Aug 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of changes

Uh oh!

yadvr commented Aug 25, 2023

Uh oh!

blueorangutan commented Aug 25, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

blueorangutan commented Aug 25, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DaanHoogland left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yadvr Aug 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Aug 25, 2023

Codecov Report

Uh oh!

yadvr commented Aug 25, 2023

Uh oh!

blueorangutan commented Aug 25, 2023

Uh oh!

blueorangutan commented Aug 25, 2023

Uh oh!

weizhouapache left a comment

Choose a reason for hiding this comment

Uh oh!

dseralathan commented Feb 12, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

yadvr commented Aug 25, 2023 •

edited

Loading

yadvr Aug 25, 2023 •

edited

Loading