Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Cluster details updates #2328

Merged
merged 9 commits into from
Feb 20, 2024
Merged

Cluster details updates #2328

merged 9 commits into from
Feb 20, 2024

Conversation

rtorrero
Copy link
Contributor

Description

This PR adds some of the UI changes proposed by @jagabomb:

  • details button becomes a link
  • details content header changes from "Site details" to "Node details"
  • rounded bottom of tables
  • top margins in the resources in the node details view
  • stop resources section should go under the site details section
  • stop resources section becomes a fixed section and when there are no stopped resources it shows a text saying "No resources to display"

See attached screenshots for more details:
Captura desde 2024-02-16 13-49-53
Captura desde 2024-02-16 13-49-32
Captura desde 2024-02-16 13-49-46

@rtorrero rtorrero force-pushed the cluster-details-updates branch from 8c7ea63 to cb559f8 Compare February 16, 2024 15:34
@rtorrero rtorrero requested review from arbulu89, EMaksy, CDimonaco and jagabomb and removed request for arbulu89 February 16, 2024 15:48
@rtorrero rtorrero added enhancement New feature or request user story ux javascript Pull requests that update Javascript code env Create an ephimeral environment for the pr branch and removed user story labels Feb 16, 2024
arbulu89
arbulu89 reviewed Feb 19, 2024
View reviewed changes
Copy link
Contributor

@arbulu89 arbulu89 left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Hey @rtorrero
Only one thing. With the rounded table thing, the header row shouldn't be rounded when there is an additional header on top of it.
Besides that, all of the table in the app are rounder now, and I don't think this was desired. We should have some rounder option as prop in the Table component I guess to make it variable.
What do you think @jagabomb ?

PD: by the way, if we agree that all tables should be rounder, we wouldn't need to "rounder" variable. Fixing the header would be enough

@jagabomb
Copy link
Contributor

Hey @rtorrero Only one thing. With the rounded table thing, the header row shouldn't be rounded when there is an additional header on top of it. Besides that, all of the table in the app are rounder now, and I don't think this was desired. We should have some rounder option as prop in the Table component I guess to make it variable. What do you think @jagabomb ?

Well spotted @arbulu89, yeah only the top and bottom sections of the Site Detail component should be rounded. So in this case the, Site Name (NBG/WDF) would be the top part of the component with the top rounded corners. Then the grey Table Header (Hostname, Nameserver, etc) without any rounded corners. Followed by the Table Description with bottom rounded corners. This styling helps to make the Sites Detail nodes feel like single components.

@rtorrero rtorrero mentioned this pull request Feb 19, 2024
Merged
@rtorrero
Copy link
Contributor Author

Hey @rtorrero Only one thing. With the rounded table thing, the header row shouldn't be rounded when there is an additional header on top of it. Besides that, all of the table in the app are rounder now, and I don't think this was desired. We should have some rounder option as prop in the Table component I guess to make it variable. What do you think @jagabomb ?

Well spotted @arbulu89, yeah only the top and bottom sections of the Site Detail component should be rounded. So in this case the, Site Name (NBG/WDF) would be the top part of the component with the top rounded corners. Then the grey Table Header (Hostname, Nameserver, etc) without any rounded corners. Followed by the Table Description with bottom rounded corners. This styling helps to make the Sites Detail nodes feel like single components.

once #2337 is merged, I'll adjust this and re-request review 👍

EMaksy
EMaksy approved these changes Feb 19, 2024
View reviewed changes
Copy link
Member

@EMaksy EMaksy left a comment

Choose a reason for hiding this comment

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

Nice, you survived the CSS war.
LGTM!

@rtorrero rtorrero force-pushed the cluster-details-updates branch from cb559f8 to e9af002 Compare February 19, 2024 16:41
@rtorrero rtorrero requested a review from arbulu89 February 19, 2024 17:02
@rtorrero
Copy link
Contributor Author

@jagabomb @arbulu89 seems to be good now: with header
image

without header:
image

arbulu89
arbulu89 requested changes Feb 20, 2024
View reviewed changes
Copy link
Contributor

@arbulu89 arbulu89 left a comment

Choose a reason for hiding this comment

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

@rtorrero
Looks good.
Please add a test to the StoppedResources view, for the 0 resources scenario.

jagabomb
jagabomb approved these changes Feb 20, 2024
View reviewed changes
Copy link
Contributor

@jagabomb jagabomb left a comment

Choose a reason for hiding this comment

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

LGTM... Nice one!

@rtorrero rtorrero force-pushed the cluster-details-updates branch from 1ebe81b to ec2ec3b Compare February 20, 2024 09:07
arbulu89
arbulu89 approved these changes Feb 20, 2024
View reviewed changes
Copy link
Contributor

@arbulu89 arbulu89 left a comment

Choose a reason for hiding this comment

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

Please change the import.
We are fine to merge afterwards

assets/js/pages/ClusterDetails/StoppedResources.test.jsx Outdated Show resolved Hide resolved
@rtorrero rtorrero merged commit 210a5d2 into main Feb 20, 2024
24 checks passed
@rtorrero rtorrero deleted the cluster-details-updates branch February 20, 2024 13:21
EMaksy pushed a commit that referenced this pull request Feb 20, 2024
@rtorrero @EMaksy
Cluster details updates (#2328)
548bc1f 
* Change Node Details header

* Add top margin for subheaders and remove no longer needed button import

* Move stopped resources and always display even when empty

* Adjust test to match new name for header

* Style button as a link 

* Use new header prop in table component

* Add stopped resources test scenario for no stopped resources
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@EMaksy EMaksy EMaksy approved these changes

@jagabomb jagabomb jagabomb approved these changes

@arbulu89 arbulu89 arbulu89 approved these changes

@CDimonaco CDimonaco Awaiting requested review from CDimonaco

Assignees
No one assigned
Labels
enhancement New feature or request env Create an ephimeral environment for the pr branch javascript Pull requests that update Javascript code ux
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@rtorrero @jagabomb @arbulu89 @EMaksy