Migrate VM Details to PF4

[rszwajko]

Depends on PR #1539

Functional changes:

1. error handling on Create/Edit Disk modal is now handled via field level errors. Check screenshots below for details. Note that information about resizing disk was moved from tooltip to permanent helper text as per PF4 guidelines we should:

Never hide critical information inside a popover, since popovers only surface when a user triggers them.

2. Restore Snapshot button was removed from snapshot details popover - see Regression: VM portal crashes when trying to open the VM's snapshot details Popover #1552
3. New break-point for responsive resize was added for medium screens. PF4 uses bigger fonts so i.e. snapshot card was breaking during resizing (note that it doesn't react to resize perfectly also in PF3)
4. Overview card in edit mode does not show the OS icon - this saves space and prevents layout changes during editing i.e. when error message is shown (note that this problem applies also to PF3).

Exceptions:

1. toolbars are technically distinct from the the main screen and will be handled separately

[rszwajko]

Overview

Loading

Ready (full size)

Ready (medium screen breakpoint)

Cards

Overview card

Details card

Snapshots, nics, disks

Dialogs

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[ovirt-infra]

All tests passed

[sjd78]

Testing notes:

General

• Cards look ok in general. The Badge icons could use some spacing between the title and the badges. Same spacing between the icon and the title should be used.
• The reactive breakpoints look really good

Overview card

• Looks good!
• I'm glad the OS type tag is in the same position. I never liked how the UX designer tried to move it inside the card borders. That never looked good.

Utilization Card

• Looks good!
• Reactive resizing and row wrapping looks good as well

Disk Card

• Disks card looks ok (other than the Badge)
• Create New Disk looks good except:
  • the bootable help text "Only one disk can be bootable at a time" is off (probably needs to be an inline alert instead of the helper text)
• Edit Disk looks good except:
  • the bootable help text
  • the static text fields (storage domain, disk type) fonts are slightly smaller than the form fonts and the "After resizing the disk" help text
• Weird: The tooltips icons align slightly differently in FF vs Chrome. FF looks good while Chrome the icons are down a few px.
• Note: If we want to make the Snapshot, Nic and Disk cards work the same for editing, this would be a good time. Going the snapshot card style where actions are always displayed seems reasonable.

Nic Card

• Nics card looks ok (other than the Badge)
• The disabled delete icon is a different size than the enabled delete icon. That explains the very slight spacing weirdness that was nagging me. Run a VM to see the disabled delete button for NIcs (can't delete them when the VM is running). I see the same thing in the Disks and Nics cards.
• "Add new NIC" and "Edit NIC" modals looks ok except:
  • The "Advanced Options" block should be able to open and close by clicking the text itself instead of only the twistee. See the Advanced Options section on the Details card...
  • I'm not sure the horizontal line above the advanced options is needed
  • The status icon for the Up and Down link states needs some left padding
  • If possible, just have the fields in the advance options section line up labels and inputs with the basic fields instead of indenting

Snapshots Card

• Badge alignment
• Create Snapshot modal looks good
• The Snapshot list doesn't line up the same way and Nic and Disk cards in Edit mode -- the Snapshot icons are left aligned to the descriptions instead of right aligned in a nice "actions column"
• The snapshot description and the how-long-ago text need some space between them
• Snapshot details modal:
  • The disks list overflows the modal if the disk names are long enough:
    
  • I assume something like that would happen with long Nic names
  • Maybe making that modal less of a tooltip style and more a normal modal presentation to have better control over the modal size?

Details Card

• Read only layout looks good
• Maybe a IP Address count badge next to the field label would be nice (my demo VM has 6 addresses so the IP list is a bit crowded)
• Basic edit looks ok except:
  • The CD selection box overflows the card if the ISO name doesn't have space
  • The Operating system drop down doesn't internally scroll

Here is one screen shot with a few of the errors all at the same time:

• Card title item count badge alignment
• CD dropdown over flow
• OS dropdown no scroll
• Snapshot description and "ago" text touching
• Snapshot action icon next to the regular text instead of right aligned (matching Nics and Disks)
• Nics disable delete different size than enabled delete (I'm pretty sure I added the nic while the VM was running to get the delete button enabled on that Nic)

Lots of good work so far!

[sjd78]

Code looks pretty good. Just a few followup comments that mostly relate to layout/look/feel things already identified.

[ovirt-infra]

All tests passed

[rszwajko]

@sjd78

Disk Card

Disks card looks ok (other than the Badge)

Fixed. A CSS class got lost (base-card-item-count-badge).

Create New Disk looks good except:
the bootable help text "Only one disk can be bootable at a time" is off (probably needs to be an inline alert instead of the helper text)

The checkbox (and helper text) is aligned correctly in the top branch (i.e. #1592 ).

Edit Disk looks good except:
the static text fields (storage domain, disk type) fonts are slightly smaller than the form fonts and the "After resizing the disk" help text
Weird: The tooltips icons align slightly differently in FF vs Chrome. FF looks good while Chrome the icons are down a few px.

Both issues are fixed in the top branch: static text is even bigger (16px) than form text (14px).

Note: If we want to make the Snapshot, Nic and Disk cards work the same for editing, this would be a good time. Going the snapshot card style where actions are always displayed seems reasonable.

Done. Note that tooltips work properly in the top branch but blink on Snapshots cards( most likely bootstrap3 issue)

Nic Card
The disabled delete icon is a different size than the enabled delete icon. That explains the very slight spacing weirdness that was nagging me. Run a VM to see the disabled delete button for NIcs (can't delete them when the VM is running). I see the same thing in the Disks and Nics cards.

Done: <svg> tag reacted differently to padding-left than <a>

"Add new NIC" and "Edit NIC" modals looks ok except:
The "Advanced Options" block should be able to open and close by clicking the text itself instead of only the twistee. See the Advanced Options section on the Details card...
I'm not sure the horizontal line above the advanced options is needed

This is default (recommended?) form layout. Discussed above.

The status icon for the Up and Down link states needs some left padding

Done.

If possible, just have the fields in the advance options section line up labels and inputs with the basic fields instead of indenting

This is default (recommended?) form layout. Discussed above.

Snapshots Card
The Snapshot list doesn't line up the same way and Nic and Disk cards in Edit mode -- the Snapshot icons are left aligned to the descriptions instead of right aligned in a nice "actions column"

Done (together with migrating to common layout)

The snapshot description and the how-long-ago text need some space between them

Done

Snapshot details modal:
The disks list overflows the modal if the disk names are long enough:
screenshot-localhost_3000-2022 06 01-21_17_54
I assume something like that would happen with long Nic names
Maybe making that modal less of a tooltip style and more a normal modal presentation to have better control over the modal size?

This is not a regression. We can refactor this later on.

Details Card
Maybe a IP Address count badge next to the field label would be nice (my demo VM has 6 addresses so the IP list is a bit crowded)

Good idea. I did a quick prototyp with LabelGroup but this requires some more attention to look good. Since this is not a regression I would handle it under different PR.

Basic edit looks ok except:
The CD selection box overflows the card if the ISO name doesn't have space

Done. There max-width was not propagated correctly.

The Operating system drop down doesn't internally scroll

It's not a regression. We can fix it later on.

[rszwajko]

Common layout of Snaphots/Disks/Nics Card

[michalskrivanek]

/ost

[sjd78]

LGTM