feat: [M3-9197] - Collapsible Node Pool tables & filterable status #11589

hana-akamai · 2025-01-30T15:48:50Z

Description 📝

Make Node Pool tables collapsible and add a Status filter

Preview 📷

Before	After
	Screen.Recording.2025-01-31.at.1.42.46.PM.mov

How to test 🧪

Prerequisites

(How to setup test environment)

Have a LKE or LKE-E cluster created with some nodes and go to the cluster details page

Verification steps

(How to verify changes)

Try expanding/collapsing node pool accordions
Click on action items in the accordion header (Labels & Taints, Autoscale Pool, etc). The respective drawer/modal should open; the click should not have also expanded/collapsed the accordion
Test the status filter and ensure the nodes are properly filtered
Check mobile view

yarn cy:run -s "cypress/e2e/core/kubernetes/lke-update.spec.ts"

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

…dion header

hana-akamai · 2025-01-31T18:55:40Z

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx

-            <StyledActionButton
-              compactY
-              onClick={() => handleClickResize(poolId)}
+    <Accordion


The changes were basically:

Wrap everything in an Accordion

Move the actions to the accordion heading

Display kebab menu at an earlier breakpoint

Adding e.stopPropagation(); to the inline buttons

hana-akamai · 2025-01-31T18:57:54Z

packages/ui/src/foundations/themes/light.ts

@@ -288,7 +288,6 @@ export const lightTheme: ThemeOptions = {
          },
          '& svg': {
            fill: Color.Brand[80],
-            stroke: Color.Brand[80],


The action menu in the accordion was looking off with the stroke so I removed it. I haven't noticed any regressions from this; lmk if there's any!

dwiley-akamai

Status filter functionality ✅
Accordion and action functionality ✅
Mobile view ✅

I'm seeing lke-update.spec.ts fail locally and in CI currently:

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx

packages/manager/src/components/ActionMenu/ActionMenu.tsx

github-actions · 2025-02-03T17:53:04Z

Coverage Report: ❌
Base Coverage: 79.28%
Current Coverage: 79.27%

mjac0bs

Thanks @hana-akamai!

This was working well and looked good at various screen sizes.

I was seeing one styling issue when testing keyboard navigation. It looks like a background color on the Box is getting inherited from Paper:

Screen.Recording.2025-02-03.at.12.28.40.PM.mov

mjac0bs · 2025-02-03T21:47:38Z

@hana-akamai Just found something we need to account for: autoscale values when they're set, at all viewport sizes.

We should avoid a regression here where this text disappears once we're rendering the action menu. Can we display the text here for now?*

Screen.Recording.2025-02-03.at.2.39.49.PM.mov

*(I'm currently writing an enhancement ticket (M3-9236) to improve Autoscale a little at Daniel's request and we talked about ways to improve the presentation of min/max values as potentially part of that.)

linode-gh-bot · 2025-02-03T23:10:03Z

Cloud Manager UI test results

🔺 1 failing test on test run #10 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`497 Passing`	`3 Skipped`	`103m 3s`

Details

Failing Tests
	Spec	Test
❌	`object-storage.e2e.spec.ts`	object storage end-to-end tests » "before all" hook for "can create and delete object storage buckets"

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts"

cypress · 2025-02-03T23:44:44Z

Cloud Manager E2E Run #7165

Run Properties: Passed #7165 • 2590e361bd: feat: [M3-9197] - Collapsible Node Pool tables & filterable status (#11589)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Passed #7165`
Run duration	`30m 34s`
Commit	`2590e361bd: feat: [M3-9197] - Collapsible Node Pool tables & filterable status (#11589)`
Committer	`Hana Xu`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`2`
Pending	`2`
Skipped	`0`
Passing	`499`
View all changes introduced in this branch ↗︎

hana-akamai added 3 commits January 29, 2025 15:26

move node pool table into an accordion and move action items to accor…

19c63fe

…dion header

styling

50420e4

add status filter to node pool table

9c4243e

hana-akamai added LKE Related to Linode Kubernetes Engine offerings LKE-Enterprise labels Jan 30, 2025

hana-akamai self-assigned this Jan 30, 2025

hana-akamai added 4 commits January 30, 2025 16:34

add e2e test for action button in accordion

46aa5dd

add e2e test for filtering nodes by status

8b4e46c

Added changeset: Collapsible Node Pool tables & filterable status

877c235

Merge branch 'develop' into M3-9197-collapsible-node-pool-table

8dc7dd7

hana-akamai marked this pull request as ready for review January 31, 2025 18:49

hana-akamai requested review from a team as code owners January 31, 2025 18:49

hana-akamai requested review from jdamore-linode, dwiley-akamai, cpathipa and mjac0bs and removed request for a team January 31, 2025 18:49

hana-akamai commented Jan 31, 2025

View reviewed changes

dwiley-akamai reviewed Jan 31, 2025

View reviewed changes

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx Outdated Show resolved Hide resolved

bnussman-akamai reviewed Feb 3, 2025

View reviewed changes

packages/manager/src/components/ActionMenu/ActionMenu.tsx Outdated Show resolved Hide resolved

address feedback

c330a3a

hana-akamai added 2 commits February 3, 2025 13:12

fix e2e

ca5be8e

Merge branch 'develop' into M3-9197-collapsible-node-pool-table

85607d6

mjac0bs approved these changes Feb 3, 2025

View reviewed changes

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Feb 3, 2025

fix header focus bg color

e0b758c

hana-akamai requested a review from bnussman-akamai February 3, 2025 20:05

hana-akamai requested a review from dwiley-akamai February 3, 2025 20:05

dwiley-akamai approved these changes Feb 3, 2025

View reviewed changes

hana-akamai added 2 commits February 3, 2025 17:15

always display min max values in header if autoscaler is enabled

2d5c715

clean up

fbd4c7d

mjac0bs added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 3, 2025

hana-akamai merged commit 2590e36 into linode:develop Feb 3, 2025
22 of 23 checks passed

hana-akamai deleted the M3-9197-collapsible-node-pool-table branch February 3, 2025 23:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-9197] - Collapsible Node Pool tables & filterable status #11589

feat: [M3-9197] - Collapsible Node Pool tables & filterable status #11589

hana-akamai commented Jan 30, 2025 •

edited

Loading

hana-akamai Jan 31, 2025

hana-akamai Jan 31, 2025

dwiley-akamai left a comment

github-actions bot commented Feb 3, 2025 •

edited

Loading

mjac0bs left a comment •

edited

Loading

mjac0bs commented Feb 3, 2025

linode-gh-bot commented Feb 3, 2025

cypress bot commented Feb 3, 2025

feat: [M3-9197] - Collapsible Node Pool tables & filterable status #11589

feat: [M3-9197] - Collapsible Node Pool tables & filterable status #11589

Conversation

hana-akamai commented Jan 30, 2025 • edited Loading

Description 📝

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

hana-akamai Jan 31, 2025

Choose a reason for hiding this comment

hana-akamai Jan 31, 2025

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 3, 2025 • edited Loading

mjac0bs left a comment • edited Loading

Choose a reason for hiding this comment

mjac0bs commented Feb 3, 2025

linode-gh-bot commented Feb 3, 2025

Cloud Manager UI test results

🔺 1 failing test on test run #10 ↗︎

Details

Troubleshooting

cypress bot commented Feb 3, 2025

Cloud Manager E2E Run #7165

hana-akamai commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

mjac0bs left a comment •

edited

Loading