Bug 1716845

Summary: [RFE][UI][V2V] Completed plan list require proper alignment
Product: Red Hat CloudForms Management Engine Reporter: Yadnyawalk Tale <ytale>
Component: V2VAssignee: Mike Turley <mturley>
Status: CLOSED ERRATA QA Contact: Nandini Chandra <nachandr>
Severity: low Docs Contact: Red Hat CloudForms Documentation <cloudforms-docs>
Priority: low    
Version: 5.10.5CC: bthurber, fdupont, mturley, pvauter, simaishi, sshveta, vconzola
Target Milestone: GAKeywords: RFE, ZStream
Target Release: 5.11.5Flags: pm-rhel: cfme-5.11.z+
Hardware: Unspecified   
OS: Unspecified   
Whiteboard: v2v
Fixed In Version: 5.11.5.0 Doc Type: If docs needed, set a value
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2020-05-05 13:43:06 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: V2V Target Upstream Version:
Embargoed:

Description Yadnyawalk Tale 2019-06-04 09:39:13 UTC
Description of problem:
Completed plan list require proper alignment


Version-Release number of selected component (if applicable):
5.10.5.1


How reproducible:
100%


Steps to Reproduce:
1.
2.
3.

Actual results:
https://files.gitter.im/Yadnyawalkya/xcnl/Screenshot-from-2019-06-03-18-45-53.png


Expected results:
Should have proper alignment


Additional info:

Comment 3 Mike Turley 2019-06-19 18:34:22 UTC
This requires some further investigation... We are using the PatternFly "list view" component, which was not designed to operate like a table, it was designed to just have left side content, center content and right side content. Because we have stuffed so many things in the center section, the normal list view spacing doesn't work well for us anymore. To fix this I have a few options, none of which are great:

1. I could specify static widths for each "column" there (to use the term loosely), which would mean that as long as the widths of each row's data for each column are less than the static width, everything would be aligned. But it would not scale down to smaller screen sizes well, and if content ends up being wider, it will still not align correctly.
2. I could convert the whole list view to a table in the underlying HTML, which would require rebuilding some of the layout code here and breaking PatternFly semantics, with custom styles to make it still look like a regular list. This would be reliably aligned, but would take a lot of time and effort.
3. I could just move the most variable-width pieces to the end of the center section, such as the mapping name (which here includes the "infrastructure mapping does not exist" message). Most of the rest of the row has a static width, so this would mostly fix the problem, but if a plan has no "scheduled/completed" timestamp, that row's mapping name would not be aligned with the other mapping names. This would be easy to implement, though.

I think maybe if Vince is okay with it, we should go with option 3 which will make the problem less severe without much effort. Otherwise, this needs some troubleshooting time and we should move it to 5.11.

Comment 4 Mike Turley 2019-06-19 19:18:13 UTC
I discussed it with Vince, and we think it is best to table this until 5.11.

Comment 5 Fabien Dupont 2019-07-30 08:59:10 UTC
@mike, any news on this ?

Comment 6 Mike Turley 2019-07-30 16:27:11 UTC
Fabien, we decided to wait and address this after we make the UI changes for warm migration, since we will be changing the layout of these list views and we may use compound expansion to prevent cluttering the actual list items with too much data (which is causing the alignment issues). If we still have alignment issues after warm migration, I have some other ideas on how to address it, but I think we should wait.

Comment 7 Mike Turley 2019-09-17 15:44:50 UTC
This PR (created to prepare for warm migration) will solve this issue when merged: https://github.com/ManageIQ/manageiq-v2v/pull/1031

Comment 8 Mike Turley 2019-09-19 20:05:49 UTC
The PR is now merged, I'm not sure what release it belongs in though. It will be necessary for warm migration.

Comment 9 Mike Turley 2019-10-17 17:39:30 UTC
*** Bug 1762457 has been marked as a duplicate of this bug. ***

Comment 10 Mike Turley 2019-10-17 17:41:58 UTC
Copying my comment from the duplicate BZ:

> The alignment issue was fixed by https://github.com/ManageIQ/manageiq-v2v/pull/1031 which was merged to master in early September.
> The fix involved a heavy refactor to replace the components making up these list views with a new table-based structure. Since it is such a heavy change, I don't think we should necessarily backport it to ivanchuk unless we are backporting all of the warm migration related changes (since they depend on this).

Fabien, do we know yet whether we will be backporting all of the warm migration changes to 5.11.z? or will that all be waiting for 5.12?

Comment 11 Fabien Dupont 2019-10-22 07:11:03 UTC
Warm migration is a feature for 5.11.z, so every PR for warm migration should be labelled invanchuk/yes

Comment 12 Mike Turley 2019-10-22 15:39:47 UTC
Thanks Fabien. I labelled the PR ivanchuk/yes, and I'll move this BZ to POST.

Comment 13 CFME Bot 2020-04-13 14:46:31 UTC
New commit detected on ManageIQ/manageiq-v2v/ivanchuk:

https://github.com/ManageIQ/manageiq-v2v/commit/b2f23976700ffccf0f89f2218b3ae6e0180422c0
commit b2f23976700ffccf0f89f2218b3ae6e0180422c0
Author:     Milan Zázrivec <mzazrivec>
AuthorDate: Thu Sep 19 17:59:51 2019 +0000
Commit:     Milan Zázrivec <mzazrivec>
CommitDate: Thu Sep 19 17:59:51 2019 +0000

    Merge pull request #1031 from mturley/list-view-table-structure

    Convert list views to table structure to fix alignment issues

    (cherry picked from commit 40746f19d02a7c407c5d101accbd733766fa9d11)

    https://bugzilla.redhat.com/show_bug.cgi?id=1716845

 app/javascript/react/screens/App/App.scss | 1 +
 app/javascript/react/screens/App/Mappings/screens/MappingWizard/__tests__/__snapshots__/MappingWizard.test.js.snap | 52 +-
 app/javascript/react/screens/App/Overview/components/Migrations/Migrations.scss | 4 +
 app/javascript/react/screens/App/Overview/components/Migrations/MigrationsCompletedList.js | 42 +-
 app/javascript/react/screens/App/Overview/components/Migrations/MigrationsNotStartedList.js | 56 +-
 app/javascript/react/screens/App/Overview/components/Migrations/ScheduledTimeInfoItem.js | 27 +
 app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsCompletedList.test.js | 9 +-
 app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsNotStartedList.test.js | 3 +-
 app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardVMStep/__tests__/__snapshots__/PlanWizardVMStep.test.js.snap | 8 +-
 app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap | 4 +-
 app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/ConversionHostWizardAuthenticationStep/__tests__/__snapshots__/ConversionHostWizardAuthenticationStep.test.js.snap | 78 +-
 app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/__tests__/__snapshots__/ConversionHostWizard.test.js.snap | 52 +-
 app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap | 12 +-
 app/javascript/react/screens/App/common/ListViewTable/ListViewTable.js | 66 +
 app/javascript/react/screens/App/common/ListViewTable/ListViewTable.scss | 48 +
 app/javascript/react/screens/App/common/ListViewTable/ListViewTableRow.js | 69 +
 package.json | 4 +-
 yarn.lock | 276 +-
 18 files changed, 608 insertions(+), 203 deletions(-)

Comment 14 Nandini Chandra 2020-04-16 21:55:51 UTC
Verified in 5.11.5

Comment 17 errata-xmlrpc 2020-05-05 13:43:06 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory, and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHBA-2020:2020