Table view for Virtual Machines screen #1600

rszwajko · 2022-06-09T12:12:32Z

~~Depends on #1592~~ The commit from #1592 this PR was dependent on has been cherry-picked to this PR.

This PR adds possibility to switch between card view and table view on the Virtual Machines screen. The card view remains the default but it's possible to change it (the change is persisted on the server as an user profile property).

Note that this PR is only about presentation layer: the underlying logic remains the same.
In particular:

both views present the same information to the user (no extra columns in table view)
data is lazy loaded using infinite scroller (no explicit paging)
actions are per VM/pool (no multiple selection/bulk operations)

ovirt-infra · 2022-06-09T12:13:43Z

All tests passed

rszwajko · 2022-06-09T12:15:39Z

Overwiew

Filtering/sorting

Small screen

ovirt-infra · 2022-06-09T14:14:14Z

All tests passed

ovirt-infra · 2022-06-14T20:49:23Z

All tests passed

rszwajko · 2022-06-15T08:58:07Z

/ost

ovirt-infra · 2022-06-15T08:59:23Z

All tests passed

sjd78

Only 1 things is bugging me really...and it is how the table is wired in to VmCardList

src/components/VmsList/style.css

src/components/VmsList/VmCardList.js

ovirt-infra · 2022-07-14T09:54:40Z

All tests passed

rszwajko · 2022-07-14T09:58:35Z

@sjd78 @sgratch
Note that this PR depends on #1592 0 - in particular it uses common filtering and sorting components.

sjd78

LGTM

ovirt-infra · 2022-07-20T23:17:20Z

All tests passed

sjd78 · 2022-07-20T23:19:50Z

@sjd78 @sgratch Note that this PR depends on #1592 0 - in particular it uses common filtering and sorting components.

@sgratch, @rszwajko -- I cherry-picked the necessary commit from 1592 to this PR. This PR is now standalone complete.

sgratch

@rszwajko
Few comments/enhancements to consider:

IMHO both card/table view buttons on VMs dashboard dialog worth adding tooltips to easily differentiate between them:
Resetting the user's account settings via the account settings dialog reset this view option back to cards view. This is not an obvious expected behavior and even though it's not a destructive action, it is still worth adding a property/indication to the account settings dialog, as done for all other reset-able options.
When resizing the dialog by zooming in, the filter search text field is dismissed. This is reproduced regardless to this fix but now the chance is higher since less space is left. It's not obvious that the search text filed is hidden by the funnel button so maybe worth at least adding a tooltip:
Default zoom:

Zoom in:
Pool and Pool vms rows look exactly the same at the table view (same layout except the status new option) while on cards view there is a bit different layout (2 status fields instead of one) and it's more easy to distinguish between them. Maybe worth adding a tag to distinguish
The number of entities displayed on vms dashboard, as part of the filter results, includes a question mark which seems like a bug. E.g.: "23 of ? Results"

rszwajko · 2022-08-01T12:26:24Z

@sgratch

Few comments/enhancements to consider:

IMHO both card/table view buttons on VMs dashboard dialog worth adding tooltips to easily differentiate between them:

The icons look self-explanatory to me but I'll check how tooltips will behave in this scenario. Note that the design guidlines and the examples don't use the tooltips.

Resetting the user's account settings via the account settings dialog reset this view option back to cards view. This is not an obvious expected behavior and even though it's not a destructive action, it is still worth adding a property/indication to the account settings dialog, as done for all other reset-able options.

AFAIK we don't list the properties that will be removed during the reset operation.

When resizing the dialog by zooming in, the filter search text field is dismissed. This is reproduced regardless to this fix but now the chance is higher since less space is left. It's not obvious that the search text filed is hidden by the funnel button so maybe worth at least adding a tooltip:

According to PF4 design guidelines the primary use case here is the mobile browser where "on hover" support is poor.

Pool and Pool vms rows look exactly the same at the table view (same layout except the status new option) while on cards view there is a bit different layout (2 status fields instead of one) and it's more easy to distinguish between them. Maybe worth adding a tag to distinguish

The data is the same in both views - only the layout is different. Of course we can add some extra tag but then it should be visible also on the card view. It would be also nice to filter based on such tag. I would rather create a follow-up PR to track this.

5. The number of entities displayed on vms dashboard, as part of the filter results, includes a question mark which seems like a bug. E.g.: "`23 of ? Results`"

This is a feature :)

Visualise that the total number of VMs/Pools is unknown by displaying
a question mark as the total result count i.e. "10 of ? Results"

Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592

Changes: 1. display all providers in ons table 2. provide attribute-value filter implementation with: a) free text filter b) enum based filter Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592 Reference-Url: https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter

Functional changes: 1. display all providers in one table 2. use only 'Ready' condition to describe the state of the provider Components created: 1. primary filters component for displaying few (1-3) most important filters. The filters are grouped but displayed independently. 2. attribute-value filter implementation for grouping all other filters in a space efficient way 3. default filter types: a) free text filter - substring search based on multiple terms - search terms confirmed by 'Enter' key b) enum based filter - exact match based on checkboxes selected 4. generic table component providing sorting capabilities Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592 Reference-Url: https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter

Before, filtering and sorting was tied to VM entities. After this patch the generic filter/sort component can be reused for other entities. Filter component changes: 1. create a new type of filter - a date filter 2. generalize name filter to text based filter - as before only one filter of this type is supported per filter toolbar 3. extract enum based filter as SelectFilter Sort component changes: 1. refactor SortFields from constant to parameter 2. drop unused isNumeric flag - natural sort order is used for all types of input

Persist chosen view mode as server side user property "vmPortal.viewForVirtualMachines". Visualise that the total number of VMs/Pools is unknown by displaying a question mark as the total result count i.e. "10 of ? Results"

This wording is recommended by PF4 for paging. Reference-Url: https://www.patternfly.org/v4/components/pagination/design-guidelines#indeterminate-pagination

ovirt-infra · 2022-09-12T07:46:29Z

All tests passed

rszwajko · 2022-09-12T07:50:34Z

@sgratch @sjd78
Added 3 commits on top of already reviewed code:

Add tooltips to toolbar filter and card/table view toggle
Use 'many' to describe indeterminate number of results. This wording is recommended by PF4 for paging - see https://www.patternfly.org/v4/components/pagination/design-guidelines#indeterminate-pagination
Base filter selection on already selected filters - the existing code worked (somehow) but after refactoring it's deterministic

rszwajko · 2022-09-12T07:53:04Z

Screenshots

Functional changes: 1. display all providers in one table 2. use only 'Ready' condition to describe the state of the provider Components created: 1. primary filters component for displaying few (1-3) most important filters. The filters are grouped but displayed independently. 2. attribute-value filter implementation for grouping all other filters in a space efficient way 3. default filter types: a) free text filter - substring search based on multiple terms - search terms confirmed by 'Enter' key b) enum based filter - exact match based on checkboxes selected 4. generic table component providing sorting capabilities Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592 Reference-Url: https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter

sjd78

LGTM

sjd78 · 2022-09-19T17:21:29Z

/ost

Functional changes: 1. display all providers in one table 2. use only 'Ready' condition to describe the state of the provider Components created: 1. primary filters component for displaying few (1-3) most important filters. The filters are grouped but displayed independently. 2. attribute-value filter implementation for grouping all other filters in a space efficient way 3. default filter types: a) free text filter - substring search based on multiple terms - search terms confirmed by 'Enter' key b) enum based filter - exact match based on checkboxes selected 4. generic table component providing sorting capabilities Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592 Reference-Url: https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter

rszwajko · 2022-09-21T08:17:39Z

/ost

Functional changes: 1. display all providers in one table 2. use only 'Ready' condition to describe the state of the provider Components created: 1. primary filters component for displaying few (1-3) most important filters. The filters are grouped but displayed independently. 2. attribute-value filter implementation for grouping all other filters in a space efficient way 3. default filter types: a) free text filter - substring search based on multiple terms - search terms confirmed by 'Enter' key b) enum based filter - exact match based on checkboxes selected 4. generic table component providing sorting capabilities Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592 Reference-Url: https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter

sgratch

All looks good, agree with your comments above, except one comment which I'm not sure about:

AFAIK we don't list the properties that will be removed during the reset operation.

It's true that the list of properties is not displayed during reset operation but it's strange that the user can change his current view from cards->table and then approach the "account settings" dialog and see that the "reset settings" option is enabled without knowing why. For all other reset-able options he can see the current chosen values as part of the account settings dialog itself.

A suggestion might be to add a read only view mode field as part of "advanced options" tab within the "account settings" dialog.

A followup issue was opened to handle this: #1632

sgratch

This looks ok except a followup issue that will be handled separately for the reset options handling.

Functional changes: 1. display all providers in one table 2. use only 'Ready' condition to describe the state of the provider Components created: 1. primary filters component for displaying few (1-3) most important filters. The filters are grouped but displayed independently. 2. attribute-value filter implementation for grouping all other filters in a space efficient way 3. default filter types: a) free text filter - substring search based on multiple terms - search terms confirmed by 'Enter' key b) enum based filter - exact match based on checkboxes selected 4. generic table component providing sorting capabilities Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592 Reference-Url: https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter Signed-off-by: Radoslaw Szwajkowski <[email protected]>

Components created: 1. standard list page component a) page skeleton following openshift console layout and practice b) generic component parametrized by the entity type c) design is view independent and follows the approach used in oVirt PR 1600 and 1592. Currently only table view implementation is provided. 2. primary filters component a) implementation of PatternFly 4 filter group pattern[1] extended to support all filters implementing FilterTypeProps interface. b) use case: displaying few (1-3) most important filters. The filters are grouped but displayed independently. 3. attribute-value filter component a) implementation of PatternFly 4 attribute-value filter pattern[2] b) use case: grouping all other filters in a space efficient way c) supports all filters implementing FilterTypeProps interface. 4. filter components: a) free text filter - substring search based on multiple terms - search terms confirmed by 'Enter' key or by button b) enum based filter - exact match based on checkboxes selected 5. table view component a) parametrized by the entity type b) row mapper component is entity-specific which allows complex customizations c) sorting capabilities (via arrows in the table header) 6. dialog for managing column visibility and order a) based on openshift console solution [3] and PatternFly 4 demo[4] b) toggle column visibility (except identity columns) c) re-order columns using drag and drop Updated libraries: 1. Downgrade @testing-library/react to ^12.0 since ^13.0 requires react >= 18. 2. Bump @openshift/dynamic-plugin-sdk* to 1.0.0 [1] https://www.patternfly.org/v4/guidelines/filters/#filter-group [2] https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter [3] https://github.com/openshift/console/blob/release-4.12/frontend/public/components/modals/column-management-modal.tsx [4] https://www.patternfly.org/v4/components/table/react-demos#column-management-with-draggable Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592 Signed-off-by: Radoslaw Szwajkowski <[email protected]>

isaranova · 2022-11-24T14:07:54Z

LGTM

rszwajko requested review from sjd78 and sgratch June 9, 2022 12:12

rszwajko mentioned this pull request Jun 9, 2022

Feature request : display VM in list view #1368

Closed

rszwajko added the PF4 label Jun 9, 2022

rszwajko force-pushed the tableView branch from 8ffef21 to 28369c5 Compare June 9, 2022 14:13

rszwajko removed the PF4 label Jun 14, 2022

rszwajko force-pushed the tableView branch from 28369c5 to ef4ac61 Compare June 14, 2022 20:48

rszwajko closed this Jun 15, 2022

rszwajko reopened this Jun 15, 2022

sandrobonazzola assigned rszwajko Jul 6, 2022

sjd78 reviewed Jul 12, 2022

View reviewed changes

src/components/VmsList/style.css Show resolved Hide resolved

src/components/VmsList/VmCardList.js Outdated Show resolved Hide resolved

rszwajko requested a review from sjd78 July 14, 2022 09:58

sjd78 approved these changes Jul 14, 2022

View reviewed changes

sjd78 force-pushed the tableView branch from b7d12a8 to 79bb550 Compare July 20, 2022 23:16

sgratch reviewed Jul 22, 2022

View reviewed changes

rszwajko added a commit to rszwajko/forklift-console-plugin that referenced this pull request Aug 31, 2022

Convert Providers screen to Console convention

88dd791

Reference-Url: oVirt/ovirt-web-ui#1600 Reference-Url: oVirt/ovirt-web-ui#1592

rszwajko mentioned this pull request Aug 31, 2022

Convert Providers screen to Console page kubev2v/forklift-console-plugin#33

Merged

rszwajko added 6 commits September 10, 2022 15:32

Add table view for Virtual Machines screen

116493e

Persist chosen view mode as server side user property "vmPortal.viewForVirtualMachines". Visualise that the total number of VMs/Pools is unknown by displaying a question mark as the total result count i.e. "10 of ? Results"

Move filter, sort and fetch logic to VmsList component

79feca5

Base filter selection on already selected filters

3df381f

Use 'many' to describe indeterminate number of results

7364ff9

This wording is recommended by PF4 for paging. Reference-Url: https://www.patternfly.org/v4/components/pagination/design-guidelines#indeterminate-pagination

Add tooltips to toolbar filter and card/table view toggle

d63fae3

rszwajko force-pushed the tableView branch from 79bb550 to d63fae3 Compare September 12, 2022 07:45

sjd78 approved these changes Sep 14, 2022

View reviewed changes

sjd78 requested a review from sgratch September 14, 2022 16:27

sgratch reviewed Sep 28, 2022

View reviewed changes

sgratch mentioned this pull request Sep 28, 2022

Table view for VMs: 'reset settings' operation on view mode is not clear since it is not displayed on account settings dialog #1632

Closed

sgratch approved these changes Sep 28, 2022

View reviewed changes

sgratch merged commit aa6f3da into oVirt:master Sep 28, 2022

rszwajko mentioned this pull request Oct 28, 2022

Provide reusable components for creating standard list page kubev2v/forklift-console-plugin#64

Merged

rszwajko mentioned this pull request Aug 7, 2024

🐛 Use standard filters for languages in the Set Targets step konveyor/tackle2-ui#2045

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table view for Virtual Machines screen #1600

Table view for Virtual Machines screen #1600

rszwajko commented Jun 9, 2022 •

edited by sjd78

Loading

ovirt-infra commented Jun 9, 2022

rszwajko commented Jun 9, 2022

ovirt-infra commented Jun 9, 2022

ovirt-infra commented Jun 14, 2022

rszwajko commented Jun 15, 2022

ovirt-infra commented Jun 15, 2022

sjd78 left a comment •

edited

Loading

ovirt-infra commented Jul 14, 2022

rszwajko commented Jul 14, 2022

sjd78 left a comment

ovirt-infra commented Jul 20, 2022

sjd78 commented Jul 20, 2022

sgratch left a comment •

edited

Loading

rszwajko commented Aug 1, 2022

ovirt-infra commented Sep 12, 2022

rszwajko commented Sep 12, 2022

rszwajko commented Sep 12, 2022

sjd78 left a comment

sjd78 commented Sep 19, 2022

rszwajko commented Sep 21, 2022

sgratch left a comment •

edited

Loading

sgratch left a comment

isaranova commented Nov 24, 2022

Table view for Virtual Machines screen #1600

Table view for Virtual Machines screen #1600

Conversation

rszwajko commented Jun 9, 2022 • edited by sjd78 Loading

ovirt-infra commented Jun 9, 2022

rszwajko commented Jun 9, 2022

Overwiew

Filtering/sorting

Small screen

ovirt-infra commented Jun 9, 2022

ovirt-infra commented Jun 14, 2022

rszwajko commented Jun 15, 2022

ovirt-infra commented Jun 15, 2022

sjd78 left a comment • edited Loading

Choose a reason for hiding this comment

ovirt-infra commented Jul 14, 2022

rszwajko commented Jul 14, 2022

sjd78 left a comment

Choose a reason for hiding this comment

ovirt-infra commented Jul 20, 2022

sjd78 commented Jul 20, 2022

sgratch left a comment • edited Loading

Choose a reason for hiding this comment

rszwajko commented Aug 1, 2022

ovirt-infra commented Sep 12, 2022

rszwajko commented Sep 12, 2022

rszwajko commented Sep 12, 2022

Screenshots

sjd78 left a comment

Choose a reason for hiding this comment

sjd78 commented Sep 19, 2022

rszwajko commented Sep 21, 2022

sgratch left a comment • edited Loading

Choose a reason for hiding this comment

sgratch left a comment

Choose a reason for hiding this comment

isaranova commented Nov 24, 2022

rszwajko commented Jun 9, 2022 •

edited by sjd78

Loading

sjd78 left a comment •

edited

Loading

sgratch left a comment •

edited

Loading

sgratch left a comment •

edited

Loading