refactor: [M3-7831] - Use `nodebalancers/types` endpoint for pricing data #10265

mjac0bs · 2024-03-06T22:42:46Z

Description 📝

API is now returning pricing data through the /nodebalancers/types endpoint.

As developers, we want to update our code to rely on prices returned by the API so that we do not need to manually maintain our pricing maps as more DC-specific pricing regions are added.

Changes 🔄

Created the necessary api-v4 endpoint, query, and interface to use the nodebalancer/types endpoint.
Created a new util function, getDCSpecificPriceByType, to use data from the type object instead of from a constant pricing map.
Prices can be dynamically displayed for base region pricing and DC-specific region pricing, using the prices returned in the new endpoint, for this product.
The necessary factories and endpoints exist in the MSW to support a mocked response to the API endpoint
The NODEBALANCER_PRICE in utils/pricing/constants.ts for hardcoded prices is removed.

Preview 📷

The only visual change should be the disabled Create NodeBalancer button if a region is selected and the price is invalid (e.g. undefined).

How to test 🧪

Prerequisites

(How to setup test environment)

Check out this PR and yarn up.
All new types endpoints are all in prod, so use the prod environment.

Verification steps

(How to verify changes)

Go to http://localhost:3000/nodebalancers/create.
Fill out the form.
Verify price calculation is correct by testing different options for the Region: base pricing ($10/month), Jakarta ($12/month), and Sao Paulo ($14/month).
Confirm:
There are no regressions in decimal point value or calculations displayed in the UI.
$0 is a valid region price if returned from the API, the user sees $0 pricing, and a nodebalancer can be created. (Update the mock data to test this.)
A user can still create a NodeBalancer.
If price cannot be calculated (e.g. it is undefined), the Summary displays the unknown price ($--.--) string, the Create button is disabled, and a tooltip displays on hover. (Blocking network requests is one method.)
When a region is not yet selected, the Create button is still enabled. (Pricing can't be calculated yet; we don't know if the price is invalid.)

As an Author I have considered 🤔

Check all that apply

mjac0bs · 2024-03-27T15:39:08Z

packages/manager/src/queries/types.ts

+export const typesQueries = createQueryKeys('types', {
+  nodebalancers: {
+    queryFn: getAllNodeBalancerTypes,
+    queryKey: null,
+  },
+});
+


I started transitioning this file to the query key factory with new types queries to keep the scope small, with the goal of adding additional keys with each /types PR. And I wasn't sure how to transition the linodes specific types query (queryClient ➡️ contextQueries?).

Query key changes don't have to be in this PR, and I could revert the query key factory change for now, to be refactored all at once in its own PR later.

mjac0bs · 2024-03-27T15:43:40Z

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

@@ -15,6 +20,18 @@ export interface DataCenterPricingOptions {
  regionId: Region['id'] | undefined;
 }

+export interface DataCenterPricingByTypeOptions {


Eventually, we'll be able to remove the getDCSpecificPrice function and DataCenterPricingOptions interface and replace them with getDCSpecificPricingByType and DataCenterPricingByTypeOptions. We'll have both until all prices are being calculated using /types data, rather than constants we maintain.

mjac0bs · 2024-03-27T15:46:03Z

packages/api-v4/src/types.ts

@@ -115,3 +117,11 @@ export interface RequestHeaders {
  'User-Agent'?: string;
  'Content-Type'?: RequestContentType;
 }
+
+export interface PriceType {


Placed this new interface in this file because it's not specific to any one product... nodebalancers, volumes, obj, etc. /types endpoints will all use this.

Do you know if those will be consistent with future price types for other entities? Otherwise they may just belong to NodeBalancersPriceTypes in
packages/api-v4/src/nodebalancers/nodebalancers.ts?

They will be consistent.

mjac0bs · 2024-03-27T15:47:34Z

packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx

+          disabled={
+            (showGDPRCheckbox && !hasSignedAgreement) || isRestricted || !price
+          }
          sx={{
            flexShrink: 0,
            mx: matchesSmDown ? theme.spacing(1) : null,
          }}
          buttonType="primary"
          data-qa-deploy-nodebalancer
-          disabled={(showGDPRCheckbox && !hasSignedAgreement) || isRestricted}
          loading={isLoading}
          onClick={onCreate}
+          tooltipText={!price ? PRICE_ERROR_TOOLTIP_TEXT : ''}


The only UI changes in this PR are to disable the Create button with a tooltip for context if, for any reason, the price is not available. (It will display as $--.-- in the summary.)

bnussman-akamai · 2024-03-28T14:05:44Z

packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx

+          disabled={
+            (showGDPRCheckbox && !hasSignedAgreement) ||
+            isRestricted ||
+            isInvalidPrice


I kind of feel like we shouldn't disable the button if price isn't invalid, but because this will be a rare case, I don't think it's a huge deal either way.

feel like we shouldn't disable the button if price isn't invalid

I'm guessing you mean we shouldn't disable the button if the price is invalid, since that's the change here.

Going to add this as a topic at cafe today to get some UX feedback.

Yes, my fault!

packages/manager/src/queries/types.ts

abailly-akamai

Confirmed UI, NB creation and new price types in creation flow ✅
Confirm error handling

Approving pending small code and coverage improvements

packages/api-v4/src/nodebalancers/nodebalancers.ts

packages/api-v4/src/types.ts

abailly-akamai · 2024-03-28T14:55:02Z

packages/api-v4/src/types.ts

@@ -115,3 +117,11 @@ export interface RequestHeaders {
  'User-Agent'?: string;
  'Content-Type'?: RequestContentType;
 }
+
+export interface PriceType {


Do you know if those will be consistent with future price types for other entities? Otherwise they may just belong to NodeBalancersPriceTypes in
packages/api-v4/src/nodebalancers/nodebalancers.ts?

packages/manager/src/queries/types.ts

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

github-actions · 2024-03-28T22:01:30Z

Coverage Report: ✅
Base Coverage: 81.72%
Current Coverage: 81.74%

dwiley-akamai

Tested different options for the Region and observed the correct impacts on pricing -- base pricing ($10/month), Jakarta ($12/month), and Sao Paulo ($14/month) ✅

Observed no regressions in decimal point value or calculations displayed in the UI ✅

NodeBalancer flow functionality ✅

packages/api-v4/src/nodebalancers/nodebalancers.ts

mjac0bs · 2024-04-02T14:53:13Z

Merging this as is. Product is aware of this UX for the disabled create button and didn't request any changes to the behavior.

…data (linode#10265) * Replace nodebalancer constant pricing with /types endpoint pricing * Add factory and MSW endpoint * Remove price constant * Clean up * Disable Create button if pricing is unavailable * Use query key factory for new types query * Only disable Create button if region is valid but price is not * Add changesets * Fix typo * Address feedback: types, unit test, move query * Update the import statements I missed * Gotta catch 'em all

mjac0bs added Work in Progress DC-Specific Pricing labels Mar 6, 2024

mjac0bs self-assigned this Mar 6, 2024

mjac0bs added 6 commits March 26, 2024 21:24

Replace nodebalancer constant pricing with /types endpoint pricing

e8af48c

Add factory and MSW endpoint

516d3ec

Remove price constant

cbeb964

Clean up

2d1e468

Disable Create button if pricing is unavailable

8f58edf

Use query key factory for new types query

18393a4

mjac0bs force-pushed the M3-7831-use-nodebalancer-types-endpoint branch from 8eee1fa to 18393a4 Compare March 27, 2024 15:28

mjac0bs added 3 commits March 27, 2024 08:52

Only disable Create button if region is valid but price is not

60bce2c

Add changesets

c694af9

Fix typo

5ff9b7f

mjac0bs added Ready for Review and removed Work in Progress labels Mar 27, 2024

mjac0bs commented Mar 27, 2024

View reviewed changes

mjac0bs marked this pull request as ready for review March 27, 2024 16:13

mjac0bs requested a review from a team as a code owner March 27, 2024 16:13

mjac0bs requested review from dwiley-akamai, abailly-akamai and bnussman-akamai and removed request for a team March 27, 2024 16:13

mjac0bs added the @linode/api-v4 Changes are made to the @linode/api-v4 package label Mar 27, 2024

bnussman-akamai reviewed Mar 28, 2024

View reviewed changes

abailly-akamai approved these changes Mar 28, 2024

View reviewed changes

mjac0bs added 2 commits March 28, 2024 14:37

Address feedback: types, unit test, move query

3cd59f6

Merge branch 'develop' into M3-7831-use-nodebalancer-types-endpoint

8deda55

bnussman-akamai approved these changes Mar 28, 2024

View reviewed changes

mjac0bs added UX/UI Changes for UI/UX to review and removed Ready for Review labels Mar 28, 2024

mjac0bs added the Approved Multiple approvals and ready to merge! label Mar 28, 2024

dwiley-akamai approved these changes Mar 29, 2024

View reviewed changes

packages/api-v4/src/nodebalancers/nodebalancers.ts Outdated Show resolved Hide resolved

mjac0bs added 2 commits March 29, 2024 11:25

Update the import statements I missed

5cdea47

Gotta catch 'em all

4d7f0ab

mjac0bs merged commit 2a74280 into linode:develop Apr 2, 2024
18 checks passed

mjac0bs removed the UX/UI Changes for UI/UX to review label Apr 2, 2024

This was referenced Apr 11, 2024

Release v1.117.0 - release → staging #10368

Merged

Release v1.117.0 - staging → master #10377

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-7831] - Use `nodebalancers/types` endpoint for pricing data #10265

refactor: [M3-7831] - Use `nodebalancers/types` endpoint for pricing data #10265

mjac0bs commented Mar 6, 2024 •

edited

mjac0bs Mar 27, 2024

mjac0bs Mar 27, 2024

mjac0bs Mar 27, 2024

abailly-akamai Mar 28, 2024

mjac0bs Mar 28, 2024

mjac0bs Mar 27, 2024

bnussman-akamai Mar 28, 2024

mjac0bs Mar 28, 2024

bnussman-akamai Mar 28, 2024

abailly-akamai left a comment

abailly-akamai Mar 28, 2024

github-actions bot commented Mar 28, 2024 •

edited

dwiley-akamai left a comment

mjac0bs commented Apr 2, 2024

refactor: [M3-7831] - Use nodebalancers/types endpoint for pricing data #10265

refactor: [M3-7831] - Use nodebalancers/types endpoint for pricing data #10265

Conversation

mjac0bs commented Mar 6, 2024 • edited

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Mar 28, 2024 • edited

dwiley-akamai left a comment

Choose a reason for hiding this comment

mjac0bs commented Apr 2, 2024

refactor: [M3-7831] - Use `nodebalancers/types` endpoint for pricing data #10265

refactor: [M3-7831] - Use `nodebalancers/types` endpoint for pricing data #10265

mjac0bs commented Mar 6, 2024 •

edited

github-actions bot commented Mar 28, 2024 •

edited