Skip to content

UI: Fix all list items appearing twice in search view #10365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 12, 2025

Conversation

Pearl1594
Copy link
Contributor

@Pearl1594 Pearl1594 commented Feb 11, 2025

Description

Fixes: #10310
This PR fixes the duplicate names appearing in the search filters in drop down menus

Before fix:

image

After fix:
image

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

  • BLOCKER
  • Critical
  • Major
  • Minor
  • Trivial

Screenshots (if appropriate):

How Has This Been Tested?

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

Copy link

codecov bot commented Feb 11, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 16.50%. Comparing base (96b757c) to head (af24029).
Report is 65 commits behind head on 4.20.

Additional details and impacted files
@@             Coverage Diff              @@
##               4.20   #10365      +/-   ##
============================================
+ Coverage     16.13%   16.50%   +0.36%     
- Complexity    12972    13831     +859     
============================================
  Files          5639     5649      +10     
  Lines        494297   521066   +26769     
  Branches      59908    70175   +10267     
============================================
+ Hits          79773    85978    +6205     
- Misses       405698   425682   +19984     
- Partials       8826     9406     +580     
Flag Coverage Δ
uitests 4.47% <ø> (+0.45%) ⬆️
unittests 17.33% <ø> (+0.34%) ⬆️

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.

@shwstppr
Copy link
Contributor

@blueorangutan ui

@blueorangutan
Copy link

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

@blueorangutan
Copy link

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

Copy link
Contributor

@shwstppr shwstppr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Tested on qa server

Before
Screenshot from 2025-02-11 12-50-46

After
Screenshot from 2025-02-11 12-51-06

Also verified issue is not there in 4.19

@Pearl1594
Copy link
Contributor Author

@blueorangutan package

@blueorangutan
Copy link

@Pearl1594 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
Copy link

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

Copy link
Member

@bernardodemarco bernardodemarco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Pearl1594, in the #9947 PR, that was targeted into the main branch, I addressed this fix in a slightly different way.

The SearchView component returns two HTML elements that do the same thing. One is from line 83 to 92:

<span v-if="(field.name.startsWith('domain') || field.name === 'account')">
<span v-if="opt.icon">
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
</span>
<block-outlined v-else style="margin-right: 5px" />
</span>
<span v-if="(field.name.startsWith('managementserver'))">
<status :text="opt.state" />
</span>
{{ $t((['storageid'].includes(field.name) || !opt.path) ? opt.name : opt.path) }}

And the other is between line 93 to 99:

<span v-if="(field.name.startsWith('associatednetwork'))">
<span v-if="opt.icon">
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
</span>
<block-outlined v-else style="margin-right: 5px" />
</span>
{{ $t(opt.path || opt.name) }}

Given that, both redundant HTML elements were grouped into a single one by moving the condition (v-if directive) from the second element into the first one.

Both ways resolve the bug, so I think that we can merge this one, and, if so, it would not be required to merge it into the main branch.

Copy link
Member

@weizhouapache weizhouapache left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code lgtm

my fault
thanks for the fixing @Pearl1594

@GutoVeronezi
Copy link
Contributor

Given it is already fixed on main since Nov, 2024, (see #9947), we just need to backport it to 4.20.

@Pearl1594
Copy link
Contributor Author

First, I was completely unaware there was a PR that addressed a similar issue, my bad. Secondly, I maybe wrong, but I am not sure if the above mentioned fix, addresses the duplicate names being printed for any resource of list type. Removing the v-if altogether could have a negative impact in which resources that haven't been specifically mentioned in the v-if block may not have any items in the drop down menu.

Copy link
Member

@bernardodemarco bernardodemarco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First, I was completely unaware there was a PR that addressed a similar issue, my bad.

No problem. I should have backported the fix to the 4.20 branch.

Secondly, I maybe wrong, but I am not sure if the above mentioned fix, addresses the duplicate names being printed for any resource of list type. Removing the v-if altogether could have a negative impact in which resources that haven't been specifically mentioned in the v-if block may not have any items in the drop down menu.

Currently, according to the following block of code:

<span v-if="(field.name.startsWith('domain') || field.name === 'account')">
<span v-if="opt.icon">
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
</span>
<block-outlined v-else style="margin-right: 5px" />
</span>
<span v-if="(field.name.startsWith('managementserver'))">
<status :text="opt.state" />
</span>
{{ $t((['storageid'].includes(field.name) || !opt.path) ? opt.name : opt.path) }}

If the field.name starts with domain or if it is equal to account, the following HTML is returned:

   <span v-if="opt.icon"> 
     <resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/> 
   </span> 
   <block-outlined v-else style="margin-right: 5px" />

In this situation, the rendered filter option text is equal to:

 {{ $t((['storageid'].includes(field.name) || !opt.path) ? opt.name : opt.path) }} 

Now, according to the following block of code:

<span v-if="(field.name.startsWith('associatednetwork'))">
<span v-if="opt.icon">
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
</span>
<block-outlined v-else style="margin-right: 5px" />
</span>
{{ $t(opt.path || opt.name) }}

If the field.name starts with associatednetwork, the following HTML will be returned:

   <span v-if="opt.icon"> 
     <resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/> 
   </span> 
   <block-outlined v-else style="margin-right: 5px" /> 

In this scenario, the rendered filter option text is equal to:

{{ $t(opt.path || opt.name) }}

Therefore, since (i) both returned HTML elements are equal; (ii) and both returned filter option texts are semantically equal, the solution proposed in #9947 will not have any side effects.


Regarding this PR, it is important to note that, although it fixes duplicated filter options, it does not fix the selection of domains in the SearchView, which was the original issue (#10310).

Here is a video of the current behavior in the QA enviroment:

2025-02-12.10-33-42.mp4

If a domain has any associated accounts, the user is never able to select the domain in the SearchView. This bug is happening because of the following block of code:

if (networkIndex > -1) {
this.fields[networkIndex].loading = false
}
if (usageTypeIndex > -1) {
this.fields[usageTypeIndex].loading = false
}
if (Array.isArray(arrayField)) {
this.fillFormFieldValues()
}
if (networkIndex > -1) {
this.fields[networkIndex].loading = false
}
this.fillFormFieldValues()

Note that lines from 719 up to 722 are duplicated. After removing these duplicated lines, the bug is fixed.

Here is a video with those lines removed in my local environment:

2025-02-12.10-48-59.mp4

@Pearl1594
Copy link
Contributor Author

Oh, I finally understood what you were trying to convey... I've cherry-picked your commit @bernardodemarco that addressed this issue on main. Thanks. Hope this is good.

@weizhouapache
Copy link
Member

@blueorangutan ui

@blueorangutan
Copy link

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

@bernardodemarco
Copy link
Member

@Pearl1594, looks good. Now, we just need to fix the bug present in the first video:

2025-02-12.10-33-42.mp4

It happens when a domain has accounts within it. To fix it, we should remove the lines 719, 720, 721 and 722 from the following block of code:

if (networkIndex > -1) {
this.fields[networkIndex].loading = false
}
if (usageTypeIndex > -1) {
this.fields[usageTypeIndex].loading = false
}
if (Array.isArray(arrayField)) {
this.fillFormFieldValues()
}
if (networkIndex > -1) {
this.fields[networkIndex].loading = false
}
this.fillFormFieldValues()

@blueorangutan
Copy link

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

@weizhouapache
Copy link
Member

@Pearl1594 @bernardodemarco
thanks for your discussions.

I verified the original issue in the title on QA, it looks ok now
image

should we merge this PR, address the issue (#10365 (comment)) in another PR ?

@bernardodemarco
Copy link
Member

should we merge this PR, address the issue (#10365 (comment)) in another PR ?

Ok, no problem for me. I'll open a new issue to address this bug and will try to fix it.

Copy link

@weizhouapache
Copy link
Member

should we merge this PR, address the issue (#10365 (comment)) in another PR ?

Ok, no problem for me. I'll open a new issue to address this bug and will try to fix it.

good, thanks

@weizhouapache weizhouapache merged commit 59e0543 into 4.20 Feb 12, 2025
48 of 50 checks passed
@DaanHoogland DaanHoogland deleted the ui-fix-duplicate-list-options branch February 12, 2025 16:34
@bernardodemarco
Copy link
Member

Ok, no problem for me. I'll open a new issue to address this bug and will try to fix it.

good, thanks

@weizhouapache, @Pearl1594, I've just opened a PR (#10386) to address the issue (#10365 (comment))

dhslove pushed a commit to ablecloud-team/ablestack-cloud that referenced this pull request Jun 19, 2025
* UI: Fix all list items appearing twice in search view

* Revert "UI: Fix all list items appearing twice in search view"

This reverts commit 2739c01.

* fix duplicate option names on list filters

---------

Co-authored-by: Bernardo De Marco Gonçalves <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI: The filter feature in the instances listing window doesn't function as expected.
8 participants