feat: [M3-7036] DC specific transfer pool displays #9620

abailly-akamai · 2023-09-01T13:00:46Z

Description 📝

This PR adds DC specific transfer pool information for Global and per Linode usage.

It conditionally renders information based on the dcSpecificPricing and the presence of region_transfers data in both the linodeTransfer and accountTransfer API responses.

Preview 📷

Before	After

How to test 🧪

The three areas for testing are shown in the screenshots above

The Linodes list footer
The Monthly Network Transfer dialog
The Linode detail Monthly Network Transfer

For those three areas, the reviewer should:

Confirm the exact same experience as production when the dcSpecificPricing is off
The proper rendering of Network Transfer Global Pools and Usage Pools information based on the mock data

abailly-akamai · 2023-09-11T17:59:35Z

packages/manager/src/components/BarPercent/BarPercent.tsx

@@ -77,7 +77,8 @@ const StyledLinearProgress = styled(LinearProgress, {
    backgroundColor: '#99ec79',
  },
  '& .MuiLinearProgress-barColorPrimary': {
-    backgroundColor: '#5ad865',
+    // Increase contrast if we have a buffer bar
+    backgroundColor: props.valueBuffer ? '#1CB35C' : '#5ad865',


For this case (confirmed with UX)

TransferContent is the only component that use valueBuffer as a secondary color so maybe this will have to be adjusted later if other components use it. All in all, valueBuffer shouldn't really be used for this case, it's more of a "secondary progress" to be shown alongside the main entity progress, so it we refactor we should modify this component.

Also, a gradient color (green to orange/red when getting to a threshold) was not really doable using this progress bar for a variety of reasons. This is really a progress meant to be a progress bar, not showing static data.

abailly-akamai · 2023-09-11T18:01:36Z

packages/manager/src/components/TransferDisplay/TransferDisplay.tsx

-    used < quota ? (used / quota) * 100 : used === 0 ? 0 : 100;
+  if (!dcSpecificPricing) {
+    return <LegacyTransferDisplay spacingTop={spacingTop} />;
+  }


See previous comment about cleaning things up when we get rid of the flag

abailly-akamai · 2023-09-11T18:02:04Z

packages/manager/src/components/TransferDisplay/LegacyTransferDisplay.tsx

+// This is a copy of the original TransferDisplay component, which is getting deprecated.
+// It can be safely deleted once the new TransferDisplay component
+// is fully rolled out and the dcSpecificPricing flag is cleaned up.
+// ======================================================================================


This file is untouched - this will be far easier to cleanup once we get rid of the flag, see https://github.com/linode/manager/pull/9620/files#diff-7f49ccfd7b579b9abee32cb02d4aee03eee285169a2d85a40b0d6f59e0035d44R33

abailly-akamai · 2023-09-11T18:06:49Z

packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx

You may notice the lack of dcSpecificPricing flag usage here. It is because this component is the new version of the component left in LegacyTransferDisplay

abailly-akamai · 2023-09-11T18:08:33Z

packages/manager/src/components/TransferDisplay/TransferDisplayUsage.tsx

You may also notice the lack of dcSpecificPricing flag usage here. It is because this component is the new version of the component left in LegacyTransferDisplay

matthewbartholomew · 2023-09-11T20:58:11Z

My bad @abailly-akamai, I gave you the wrong color spec for the light green on the Linode detail page. It should be #5BD865. That will match the green on the MNTP modal from the Linodes landing page

mjac0bs

This is overall looking good. I played around with different mock values and found one issue with conditional checks.

In addition to the feedback that I left in-line, I'm wondering it would be best to not list the regional pools where there is no quota. Just thinking about how this list could grow in the future...

At the same time, it seems useful to show a regional transfer pool without any usage in the dialog view, especially while DC-specific pools are new.

This is likely an issue for posterity/our future selves once there are more DC-specific pools to worry about.

packages/manager/src/utilities/pricing/linodes.test.tsx

...res/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx

...c/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx

packages/manager/src/components/TransferDisplay/TransferDisplayUsage.tsx

packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx

packages/manager/src/components/TransferDisplay/TransferDisplay.tsx

...res/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx

...c/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx

packages/manager/src/utilities/pricing/constants.ts

abailly-akamai · 2023-09-12T15:21:04Z

@mjac0bs thanks for the review - all addressed and ready for another pass when you get a chance

In addition to the feedback that I left in-line, I'm wondering it would be best to not list the regional pools where there is no quota. Just thinking about how this list could grow in the future...

I am in favor of listing all for now (we have very few) as it will make it clear to the user they have one or more pools available

When the list grows we'll probably have more UI pieces to revisit all together

mjac0bs

Thank you for all the work on this and its various details! Aside from a couple very minor things I found on second pass, this is looking good to me. 🚀

If you get another approval today and want to merge right after that, I'd just appreciate a heads up so I can merge develop into my open OBJ PR and that can be used for DC-specific pricing UX testing.

Edit: Also, I'm going to restart the unit tests, but the failure was unrelated (databases) and passed locally.

...c/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx

packages/manager/src/utilities/pricing/linodes.test.tsx

packages/manager/src/factories/account.ts

abailly-akamai force-pushed the feat-M3-7036 branch 3 times, most recently from 352d7fc to dd698df Compare September 5, 2023 21:15

mjac0bs assigned abailly-akamai Sep 6, 2023

mjac0bs added the DC-Specific Pricing label Sep 6, 2023

abailly-akamai force-pushed the feat-M3-7036 branch from ef5e999 to fd05029 Compare September 11, 2023 12:46

abailly-akamai commented Sep 11, 2023

View reviewed changes

abailly-akamai changed the title ~~feat: [M3-7036]~~ feat: [M3-7036] DC specific transfer pool displays Sep 11, 2023

abailly-akamai marked this pull request as ready for review September 11, 2023 18:36

abailly-akamai requested review from bnussman-akamai and mjac0bs September 11, 2023 18:41

mjac0bs reviewed Sep 11, 2023

View reviewed changes

abailly-akamai added 17 commits September 12, 2023 10:17

feat: [M3-6957] save work

0eea111

feat: [M3-7036] component cleanup

c5160dc

feat: [M3-7036] save workk

f259fb4

feat: [M3-7036] add region transfer pools PCT

d0ca3c5

feat: [M3-7036] cleanup

a8668fd

feat: [M3-7036] add usage to modal

4855993

feat: [M3-7036] formatting

b083339

feat: [M3-7036] flag splitting

3cf502c

feat: [M3-7036] linear progress styling

da6112c

feat: [M3-7036] util test

99a4778

feat: [M3-7036] component tests

7ce180d

feat: [M3-7036] cleanup

7988f8b

feat: [M3-7036] better coverage

a9e893a

feat: [M3-7036] test refactor

a091cc8

feat: [M3-7036] test refactor 2

c5957bb

feat: [M3-7036] NetworkTRansfer panel

06c3492

feat: [M3-7036] Naming conventions, component splitting and BarPercent

d840b7e

abailly-akamai added 5 commits September 12, 2023 10:17

feat: [M3-7036] Wrap up linode netowrk display transfer

b226050

feat: [M3-7036] Test wrap up

d3989bc

feat: [M3-7036] cleanup

ab2afb5

feat: [M3-7036] cleanup 2

a8aa256

Added changeset: DC specific transfer pools and linode usage displays

e72e63d

abailly-akamai force-pushed the feat-M3-7036 branch from 421fe31 to e72e63d Compare September 12, 2023 14:18

abailly-akamai added 2 commits September 12, 2023 11:09

feat: [M3-7036] feedback 1

958b75b

feat: [M3-7036] feedback 2

54b508c

abailly-akamai requested a review from mjac0bs September 12, 2023 15:21

abailly-akamai added 3 commits September 12, 2023 11:33

feat: [M3-7036] refactor doc links

50af5e9

feat: [M3-7036] fix test

33e3569

feat: [M3-7036] fix Network Transfer History graph color

b7f6451

mjac0bs approved these changes Sep 12, 2023

View reviewed changes

feat: [M3-7036] small feedback 3

73a6908

bnussman-akamai approved these changes Sep 12, 2023

View reviewed changes

abailly-akamai merged commit 304ba45 into linode:develop Sep 13, 2023
11 checks passed

This was referenced Sep 15, 2023

Release v1.102.0 - release → staging #9686

Merged

Release v1.102.0 - staging → master #9695

Merged

mjac0bs mentioned this pull request Oct 12, 2023

feat: [M3-7063] - Provide dynamic price error handling for DC-specific pricing #9660

Merged

20 tasks

mjac0bs mentioned this pull request Nov 9, 2023

change, test: [M3-7073, M3-7176] - Remove dcSpecificPricing and objDcSpecificPricing feature flags #9881

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-7036] DC specific transfer pool displays #9620

feat: [M3-7036] DC specific transfer pool displays #9620

abailly-akamai commented Sep 1, 2023 •

edited

Loading

abailly-akamai Sep 11, 2023

abailly-akamai Sep 11, 2023

abailly-akamai Sep 11, 2023

abailly-akamai Sep 11, 2023

abailly-akamai Sep 11, 2023

matthewbartholomew commented Sep 11, 2023

mjac0bs left a comment

abailly-akamai commented Sep 12, 2023

mjac0bs left a comment •

edited

Loading

feat: [M3-7036] DC specific transfer pool displays #9620

feat: [M3-7036] DC specific transfer pool displays #9620

Conversation

abailly-akamai commented Sep 1, 2023 • edited Loading

Description 📝

Preview 📷

How to test 🧪

abailly-akamai Sep 11, 2023

Choose a reason for hiding this comment

abailly-akamai Sep 11, 2023

Choose a reason for hiding this comment

abailly-akamai Sep 11, 2023

Choose a reason for hiding this comment

abailly-akamai Sep 11, 2023

Choose a reason for hiding this comment

abailly-akamai Sep 11, 2023

Choose a reason for hiding this comment

matthewbartholomew commented Sep 11, 2023

mjac0bs left a comment

Choose a reason for hiding this comment

abailly-akamai commented Sep 12, 2023

mjac0bs left a comment • edited Loading

Choose a reason for hiding this comment

abailly-akamai commented Sep 1, 2023 •

edited

Loading

mjac0bs left a comment •

edited

Loading