[UI] Nodes sorting #2926

alexis-ld · 2020-11-13T10:40:34Z

Component:
ui, nodes

Context:
We want to be able to sort the Nodes table like the Volumes table.

Summary:
I used the same sorting logic (leveraging react-table's sorting abilities).
I extracted the URL sync code to its custom hook and the Table sorting components to the Common layout file to avoid code redundancy between the two views.
Update:

Introduce hook test libray
Bump React version to the latest v17.0.1

Acceptance criteria:
Clicking on a column header on the Nodes table sorts the data according to what is specified in #2919 .
Loading the page with a sorting specified in the URL sorts the data accordingly.

Closes: #2919

Wait until alerts and PVClist are retrieved before auto-selecting first volume based on health. Refs: #2920

Remove default sorting from query string on volumes list Refs: #2920

Use a flag on the whole volumes instead of on each item to determine when alerts have been mapped Refs: #2920

Extract Sorting styled components to re-use those in Nodes table Refs: #2919

Base for Nodes sorting, added react-table utilities and basic header triggers Refs: #2919

Add missing constant for Node status User constants instead of strings in NodeUtils table data generator to be consistent with Sorting Implement Status Sorting Refs: #2919

Add name lowercase sorting Refs: #2919

Move the URL Sync logic for both Volumes and Nodes tables to its custom hook function to avoid a big block of code redundancy. Refs: #2919

Add missing history dependency in useEffect in Sort URL Sync custom hook Refs: #2919

bert-e · 2020-11-13T10:40:36Z

Hello alexis-ld,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Status report is not available.

bert-e · 2020-11-13T10:40:42Z

Integration data created

I have created the integration data for the additional destination branches.

this pull request will merge improvement/2919-nodes-sorting into
development/2.6
w/2.7/improvement/2919-nodes-sorting will be merged into development/2.7

The following branches will NOT be impacted:

development/1.0
development/1.1
development/1.2
development/1.3
development/2.0
development/2.1
development/2.2
development/2.3
development/2.4
development/2.5

You can set option create_pull_requests if you need me to create
integration pull requests in addition to integration branches, with:

@bert-e create_pull_requests

bert-e · 2020-11-13T10:40:44Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

thomasdanan

works well for me ...

ChengYanJin

Smart move of useTableSortURLSync hook! Bravo! I suggest we add a unit test for this.

BTW, since by default we sort the node list by health. Shouldn't we auto-select the first node base on the health?

Thanks!

bert-e · 2020-11-14T09:30:16Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

The following reviewers are expecting changes from the author, or must review again:

@ChengYanJin

Refs: #2919

Version >= 16.9 needed in order to use the custom hook testing library Refs: #2919

Add react-hooks-testing-library to render hooks within a test component Test useTableSortURLSync to check if URL params are handled properly Refs: #2919

alexis-ld · 2020-11-17T16:11:16Z

@ChengYanJin I added tests for the custom hook as well as the Node auto-select

ChengYanJin

LGTM!
Thanks for introducing the hook test library and bump React to the latest version ;)

bert-e · 2020-11-18T09:11:29Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

thomasdanan

works as expected

alexis-ld · 2020-11-18T14:19:27Z

/approve

bert-e · 2020-11-18T14:19:38Z

In the queue

The changeset has received all authorizations and has been added to the
relevant queue(s). The queue(s) will be merged in the target development
branch(es) as soon as builds have passed.

The changeset will be merged in:

✔️ development/2.6
✔️ development/2.7

The following branches will NOT be impacted:

development/1.0
development/1.1
development/1.2
development/1.3
development/2.0
development/2.1
development/2.2
development/2.3
development/2.4
development/2.5

There is no action required on your side. You will be notified here once
the changeset has been merged. In the unlikely event that the changeset
fails permanently on the queue, a member of the admin team will
contact you to help resolve the matter.

IMPORTANT

Please do not attempt to modify this pull request.

Any commit you add on the source branch will trigger a new cycle after the
current queue is merged.
Any commit you add on one of the integration branches will be lost.

If you need this pull request to be removed from the queue, please contact a
member of the admin team now.

The following options are set: approve

bert-e · 2020-11-19T08:03:25Z

I have successfully merged the changeset of this pull request
into targetted development branches:

✔️ development/2.6
✔️ development/2.7

The following branches have NOT changed:

development/1.0
development/1.1
development/1.2
development/1.3
development/2.0
development/2.1
development/2.2
development/2.3
development/2.4
development/2.5

Please check the status of the associated issue None.

Goodbye alexis-ld.

Alex Le Dinh added 9 commits November 12, 2020 15:53

ui/volumes:

e14d502

Wait until alerts and PVClist are retrieved before auto-selecting first volume based on health. Refs: #2920

ui/volumes:

c4a3d08

Remove default sorting from query string on volumes list Refs: #2920

ui/volumes:

7796f62

Use a flag on the whole volumes instead of on each item to determine when alerts have been mapped Refs: #2920

ui/volumes:

a5cc01b

Extract Sorting styled components to re-use those in Nodes table Refs: #2919

ui/nodes:

e70489e

Base for Nodes sorting, added react-table utilities and basic header triggers Refs: #2919

ui/nodes:

6283bd2

Add missing constant for Node status User constants instead of strings in NodeUtils table data generator to be consistent with Sorting Implement Status Sorting Refs: #2919

ui/nodes:

169f51b

Add name lowercase sorting Refs: #2919

ui/volumes/nodes:

d856a49

Move the URL Sync logic for both Volumes and Nodes tables to its custom hook function to avoid a big block of code redundancy. Refs: #2919

ui/volumes/nodes:

643e78e

Add missing history dependency in useEffect in Sort URL Sync custom hook Refs: #2919

alexis-ld requested a review from ChengYanJin November 13, 2020 10:40

alexis-ld requested a review from a team as a code owner November 13, 2020 10:40

thomasdanan previously approved these changes Nov 13, 2020

View reviewed changes

ChengYanJin requested changes Nov 14, 2020

View reviewed changes

Alex Le Dinh added 2 commits November 17, 2020 11:34

ui/nodes: Auto select first node after health Sorting.

5144772

Refs: #2919

ui: Update react to latest version.

33c108f

Version >= 16.9 needed in order to use the custom hook testing library Refs: #2919

alexis-ld dismissed thomasdanan’s stale review via 33c108f November 17, 2020 13:59

ui/volumes/nodes: Test for useTableSortURLSync hook

35f52f8

Add react-hooks-testing-library to render hooks within a test component Test useTableSortURLSync to check if URL params are handled properly Refs: #2919

alexis-ld requested a review from ChengYanJin November 17, 2020 16:10

ChengYanJin approved these changes Nov 18, 2020

View reviewed changes

alexis-ld requested a review from thomasdanan November 18, 2020 09:22

thomasdanan approved these changes Nov 18, 2020

View reviewed changes

bert-e merged commit 7453d9c into development/2.6 Nov 19, 2020

bert-e deleted the improvement/2919-nodes-sorting branch November 19, 2020 08:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI] Nodes sorting #2926

[UI] Nodes sorting #2926

alexis-ld commented Nov 13, 2020 •

edited by ChengYanJin

Loading

bert-e commented Nov 13, 2020

bert-e commented Nov 13, 2020

bert-e commented Nov 13, 2020

thomasdanan left a comment

ChengYanJin left a comment

bert-e commented Nov 14, 2020

alexis-ld commented Nov 17, 2020

ChengYanJin left a comment

bert-e commented Nov 18, 2020

thomasdanan left a comment

alexis-ld commented Nov 18, 2020

bert-e commented Nov 18, 2020

bert-e commented Nov 19, 2020

[UI] Nodes sorting #2926

[UI] Nodes sorting #2926

Conversation

alexis-ld commented Nov 13, 2020 • edited by ChengYanJin Loading

bert-e commented Nov 13, 2020

Hello alexis-ld,

bert-e commented Nov 13, 2020

Integration data created

bert-e commented Nov 13, 2020

Waiting for approval

thomasdanan left a comment

Choose a reason for hiding this comment

ChengYanJin left a comment

Choose a reason for hiding this comment

bert-e commented Nov 14, 2020

Waiting for approval

alexis-ld commented Nov 17, 2020

ChengYanJin left a comment

Choose a reason for hiding this comment

bert-e commented Nov 18, 2020

Waiting for approval

thomasdanan left a comment

Choose a reason for hiding this comment

alexis-ld commented Nov 18, 2020

bert-e commented Nov 18, 2020

In the queue

bert-e commented Nov 19, 2020

alexis-ld commented Nov 13, 2020 •

edited by ChengYanJin

Loading