fix: [M3-8937] - Content shifting on Linode Details summary graphs #11301

bnussman-akamai · 2024-11-21T15:18:25Z

Description 📝

Quick PR to try to improve the content shifting when loading a Linode Details page. It is pretty bad right now 😖

Improved loading state so that there is less content shifting 🔄📈
Cleaned up styled components / one-off styles 🧹
Improved dark mode styles 🌑

Preview 📷

	Before	After
Improved loading state	Screen.Recording.2024-11-21.at.10.09.15.AM.mov	Screen.Recording.2024-11-21.at.10.09.34.AM.mov
Improved dark mode

How to test 🧪

Test the Linode Details page summary (graphs) section for style and functionality regressions 👀 📈 git

As an Author, I have 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

github-actions · 2024-11-22T00:13:56Z

Coverage Report: ❌
Base Coverage: 86.98%
Current Coverage: 86.94%

dwiley-akamai

For some reason, the graphs aren't rendering for me on this branch

Screen.Recording.2024-11-22.at.4.18.01.PM.mov

dwiley-akamai · 2024-11-22T21:11:41Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx

@@ -40,15 +40,11 @@ import type { Item } from 'src/components/EnhancedSelect/Select';
 setUpCharts();

 interface Props {
-  isBareMetalInstance: boolean;


Not sure about removing the bare metal checks in this file 🤔

The API team removed all of their bare metal related code in their PR #6768 a few months ago, so I think it's fine. We might want to do a similar clean up.

I see, in that case I agree it should be fine and we should have a ticket for codebase clean-up as well

bnussman-akamai · 2024-11-22T22:02:13Z

@dwiley-akamai I think this change caused that when I merged in the latest develop. I made a change reverting that change (and had to update a few cypress tests)

dwiley-akamai

Graph boxes don't jump in size once the graph fully loads ✅

One thing I did notice is at the smallest viewport width, upon first loading the page, the placement of the graphs is wonky (in prod, they stack as expected):

Screenshot

dwiley-akamai · 2024-11-22T22:24:23Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx

@@ -40,15 +40,11 @@ import type { Item } from 'src/components/EnhancedSelect/Select';
 setUpCharts();

 interface Props {
-  isBareMetalInstance: boolean;


I see, in that case I agree it should be fine and we should have a ticket for codebase clean-up as well

jaalah-akamai

✅ Responsive Behavior
✅ Works with other charts (Cloud Pulse)
✅ Dark Mode 🔥
👀 Was not noticing what @dwiley-akamai was observing

coliu-akamai

Noticing the same as Dajahi + sometimes the graphs don't adjust to the screen's width when going from smaller to larger widths. I'm on chrome - will try testing on other browsers

linode-graphs.mov

bnussman-akamai · 2024-11-25T19:22:07Z

@coliu-akamai @dwiley-akamai Good catch. I pushed 29c492b to hopefully fix that issue. Let me know if that worked

coliu-akamai

worked for me :thxbanks: 🚀

linode-gh-bot · 2024-11-25T20:16:52Z

Cloud Manager UI test results

🔺 1 failing test on test run #5 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`454 Passing`	`2 Skipped`	`117m 0s`

Details

Failing Tests
	Spec	Test
❌	`backup-linode.spec.ts`	linode backups » can capture a manual snapshot

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/backup-linode.spec.ts"

cypress · 2024-11-26T00:14:15Z

Cloud Manager E2E Run #6881

Run Properties: Failed #6881 • f16fa7ed4b: fix: [M3-8937] - Content shifting on Linode Details summary graphs (#11301)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Failed #6881`
Run duration	`32m 43s`
Commit	`f16fa7ed4b: fix: [M3-8937] - Content shifting on Linode Details summary graphs (#11301)`
Committer	`Banks Nussman`
View all properties for this run ↗︎

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

Tests for review

cypress/e2e/core/linodes/rebuild-linode.spec.ts • 2 failed tests

View Output Video

Test		Artifacts
rebuild linode > rebuilds a linode from Community StackScript		`Screenshots` `Video`
rebuild linode > rebuilds a linode from Account StackScript		`Screenshots` `Video`

linodes/clone-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
clone linode > can clone a Linode from Linode details page		`Screenshots` `Video`

nodebalancers/nodebalancers-create-in-complex-form.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
create NodeBalancer to test the submission of multiple nodes and multiple configs > displays errors during adding new config		`Screenshots` `Video`

bnussman added 3 commits November 21, 2024 09:28

fix styles

7c61310

fix more

a59e5b5

clean up

7cda339

bnussman-akamai added the UX/UI Changes for UI/UX to review label Nov 21, 2024

bnussman-akamai self-assigned this Nov 21, 2024

changeset

fdfb0b8

bnussman-akamai changed the title ~~fix: Improve content shifting on Linode Details summary graphs~~ fix: Content shifting on Linode Details summary graphs Nov 21, 2024

bnussman-akamai changed the title ~~fix: Content shifting on Linode Details summary graphs~~ fix: [M3-8937] - Content shifting on Linode Details summary graphs Nov 21, 2024

bnussman-akamai marked this pull request as ready for review November 21, 2024 18:54

bnussman-akamai requested a review from a team as a code owner November 21, 2024 18:54

bnussman-akamai requested review from dwiley-akamai and coliu-akamai and removed request for a team November 21, 2024 18:54

Merge branch 'develop' into fix/linode-stats-styles

a33caa7

dwiley-akamai reviewed Nov 22, 2024

View reviewed changes

bnussman added 2 commits November 22, 2024 16:56

fix graph component regression

fcf2506

Merge branch 'develop' into fix/linode-stats-styles

15b9329

bnussman-akamai requested a review from a team as a code owner November 22, 2024 22:02

bnussman-akamai requested review from jdamore-linode and removed request for a team November 22, 2024 22:02

dwiley-akamai approved these changes Nov 22, 2024

View reviewed changes

jaalah-akamai approved these changes Nov 25, 2024

View reviewed changes

jaalah-akamai added the Approved Multiple approvals and ready to merge! label Nov 25, 2024

coliu-akamai reviewed Nov 25, 2024

View reviewed changes

bnussman added 2 commits November 25, 2024 14:14

Merge branch 'develop' into fix/linode-stats-styles

374191f

fix breakpoint issues

29c492b

coliu-akamai approved these changes Nov 25, 2024

View reviewed changes

bnussman-akamai merged commit f16fa7e into linode:develop Nov 25, 2024
22 of 23 checks passed

This was referenced Dec 5, 2024

Release v1.133.0 - release → staging #11377

Merged

Release v1.133.0 - staging → master #11378

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: [M3-8937] - Content shifting on Linode Details summary graphs #11301

fix: [M3-8937] - Content shifting on Linode Details summary graphs #11301

bnussman-akamai commented Nov 21, 2024

github-actions bot commented Nov 22, 2024 •

edited

Loading

dwiley-akamai left a comment

dwiley-akamai Nov 22, 2024

bnussman-akamai Nov 22, 2024

dwiley-akamai Nov 22, 2024

bnussman-akamai commented Nov 22, 2024

dwiley-akamai left a comment

dwiley-akamai Nov 22, 2024

jaalah-akamai left a comment

coliu-akamai left a comment

bnussman-akamai commented Nov 25, 2024

coliu-akamai left a comment

linode-gh-bot commented Nov 25, 2024

cypress bot commented Nov 26, 2024

fix: [M3-8937] - Content shifting on Linode Details summary graphs #11301

fix: [M3-8937] - Content shifting on Linode Details summary graphs #11301

Conversation

bnussman-akamai commented Nov 21, 2024

Description 📝

Preview 📷

How to test 🧪

As an Author, I have considered 🤔

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

github-actions bot commented Nov 22, 2024 • edited Loading

dwiley-akamai left a comment

Choose a reason for hiding this comment

dwiley-akamai Nov 22, 2024

Choose a reason for hiding this comment

bnussman-akamai Nov 22, 2024

Choose a reason for hiding this comment

dwiley-akamai Nov 22, 2024

Choose a reason for hiding this comment

bnussman-akamai commented Nov 22, 2024

dwiley-akamai left a comment

Choose a reason for hiding this comment

dwiley-akamai Nov 22, 2024

Choose a reason for hiding this comment

jaalah-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai commented Nov 25, 2024

coliu-akamai left a comment

Choose a reason for hiding this comment

linode-gh-bot commented Nov 25, 2024

Cloud Manager UI test results

🔺 1 failing test on test run #5 ↗︎

Details

Troubleshooting

cypress bot commented Nov 26, 2024

Cloud Manager E2E Run #6881

Tests for review

github-actions bot commented Nov 22, 2024 •

edited

Loading